/* ===================== 语音通话弹窗 ===================== */
.vc-overlay {
	position: fixed; inset: 0;
	background: rgba(15, 18, 32, 0.55);
	display: flex; align-items: center; justify-content: center;
	z-index: 1080;
	backdrop-filter: blur(2px);
}
.vc-card {
	width: 320px; max-width: 92vw;
	background: #fff; border-radius: 18px;
	box-shadow: 0 20px 60px rgba(20, 30, 70, 0.35);
	padding: 26px 24px 22px; text-align: center; color: #1f2333;
	animation: vc-pop .2s ease;
}
@keyframes vc-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vc-avatar {
	width: 76px; height: 76px; border-radius: 50%;
	margin: 4px auto 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 34px; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, #4a6cf7, #7048e8);
}
.vc-avatar.ringing { animation: vc-ring 1.1s ease-in-out infinite; }
@keyframes vc-ring {
	0%, 100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, .5); }
	50% { box-shadow: 0 0 0 14px rgba(74, 108, 247, 0); }
}
.vc-name { font-size: 17px; font-weight: 700; margin: 0; }
.vc-status { font-size: 13px; color: #8a90a2; margin: 6px 0 18px; min-height: 18px; }
.vc-status.live { color: #2f9e44; }
.vc-status.err { color: #fa5252; }
.vc-actions { display: flex; gap: 14px; justify-content: center; }
.vc-btn {
	width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
	transition: transform .12s, opacity .12s;
}
.vc-btn:active { transform: scale(.93); }
.vc-btn:disabled { opacity: .45; cursor: default; }
.vc-btn-accept { background: #2f9e44; }
.vc-btn-reject, .vc-btn-hangup { background: #fa5252; }
.vc-btn-cancel { background: #adb5bd; }
/* 计费确认弹窗：「确认发起」4 字在 56px 圆形里被强制竖排。覆写为胶囊按钮（仅作用于计费弹窗，不影响通话中的圆形接听/挂断按钮） */
.vc-actions-fee .vc-btn {
  width: auto;
  min-width: 110px;
  height: auto;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
}
.vc-timer { font-variant-numeric: tabular-nums; font-size: 13px; color: #8a90a2; margin-top: 10px; }
/* 深色主题适配 */
[data-bs-theme="dark"] .vc-card { background: #232838; color: #e9ecf5; }
[data-bs-theme="dark"] .vc-status { color: #9aa0b8; }
[data-bs-theme="dark"] .vc-status.live { color: #51cf66; }
[data-bs-theme="dark"] .vc-status.err { color: #ff8787; }