/* ============================================================
   Call 純語音頁（voice.html）— 情緒光球 + 粒子
   ============================================================ */

.voice-shell {
  align-items: center; justify-content: space-between;
  padding: 0 32px;
  padding-top: calc(56px + env(safe-area-inset-top));
  padding-bottom: calc(40px + var(--tabbar-h) + env(safe-area-inset-bottom));
  overflow: hidden;
}

.voice-head { text-align: center; z-index: 2; }
.voice-head__model {
  font-family: var(--font-serif);
  font-size: var(--fs-headline-m); font-weight: 400;
  color: var(--on-surface); opacity: 0.75; margin: 0;
}
.voice-head__state {
  font-size: 10px; letter-spacing: 0.4em; font-weight: 600;
  color: var(--on-surface-variant); opacity: 0.55; margin: 6px 0 0;
}

/* ---- 無邊界雲態光暈容器 ---- */
.orb-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}

.orb {
  position: relative;
  width: min(74vw, 340px);
  height: min(58vw, 270px);
  border-radius: 46% 54% 51% 49% / 43% 50% 50% 57%;
  opacity: 0.74;
  filter: blur(34px) saturate(0.92);
  background:
    radial-gradient(ellipse at 48% 48%, rgba(255, 246, 230, 0.58) 0%, rgba(255, 246, 230, 0.22) 18%, transparent 43%),
    radial-gradient(ellipse at 36% 40%, rgba(230, 145, 111, 0.58) 0%, rgba(230, 145, 111, 0.2) 30%, transparent 58%),
    radial-gradient(ellipse at 64% 58%, rgba(174, 128, 151, 0.48) 0%, rgba(174, 128, 151, 0.16) 32%, transparent 62%),
    radial-gradient(ellipse at 56% 33%, rgba(219, 181, 146, 0.5) 0%, rgba(219, 181, 146, 0.16) 26%, transparent 55%),
    radial-gradient(ellipse at 42% 64%, rgba(143, 156, 177, 0.26) 0%, rgba(143, 156, 177, 0.08) 34%, transparent 64%);
  background-size: 130% 125%, 150% 135%, 145% 140%, 155% 145%, 160% 150%;
  background-position: 50% 50%, 34% 42%, 66% 58%, 54% 30%, 42% 68%;
  mix-blend-mode: soft-light;
  animation:
    cloud-breathe var(--breath-duration, 9s) ease-in-out infinite,
    cloud-color-drift 30s ease-in-out infinite;
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  inset: -24%;
  border-radius: 54% 46% 47% 53% / 50% 45% 55% 50%;
  pointer-events: none;
}

.orb::before {
  filter: blur(34px);
  opacity: 0.54;
  background:
    radial-gradient(ellipse at 46% 50%, rgba(255, 225, 190, 0.38) 0%, rgba(255, 225, 190, 0.15) 28%, transparent 56%),
    radial-gradient(ellipse at 59% 44%, rgba(214, 155, 168, 0.34) 0%, rgba(214, 155, 168, 0.11) 34%, transparent 62%),
    radial-gradient(ellipse at 41% 57%, rgba(248, 238, 222, 0.24) 0%, transparent 48%);
  animation: cloud-inner-flow 16s ease-in-out infinite alternate;
}

.orb::after {
  inset: -34%;
  filter: blur(52px);
  opacity: 0.34;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(226, 164, 123, 0.32) 0%, rgba(226, 164, 123, 0.1) 34%, transparent 66%),
    radial-gradient(ellipse at 60% 60%, rgba(128, 137, 159, 0.18) 0%, transparent 60%);
  animation: cloud-outer-drift 21s ease-in-out infinite alternate;
}

@keyframes cloud-breathe {
  0%, 100% {
    transform: translate3d(-1px, 2px, 0) scale(0.96, 0.94) rotate(-1.5deg);
    opacity: 0.56;
  }
  42% {
    transform: translate3d(2px, -2px, 0) scale(1.08, 1.03) rotate(1deg);
    opacity: 0.82;
  }
  68% {
    transform: translate3d(0, 1px, 0) scale(1.02, 1.07) rotate(-0.4deg);
    opacity: 0.74;
  }
}

@keyframes cloud-color-drift {
  0%, 100% {
    background-position: 50% 50%, 34% 42%, 66% 58%, 54% 30%, 42% 68%;
    filter: blur(34px) saturate(0.9) hue-rotate(0deg);
  }
  28% {
    background-position: 52% 48%, 40% 37%, 61% 61%, 58% 34%, 45% 64%;
    filter: blur(36px) saturate(0.96) hue-rotate(-7deg);
  }
  58% {
    background-position: 48% 53%, 31% 46%, 69% 52%, 51% 28%, 39% 72%;
    filter: blur(33px) saturate(0.88) hue-rotate(9deg);
  }
  82% {
    background-position: 51% 49%, 37% 39%, 63% 60%, 56% 32%, 44% 66%;
    filter: blur(35px) saturate(0.94) hue-rotate(4deg);
  }
}

@keyframes cloud-inner-flow {
  0%   { transform: translate3d(-8px, 4px, 0) scale(0.96, 1.02) rotate(-4deg); opacity: 0.42; }
  45%  { transform: translate3d(8px, -7px, 0) scale(1.06, 0.98) rotate(3deg);  opacity: 0.62; }
  100% { transform: translate3d(-2px, 6px, 0) scale(1, 1.06) rotate(1deg);    opacity: 0.48; }
}

@keyframes cloud-outer-drift {
  0%   { transform: translate3d(10px, -4px, 0) scale(1.02, 0.96) rotate(2deg);  opacity: 0.28; }
  100% { transform: translate3d(-9px, 7px, 0) scale(0.98, 1.08) rotate(-3deg); opacity: 0.4; }
}

/* 第二層光暈 — 暖霧散射 */
.orb-glow {
  position: absolute;
  width: min(92vw, 460px);
  height: min(72vw, 360px);
  border-radius: 52% 48% 55% 45% / 44% 58% 42% 56%;
  filter: blur(72px) saturate(0.82);
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 45% 49%, rgba(226, 151, 105, 0.42) 0%, rgba(226, 151, 105, 0.13) 36%, transparent 70%),
    radial-gradient(ellipse at 62% 54%, rgba(182, 132, 151, 0.28) 0%, rgba(182, 132, 151, 0.08) 40%, transparent 72%),
    radial-gradient(ellipse at 53% 38%, rgba(246, 237, 220, 0.22) 0%, transparent 58%);
  animation: glow-pulse 12s ease-in-out infinite, glow-temperature 34s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { transform: translate3d(3px, 4px, 0) scale(0.96, 0.94) rotate(1deg); opacity: 0.2; }
  48%      { transform: translate3d(-3px, -4px, 0) scale(1.1, 1.04) rotate(-1deg); opacity: 0.42; }
}

@keyframes glow-temperature {
  0%, 100% { filter: blur(72px) saturate(0.82) hue-rotate(0deg); }
  35%      { filter: blur(76px) saturate(0.9) hue-rotate(-8deg); }
  70%      { filter: blur(70px) saturate(0.78) hue-rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb::before,
  .orb::after,
  .orb-glow {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* ---- 粒子系統停用：主視覺需保持雲霧陪伴感，不出現亮粉粒子 ---- */
.particles {
  position: absolute;
  width: 500px; height: 500px;
  pointer-events: none;
  display: none;
}

.particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary-container);
  opacity: 0;
  animation: particle-float var(--dur-p, 6s) var(--delay-p, 0s) ease-in-out infinite;
}
.particle:nth-child(odd) {
  width: 8px; height: 4px;
  border-radius: 40%;
  transform: rotate(var(--rot-p, 30deg));
}

@keyframes particle-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15%  { opacity: 0.6; }
  50%  { opacity: 0.4; transform: translate(var(--dx, 40px), var(--dy, -60px)) scale(1); }
  85%  { opacity: 0.15; }
  100% { opacity: 0; transform: translate(var(--dx2, 80px), var(--dy2, -120px)) scale(0.3); }
}

/* 狀態變化 */
.orb[data-orb-state="listening"] { --breath-duration: 5.6s; opacity: 0.78; }
.orb[data-orb-state="thinking"]  { --breath-duration: 4.8s; }
.orb[data-orb-state="speaking"]  { --breath-duration: 3.8s; opacity: 0.86; }
.orb[data-orb-state="error"]     {
  background:
    radial-gradient(ellipse at 46% 48%, rgba(180, 73, 67, 0.42) 0%, rgba(180, 73, 67, 0.14) 34%, transparent 66%),
    radial-gradient(ellipse at 58% 55%, rgba(218, 148, 120, 0.28) 0%, transparent 60%);
}
.orb[data-orb-state="offline"]   { animation: none; opacity: 0.2; }
.orb[data-orb-state="offline"]::before,
.orb[data-orb-state="offline"]::after { animation: none; opacity: 0.12; }

/* 字幕 */
.voice-caption { z-index: 2; text-align: center; max-width: 340px; min-height: 60px; }
.voice-caption__text {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-body-lg); line-height: 1.7;
  color: var(--on-surface); opacity: 0.9;
}

.voice-unlock { z-index: 2; }

/* ---- 控制列：錄音 / 麥克風 / 儲存 ---- */
.voice-controls {
  z-index: 2; width: 100%; max-width: 360px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
}

.voice-ctrl-btn {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--on-surface-variant);
  backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.voice-ctrl-btn:active { transform: scale(0.9); }
.voice-ctrl-btn--active {
  background: color-mix(in srgb, var(--danger) 15%, var(--surface));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.mic-btn {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
  touch-action: manipulation;
}
.mic-btn:active { transform: scale(0.92); background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.mic-btn--listening {
  background: color-mix(in srgb, var(--primary) 25%, var(--surface));
  animation: mic-pulse 1.5s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 30%, transparent); }
  50%      { box-shadow: 0 0 0 14px color-mix(in srgb, var(--primary) 0%, transparent); }
}

/* 錄音控制小列 */
.rec-controls {
  z-index: 2; display: flex; align-items: center; gap: 16px;
  padding: 8px 0;
  min-height: 44px;
}
.rec-controls.hidden { display: none; }

.rec-timer {
  font-size: var(--fs-label); font-weight: 600;
  color: var(--danger); letter-spacing: 0.05em;
  min-width: 50px; text-align: center;
}
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  animation: rec-blink 1s step-end infinite;
}
@keyframes rec-blink {
  50% { opacity: 0; }
}

/* 權限提示 — 可點擊 */
.perm-hint {
  z-index: 2; text-align: center; cursor: pointer;
  padding: 12px 20px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary-container) 50%, transparent);
  color: var(--on-primary-container);
  font-size: var(--fs-body); line-height: 1.5;
  transition: transform var(--dur) var(--ease);
}
.perm-hint:active { transform: scale(0.97); }
.perm-hint.hidden { display: none; }