/* 会話の舞台。球、状態、開始ボタン、字幕。開発者ポータルの会話テストと
 * 紹介ページの体験通話が同じ見え方を共有する。色は各ページの変数を使い、
 * 変数の無いページでは既定色に落ちる。 */
.voice-orb-wrap { display: grid; min-height: 190px; place-items: center; }
.voice-orb {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff 5%, var(--brand-soft, #eaf1ff) 50%, #c9c2ff 100%);
  box-shadow: 0 18px 46px rgba(92, 79, 209, .2), inset 0 1px 1px rgba(255, 255, 255, .85);
  transform: translateZ(0);
}
.voice-orb[data-phase="connecting"], .voice-orb[data-phase="warming"] {
  animation: voice-orb-breathe 1.45s ease-in-out infinite;
}
.voice-orb[data-phase="listening"] {
  animation: voice-orb-listen 1.8s ease-in-out infinite;
}
.voice-orb[data-phase="thinking"] {
  animation: voice-orb-think .9s ease-in-out infinite;
}
.voice-orb[data-phase="speaking"] {
  animation: voice-orb-speak .34s ease-in-out infinite alternate;
}
@keyframes voice-orb-breathe { 50% { transform: scale(1.055); opacity: .86; } }
@keyframes voice-orb-listen { 50% { transform: scale(1.035); box-shadow: 0 18px 54px rgba(92, 79, 209, .3); } }
@keyframes voice-orb-think { 50% { transform: scale(.96) rotate(2deg); } }
@keyframes voice-orb-speak {
  0% { transform: scale(.98) translate(-1px, 1px); }
  100% { transform: scale(1.07) translate(1px, -1px); }
}
.voice-conversation-status { text-align: center; font-size: 15px; font-weight: 700; }
.voice-conversation-error { min-height: 1.5em; margin-top: 5px; color: var(--danger, #c1372b); text-align: center; font-size: 13px; }
.voice-conversation-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 13px; }
.voice-conversation-actions span { min-width: 42px; color: var(--soft, #5d6a7e); font-variant-numeric: tabular-nums; }
.voice-conversation-messages {
  display: grid;
  gap: 8px;
  min-height: 150px;
  max-height: 300px;
  margin-top: 22px;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--line, #dce4f0);
  border-radius: 12px;
  background: var(--surface-soft, #f8faff);
}
.voice-conversation-messages .message { width: fit-content; max-width: 88%; padding: 8px 11px; border-radius: 11px; background: var(--surface, #ffffff); }
.voice-conversation-messages .message.user { justify-self: end; background: var(--brand-soft, #eaf1ff); }
.voice-conversation-messages .message.agent { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .voice-orb { animation-duration: 2.5s !important; }
}
.voice-conversation-messages .empty { margin: 18px 0 2px; color: var(--soft, #5d6a7e); text-align: center; }
@media (max-width: 560px) {
  .voice-orb-wrap { min-height: 160px; }
  .voice-orb { width: 96px; height: 96px; }
}