/* ====================================================================
   AMIR TECHNOLOGY AGENTS TEAM — Public Floating Chat Widget
   ==================================================================== */

/* نکته مهم: id واقعی ویجت به‌صورت پویا ساخته می‌شود (مثلاً #aat-floating-widget-12)
   بنابراین انتخابگر id ثابت هرگز match نمی‌شود و باید از کلاس استفاده شود؛
   همین موضوع باعث می‌شد box-sizing:border-box روی هیچ عنصری اعمال نشود و
   padding داخلی برخی باکس‌ها (مثل کادر گرادیانتی دور ورودی پیام) از عرض واقعی
   خود بیرون بزند و یک قاب/کادر اضافه در گوشه‌ی پایین‌سمت‌چپ ویجت دیده شود. */
.aat-floating-widget, .aat-floating-widget * {
	box-sizing: border-box;
	font-family: 'Yekan', 'Vazirmatn', 'IRANSans', Tahoma, -apple-system, BlinkMacSystemFont, sans-serif;
}

.aat-floating-widget {
	--aat-brand: #6C5CE7;
	--aat-widget-offset: 24px;
	--aat-widget-offset-side: 24px;

	/* تم تیره (پیش‌فرض) */
	--aat-bg: #0c0d16;
	--aat-bg-panel: rgba(16, 18, 30, 0.92);
	--aat-bg-elevated: rgba(255,255,255,0.06);
	--aat-bg-elevated-hover: rgba(255,255,255,0.1);
	--aat-text: #F4F4FA;
	--aat-text-muted: #A6A8BF;
	--aat-border: rgba(255,255,255,0.1);

	position: fixed;
	bottom: var(--aat-widget-offset);
	z-index: 999999;
}

/* تم روشن */
.aat-floating-widget[data-theme="light"] {
	--aat-bg: #F7F7FB;
	--aat-bg-panel: rgba(255, 255, 255, 0.96);
	--aat-bg-elevated: rgba(10,10,20,0.045);
	--aat-bg-elevated-hover: rgba(10,10,20,0.08);
	--aat-text: #1B1C2B;
	--aat-text-muted: #6E7090;
	--aat-border: rgba(10,10,20,0.09);
}

/* تم خودکار: از تنظیمات دستگاه کاربر پیروی می‌کند */
@media (prefers-color-scheme: light) {
	.aat-floating-widget[data-theme="auto"] {
		--aat-bg: #F7F7FB;
		--aat-bg-panel: rgba(255, 255, 255, 0.96);
		--aat-bg-elevated: rgba(10,10,20,0.045);
		--aat-bg-elevated-hover: rgba(10,10,20,0.08);
		--aat-text: #1B1C2B;
		--aat-text-muted: #6E7090;
		--aat-border: rgba(10,10,20,0.09);
	}
}

.aat-position-bottom-right {
	right: var(--aat-widget-offset-side);
}
.aat-position-bottom-left {
	left: var(--aat-widget-offset-side);
}

/* ---------------------------------------------------------------
   دکمه شناور
   --------------------------------------------------------------- */
.aat-widget-toggle {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--aat-brand, #6C5CE7), color-mix(in srgb, var(--aat-brand, #6C5CE7) 60%, #00D2D3));
	box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 6px rgba(255,255,255,0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	position: relative;
}
.aat-widget-toggle:hover { transform: scale(1.06); }
.aat-widget-toggle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.aat-widget-toggle-icon-close { display: none; font-size: 20px; color: #fff; }
.aat-floating-widget.open .aat-widget-toggle-icon-open { display: none; }
.aat-floating-widget.open .aat-widget-toggle-icon-close { display: block; }

/* ---------------------------------------------------------------
   پنل چت — همیشه تمام‌صفحه (روی همه دستگاه‌ها، دقیقاً مثل اپ Gemini)
   نه فقط یک پنجره‌ی شناور؛ باز شدن یعنی یک تجربه‌ی غوطه‌ور و اختصاصی
   --------------------------------------------------------------- */
.aat-widget-panel {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	max-width: 100%;
	max-height: 100dvh;
	background: var(--aat-bg-panel);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	border: none;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(.2,.9,.3,1.2), transform 0.3s cubic-bezier(.2,.9,.3,1.2);
	z-index: 1000000;
	color: var(--aat-text);
}

#aat-floating-widget.open .aat-widget-panel,
.aat-floating-widget.open .aat-widget-panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

/* ---------------------------------------------------------------
   گرادیانت‌های متحرک تزئینی پایین صفحه (سبک Gemini)
   --------------------------------------------------------------- */
.aat-widget-orbs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.aat-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	opacity: 0.5;
	will-change: transform;
}
.aat-orb-1 {
	width: 300px; height: 300px;
	background: radial-gradient(circle, var(--aat-brand, #6C5CE7), transparent 70%);
	bottom: -70px; left: -50px;
	animation: aatOrbFloat1 14s ease-in-out infinite;
}
.aat-orb-2 {
	width: 240px; height: 240px;
	background: radial-gradient(circle, #00D2D3, transparent 70%);
	bottom: -60px; right: -30px;
	animation: aatOrbFloat2 18s ease-in-out infinite;
}
.aat-orb-3 {
	width: 190px; height: 190px;
	background: radial-gradient(circle, #FF6BCB, transparent 70%);
	bottom: -50px; left: 38%;
	animation: aatOrbFloat3 16s ease-in-out infinite;
}
@keyframes aatOrbFloat1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(40px, -30px) scale(1.15); }
}
@keyframes aatOrbFloat2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-30px, -40px) scale(1.1); }
}
@keyframes aatOrbFloat3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(20px, -50px) scale(1.2); }
}

/* ---------------------------------------------------------------
   هدر — دکمه منو (راست بالا در RTL)، انتخاب‌گر ایجنت (وسط)، بستن
   --------------------------------------------------------------- */
.aat-widget-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 14px;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}
.aat-widget-menu-btn,
.aat-widget-close {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--aat-text);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
	flex-shrink: 0;
}
.aat-widget-menu-btn:hover,
.aat-widget-close:hover { background: var(--aat-bg-elevated); }

.aat-widget-agent-switcher { position: relative; flex: 1; display: flex; justify-content: center; }
/* ردیف مرکزی هدر: نام ایجنت + دکمه‌ی تماس صوتی (اگر فعال باشد) کنار هم،
   به‌جای اینکه دکمه‌ی تماس یک نوار جداگانه‌ی تمام‌عرض زیر هدر باشد. */
.aat-widget-header-center {
	display: flex;
	align-items: center;
	gap: 6px;
}
.aat-widget-agent-switcher-btn {
	display: flex; align-items: center; gap: 6px;
	background: transparent;
	border: none;
	color: var(--aat-text);
	/* نام ایجنت بزرگ‌تر و برجسته‌تر، چون حالا فضای بیشتری آزاد شده */
	font-size: 17px; font-weight: 700;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 20px;
	transition: background 0.2s ease;
	max-width: 180px;
}
.aat-widget-agent-switcher-btn:hover { background: var(--aat-bg-elevated); }
.aat-widget-agent-switcher-btn [data-role="agent-switcher-label"] {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aat-widget-agent-switcher-avatar {
	width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
	object-fit: cover;
}
.aat-widget-agent-switcher-avatar-fallback {
	display: flex; align-items: center; justify-content: center;
	background: var(--aat-brand, #6C5CE7);
	color: #fff; font-size: 12px; font-weight: 700;
}
.aat-widget-agent-switcher-menu {
	position: absolute;
	top: 48px;
	right: 50%;
	transform: translateX(50%);
	min-width: 220px;
	max-width: 300px;
	padding: 2px;
	border-radius: 18px;
	display: none;
	z-index: 10;
}
.aat-widget-agent-switcher.open .aat-widget-agent-switcher-menu { display: block; }
/* حلقه‌ی گرادیانت چرخان دور منو — همان تکنیک/متغیرِ کشوی منوی همبرگری
   (--aat-menu-angle) که پایین‌تر در همین فایل تعریف شده؛ در CSS ترتیب
   تعریفِ @property/@keyframes نسبت به محل استفاده مهم نیست. */
.aat-widget-agent-switcher-menu::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	z-index: 0;
	background: conic-gradient(
		from var(--aat-menu-angle, 0deg),
		var(--aat-brand, #6C5CE7), #00D2D3, #FF6BCB, #FFB75E, #a78bfa, var(--aat-brand, #6C5CE7)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: aat-menu-gb-spin 4s linear infinite;
}
.aat-widget-agent-switcher-menu-inner {
	position: relative;
	z-index: 1;
	max-height: 320px;
	overflow-y: auto;
	background: var(--aat-bg-panel);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.35);
	padding: 8px;
}
/* پس‌زمینه‌ی بلرشده‌ی پشت منوی انتخاب ایجنت — دقیقاً مثل کشوی منوی همبرگری */
.aat-widget-agent-switcher-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 9;
}
.aat-widget-agent-switcher-backdrop.open { opacity: 1; pointer-events: all; }
.aat-widget-agent-switcher-item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	color: var(--aat-text);
	font-size: 13.5px;
	transition: background 0.15s ease;
	margin-bottom: 4px;
}
.aat-widget-agent-switcher-item:last-child { margin-bottom: 0; }
.aat-widget-agent-switcher-item:hover { background: var(--aat-bg-elevated); }
.aat-widget-agent-switcher-item.active { background: var(--aat-bg-elevated-hover); font-weight: 700; }
.aat-widget-agent-switcher-item img,
.aat-widget-agent-switcher-item .aat-switcher-avatar-fallback {
	width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
	background: var(--aat-bg-elevated);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
}

/* ---------------------------------------------------------------
   کشوی منو (تاریخچه/گفتگوی جدید/محرمانه/تم)
   --------------------------------------------------------------- */
.aat-widget-menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 1000001;
}
.aat-widget-menu-backdrop.open { opacity: 1; pointer-events: all; }

/* ---------------------------------------------------------------
   کشوی منو — یک کارت شناور با حاشیه‌ی گرادیانت چرخان
   (همان تکنیک کادر پیام / منوی افزونه AMIR SUITE)
   --------------------------------------------------------------- */
@property --aat-menu-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
@keyframes aat-menu-gb-spin { to { --aat-menu-angle: 360deg; } }

.aat-widget-menu-drawer {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 16px);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
	right: 16px;
	width: min(78vw, 300px);
	padding: 2px;
	border-radius: 24px;
	transform: translateX(115%);
	transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2);
	z-index: 1000002;
}
[dir="rtl"] .aat-widget-menu-drawer { right: 16px; left: auto; transform: translateX(115%); }
.aat-widget-menu-drawer.open { transform: translateX(0); }

/* حلقه‌ی نازک گرادیانت چرخان */
.aat-widget-menu-drawer::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	z-index: 0;
	background: conic-gradient(
		from var(--aat-menu-angle, 0deg),
		var(--aat-brand, #6C5CE7), #00D2D3, #FF6BCB, #FFB75E, #a78bfa, var(--aat-brand, #6C5CE7)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: aat-menu-gb-spin 4s linear infinite;
}
/* هاله‌ی نورانی محو پشت حلقه */
.aat-widget-menu-drawer::before {
	content: '';
	position: absolute;
	inset: -4px;
	padding: 6px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--aat-menu-angle, 0deg),
		var(--aat-brand, #6C5CE7), #00D2D3, #FF6BCB, #FFB75E, #a78bfa, var(--aat-brand, #6C5CE7)
	);
	filter: blur(12px);
	opacity: 0.5;
	z-index: -1;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: aat-menu-gb-spin 4s linear infinite;
}

.aat-widget-menu-drawer-inner {
	position: relative;
	z-index: 1;
	height: 100%;
	background: var(--aat-bg-panel);
	border-radius: 22px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	padding: 16px;
	overflow-y: auto;
}
.aat-widget-menu-item {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 12px;
	border-radius: 12px;
	color: var(--aat-text);
	font-size: 13.5px; font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	margin-bottom: 4px;
}
.aat-widget-menu-item:hover { background: var(--aat-bg-elevated); }
.aat-widget-menu-divider { height: 1px; background: var(--aat-border); margin: 8px 4px; }
.aat-toggle-sm { transform: scale(0.8); }

/* سوییچ روشن/خاموش (برای حالت محرمانه) */
.aat-toggle {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}
.aat-toggle input { opacity: 0; width: 0; height: 0; }
.aat-toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--aat-bg-elevated);
	border: 1px solid var(--aat-border);
	border-radius: 22px;
	transition: background 0.2s ease;
}
.aat-toggle-slider::before {
	content: '';
	position: absolute;
	height: 16px; width: 16px;
	right: 3px; top: 2px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
}
.aat-toggle input:checked + .aat-toggle-slider {
	background: var(--aat-brand, #6C5CE7);
}
.aat-toggle input:checked + .aat-toggle-slider::before {
	transform: translateX(-18px);
}

/* ---------------------------------------------------------------
   پیام یادآوری اول گفتگو (سبک "Keep in mind" در Gemini)
   --------------------------------------------------------------- */
.aat-widget-terms-modal {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000003;
	padding: 20px;
}
.aat-widget-terms-card {
	background: var(--aat-bg-panel);
	border: 1px solid var(--aat-border);
	border-radius: 22px;
	padding: 28px 24px;
	max-width: 340px;
	width: 100%;
	text-align: center;
	box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.aat-widget-terms-icon { font-size: 32px; margin-bottom: 10px; }
.aat-widget-terms-title { font-size: 16px; font-weight: 800; color: var(--aat-text); margin-bottom: 10px; }
.aat-widget-terms-text { font-size: 13px; line-height: 1.9; color: var(--aat-text-muted); margin-bottom: 20px; }
.aat-widget-terms-btn {
	background: linear-gradient(135deg, var(--aat-brand, #6C5CE7), color-mix(in srgb, var(--aat-brand, #6C5CE7) 60%, #00D2D3));
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 12px 28px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
}

/* لایه نور پس‌زمینه داخل پنل برای حس Liquid Glass */
.aat-widget-panel::before {
	content: '';
	position: absolute;
	width: 220px; height: 220px;
	background: radial-gradient(circle, color-mix(in srgb, var(--aat-brand, #6C5CE7) 40%, transparent), transparent 70%);
	top: -80px; right: -60px;
	border-radius: 50%;
	filter: blur(50px);
	pointer-events: none;
}

/* ---------------------------------------------------------------
   فوتر متن قابل‌تنظیم
   --------------------------------------------------------------- */
.aat-widget-footer-text {
	text-align: center;
	font-size: 10.5px;
	color: var(--aat-text-muted);
	padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
	letter-spacing: 0.3px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------
   پیام‌ها
   --------------------------------------------------------------- */
.aat-widget-messages {
	flex: 1;
	min-height: 0; /* رفع باگ کلاسیک فلکس‌باکس: بدون این، وقتی کیبورد موبایل باز
	می‌شود و ارتفاع پنل کم می‌شود، این ناحیه (چون overflow-y:auto دارد) کوچک
	نمی‌شود و از پنل بیرون می‌زند؛ همین باعث می‌شد نوار «در حال پاسخ‌گویی»،
	تولبار و کادر پیام روی هم بیفتند/به‌هم‌ریخته دیده شوند. */
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}
.aat-widget-messages::-webkit-scrollbar { width: 5px; }
.aat-widget-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }

.aat-msg { display: flex; }
/* نکته: در RTL، flex-start یعنی «سمت راست». قبلاً پیام کاربر با
   flex-direction:row-reverse اضافه، دوباره این را برعکس می‌کرد و در
   نتیجه پیام‌های خودِ کاربر سمت چپ (گیج‌کننده) نشان داده می‌شدند. حالا
   دقیقاً مثل قراردادِ رایج (پیام خودِ کاربر راست، پیام طرف مقابل/ایجنت
   چپ) تنظیم شده، بدون نیاز به ترفند row-reverse.
   به‌درخواست کارفرما: هر دو نوع پیام (کاربر و ایجنت) اکنون در یک سمت
   (راست) قرار می‌گیرند؛ تمایز بین‌شان دیگر با «سمت» نیست، بلکه فقط با
   رنگ حباب (آبی برای کاربر، تیره برای ایجنت) و آواتار کنار حباب ایجنت
   مشخص می‌شود. */
.aat-msg-user { justify-content: flex-start; }
.aat-msg-agent { justify-content: flex-start; }

.aat-msg-bubble {
	max-width: 80%;
	padding: 11px 15px;
	border-radius: 18px;
	font-size: 13.5px;
	line-height: 1.8;
	word-wrap: break-word;
}
.aat-msg-agent .aat-msg-bubble {
	background: var(--aat-bg-elevated);
	color: var(--aat-text);
	border-bottom-right-radius: 4px;
}
.aat-msg-user .aat-msg-bubble {
	/* همان دلیل دکمه‌ی ارسال: آبیِ ثابت به‌جای var(--aat-brand)، تا صرف‌نظر
	   از رنگ سازمانیِ ایجنت (که می‌تواند مشکی/تیره باشد)، حباب پیامِ خودِ
	   کاربر همیشه واضح و متمایز از حباب‌های ایجنت باشد. */
	background: linear-gradient(135deg, #2F6FED, #00AEEF);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.aat-msg-error .aat-msg-bubble {
	background: rgba(255, 92, 124, 0.15);
	color: #FF8FA3;
}

/* تایپینگ */
.aat-widget-typing {
	display: flex;
	align-items: center;
	padding: 0 18px 10px;
	flex-shrink: 0; /* هیچ‌وقت توسط بقیه‌ی فلکس‌آیتم‌ها فشرده نشود */
	max-width: 100%;
	overflow: hidden;
}
/* نکته‌ی مهم: قبلاً این نشانگر با ۳ نقطه‌ی توپُر ساخته می‌شد که رنگش از
   var(--aat-brand) (رنگ سازمانی قابل‌تنظیم هر ایجنت) می‌آمد؛ اگر ادمین
   رنگ سازمانی را مشکی انتخاب می‌کرد (که پیش‌فرض رایجی هم هست)، نقطه‌ها
   روی پس‌زمینه‌ی تیره‌ی ویجت کاملاً نامرئی می‌شدند. حالا به‌جای نقطه از
   متنِ «[نام ایجنت] در حال پاسخ‌گویی...» استفاده می‌شود و رنگش از
   var(--aat-text) گرفته می‌شود (همان متغیری که خودِ حباب‌های پیام هم
   استفاده می‌کنند) تا صرف‌نظر از رنگ سازمانی، همیشه در تم تیره روشن/سفید
   و در تم روشن تیره و خوانا باشد. */
.aat-widget-typing-text {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aat-text);
	opacity: 0.8;
	animation: aatTypingPulse 1.4s ease-in-out infinite;
	white-space: nowrap; /* هیچ‌وقت کلمه‌به‌کلمه روی هم نمی‌افتد */
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: block;
}
@keyframes aatTypingPulse {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 0.9; }
}

/* ---------------------------------------------------------------
   نوار ابزار پیوست (تصویر/ویدیو/فایل/لوکیشن/صوت)
   --------------------------------------------------------------- */
.aat-widget-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border-top: 1px solid var(--aat-border);
	flex-shrink: 0;
}
.aat-tool-btn {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--aat-text-muted);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.aat-tool-btn:hover { background: var(--aat-bg-elevated); color: var(--aat-text); }
.aat-tool-mic.recording { color: #FF5C7C; }

.aat-attachment-preview {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: 11.5px;
	color: var(--aat-text-muted);
}
.aat-spinner-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--aat-brand, #6C5CE7);
	animation: aatPulseDot 1s infinite ease-in-out;
}
@keyframes aatPulseDot {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

/* ---------------------------------------------------------------
   ضبط پیام صوتی — کارت تمام‌عرض لوکس با آواتار بزرگ + اکولایزر شیشه‌ای
   (پایان خودکار با تشخیص سکوت صدای کاربر — نیازی به نگه‌داشتن دکمه نیست)
   --------------------------------------------------------------- */
.aat-voice-recorder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 20px 18px;
	background:
		radial-gradient(ellipse at 30% 0%, rgba(255,92,124,0.16) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 100%, rgba(108,92,231,0.16) 0%, transparent 55%),
		linear-gradient(180deg, rgba(16,18,30,0.98), rgba(10,11,20,0.98));
	border-top: 1px solid rgba(255,255,255,0.08);
	position: relative;
	overflow: hidden;
}
.aat-voice-recorder-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(30px);
	pointer-events: none;
	opacity: 0.5;
}
.aat-voice-recorder-orb-1 {
	width: 140px; height: 140px;
	top: -60px; right: -30px;
	background: radial-gradient(circle, rgba(255,92,124,0.5), transparent 70%);
	animation: aatOrbFloat 6s ease-in-out infinite;
}
.aat-voice-recorder-orb-2 {
	width: 120px; height: 120px;
	bottom: -50px; left: -20px;
	background: radial-gradient(circle, rgba(108,92,231,0.5), transparent 70%);
	animation: aatOrbFloat 7s ease-in-out infinite reverse;
}
@keyframes aatOrbFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%       { transform: translate(-8px, 8px) scale(1.08); }
}

/* --- آواتار بزرگ + حلقه‌های نورانی متناسب با شدت صدا --- */
.aat-voice-recorder-avatar-wrap {
	position: relative;
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	margin-top: 4px;
}
.aat-voice-recorder-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid transparent;
	background: conic-gradient(from 0deg, var(--aat-brand, #6C5CE7), #FF5C7C, #00D2D3, var(--aat-brand, #6C5CE7)) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	transition: transform 0.09s ease-out, opacity 0.09s ease-out;
	animation: aatRingSpin 5s linear infinite;
}
.aat-voice-recorder-ring-2 { inset: -14px; opacity: 0.3; animation-duration: 8s; animation-direction: reverse; }
@keyframes aatRingSpin { to { transform: rotate(360deg); } }

.aat-voice-recorder-avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	position: relative;
	z-index: 1;
	box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 4px rgba(16,18,30,0.9);
}
.aat-voice-recorder-avatar-fallback {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--aat-brand, #6C5CE7), #FF5C7C);
	color: #fff; font-weight: 800; font-size: 28px;
}

.aat-voice-recorder-status {
	font-size: 13px;
	font-weight: 700;
	color: #F4F4FA;
	position: relative;
	z-index: 1;
	letter-spacing: 0.2px;
}
/* نکته: قبلاً رنگ حالت «در حال صحبت» از var(--aat-brand) گرفته می‌شد که
   اگر رنگ سازمانی ایجنت تیره/مشکی بود، متن روی این پس‌زمینه‌ی گرادیانتی
   تیره تقریباً ناخوانا می‌شد. حالا از یک رنگ ثابت و روشن از همان پالت
   خودِ این باکس (صورتی گرم) استفاده می‌شود تا همیشه، صرف‌نظر از رنگ
   سازمانی، خوانا بماند. */
.aat-voice-recorder-speaking .aat-voice-recorder-status { color: #FF8FA8; }

/* اکولایزر لوکس شیشه‌ای */
.aat-voice-equalizer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 40px;
	width: 100%;
	max-width: 260px;
	position: relative;
	z-index: 1;
}
.aat-voice-equalizer span {
	display: inline-block;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, #FF5C7C 0%, var(--aat-brand, #6C5CE7) 55%, #00D2D3 100%);
	min-height: 5px;
	max-height: 38px;
	height: 12px;
	transition: height 0.09s ease;
	box-shadow: 0 0 8px rgba(255,92,124,0.45);
}
/* انیمیشن پیش‌فرض هنگام سکوت (پیش از دریافت داده واقعی از Web Audio) */
.aat-voice-equalizer span:nth-child(odd)  { animation: aatEqIdle 1.2s 0.1s ease-in-out infinite; }
.aat-voice-equalizer span:nth-child(even) { animation: aatEqIdle 1.2s 0.3s ease-in-out infinite; }
@keyframes aatEqIdle {
	0%, 100% { height: 6px; }
	50%       { height: 20px; }
}
/* وقتی Web Audio active است، JS ارتفاع را کنترل می‌کند — انیمیشن override می‌شود */
.aat-voice-equalizer.aat-eq-active span {
	animation: none;
}

.aat-voice-timer {
	font-size: 13px;
	font-weight: 800;
	color: #F4F4FA;
	min-width: 42px;
	text-align: center;
	direction: ltr;
	position: relative;
	z-index: 1;
	opacity: 0.85;
}
.aat-voice-timer::before {
	content: '🔴 ';
	font-size: 10px;
	animation: aatBlinkDot 1s step-end infinite;
}
@keyframes aatBlinkDot {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

.aat-voice-recorder-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	position: relative;
	z-index: 1;
}
.aat-voice-cancel,
.aat-voice-stop {
	display: flex;
	align-items: center;
	gap: 6px;
	border: none;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 22px;
	padding: 10px 18px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.aat-voice-cancel {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.14);
	color: #C7C9DA;
}
.aat-voice-cancel:hover {
	background: rgba(255,255,255,0.12);
	color: #fff;
	border-color: rgba(255,255,255,0.28);
}
.aat-voice-stop {
	background: linear-gradient(135deg, #FF5C7C, var(--aat-brand, #6C5CE7));
	color: #fff;
	box-shadow: 0 6px 20px rgba(255,92,124,0.35);
}
.aat-voice-stop:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,92,124,0.45); }
.aat-voice-stop-dot {
	width: 9px;
	height: 9px;
	background: #fff;
	border-radius: 3px;
	transition: border-radius 0.2s ease;
	flex-shrink: 0;
}

/* دکمه میکروفون در toolbar — حالت فعال */
.aat-tool-mic.aat-mic-recording {
	background: rgba(255,92,124,0.2) !important;
	color: #FF5C7C !important;
	animation: aatMicBlink 1s ease-in-out infinite;
}
@keyframes aatMicBlink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.6; }
}

/* ---------------------------------------------------------------
   نمایش پیوست‌ها درون حباب پیام
   --------------------------------------------------------------- */
.aat-msg-text { margin-top: 6px; }
.aat-msg-bubble:has(.aat-msg-image:only-child),
.aat-msg-bubble:has(.aat-msg-video:only-child) { padding: 5px; }

.aat-msg-image {
	max-width: 220px;
	max-height: 220px;
	border-radius: 14px;
	display: block;
	object-fit: cover;
}
.aat-msg-video {
	max-width: 240px;
	border-radius: 14px;
	display: block;
}
.aat-msg-audio {
	max-width: 230px;
	display: block;
	height: 36px;
}
.aat-msg-file, .aat-msg-location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(255,255,255,0.08);
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
}
.aat-msg-file:hover, .aat-msg-location:hover { background: rgba(255,255,255,0.14); }

@keyframes aatSlideUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------
   دکمه‌های پاسخ سریع (Quick Reply Chips) — درست بالای کادر تایپ،
   فقط در شروع یک گفتگوی تازه (بدون تاریخچه) نمایش داده می‌شوند.
   --------------------------------------------------------------- */
.aat-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 16px 12px;
	animation: aatSlideUp 0.3s ease;
}
.aat-quick-reply-chip {
	background: transparent;
	border: 1.5px solid var(--aat-brand, #6C5CE7);
	color: var(--aat-brand, #6C5CE7);
	border-radius: 20px;
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	font-family: inherit;
}
.aat-quick-reply-chip:hover {
	background: var(--aat-brand, #6C5CE7);
	color: #fff;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   فرم ورودی
   --------------------------------------------------------------- */
.aat-widget-input-form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 10px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	/* بدون این خط، روی موبایل (مخصوصاً وقتی کیبورد باز است و عرض قابل‌مشاهده
	   کمتر می‌شود) ردیفِ فلکس هرگز کمتر از عرضِ ذاتیِ اینپوت جمع نمی‌شد
	   (چون min-width پیش‌فرض آیتم‌های flex برابر «auto» است، نه صفر) و همین
	   باعث می‌شد کل ردیف از عرض پنل بیرون بزند و دکمه‌ی ارسال از کادر
	   دیده‌شده بیرون بیفتد/برود زیر لبه‌ی صفحه. */
	min-width: 0;
	max-width: 100%;
}

/* ---------------------------------------------------------------
   کادر گرادیانت چرخشی دور ورودی پیام — الهام‌گرفته از افزونه AMIR SUITE
   (تکنیک conic-gradient + مسک برای ساخت یک حلقه‌ی نازک نورانی و چرخان)
   نکته‌ی کارایی: به‌جای تغییردادنِ اندازه/شکل لایه (که باعث می‌شد حلقه
   ناپدید و کل کادر پر از گرادیانت شود، چون بک‌گراند شیشه‌ای ورودی فقط
   ۶٪ کدر است)، همان تکنیک اصلی (ماسک روی pseudo) نگه داشته شده، اما با
   contain + یک لایه‌ی کامپوزیت جدا، هزینه‌ی رنگ‌آمیزی مجدد هر فریم را به
   همین باکس کوچک محدود می‌کنیم تا به بقیه‌ی ویجت (که پشت آن blur سنگین
   دارد) سرایت نکند و لگ نسبت به نسخه‌ی قبلی محسوس کمتر شود.
   --------------------------------------------------------------- */
@property --aat-input-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes aat-input-gb-spin { to { --aat-input-angle: 360deg; } }

.aat-input-gb-wrap {
	flex: 1;
	/* همین‌جا ریشه‌ی اصلی باگ «بیرون‌زدن دکمه‌ی ارسال» بود: چون این عنصر هم
	   flex:1 دارد و هم فرزندش (input) یک عرض ذاتی/حداقلی (min-content) از
	   خودش تحمیل می‌کند، بدون min-width:0 مرورگر اجازه نمی‌داد این باکس از
	   آن عرض ذاتی کوچک‌تر شود؛ در نتیجه در صفحه‌های باریک موبایل (یا وقتی
	   کیبورد باز می‌شد و عرض واقعی کمتر از حالت عادی به‌نظر می‌رسید) کل ردیفِ
	   input+button از عرض پنل بیشتر می‌شد و دکمه‌ی گرد آبی به بیرون از کادر
	   هل داده می‌شد. */
	min-width: 0;
	position: relative;
	border-radius: 26px;
	padding: 2px;
	z-index: 0;
}
.aat-input-gb-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--aat-input-angle),
		var(--aat-brand, #6C5CE7),
		#00D2D3,
		#FF6BCB,
		#FFB75E,
		#a78bfa,
		var(--aat-brand, #6C5CE7)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: aat-input-gb-spin 4s linear infinite;
	contain: strict;
	will-change: opacity;
	transform: translateZ(0);
}

.aat-widget-input {
	width: 100%;
	background: var(--aat-bg-elevated);
	border: none;
	border-radius: 24px;
	padding: 16px 20px;
	color: var(--aat-text);
	font-size: 15px;
	outline: none;
	transition: box-shadow 0.2s ease;
	min-height: 54px;
	position: relative;
	z-index: 1;
}
.aat-widget-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--aat-brand, #6C5CE7) 15%, transparent); }
.aat-widget-input::placeholder { color: var(--aat-text-muted); }

.aat-widget-send {
	width: 48px; height: 48px;
	min-width: 48px;
	border-radius: 50%;
	border: none;
	/* نکته: قبلاً از var(--aat-brand) استفاده می‌شد که چون رنگ سازمانی این
	   ایجنت مشکی است، دکمه در تم تیره تقریباً نامرئی می‌شد. حالا یک آبیِ
	   ثابت و پرکنتراست استفاده می‌شود که با هر رنگ سازمانی‌ای همیشه واضح
	   و متمایز بماند. */
	background: linear-gradient(135deg, #2F6FED, #00AEEF);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.2s ease;
	box-shadow: 0 6px 20px rgba(47,111,237,0.45);
}
.aat-widget-send:hover { transform: scale(1.08); }
.aat-widget-send svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------
   Embed/Fullscreen Chat (شورت‌کد)
   --------------------------------------------------------------- */
.aat-chat-embed {
	font-family: 'Yekan', 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
	direction: rtl;
	background: rgba(16,18,30,0.9);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-width: 100%;
}
.aat-chat-embed.aat-mode-fullscreen { height: 80vh; }
.aat-chat-header {
	display: flex; align-items: center; gap: 12px;
	padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aat-chat-header .aat-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.aat-agent-meta strong { color: #F4F4FA; font-size: 14px; display: block; }
.aat-agent-meta span { color: #A6A8BF; font-size: 11.5px; }
.aat-chat-messages { flex: 1; overflow-y: auto; padding: 16px; }
.aat-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.aat-chat-input {
	flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px; padding: 10px 16px; color: #fff; font-size: 13px; outline: none;
}
.aat-chat-send {
	background: linear-gradient(135deg, #6C5CE7, #00D2D3); border: none; color: #fff;
	border-radius: 18px; padding: 10px 20px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ---------------------------------------------------------------
   Team Grid (شورت‌کد [aat_team])
   --------------------------------------------------------------- */
.aat-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	direction: rtl;
	font-family: 'Yekan', 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
}
.aat-team-card {
	background: rgba(16,18,30,0.6);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 20px;
	padding: 20px;
	text-align: center;
	transition: transform 0.2s ease;
}
.aat-team-card:hover { transform: translateY(-4px); }
.aat-team-card img, .aat-avatar-placeholder {
	width: 60px; height: 60px;
	border-radius: 18px;
	margin: 0 auto 12px;
	object-fit: cover;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--aat-brand, #6C5CE7), transparent);
	color: #fff; font-weight: 700; font-size: 20px;
}
.aat-team-card h4 { color: #F4F4FA; font-size: 14px; margin: 6px 0; }
.aat-team-card p { color: #A6A8BF; font-size: 12px; line-height: 1.7; margin-bottom: 14px; }
.aat-open-chat {
	background: linear-gradient(135deg, var(--aat-brand, #6C5CE7), #00D2D3);
	border: none; color: #fff; padding: 9px 18px; border-radius: 18px;
	font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ---------------------------------------------------------------
   Safe-area (notch) و رفتار عمومی تمام‌صفحه — روی همه‌ی اندازه‌های صفحه اعمال می‌شود
   --------------------------------------------------------------- */
.aat-widget-header {
	padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
}
.aat-widget-input-form,
.aat-widget-toolbar {
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}
/* وقتی کیبورد باز است (کلاس زیر توسط JS اضافه می‌شود)، این padding اضافیِ
   safe-area دیگر لازم نیست — چون visualViewport همین الان ارتفاع کیبورد
   را از محاسبه کنار گذاشته؛ این padding اضافه فقط یک فاصله‌ی بی‌مورد بین
   کیبورد و کادر پیام ایجاد می‌کرد (برخلاف مثلاً جمنای که چنین فاصله‌ای ندارد)
   و در حالت‌های کم‌ارتفاع حتی می‌توانست باعث بیرون‌زدن دکمه‌ی ارسال شود. */
.aat-floating-widget.aat-keyboard-open .aat-widget-input-form,
.aat-floating-widget.aat-keyboard-open .aat-widget-toolbar {
	padding-bottom: 8px;
}
/* دکمه شناور پشت پنل تمام‌صفحه پنهان می‌شود */
.aat-floating-widget.open .aat-widget-toggle {
	visibility: hidden;
}

/* وقتی ویجت باز است، اسکرول پشت آن (صفحه‌ی اصلی سایت) قفل می‌شود */
body.aat-widget-fullscreen-open,
body.aat-voice-call-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* ---------------------------------------------------------------
   Voice Call Bar (تماس صوتی زنده) — حالا یک دکمه‌ی گرد و جمع‌وجور
   کنار نام ایجنت در هدر، نه یک نوار جداگانه‌ی تمام‌عرض.
   --------------------------------------------------------------- */
.aat-voice-call-bar { flex-shrink: 0; }
.aat-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.aat-voice-call-btn {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: #00C896; color: #06110d; border: none;
	cursor: pointer; font-family: inherit;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}
.aat-voice-call-btn:hover { background: #1ee0ac; box-shadow: 0 0 12px rgba(0,200,150,0.4); transform: scale(1.06); }
.aat-voice-call-btn.aat-voice-connecting { background: #F4B740; color: #201a05; animation: aatVoicePulse 1.2s infinite; }
.aat-voice-call-btn.aat-voice-active { background: #FF5C7C; color: #fff; }
@keyframes aatVoicePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------------------------------------------------------------
   Voice Visualizer — نمای تمام‌صفحه تماس صوتی (مشابه حالت تماس صوتی
   ChatGPT): وقتی تماس فعال است، کل پنل ویجت را می‌پوشاند، آواتار بزرگ
   وسط صفحه با اکولایزر واقعی، وضعیت روشن و زیرنویس زنده گفت‌وگو.
   --------------------------------------------------------------- */
.aat-voice-visualizer {
	display: flex;
	flex-direction: column;
	position: fixed; inset: 0; z-index: 60;
	padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
	background:
		radial-gradient(circle at 50% 18%, rgba(0,255,150,0.14), transparent 55%),
		linear-gradient(180deg, #05100c 0%, #060608 55%, #05070a 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* نوار بالا: تاریخچه‌ی گفتگو (چپ) و نمایش/عدم‌نمایش زیرنویس (راست) */
.aat-voice-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.aat-voice-icon-btn {
	width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	color: #E8EAF2;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aat-voice-icon-btn:hover { background: rgba(255,255,255,0.16); }
.aat-voice-icon-btn.active {
	background: rgba(0,255,150,0.18);
	color: #00FF96;
	border-color: rgba(0,255,150,0.32);
}

/* محتوای وسط: آواتار + نام + زیرنویس + وضعیت — همیشه عمودی وسط‌چین صفحه */
.aat-voice-center {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* نوار پایین، به‌سبک تماس زنده‌ی Gemini: دوربین، اشتراک صفحه، ویژوالایزر، قطع/وصل میکروفن، پایان تماس */
.aat-voice-bottombar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-shrink: 0;
	padding-top: 18px;
}
.aat-voice-bars-pill {
	width: 66px; height: 50px;
	border-radius: 25px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	display: flex; align-items: center; justify-content: center;
}
.aat-voice-mic-btn.muted {
	background: rgba(255,92,124,0.18);
	color: #FF5C7C;
	border-color: rgba(255,92,124,0.32);
}

.aat-voice-call-end-btn {
	width: 50px; height: 50px; border-radius: 50%;
	background: #FF3B5C; border: none;
	box-shadow: 0 4px 16px rgba(255,59,92,0.5);
	color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.aat-voice-call-end-btn:hover { background: #E8324F; transform: scale(1.06); }

/* حالت «تاریخچه»: با زدن دکمه‌ی تاریخچه، تماس همچنان برقرار می‌ماند اما
   نمای تمام‌صفحه‌ی تماس کنار می‌رود تا پیام‌های متنیِ زیرش دیده و لمس
   شوند؛ فقط نوار بالا (که همان دکمه‌ی تاریخچه در آن است) شناور و قابل
   کلیک باقی می‌ماند تا کاربر بتواند دوباره به نمای تماس برگردد. */
.aat-voice-visualizer { transition: background-color 0.25s ease, opacity 0.25s ease; }
.aat-voice-visualizer.aat-voice-minimized {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	pointer-events: none;
}
.aat-voice-visualizer.aat-voice-minimized .aat-voice-topbar {
	pointer-events: all;
}
.aat-voice-visualizer.aat-voice-minimized .aat-voice-center,
.aat-voice-visualizer.aat-voice-minimized .aat-voice-bottombar {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.aat-voice-avatar-wrap {
	position: relative; width: 180px; height: 180px;
	display: flex; align-items: center; justify-content: center;
	will-change: transform;
}
.aat-voice-avatar {
	width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
	position: relative; z-index: 3; box-shadow: 0 0 0 3px rgba(0,255,150,0.4), 0 0 40px rgba(0,255,150,0.15);
}
.aat-voice-avatar-fallback {
	background: linear-gradient(135deg, #6C5CE7, #00C896);
	color: #fff; font-size: 52px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
/* هاله‌ی نرم پشت آواتار — شدتش با میزان صدای واقعی ایجنت هم‌گام می‌شود */
.aat-voice-glow {
	position: absolute; inset: -10px; border-radius: 50%; z-index: 0;
	background: radial-gradient(circle, rgba(0,255,150,0.55) 0%, rgba(0,255,150,0.0) 70%);
	filter: blur(14px);
	transform: scale(1); opacity: 0.5;
	pointer-events: none;
}
/* حلقه‌های هم‌مرکز ضربان‌دار — هرکدام با تأخیر/سرعت متفاوت برای جلوه‌ی «سونار» نرم */
.aat-voice-ring {
	position: absolute; inset: 0; border-radius: 50%;
	background: radial-gradient(circle, rgba(0,255,150,0.55) 0%, rgba(0,255,150,0.12) 55%, transparent 75%);
	transform: scale(1); opacity: 0.4; z-index: 1;
	pointer-events: none;
}
.aat-voice-ring-2 {
	background: radial-gradient(circle, transparent 45%, rgba(0,255,150,0.22) 60%, transparent 78%);
	opacity: 0.3;
}
.aat-voice-ring-3 {
	background: radial-gradient(circle, transparent 50%, rgba(0,255,150,0.14) 65%, transparent 82%);
	opacity: 0.22;
}
/* نفس‌کشیدنِ ملایمِ حالت آماده‌به‌کار (پیش از شروع صدا)، تا صفحه هرگز «مرده» به‌نظر نرسد */
@keyframes aatVoiceIdleBreathe {
	0%, 100% { transform: scale(1); opacity: 0.35; }
	50%      { transform: scale(1.05); opacity: 0.5; }
}
.aat-voice-ring.aat-voice-idle {
	animation: aatVoiceIdleBreathe 2.6s ease-in-out infinite;
}
.aat-voice-agent-name {
	font-size: 15px; font-weight: 700; color: #E8EAF2; opacity: 0.85;
}
.aat-voice-bars {
	display: flex; align-items: center; justify-content: center;
	gap: 3px; height: 26px;
}
.aat-voice-bars span {
	display: block; width: 3px; height: 26px; border-radius: 3px;
	background: linear-gradient(180deg, #4dffb0, #00FF96 45%, #12b381);
	box-shadow: 0 0 6px rgba(0,255,150,0.35);
	transform: scaleY(0.08); transform-origin: center;
	will-change: transform;
}
.aat-voice-call-status {
	font-size: 14px;
	font-weight: 700;
	color: #00FF96;
	text-align: center;
	max-width: 320px;
	line-height: 1.7;
	min-height: 0;
	transition: opacity 0.2s ease;
}
.aat-voice-call-status:empty { display: none; }
.aat-voice-call-status.aat-voice-call-status-error { color: #FF5C7C; }

/* ---------------------------------------------------------------
   زیرنویس زنده‌ی مکالمه — بازطراحی به‌سبک یک گفتگوی واقعی: هر پیام
   (کاربر/ایجنت) در یک حباب جدا و رنگ جدا باقی می‌ماند (نه فقط یک خط
   شناور که محو می‌شود)، دقیقاً مثل یک چت متنی معمولی ولی روی صحنه‌ی تماس.
   --------------------------------------------------------------- */
.aat-voice-captions {
	position: relative;
	width: 100%; max-width: 420px;
	max-height: 34vh;
	overflow-y: auto;
	display: flex; flex-direction: column;
	gap: 8px;
	padding: 6px 4px 10px;
	scrollbar-width: thin;
	mask-image: linear-gradient(180deg, transparent 0, #000 24px);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px);
}
.aat-voice-captions::-webkit-scrollbar { width: 4px; }
.aat-voice-captions::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.aat-voice-captions:empty { display: none; }

.aat-voice-caption-line {
	position: relative;
	max-width: 82%;
	font-size: 14px; line-height: 1.75;
	color: #FFFFFF;
	/* رفع باگ خوانایی روی موبایل: پس‌زمینه‌ی تماس گاهی خیلی روشن/متغیر است
	   (مخصوصاً وسط انیمیشن‌های رنگی) و رنگ متن سفیدِ ساده به‌تنهایی کافی
	   نبود؛ یک سایه‌ی تیره‌ی ظریف زیر متن، خوانایی را در هر پس‌زمینه‌ای تضمین می‌کند. */
	text-shadow: 0 1px 3px rgba(0,0,0,0.65);
	padding: 9px 15px;
	border-radius: 18px;
	white-space: normal;
	word-break: break-word;
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
	animation: aatCaptionIn 0.28s cubic-bezier(.2,.8,.3,1);
}
.aat-voice-caption-line b {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .02em;
	opacity: .8;
	margin-bottom: 2px;
}

/* حباب‌های ایجنت: سمت چپ، سبز/فیروزه‌ای (هم‌راستا با رنگ اصلی آواتار تماس) */
.aat-voice-caption-line.aat-voice-caption-agent {
	align-self: flex-start;
	border-bottom-left-radius: 5px;
	background: linear-gradient(135deg, rgba(0,255,150,0.22), rgba(0,196,140,0.1)), rgba(6,10,10,0.55);
	border: 1px solid rgba(0,255,150,0.3);
}
.aat-voice-caption-line.aat-voice-caption-agent b { color: #4dffb0; }

/* حباب‌های کاربر: سمت راست، بنفش (رنگ برند اصلی پلاگین) */
.aat-voice-caption-line.aat-voice-caption-user {
	align-self: flex-end;
	border-bottom-right-radius: 5px;
	background: linear-gradient(135deg, rgba(108,92,231,0.3), rgba(108,92,231,0.14)), rgba(6,10,10,0.55);
	border: 1px solid rgba(108,92,231,0.4);
	color: #FFFFFF;
}
.aat-voice-caption-line.aat-voice-caption-user b { color: #b0a8f7; }
.aat-voice-caption-line.aat-voice-caption-out {
	opacity: 0; transform: translateY(-6px) scale(0.98);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
@keyframes aatCaptionIn {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------
   Video Call Bar + Overlay (تماس تصویری با آواتار زنده — Anam)
   --------------------------------------------------------------- */
.aat-video-call-bar {
	padding: 8px 14px;
	border-bottom: 1px solid var(--aat-border);
	background: color-mix(in srgb, var(--aat-brand, #6C5CE7) 8%, transparent);
}
.aat-video-call-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: linear-gradient(135deg, var(--aat-brand, #6C5CE7), #00D2D3);
	color: #fff; border: none;
	padding: 8px 16px; border-radius: 20px; font-size: 13px;
	font-weight: 700; cursor: pointer; font-family: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aat-video-call-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in srgb, var(--aat-brand, #6C5CE7) 40%, transparent); }
.aat-video-call-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.aat-video-call-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000005;
	background: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.aat-video-call-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aat-video-call-status {
	position: absolute;
	top: calc(env(safe-area-inset-top, 0px) + 20px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 20px;
	max-width: 80%;
	text-align: center;
}
.aat-video-call-end {
	position: absolute;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	background: #FF5C7C;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 30px rgba(255,92,124,0.5);
	transition: transform 0.15s ease;
}
.aat-video-call-end:hover { transform: translateX(-50%) scale(1.08); }