/* ========================================= */
/* 文件：voice-call.css                       */
/* 功能：语音通话界面的全部样式 —— 三层声波纹   */
/*       起伏动画、通话中呼吸光效、              */
/*       静音和挂断按钮的布局                   */
/* ========================================= */

/* 贯穿全屏的背景起伏声波纹（方案C结构 + 全屏拉伸 + 原地心跳） */
.fullscreen-wave {
  position: fixed; top: calc(50% - 55px); left: 0; width: 100vw; height: 100px;
  transform: translateY(-50%); z-index: 1;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
  /* 主波：中等振幅，拉伸铺满，不循环不断层 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q125 22,250 50 T500 50 T750 50 T1000 50' fill='none' stroke='%23e8a87c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
}
.fullscreen-wave::before,
.fullscreen-wave::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-size: 100% 100%; background-repeat: no-repeat;
  opacity: 0; transition: opacity 0.5s ease;
}
/* 远波：大振幅，方案C第二层 */
.fullscreen-wave::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q125 10,250 50 T500 50 T750 50 T1000 50' fill='none' stroke='%23e8a87c' stroke-width='1'/%3E%3C/svg%3E");
}
/* 近波：小振幅，方案C第三层 */
.fullscreen-wave::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q125 36,250 50 T500 50 T750 50 T1000 50' fill='none' stroke='%23e8a87c' stroke-width='0.8'/%3E%3C/svg%3E");
}
.fullscreen-wave.show {
  opacity: 0.7;
  animation: pulse-main 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(232, 168, 124, 0.35));
}
.fullscreen-wave.show::before { opacity: 0.4;  animation: pulse-before 2.6s ease-in-out infinite alternate; }
.fullscreen-wave.show::after  { opacity: 0.22; animation: pulse-after  3.2s ease-in-out infinite alternate; }
@keyframes pulse-main   { 0% { transform: translateY(-50%) scaleY(0.7); } 100% { transform: translateY(-50%) scaleY(1.3); } }
/* top: calc(50% - 40px) 对齐 .home-core margin-bottom: 80px 的偏移 */
@keyframes pulse-before { 0% { transform: scaleY(1.4); } 100% { transform: scaleY(0.6); } }
@keyframes pulse-after  { 0% { transform: scaleY(0.5); } 100% { transform: scaleY(1.5); } }

/* ============ 底部控制台 & 通话按钮 ============ */

/* 底部控制台：一左一右，中间留白 */
.voice-controls-bar {
  position: fixed; bottom: max(40px, env(safe-area-inset-bottom));
  left: 0; width: 100%; padding: 0 45px; box-sizing: border-box;
  display: flex; justify-content: space-between; align-items: flex-end;
  opacity: 0; pointer-events: none; transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 200;
}
.voice-controls-bar.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* 控制按钮统一风格 */
.control-btn {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; cursor: pointer; backdrop-filter: blur(10px);
  transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.mute-btn { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.hangup-btn { background: rgba(255, 71, 87, 0.2); border: 1px solid rgba(255, 71, 87, 0.5); color: #ff4757; font-weight: bold; }

/* 中间字幕留白区 */
.subtitle-space { flex: 1; height: 60px; margin: 0 20px; }

/* 头像圆圈层级 + 连线态脉冲 */
.breathing-circle { position: relative; z-index: 10; }
.breathing-circle.calling-wave {
  border-color: rgba(255, 179, 122, 0.8);
  animation: audio-wave 2s infinite alternate ease-in-out;
}
@keyframes audio-wave {
  0% { box-shadow: 0 0 15px rgba(255, 179, 122, 0.4); transform: scale(1); }
  100% { box-shadow: 0 0 45px rgba(255, 179, 122, 0.9); transform: scale(1.08); }
}