/* دکمه دستیار صوتی: طراحی شیشه‌ای (Glassmorphism) به سبک iOS با نور آبی نئونی.
   نکته: این استایل عیناً توی voice-widget.js هم (به‌صورت inline) تزریق می‌شه تا افزونه‌های
   "حذف CSS استفاده‌نشده" این فایل رو حذف نکنن. اگه این‌جا چیزی عوض کردید، اونجا هم عوض کنید. */

.vsa-mic-btn {
	position: fixed;
	bottom: 28px;
	right: 28px;
	left: auto;
	width: 112px;
	height: 112px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: none;
	background: transparent;
	overflow: visible;
	cursor: pointer;
	z-index: 2147483647;
	box-shadow: none;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
	--vsa-amp: 0;
}
.vsa-mic-btn:hover { transform: scale(1.05); }
.vsa-mic-btn:active { transform: scale(.94); }
.vsa-mic-btn:focus-visible { outline: 2px solid #0a84ff; outline-offset: 5px; }

.vsa-mic-btn.vsa-pop { animation: vsa-pop-in .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vsa-pop-in {
	0% { transform: scale(.3); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* لایه ۱ - هاله‌ی نرم بیرونی: نور آبی نئونی که همیشه به‌آرومی نفس می‌کشه */
.vsa-halo {
	position: absolute;
	inset: -30px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(10, 132, 255, .55) 0%, rgba(10, 132, 255, .16) 45%, rgba(10, 132, 255, 0) 75%);
	filter: blur(12px);
	z-index: -2;
	animation: vsa-halo-breathe 4s cubic-bezier(.22, 1, .36, 1) infinite;
	pointer-events: none;
}
@keyframes vsa-halo-breathe {
	0%, 100% { transform: scale(.9); opacity: .5; }
	50% { transform: scale(1.15); opacity: 1; }
}

/* لایه ۲ - حلقه‌ی نور چرخان: در idle خیلی آروم و کم‌رنگ، در thinking سریع و روشن */
.vsa-glow-ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0%, rgba(52, 195, 255, .9) 8%, transparent 22%, transparent 78%, rgba(10, 132, 255, .7) 92%, transparent 100%);
	filter: blur(2.5px);
	opacity: .4;
	z-index: -1;
	animation: vsa-ring-spin 14s linear infinite;
	pointer-events: none;
}
@keyframes vsa-ring-spin { to { transform: rotate(360deg); } }

/* لایه ۳ - حلقه‌های سونار: فقط توی حالت گوش‌دادن، مثل ارسال موج از دکمه به بیرون */
.vsa-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(52, 195, 255, .65);
	opacity: 0;
	pointer-events: none;
}
.vsa-listening .vsa-ring { animation: vsa-sonar 2.4s cubic-bezier(.22, 1, .36, 1) infinite; }
.vsa-ring-2 { animation-delay: .8s !important; }
.vsa-ring-3 { animation-delay: 1.6s !important; }
@keyframes vsa-sonar {
	0% { transform: scale(.95); opacity: .55; }
	100% { transform: scale(1.55); opacity: 0; }
}

/* لایه ۴ - بدنه‌ی شیشه‌ای اصلی (Glassmorphism واقعی با backdrop-filter) */
.vsa-glass {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	background:
		radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 42%),
		radial-gradient(circle at 68% 78%, rgba(10, 132, 255, .4) 0%, rgba(10, 132, 255, 0) 60%),
		linear-gradient(155deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 45%, rgba(10, 132, 255, .16) 100%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow:
		0 12px 34px rgba(4, 20, 60, .38),
		0 2px 10px rgba(4, 20, 60, .22),
		inset 0 1.5px 1.5px rgba(255, 255, 255, .7),
		inset 0 -8px 16px rgba(10, 132, 255, .2);
	transition: box-shadow .4s cubic-bezier(.22, 1, .36, 1);
}
.vsa-glass-specular {
	position: absolute;
	top: 7%;
	left: 16%;
	width: 56%;
	height: 32%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 72%);
	filter: blur(1px);
	opacity: .85;
	transform: rotate(-14deg);
	pointer-events: none;
	animation: vsa-specular-drift 7s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes vsa-specular-drift {
	0%, 100% { opacity: .75; transform: rotate(-14deg) translate(0, 0); }
	50% { opacity: 1; transform: rotate(-10deg) translate(3%, -2%); }
}

/* لایه ۵ - موج صوتی: میله‌های واکنش‌گر به دامنه‌ی صدای واقعی (کنترل ارتفاع با جاوااسکریپت) */
.vsa-waveform {
	position: absolute;
	left: 50%;
	bottom: 23%;
	transform: translateX(-50%);
	display: flex;
	gap: 4px;
	align-items: flex-end;
	height: 18px;
	opacity: 0;
	transition: opacity .35s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
.vsa-listening .vsa-waveform,
.vsa-speaking .vsa-waveform { opacity: 1; }
.vsa-bar {
	width: 3px;
	height: 6px;
	border-radius: 2px;
	background: linear-gradient(180deg, #fff, #cfefff);
	transform-origin: bottom center;
	box-shadow: 0 0 5px rgba(255, 255, 255, .85);
	will-change: transform;
}

/* لایه ۶ - آیکون میکروفون */
.vsa-mic-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	pointer-events: none;
	filter: drop-shadow(0 1px 3px rgba(0, 40, 100, .35)) drop-shadow(0 0 6px rgba(255, 255, 255, .35));
	transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1);
}
.vsa-listening .vsa-mic-icon,
.vsa-speaking .vsa-mic-icon {
	transform: translate(-50%, -62%) scale(.92);
	opacity: .85;
}

/* لایه ۷ - افکت ریپل هنگام لمس */
.vsa-ripple-layer {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
}
.vsa-ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%);
	transform: scale(0);
	opacity: .9;
	animation: vsa-ripple-expand .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes vsa-ripple-expand { to { transform: scale(9); opacity: 0; } }

/* حالت idle: نفس‌کشی خیلی نرم کل دکمه */
.vsa-mic-btn:not(.vsa-active) { animation: vsa-idle-breathe 4.5s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes vsa-idle-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.025); }
}

/* حالت connecting: شیشه کمی کدر و حلقه‌ی چرخان کمی سریع‌تر */
.vsa-connecting .vsa-glass { filter: saturate(.7) brightness(.95); }
.vsa-connecting .vsa-glow-ring { animation-duration: 3s; opacity: .7; }
.vsa-connecting .vsa-halo { animation-duration: 1.6s; }

/* حالت listening: دکمه بزرگ‌تر، هاله پرانرژی‌تر */
.vsa-listening { transform: scale(1.06); }
.vsa-listening .vsa-halo { animation-duration: 1.8s; opacity: .9; }
.vsa-listening .vsa-glass {
	box-shadow:
		0 14px 38px rgba(4, 20, 60, .42),
		0 2px 10px rgba(4, 20, 60, .25),
		inset 0 1.5px 1.5px rgba(255, 255, 255, .75),
		inset 0 -8px 20px rgba(10, 132, 255, .32);
}

/* حالت thinking: حلقه‌ی نور سریع می‌چرخه، همه‌چیز نرم و آروم */
.vsa-thinking .vsa-glow-ring { animation-duration: 1.5s; opacity: 1; filter: blur(3.5px); }
.vsa-thinking .vsa-halo { animation-duration: 2.2s; }
.vsa-thinking .vsa-mic-icon { opacity: .6; }

/* حالت speaking: کل دکمه با ریتم صدای مدل کمی می‌طپد (از طریق --vsa-amp که با JS ست می‌شه) */
.vsa-speaking { transform: scale(calc(1.05 + var(--vsa-amp) * .06)); }
.vsa-speaking .vsa-halo { animation-duration: 1.1s; opacity: 1; transform: scale(calc(1 + var(--vsa-amp) * .35)); }
.vsa-speaking .vsa-glass {
	box-shadow:
		0 16px 42px rgba(4, 20, 60, .46),
		0 2px 12px rgba(4, 20, 60, .28),
		inset 0 1.5px 1.5px rgba(255, 255, 255, .8),
		inset 0 -8px 22px rgba(52, 195, 255, .4);
}

/* خطا: بدون رنگ قرمز - یه فلاش کهربایی/نارنجی ملایم و لرزش کوتاه (طبق درخواست، رنگ قرمز استفاده نشده) */
.vsa-error .vsa-glass {
	box-shadow:
		0 12px 34px rgba(4, 20, 60, .38),
		0 0 0 3px rgba(255, 176, 32, .5),
		inset 0 1.5px 1.5px rgba(255, 255, 255, .7);
}
.vsa-error .vsa-halo { background: radial-gradient(circle, rgba(255, 176, 32, .55) 0%, rgba(255, 176, 32, .15) 45%, rgba(255, 176, 32, 0) 75%); }
.vsa-error { animation: vsa-error-shake .5s ease-in-out; }
@keyframes vsa-error-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.vsa-mic-btn,
	.vsa-mic-btn:not(.vsa-active),
	.vsa-halo,
	.vsa-glow-ring,
	.vsa-ring,
	.vsa-glass-specular {
		animation: none !important;
	}
}