/* VchatVoice · 语音录制面板 + 气泡波形播放器（对标 TG） */

/* ===== 按住录音浮条（对标 TG：按住说话）===== */
.vv-hold {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.vv-hold__box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 92%;
  padding: 10px 16px;
  border-radius: 22px;
  background: rgba(20, 28, 38, 0.94);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.vv-hold__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4d4f;
  flex-shrink: 0;
  animation: vv-hold-blink 1s steps(2, start) infinite;
}
@keyframes vv-hold-blink {
  50% { opacity: 0.2; }
}
.vv-hold__time {
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}
.vv-hold__wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}
.vv-hold__bar {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: #4aa6ff;
  transition: height 0.06s linear;
}
.vv-hold__hint {
  opacity: 0.8;
  white-space: nowrap;
}
.vv-hold.is-cancel .vv-hold__box {
  background: rgba(120, 24, 28, 0.96);
}
.vv-hold.is-cancel .vv-hold__bar {
  background: #ff8a8a;
}

/* ===== 录制面板 ===== */
.vv-rec-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-end;
}
.vv-rec {
  width: 100%;
  background: #17212b;
  color: #f5f7fa;
  border-radius: 14px 14px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.vv-rec__live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.vv-rec__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d4f;
  animation: vv-blink 1s steps(2, start) infinite;
}
@keyframes vv-blink { 50% { opacity: 0.2; } }
.vv-rec__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 48px;
  margin-bottom: 14px;
}
.vv-rec__bar {
  width: 3px;
  border-radius: 2px;
  background: #5eb5f7;
  transition: height 0.08s linear;
}
.vv-rec__btns {
  display: flex;
  gap: 12px;
}
.vv-rec__cancel,
.vv-rec__send {
  flex: 1 1 0;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 15px;
  cursor: pointer;
}
.vv-rec__cancel { background: rgba(255, 255, 255, 0.12); color: #f5f7fa; }
.vv-rec__send { background: #3390ec; color: #fff; }
.vv-rec__send:disabled { opacity: 0.5; cursor: default; }
.vv-rec__hint {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* ===== 气泡内波形播放器 ===== */
.vv-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  max-width: 220px;
}
.vv-player__btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #3390ec;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vv-player__wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  overflow: hidden;
}
.vv-player__bar {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 4px;
  border-radius: 2px;
  background: rgba(120, 144, 168, 0.55);
}
.vv-player__bar.is-played { background: #3390ec; }
.vv-player__time {
  flex: 0 0 auto;
  font-size: 12px;
  color: inherit;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* 自己发出的气泡内：播放器按钮在彩色气泡上时保持可见 */
.imfc-msg--mine .vv-player__bar,
.im-group-chat__row--mine .vv-player__bar { background: rgba(255, 255, 255, 0.5); }
.imfc-msg--mine .vv-player__bar.is-played,
.im-group-chat__row--mine .vv-player__bar.is-played { background: #fff; }
.imfc-msg--mine .vv-player__btn,
.im-group-chat__row--mine .vv-player__btn { background: #fff; color: #3390ec; }