/**
 * ویجت چت پشتیبانی.
 *
 * طراحی تخت و روشن، فارسی‌محور و راست‌به‌چپ.
 *
 * سه محدودیت که طراحی را شکل داده‌اند:
 *
 *  ۱. این استایل داخل قالب دلخواه کاربر اجرا می‌شود و ممکن است با CSS
 *     قالب تداخل کند. همه‌چیز زیر `#wpsd-root` محدود شده و ویژگی‌های
 *     ارثی (font, color, line-height) صریح تعریف می‌شوند. هیچ انتخابگر
 *     سراسری (`button`, `input`) استفاده نمی‌شود.
 *
 *  ۲. رنگ اصلی از پنل تنظیمات می‌آید (`--wpsd-primary`). پس رنگ‌های
 *     مشتق با color-mix از همان ساخته می‌شوند، نه hardcode.
 *
 *  ۳. ویجت همیشه روشن است. حالت تاریک خودکار حذف شد چون باعث می‌شد
 *     ظاهر روی گوشی مشتری با آنچه مدیر تنظیم کرده فرق کند.
 *
 * @package WPSupportDesk
 */

/* ==========================================================
   ۰. فونت
   ==========================================================

   وزیرمتن همراه خودِ افزونه ارسال می‌شود، نه از CDN و نه از قالب.
   دلیلش این است که ظاهر یک محصول تجاری نباید به قالبِ مشتری وابسته
   باشد؛ پیش از این اگر قالب وزیرمتن را بار نمی‌کرد، ویجت روی
   Tahoma می‌افتاد و تایپوگرافی در هر سایت فرق می‌کرد.

   سه وزن کافی است: ۴۰۰ برای متن، ۶۰۰ برای دکمه و عنوان فرم، ۷۰۰
   برای عنوان هدر. وزن Medium عمداً حذف شد تا ۵۰ کیلوبایت اضافه بار
   نشود؛ ۵۰۰ به ۶۰۰ نگاشت می‌شود.

   مسیرها نسبت به همین فایل‌اند، پس نیازی به تولید آدرس از PHP
   نیست و افزونه در هر زیرپوشه‌ای نصب شود کار می‌کند.

   `font-display: swap` یعنی متن بلافاصله با فونت جایگزین دیده
   می‌شود و با آمدن وزیرمتن جا می‌افتد — بهتر از متنِ نامرئی. */

@font-face {
	font-family: 'WPSD Vazirmatn';
	src: url('../fonts/vazirmatn-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WPSD Vazirmatn';
	src: url('../fonts/vazirmatn-600.woff2') format('woff2');
	/* بازه‌ی ۵۰۰ تا ۶۰۰ به همین فایل می‌رسد، پس وزن ۵۰۰ هم بدون
	   فایل اضافه پشتیبانی می‌شود. */
	font-weight: 500 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WPSD Vazirmatn';
	src: url('../fonts/vazirmatn-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================
   ۱. توکن‌ها
   ========================================================== */

#wpsd-root {
	/* ---------- رنگ برند ----------
	 *
	 * `--wpsd-primary` تنها رنگی است که از بیرون تغییر می‌کند و بقیه‌ی
	 * آبی‌ها با color-mix از آن مشتق می‌شوند، نه ثابت.
	 *
	 * جاوااسکریپت رنگِ انتخابیِ مدیر را به‌صورت متغیر درون‌خطی روی
	 * همین عنصر می‌نویسد و چون سبکِ درون‌خطی بر شیوه‌نامه اولویت
	 * دارد، مقدار زیر جایگزین می‌شود. واسطه‌ی `--wpsd-color` حذف شد؛
	 * حالا همین یک نام معتبر است. */
	--wpsd-primary: #1568f6;
	--wpsd-primary-hover: color-mix(in srgb, var(--wpsd-primary) 88%, #000000);
	--wpsd-primary-soft: color-mix(in srgb, var(--wpsd-primary) 12%, #ffffff);

	/* ---------- سطوح ---------- */
	--wpsd-bg: #ffffff;
	--wpsd-surface: #f5f6f8;
	--wpsd-surface-subtle: #fafbfc;

	/* ---------- متن ---------- */
	--wpsd-text: #252a34;
	--wpsd-text-secondary: #667085;
	--wpsd-text-muted: #98a2b3;

	/* ---------- خط ---------- */
	--wpsd-border: #e6e8ec;

	/* ---------- وضعیت ---------- */
	--wpsd-success: #22c55e;
	--wpsd-warning: #f59e0b;
	--wpsd-danger: #ef4444;

	/* ---------- گوشه ---------- */
	--wpsd-radius-sm: 8px;
	--wpsd-radius-md: 12px;
	--wpsd-radius-lg: 16px;
	--wpsd-radius-xl: 20px;
	--wpsd-radius-full: 999px;

	/* ---------- فاصله ---------- */
	--wpsd-space-1: 4px;
	--wpsd-space-2: 8px;
	--wpsd-space-3: 12px;
	--wpsd-space-4: 16px;
	--wpsd-space-5: 20px;
	--wpsd-space-6: 24px;
	--wpsd-space-8: 32px;

	/* ---------- سایه ---------- */
	--wpsd-shadow-window: 0 16px 48px rgba(16, 24, 40, 0.18);
	--wpsd-shadow-launcher: 0 8px 24px rgba(16, 24, 40, 0.18);

	/* ---------- تایپوگرافی ----------
	 *
	 * `WPSD Vazirmatn` نامِ اختصاصیِ نسخه‌ای است که خودِ افزونه بار
	 * می‌کند (بخش ۰). نام اختصاصی عمدی است: اگر `Vazirmatn` خالی
	 * می‌نوشتیم و قالبِ سایت هم نسخه‌ی دیگری از وزیرمتن با همان نام
	 * تعریف کرده بود، معلوم نبود کدام برنده می‌شود.
	 *
	 * بقیه‌ی زنجیره فقط پشتیبان است برای لحظه‌ی پیش از آمدن فونت. */
	--wpsd-font: 'WPSD Vazirmatn', Vazirmatn, IRANSansX, IRANSans, Tahoma,
		Arial, sans-serif;
	--wpsd-font-size-xs: 11px;
	--wpsd-font-size-sm: 13px;
	--wpsd-font-size-md: 14px;
	--wpsd-font-size-lg: 16px;
	/* ارتفاع خط فارسی بلندتر از لاتین است، وگرنه نقطه‌ها و زیرِ حروف
	   به هم می‌چسبند. */
	--wpsd-line-height: 1.8;
	--wpsd-line-height-tight: 1.7;

	/* ---------- حرکت ---------- */
	--wpsd-motion-fast: 0.16s;
	--wpsd-motion-normal: 0.2s;
	--wpsd-ease: cubic-bezier(0.32, 0.72, 0, 1);

	/* ---------- حالت‌ها ----------
	 *
	 * رنگ دکمه‌ی غیرفعال. نکته‌ی مهم: این رنگ فقط برای حالت واقعاً
	 * غیرفعال است. پیش‌تر دکمه‌ی «ثبت» همیشه آبیِ کم‌رنگ بود و کاربر
	 * فکر می‌کرد کار نمی‌کند — دکمه‌ی فعال باید رنگ کاملِ برند
	 * داشته باشد. */
	--wpsd-primary-disabled: color-mix(in srgb, var(--wpsd-primary) 42%, #ffffff);
	/* حلقه‌ی تمرکز برای ورودی و دکمه. */
	--wpsd-focus-ring: color-mix(in srgb, var(--wpsd-primary) 18%, transparent);
	/* سطح بسیار ملایمِ اعلان — نه هشدارِ قرمز، فقط اطلاع‌رسانی. */
	--wpsd-warning-surface: #fff8eb;
	--wpsd-warning-text: #9a6700;
	--wpsd-danger-surface: color-mix(in srgb, var(--wpsd-danger) 8%, #ffffff);
	/* پس‌زمینه‌ی ناحیه‌ی گفتگو — سفیدِ کمی گرم‌تر از سفیدِ خالص تا
	   حباب‌های خاکستری از آن جدا شوند. */
	--wpsd-canvas: #fcfcfd;

	position: fixed;
	z-index: 999999;
	bottom: var(--wpsd-space-5);
	font-family: var(--wpsd-font);
	font-size: var(--wpsd-font-size-md);
	line-height: var(--wpsd-line-height);
	color: var(--wpsd-text);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
}

#wpsd-root.wpsd-pos-left {
	left: 20px;
	right: auto;
}

#wpsd-root.wpsd-pos-right {
	right: 20px;
	left: auto;
}

/* بازنشانی تهاجمی.
 *
 * ویجت داخل قالب دلخواه کاربر اجرا می‌شود. قالب‌های تجاری (مثل
 * قالب‌های فروشگاهی فارسی) معمولاً قواعدی با ویژگی بالا روی
 * `div`, `button`, `input`, `p` دارند که ظاهر ویجت را می‌شکنند:
 * حاشیه‌ی ناخواسته، گوشه‌ی تیز، سایه، رنگ پس‌زمینه.
 *
 * `all: unset` روی عناصر فرم امن نیست (رفتار بومی را هم پاک می‌کند)
 * پس فقط ویژگی‌های ظاهری پرخطر را صفر می‌کنیم. */
#wpsd-root *,
#wpsd-root *::before,
#wpsd-root *::after {
	box-sizing: border-box;
}

/* ==========================================================
   ۱.۱ سامانه‌ی آیکون
   ==========================================================

   قاعده‌ی واحد برای همه‌ی آیکون‌های ویجت:

     • خطی (stroke)، نه توپر
     • سرِ خط و اتصال گرد
     • ضخامت یکسان ۱.۸
     • رنگ از `currentColor` می‌آید، پس آیکون رنگ متنِ والدش را
       می‌گیرد و در هدر سفید و در نوار نوشتن خاکستری می‌شود بدون
       آنکه قاعده‌ی جداگانه لازم باشد

   استثنا فقط جایی مجاز است که شکل توپر معنای متفاوتی دارد یا در
   اندازه‌ی کوچک خوانا نمی‌ماند — مثل تیک خوانده‌شدن. آن موارد
   `fill` را روی خودِ مسیر اعلام می‌کنند، نه اینجا.

   نکته‌ی مهم درباره‌ی `fill: none`:
   قالب‌های فروشگاهی معمولاً `svg { width: 100% }` دارند که آیکون را
   به مربعی بی‌شکل تبدیل می‌کند — همان مربع سفیدی که در هدر دیده
   می‌شد. ابعاد صریح جلوی آن را می‌گیرد. و اگر اینجا
   `fill: currentColor` بود، آیکون‌های خطی به لکه‌ی توپر تبدیل
   می‌شدند. */
#wpsd-root svg {
	display: block;
	width: 20px;
	height: 20px;
	max-width: none;
	max-height: none;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
	vertical-align: middle;
}

#wpsd-root div,
#wpsd-root p,
#wpsd-root span,
#wpsd-root button,
#wpsd-root input,
#wpsd-root textarea,
#wpsd-root select,
#wpsd-root label,
#wpsd-root a {
	margin: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	min-height: 0;
	min-width: 0;
	float: none;
}

/* بازنشانی کنترل‌های بومی.
 *
 * قالب‌های تجاری قواعد بسیار عمومی روی دکمه و ورودی می‌گذارند. نمونه‌ی
 * واقعی از قالب وودمارت:
 *
 *     :is(.btn, .button, button, [type="submit"], [type="button"]) {
 *         background-color: var(--btn-bgcolor, #F3F3F3);
 *         min-height: …; padding: …; border-radius: …;
 *     }
 *
 * ویژگی آن ۰-۱-۰ است — دقیقاً برابر با `.wpsd-header-btn` — پس
 * چون دیرتر بارگذاری می‌شود برنده می‌شد و دکمه‌ها پس‌زمینه، ارتفاع و
 * گوشه‌ی قالب را می‌گرفتند.
 *
 * دو لایه جلویش را می‌گیرد:
 *
 *  ۱. همین بازنشانی که مقادیر ارثیِ قالب را خنثی می‌کند.
 *  ۲. قواعد مؤلفه‌ها که همگی با `#wpsd-root` نوشته شده‌اند (۱-۱-۰) و
 *     ظاهر نهایی را تعیین می‌کنند.
 *
 * ترتیب مهم است: این بلوک پیش از قواعد مؤلفه‌ها می‌آید، پس مقادیر
 * `initial` اینجا هرگز روی طراحیِ خودِ ویجت نمی‌نشیند. */
#wpsd-root button,
#wpsd-root input,
#wpsd-root textarea,
#wpsd-root select {
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	outline: none;
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 0;
	max-width: none;
	line-height: normal;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* عرض عمداً بازنشانی نمی‌شود: فیلدهای فرم باید تمام عرض بگیرند و
   `width: auto` در بازنشانی، آن قاعده را خنثی می‌کرد. */

/* حالت‌های تعاملی قالب هم باید خنثی شوند، وگرنه رنگ hover/focus
   قالب روی دکمه‌های ویجت ظاهر می‌شود. */
#wpsd-root button:hover,
#wpsd-root button:focus,
#wpsd-root button:active {
	color: inherit;
	box-shadow: none;
	outline: none;
	text-decoration: none;
}

#wpsd-root p {
	padding: 0;
}

/* ==========================================================
   ۲. دکمه‌ی شناور
   ========================================================== */

/* موقعیت‌ها بعد از بازنشانی دوباره اعلام می‌شوند، چون آن بازنشانی
   `position: static` می‌گذارد و بدون این‌ها نشان شمارنده و پنجره
   جای درست خود را گم می‌کنند. */

/* دکمه‌ی گردِ ساده با رنگ برند — مطابق نمونه.
   نسخه‌ی قبلی کپسولی با گرادیان بنفش بود که با هیچ‌جای دیگر ویجت
   هم‌خوان نبود. */
#wpsd-root .wpsd-launcher {
	position: relative;
	width: 56px;
	height: 56px;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wpsd-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wpsd-font);
	box-shadow: var(--wpsd-shadow-launcher);
	transition: transform var(--wpsd-motion-normal) var(--wpsd-ease),
		box-shadow var(--wpsd-motion-normal) var(--wpsd-ease),
		opacity var(--wpsd-motion-fast) var(--wpsd-ease);
}

/* متن کنار آیکون حذف شد: در نمونه دکمه فقط آیکون دارد. برچسب برای
   صفحه‌خوان‌ها از aria-label می‌آید، پس این عنصر پنهان می‌شود بدون
   آنکه از DOM یا جاوااسکریپت حذف شود. */
#wpsd-root .wpsd-launcher-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#wpsd-root .wpsd-launcher:hover {
	transform: scale(1.04);
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.22);
}

#wpsd-root .wpsd-launcher:active {
	transform: scale(0.96);
}

/* پنهان‌شدن دکمه هنگام باز بودن پنجره.
 *
 * پیش‌تر دکمه‌ی شناور زیر پنجره باقی می‌ماند و دو کنترل هم‌زمان دیده
 * می‌شد. بستن از دکمه‌ی ✕ در هدر انجام می‌شود، پس دکمه‌ی دوم فقط
 * شلوغی است.
 *
 * `visibility` به‌جای `display: none` تا محو شدن نرم باشد؛
 * `pointer-events` هم قطع می‌شود وگرنه دکمه‌ی نامرئی همچنان کلیک
 * می‌گرفت. */
#wpsd-root.wpsd-open .wpsd-launcher {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.9);
	pointer-events: none;
	transition: opacity var(--wpsd-motion-fast) var(--wpsd-ease),
		transform var(--wpsd-motion-fast) var(--wpsd-ease),
		visibility var(--wpsd-motion-fast);
}

#wpsd-root .wpsd-launcher:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wpsd-primary) 50%, transparent);
	outline-offset: 3px;
}

#wpsd-root .wpsd-launcher svg {
	width: 28px;
	height: 28px;
	pointer-events: none;
}

/* نشان سبز آنلاین روی دکمه — فقط وقتی سرور گفته پشتیبانی آنلاین است. */
#wpsd-root .wpsd-launcher-online {
	position: absolute;
	top: 3px;
	inset-inline-end: 3px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wpsd-success);
	border: 2px solid #fff;
}

#wpsd-root .wpsd-launcher-online[hidden] {
	display: none;
}

#wpsd-root .wpsd-badge {
	position: absolute;
	top: -3px;
	inset-inline-end: -3px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--wpsd-radius-full);
	background: var(--wpsd-danger);
	color: #fff;
	font-size: var(--wpsd-font-size-xs);
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border: 2px solid var(--wpsd-bg);
	box-shadow: 0 3px 10px color-mix(in srgb, var(--wpsd-danger) 40%, transparent);
	font-variant-numeric: tabular-nums;
}

#wpsd-root .wpsd-badge[hidden] {
	display: none;
}

/* ==========================================================
   ۳. پنجره
   ========================================================== */

#wpsd-root .wpsd-window {
	position: absolute;
	bottom: 76px;
	width: 400px;
	/* ریشه ۲۰ پیکسل از لبه فاصله دارد، پس عرض امن ۲۰ + ۲۰ کمتر از
	   عرض دید است تا لبه‌ی مقابل هم داخل صفحه بماند. */
	max-width: calc(100vw - 40px);
	/* dvh نه vh: روی موبایل نوار آدرس مرورگر ارتفاع واقعی را کم
	   می‌کند و با vh پنجره از صفحه بیرون می‌زد. */
	height: min(680px, calc(100dvh - 32px));
	/* پس‌زمینه‌ی مات، نه شیشه‌ای.
	   شیشه روی پس‌زمینه‌های شلوغِ فروشگاه (بنر طلایی، عکس محصول)
	   متن را ناخوانا می‌کرد — همان چیزی که در اسکرین‌شات دیده شد. */
	background: var(--wpsd-bg);
	/* خط بسیار کم‌رنگ دور پنجره: روی پس‌زمینه‌ی روشنِ سایت، سایه
	   به‌تنهایی لبه را مشخص نمی‌کند. */
	border: 1px solid rgba(16, 24, 40, 0.06);
	border-radius: var(--wpsd-radius-xl);
	box-shadow: var(--wpsd-shadow-window);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.985);
	transform-origin: bottom center;
	transition: opacity var(--wpsd-motion-normal) var(--wpsd-ease),
		transform var(--wpsd-motion-normal) var(--wpsd-ease),
		visibility var(--wpsd-motion-normal);
}

/* لنگر افقی پنجره.
 *
 * انتخابگر باید `#wpsd-root.wpsd-pos-left` باشد (بدون فاصله): کلاس
 * موقعیت روی خودِ ریشه می‌نشیند، نه روی عنصری داخل آن. با فاصله،
 * انتخابگر دنبال `.wpsd-pos-left`ی می‌گشت که فرزند ریشه باشد و به
 * هیچ عنصری نمی‌خورد؛ نتیجه این بود که پنجره نه left می‌گرفت نه
 * right و از لبه‌ی چپ صفحه بیرون می‌زد.
 *
 * سمت مقابل هم صریح `auto` می‌شود تا مقدار قبلی باقی نماند. */
#wpsd-root.wpsd-pos-left .wpsd-window {
	left: 0;
	right: auto;
}

#wpsd-root.wpsd-pos-right .wpsd-window {
	right: 0;
	left: auto;
}

#wpsd-root .wpsd-window.wpsd-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* روی صفحه‌های کوچک، پنجره تقریباً تمام‌صفحه می‌شود.
 *
 * ارتفاع با dvh تعیین می‌شود نه vh: با باز شدن کیبورد موبایل، vh
 * ثابت می‌ماند و نوار نوشتن زیر کیبورد گم می‌شود، ولی dvh با
 * ناحیه‌ی واقعاً دیده‌شده کوچک می‌شود و نوار نوشتن در دسترس
 * می‌ماند. برای مرورگرهای قدیمی‌تر vh به‌عنوان پشتیبان می‌ماند. */
@media (max-width: 480px) {
	#wpsd-root {
		bottom: 10px;
	}

	#wpsd-root.wpsd-pos-left {
		left: 10px;
	}

	#wpsd-root.wpsd-pos-right {
		right: 10px;
	}

	/* روی موبایل پنجره از هر دو لبه ۱۰ پیکسل فاصله می‌گیرد و عرض
	   خودش از همان دو لنگر درمی‌آید.
	 *
	 * `width: auto` لازم است: قواعد دسکتاپ عرض ثابت ۴۰۰ پیکسل
	 * می‌دهند و اگر اینجا خنثی نشود، با دو لنگرِ left/right درگیر
	 * می‌شود. لنگرها هم صریح left/right نوشته شده‌اند نه
	 * inset-inline، چون قاعده‌ی موقعیتِ ریشه (چپ یا راست) نباید در
	 * حالت تمام‌صفحه اثری بگذارد. */
	#wpsd-root .wpsd-window,
	#wpsd-root.wpsd-pos-left .wpsd-window,
	#wpsd-root.wpsd-pos-right .wpsd-window {
		position: fixed;
		/* ناحیه‌ی امنِ پایین (نوار خانه‌ی آیفون) به فاصله اضافه
		   می‌شود، وگرنه نوار نوشتن زیر آن پنهان می‌ماند. */
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
		height: calc(100vh - 20px);
		height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
		max-height: none;
		border-radius: var(--wpsd-radius-xl);
	}

	/* روی صفحه‌ی باریک، کارت مشخصات عرض ثابت ۲۸۰ را رها می‌کند تا
	   از حباب بیرون نزند. */
	#wpsd-root .wpsd-intro {
		width: auto;
	}
}

/* ==========================================================
   ۴. سربرگ
   ========================================================== */

#wpsd-root .wpsd-header {
	display: flex;
	align-items: center;
	gap: var(--wpsd-space-3);
	height: 64px;
	padding: 0 var(--wpsd-space-4);
	background: var(--wpsd-primary);
	color: #fff;
	flex: 0 0 auto;
}

/* آواتار هدر — بزرگ‌ترین عضو خانواده‌ی آواتارها.
 *
 * هر سه آواتار (هدر، کنار پیام، دکمه‌ی شناور) یک زبان بصری دارند:
 * دایره‌ی کامل، آیکون خطیِ سفید، و همان نشان پشتیبان. تفاوتشان فقط
 * اندازه و پس‌زمینه است. پیش‌تر هرکدام شکل و آیکون متفاوتی داشتند و
 * مثل سه محصول جدا دیده می‌شدند. */
#wpsd-root .wpsd-header-avatar {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	overflow: visible;
	color: #fff;
}

#wpsd-root .wpsd-header-avatar svg {
	width: 21px;
	height: 21px;
}

#wpsd-root .wpsd-header-logo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

#wpsd-root .wpsd-avatar-dot {
	position: absolute;
	bottom: -1px;
	inset-inline-start: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wpsd-success);
	border: 2px solid var(--wpsd-primary);
}

#wpsd-root .wpsd-avatar-dot[hidden] {
	display: none;
}

#wpsd-root .wpsd-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
	flex: 0 0 auto;
}

#wpsd-root .wpsd-header-info {
	flex: 1 1 auto;
	min-width: 0;
}

#wpsd-root .wpsd-header-title {
	margin: 0;
	font-size: var(--wpsd-font-size-lg);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpsd-root .wpsd-header-status {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 1px;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

#wpsd-root .wpsd-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	flex: 0 0 auto;
}

#wpsd-root .wpsd-dot.wpsd-online {
	background: var(--wpsd-success);
}

/* دکمه‌ی بستن: فقط ✕ سفید.
 *
 * ناحیه‌ی کلیک ۳۶ پیکسل است ولی هیچ پس‌زمینه‌ای ندارد — در
 * اسکرین‌شات، پس‌زمینه‌ی نیمه‌شفاف مثل یک مربع سفید دیده می‌شد. */
#wpsd-root .wpsd-header-btn {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex: 0 0 auto;
	opacity: 0.92;
	transition: opacity var(--wpsd-motion-fast) var(--wpsd-ease), transform var(--wpsd-motion-fast) var(--wpsd-ease);
}

#wpsd-root .wpsd-header-btn:hover {
	background: rgba(255, 255, 255, 0.14);
	opacity: 1;
}

#wpsd-root .wpsd-header-btn:active {
	transform: scale(0.92);
}

#wpsd-root .wpsd-header-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
	opacity: 1;
}

#wpsd-root .wpsd-header-btn svg {
	width: 19px;
	height: 19px;
	pointer-events: none;
}

/* ==========================================================
   ۵. بدنه
   ========================================================== */

#wpsd-root .wpsd-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wpsd-space-5) var(--wpsd-space-4) var(--wpsd-space-4);
	display: flex;
	flex-direction: column;
	/* فاصله‌ی پایه = تغییر فرستنده.
	 *
	 * پیام‌های پشت‌سرهمِ یک فرستنده با کلاس `wpsd-row-continued` این
	 * فاصله را کم می‌کنند (به ۶ پیکسل). تنها منبع فاصله همین است؛
	 * margin روی خودِ پیام‌ها حذف شد تا دو فاصله روی هم جمع نشوند. */
	gap: 14px;
	/* سفیدِ کمی گرم‌تر از سفیدِ خالص، تا حباب خاکستریِ پشتیبان و
	   کارت فرم از پس‌زمینه جدا شوند بدون آنکه ناحیه کدر شود. */
	background: var(--wpsd-canvas);
	-webkit-overflow-scrolling: touch;
}

#wpsd-root .wpsd-body::-webkit-scrollbar {
	width: 8px;
}

#wpsd-root .wpsd-body::-webkit-scrollbar-thumb {
	background: var(--wpsd-text-muted);
	border-radius: var(--wpsd-radius-full);
	border: 2px solid transparent;
	background-clip: content-box;
}

/* ==========================================================
   ۶. پیام‌ها
   ========================================================== */

#wpsd-root .wpsd-msg {
	display: flex;
	flex-direction: column;
	max-width: 78%;
	animation: wpsd-pop var(--wpsd-motion-normal) var(--wpsd-ease);
}

@keyframes wpsd-pop {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* پیام مشتری سمت شروع (راست در RTL)، پیام پشتیبان سمت پایان.
   از margin استفاده می‌کنیم نه align-self: مقادیر flex-* در ستون
   جهت نوشتار را نمی‌فهمند و در RTL جای حباب‌ها عوض می‌شود. */
#wpsd-root .wpsd-msg-mine {
	margin-inline-start: auto;
	align-items: flex-end;
}

#wpsd-root .wpsd-msg-theirs {
	margin-inline-end: auto;
	align-items: flex-start;
}

/* ردیف پیام پشتیبان: آواتار + حباب کنار هم. */
#wpsd-root .wpsd-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 92%;
	margin-inline-end: auto;
}

#wpsd-root .wpsd-row .wpsd-msg {
	max-width: 100%;
}

/* آواتار کنار پیام — عضو کوچک‌ترِ همان خانواده‌ی آواتار هدر. */
#wpsd-root .wpsd-msg-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wpsd-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-top: 2px;
}

#wpsd-root .wpsd-msg-avatar svg {
	width: 18px;
	height: 18px;
}

/* گروه‌بندی پیام‌های پشت‌سرهم.
 *
 * وقتی چند پیام از یک فرستنده پشت‌سرهم می‌آید، فقط ردیف اول آواتار
 * نشان می‌دهد و فاصله‌ی عمودی کم می‌شود. این کار سلسله‌مراتب گفتگو
 * را واضح می‌کند: چشم می‌فهمد کجا نوبت عوض شده.
 *
 * `visibility: hidden` نه `display: none` — جای آواتار باید حفظ
 * شود وگرنه حباب‌های ادامه‌دار به لبه می‌چسبند و تراز هم می‌ریزد. */
#wpsd-root .wpsd-row-continued .wpsd-msg-avatar {
	visibility: hidden;
}

/* فاصله‌ی کمترِ پیام‌های هم‌فرستنده.
   فاصله‌ی پایه‌ی ۱۴ پیکسل از `gap` بدنه می‌آید؛ این قاعده اختلاف
   را با margin منفی جبران می‌کند تا به ۶ پیکسل برسد. */
#wpsd-root .wpsd-row-continued,
#wpsd-root .wpsd-msg-continued {
	margin-top: -8px;
}

#wpsd-root .wpsd-bubble {
	padding: 10px 14px;
	/* گوشه‌ها گرد، ولی گوشه‌ی نزدیک به فرستنده کمی تیزتر می‌ماند تا
	   حباب جهت‌دار به نظر برسد — بدون دنباله‌ی اغراق‌شده. */
	border-radius: var(--wpsd-radius-lg);
	font-size: var(--wpsd-font-size-md);
	font-weight: 400;
	line-height: var(--wpsd-line-height);
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	max-width: 100%;
}

/* رنگ حباب و گوشه‌ی تیزِ سمت فرستنده.
 *
 * قبلاً هر کدام در دو قاعده‌ی جدا بودند؛ یکجا شدند تا تعریف حباب
 * در یک نقطه بماند.
 *
 * گوشه‌ها با ویژگی‌های منطقی نوشته شده‌اند، پس در راست‌به‌چپ خودشان
 * جابه‌جا می‌شوند و قاعده‌ی جداگانه لازم ندارند. */
#wpsd-root .wpsd-msg-mine .wpsd-bubble {
	background: var(--wpsd-primary);
	color: #fff;
	border-end-end-radius: 6px;
}

#wpsd-root .wpsd-msg-theirs .wpsd-bubble {
	background: var(--wpsd-surface);
	color: var(--wpsd-text);
	border-end-start-radius: 6px;
}

/* متن پررنگ درون پیام خوش‌آمد.
 *
 * تنها تگی که از متن مدیر ساخته می‌شود <strong> است و آن هم نه با
 * innerHTML بلکه با createElement — پس متن مدیر هرگز به‌عنوان HTML
 * تفسیر نمی‌شود. */
#wpsd-root .wpsd-bubble strong {
	font-weight: 700;
}

/* ردیف فراداده — زمان و وضعیت تحویل.
 *
 * عمداً کم‌رنگ و کوچک است: اطلاعات ثانویه نباید با خودِ پیام رقابت
 * کند. پیش‌تر با نام فرستنده روی هر حباب و تیک پررنگ، بیشتر شبیه
 * خروجی اشکال‌زدایی بود تا رابط کاربری. */
#wpsd-root .wpsd-msg-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding-inline: 2px;
	font-size: var(--wpsd-font-size-xs);
	color: var(--wpsd-text-muted);
	font-variant-numeric: tabular-nums;
}

#wpsd-root .wpsd-msg-time {
	font-variant-numeric: tabular-nums;
}

#wpsd-root .wpsd-msg-mine .wpsd-msg-meta {
	justify-content: flex-end;
}

#wpsd-root .wpsd-msg-theirs .wpsd-msg-meta {
	justify-content: flex-start;
}

#wpsd-root .wpsd-sender {
	font-weight: 700;
	color: var(--wpsd-text-secondary);
}

#wpsd-root .wpsd-tick {
	display: inline-flex;
	opacity: 0.55;
}

#wpsd-root .wpsd-tick svg {
	width: 14px;
	height: 14px;
}

#wpsd-root .wpsd-tick.wpsd-read {
	opacity: 1;
	color: var(--wpsd-primary);
}

#wpsd-root .wpsd-quote {
	/* بلوک با عرض کامل حباب، نه بیشتر: بدون این، نقل‌قول طولانی
	   حباب را از عرض مجاز بیرون می‌کشد. */
	display: block;
	max-width: 100%;
	padding: 6px 10px;
	margin-bottom: 6px;
	border-radius: var(--wpsd-radius-sm);
	border-inline-start: 2.5px solid currentColor;
	background: rgba(0, 0, 0, 0.06);
	font-size: var(--wpsd-font-size-xs);
	line-height: 1.55;
	opacity: 0.85;
	max-height: 3.4em;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

#wpsd-root .wpsd-msg-mine .wpsd-quote {
	background: rgba(255, 255, 255, 0.22);
}

/* رویداد سیستمی — کپسول وسط */
#wpsd-root .wpsd-event {
	align-self: center;
	max-width: 88%;
	margin: 10px auto;
	padding: 6px 13px;
	border-radius: var(--wpsd-radius-full);
	background: var(--wpsd-surface);
	color: var(--wpsd-text-secondary);
	font-size: var(--wpsd-font-size-xs);
	text-align: center;
}

#wpsd-root .wpsd-msg-pending .wpsd-bubble {
	opacity: 0.62;
}

#wpsd-root .wpsd-msg-failed .wpsd-bubble {
	background: color-mix(in srgb, var(--wpsd-danger) 10%, transparent);
	color: var(--wpsd-danger);
	box-shadow: none;
}

#wpsd-root .wpsd-retry {
	border: 0;
	background: none;
	color: var(--wpsd-danger);
	font-family: inherit;
	font-size: var(--wpsd-font-size-xs);
	font-weight: 600;
	cursor: pointer;
	padding: 2px 0;
	text-decoration: underline;
}

/* ==========================================================
   ۷. فرم شروع گفتگو
   ========================================================== */

/* فرم داخل حباب گفتگو می‌نشیند، نه روی صفحه‌ای جدا.
 *
 * در نمونه، مشخصات مثل یک پیام از طرف پشتیبان نمایش داده می‌شود:
 * همان آواتار، همان جای حباب، فقط محتوایش ورودی است. این باعث
 * می‌شود گفتگو از همان لحظه‌ی اول گفتگو به نظر برسد نه فرم ثبت‌نام. */
/* کارت مشخصات — بخشی از گفتگو، نه فرمِ وردپرسی.
 *
 * عرضش عمداً از حباب متنی کمتر است تا مثل کارتی درون گفتگو دیده
 * شود، نه صفحه‌ای که کل پهنا را گرفته. */
#wpsd-root .wpsd-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 280px;
	max-width: 100%;
	padding: var(--wpsd-space-4);
	border-radius: var(--wpsd-radius-lg);
	background: var(--wpsd-surface);
}

#wpsd-root .wpsd-intro-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
	font-size: var(--wpsd-font-size-sm);
	font-weight: 600;
	color: var(--wpsd-text);
}

/* نشان راهنمای کوچک کنار عنوان فرم — مطابق نمونه. */
#wpsd-root .wpsd-intro-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	color: var(--wpsd-text-muted);
	flex: 0 0 auto;
}

#wpsd-root .wpsd-intro-badge svg {
	width: 15px;
	height: 15px;
}

#wpsd-root .wpsd-field {
	margin-bottom: 0;
}

/* برچسب بالای ورودی در فرمِ حبابی نمایش داده نمی‌شود؛ جایش را
   placeholder می‌گیرد — مطابق نمونه. برای صفحه‌خوان‌ها باقی می‌ماند. */
#wpsd-root .wpsd-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#wpsd-root .wpsd-required {
	color: var(--wpsd-danger);
	margin-inline-start: 2px;
}

/* ورودی‌ها تعریف پایه را می‌گیرند (بخش بعد) — اینجا تکرار نمی‌شود
   تا دو قاعده روی هم ننشینند. */

/* دکمه‌ی ثبت تعریف پایه‌ی `.wpsd-btn` را می‌گیرد؛ فقط اندازه‌ی
   آیکون فلش اینجا تنظیم می‌شود. */
#wpsd-root .wpsd-intro .wpsd-btn svg {
	width: 15px;
	height: 15px;
}

/* ورودی‌ها.
 *
 * قبلاً دو دسته قاعده روی هم می‌نشستند: یکی اینجا با پس‌زمینه‌ی
 * خاکستری و حاشیه‌ی نامرئی، و یکی داخل `.wpsd-intro` که همان را با
 * سفید و حاشیه‌دار خنثی می‌کرد. چون ورودی‌ها فقط داخل کارت مشخصات
 * ظاهر می‌شوند، همان یک تعریف درست اینجا می‌آید و قاعده‌ی تکراری
 * حذف شد. */
#wpsd-root .wpsd-input,
#wpsd-root .wpsd-select {
	width: 100%;
	height: 44px;
	padding-inline: var(--wpsd-space-3);
	padding-block: 0;
	border: 1px solid var(--wpsd-border);
	border-radius: 10px;
	background: var(--wpsd-bg);
	color: var(--wpsd-text);
	font-family: inherit;
	font-size: var(--wpsd-font-size-md);
	line-height: 1.6;
	direction: rtl;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--wpsd-motion-fast) var(--wpsd-ease),
		box-shadow var(--wpsd-motion-fast) var(--wpsd-ease);
}

/* حالت اشاره‌ی موس — فقط وقتی نه متمرکز است نه غیرفعال. */
#wpsd-root .wpsd-input:hover:not(:focus):not(:disabled),
#wpsd-root .wpsd-select:hover:not(:focus):not(:disabled) {
	border-color: var(--wpsd-text-muted);
}

/* خطا — کلاس را جاوااسکریپت هنگام اعتبارسنجی می‌گذارد. */
#wpsd-root .wpsd-input-error,
#wpsd-root .wpsd-input-error:hover,
#wpsd-root .wpsd-input-error:focus {
	border-color: var(--wpsd-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpsd-danger) 14%, transparent);
}

#wpsd-root .wpsd-input:disabled,
#wpsd-root .wpsd-select:disabled {
	background: var(--wpsd-surface);
	color: var(--wpsd-text-muted);
	cursor: not-allowed;
}

/* تمرکز — حاشیه‌ی رنگ برند به‌علاوه‌ی حلقه‌ی ملایم. */
#wpsd-root .wpsd-input:focus,
#wpsd-root .wpsd-select:focus {
	outline: none;
	border-color: var(--wpsd-primary);
	box-shadow: 0 0 0 3px var(--wpsd-focus-ring);
}

#wpsd-root .wpsd-input::placeholder,
#wpsd-root .wpsd-textarea::placeholder {
	color: var(--wpsd-text-muted);
	opacity: 1;
}

/* ایمیل و شماره تلفن چپ‌به‌راست تایپ می‌شوند، ولی در چیدمان
   راست‌به‌چپ باید از لبه‌ی راست شروع شوند — پس جهت عوض می‌شود نه
   تراز. `text-align: left` قبلی متن را به لبه‌ی اشتباه می‌چسباند. */
#wpsd-root .wpsd-input[dir='ltr'] {
	direction: ltr;
	text-align: right;
}

/* فلش سفارشی برای select، چون appearance حذف شده */
#wpsd-root .wpsd-select {
	padding-inline-end: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 13px center;
	background-size: 15px;
}

#wpsd-root .wpsd-error {
	margin-top: 6px;
	font-size: var(--wpsd-font-size-xs);
	color: var(--wpsd-danger);
}

/* دکمه‌ی اصلی فرم.
 *
 * گوشه‌ی کپسولی و سایه‌ی درخشان قبلی حذف شدند: در نمونه دکمه
 * مستطیلِ کم‌گوشه و تخت است. */
/* دکمه‌ی اصلی فرم.
 *
 * رنگِ کاملِ برند در حالت فعال. این نکته مهم است: نسخه‌ی قبلی همیشه
 * آبیِ کم‌رنگ بود و کاربر فکر می‌کرد دکمه غیرفعال است. رنگِ ملایم
 * فقط به حالت `:disabled` تعلق دارد. */
#wpsd-root .wpsd-btn {
	width: 100%;
	height: 44px;
	padding: 0 var(--wpsd-space-4);
	border: 0;
	border-radius: 10px;
	background: var(--wpsd-primary);
	color: #fff;
	font-family: inherit;
	font-size: var(--wpsd-font-size-md);
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpsd-space-2);
	transition: background var(--wpsd-motion-fast) var(--wpsd-ease),
		transform var(--wpsd-motion-fast) var(--wpsd-ease);
}

#wpsd-root .wpsd-btn:hover:not(:disabled) {
	background: var(--wpsd-primary-hover);
}

#wpsd-root .wpsd-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--wpsd-focus-ring);
}

#wpsd-root .wpsd-btn:active:not(:disabled) {
	transform: scale(0.98);
}

/* غیرفعال — تنها جایی که آبیِ کم‌رنگ مجاز است. */
#wpsd-root .wpsd-btn:disabled {
	background: var(--wpsd-primary-disabled);
	cursor: not-allowed;
	box-shadow: none;
}

/* ==========================================================
   ۸. نوار نوشتن
   ========================================================== */

#wpsd-root .wpsd-footer {
	flex: 0 0 auto;
	padding: var(--wpsd-space-3);
	border-top: 1px solid var(--wpsd-border);
	background: var(--wpsd-bg);
}

#wpsd-root .wpsd-compose {
	display: flex;
	align-items: center;
	gap: var(--wpsd-space-2);
}

/* پوسته‌ی یکپارچه‌ی نوشتن.
 *
 * پیوست، متن و ارسال داخل یک کادر می‌نشینند تا مثل یک کنترل واحد
 * دیده شوند. پیش‌تر دکمه‌ی ارسال بیرون کادر بود و نوار نوشتن مثل
 * سه تکه‌ی جدا از هم به نظر می‌رسید.
 *
 * `align-items: flex-end` است نه center: با چندخطی‌شدن متن، دکمه‌ها
 * باید کف کادر بمانند نه وسطِ ارتفاعِ رشدکرده. */
#wpsd-root .wpsd-compose-field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	display: flex;
	align-items: flex-end;
	gap: var(--wpsd-space-1);
	padding: 4px;
	padding-inline-start: var(--wpsd-space-3);
	border: 1px solid var(--wpsd-border);
	border-radius: var(--wpsd-radius-lg);
	background: var(--wpsd-bg);
	transition: border-color var(--wpsd-motion-fast) var(--wpsd-ease),
		box-shadow var(--wpsd-motion-fast) var(--wpsd-ease);
}

#wpsd-root .wpsd-compose-field:focus-within {
	border-color: var(--wpsd-primary);
	box-shadow: 0 0 0 3px var(--wpsd-focus-ring);
}

#wpsd-root .wpsd-compose-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wpsd-text);
	font-family: inherit;
	font-size: var(--wpsd-font-size-md);
	line-height: 1.6;
	resize: none;
	max-height: 120px;
	/* بدون این، textarea یک‌خطی بلندتر از کادر می‌شود و متن
	   وسط‌چین به نظر نمی‌رسد. */
	height: 22px;
}

#wpsd-root .wpsd-compose-input:focus {
	outline: none;
}

#wpsd-root .wpsd-compose-input::placeholder {
	color: var(--wpsd-text-muted);
}

#wpsd-root .wpsd-send,
#wpsd-root .wpsd-attach {
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform var(--wpsd-motion-fast) var(--wpsd-ease), opacity var(--wpsd-motion-fast) var(--wpsd-ease),
		background var(--wpsd-motion-fast) var(--wpsd-ease);
}

/* دکمه‌ی ارسال: مربعِ نرم‌گوشه با آیکون سفید — مطابق نمونه.
 *
 * ابعاد و گردی صریح تکرار می‌شوند تا قاعده‌ی قالب (که معمولاً روی
 * button می‌نشیند) شکل دکمه را خراب نکند.
 *
 * قبلاً دو قاعده‌ی :hover پشت‌سرهم بود و دومی رنگ اولی را بی‌اثر
 * می‌کرد؛ حالا یکی شده‌اند. */
#wpsd-root .wpsd-send {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: var(--wpsd-radius-md);
	background: var(--wpsd-primary);
	color: #fff;
}

#wpsd-root .wpsd-send:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--wpsd-focus-ring);
}

#wpsd-root .wpsd-send:hover:not(:disabled) {
	background: var(--wpsd-primary-hover);
	transform: scale(1.05);
}

#wpsd-root .wpsd-send:active:not(:disabled) {
	transform: scale(0.92);
}

#wpsd-root .wpsd-send:disabled {
	opacity: 0.42;
	cursor: not-allowed;
	box-shadow: none;
}

#wpsd-root .wpsd-send svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

#wpsd-root .wpsd-attach svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

/* پیوست داخل کادر می‌نشیند، پس کوچک‌تر و بدون پس‌زمینه است. */
#wpsd-root .wpsd-attach {
	width: 36px;
	height: 36px;
	background: transparent;
	color: var(--wpsd-text-secondary);
}

#wpsd-root .wpsd-attach:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--wpsd-focus-ring);
}

#wpsd-root .wpsd-attach:hover {
	background: var(--wpsd-surface);
	color: var(--wpsd-text);
}

#wpsd-root .wpsd-attach:active {
	transform: scale(0.9);
}

/* ==========================================================
   ۹. نوار پاسخ
   ========================================================== */

#wpsd-root .wpsd-reply-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	margin-bottom: 9px;
	border-radius: var(--wpsd-radius-sm);
	background: var(--wpsd-surface);
	border-inline-start: 3px solid var(--wpsd-primary);
	font-size: var(--wpsd-font-size-xs);
}

#wpsd-root .wpsd-reply-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wpsd-text-secondary);
}

#wpsd-root .wpsd-reply-cancel {
	border: 0;
	background: none;
	color: var(--wpsd-text-muted);
	cursor: pointer;
	padding: 2px;
	display: flex;
	font-family: inherit;
	font-size: var(--wpsd-font-size-lg);
	line-height: 1;
}

#wpsd-root .wpsd-reply-cancel:hover {
	color: var(--wpsd-text);
}

/* ==========================================================
   ۱۰. ضمیمه
   ========================================================== */

#wpsd-root .wpsd-attachment-image {
	display: block;
	max-width: 230px;
	border-radius: var(--wpsd-radius-lg);
	overflow: hidden;
	line-height: 0;
}

#wpsd-root .wpsd-attachment-image img {
	display: block;
	width: 100%;
	max-height: 280px;
	object-fit: cover;
	border-radius: var(--wpsd-radius-lg);
}

#wpsd-root .wpsd-attachment-file {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px;
	text-decoration: none;
	color: inherit;
}

#wpsd-root .wpsd-attachment-file svg {
	width: 28px;
	height: 28px;
	opacity: 0.85;
	flex: 0 0 auto;
}

#wpsd-root .wpsd-attachment-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* نام فایل چپ‌به‌راست است (پسوند باید سمت راستِ منطقی بماند) ولی
   در چیدمان فارسی می‌نشیند. */
#wpsd-root .wpsd-attachment-name {
	font-size: var(--wpsd-font-size-sm);
	font-weight: 600;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: ltr;
	text-align: right;
}

#wpsd-root .wpsd-attachment-size {
	font-size: var(--wpsd-font-size-xs);
	opacity: 0.72;
	font-variant-numeric: tabular-nums;
}

#wpsd-root .wpsd-attachment-expired {
	font-size: var(--wpsd-font-size-sm);
	opacity: 0.68;
}

/* ==========================================================
   ۱۱. آپلود
   ========================================================== */

#wpsd-root .wpsd-upload {
	align-self: flex-start;
	max-width: 82%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	margin-bottom: 9px;
	border-radius: var(--wpsd-radius-sm);
	background: var(--wpsd-surface);
	font-size: var(--wpsd-font-size-xs);
}

#wpsd-root .wpsd-upload-name {
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wpsd-text-secondary);
}

#wpsd-root .wpsd-upload-bar {
	flex: 1 1 auto;
	min-width: 60px;
	height: 5px;
	border-radius: var(--wpsd-radius-full);
	background: var(--wpsd-surface);
	overflow: hidden;
}

#wpsd-root .wpsd-upload-fill {
	height: 100%;
	background: var(--wpsd-primary);
	border-radius: var(--wpsd-radius-full);
	transition: width var(--wpsd-motion-normal) var(--wpsd-ease);
}

#wpsd-root .wpsd-upload-pct {
	min-width: 34px;
	text-align: left;
	color: var(--wpsd-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================
   ۱۲. اعلان و بارگذاری
   ========================================================== */

/* اعلان سیستمی.
 *
 * لحن اطلاع‌رسانی است نه هشدار: پیش‌تر کارت نارنجیِ «خارج از ساعت
 * کاری» پررنگ‌تر از خودِ گفتگو دیده می‌شد و مثل خطا به نظر می‌رسید.
 * حالا سطح بسیار ملایم با متن تیره‌ی خوانا. */
#wpsd-root .wpsd-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--wpsd-space-2);
	padding: 10px var(--wpsd-space-3);
	border-radius: var(--wpsd-radius-md);
	font-size: var(--wpsd-font-size-sm);
	line-height: var(--wpsd-line-height-tight);
	text-align: start;
	background: var(--wpsd-surface);
	color: var(--wpsd-text-secondary);
}

#wpsd-root .wpsd-notice svg {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	opacity: 0.9;
}

#wpsd-root .wpsd-notice-offline {
	background: var(--wpsd-warning-surface);
	color: var(--wpsd-warning-text);
}

#wpsd-root .wpsd-notice-error {
	background: var(--wpsd-danger-surface);
	color: var(--wpsd-danger);
}

#wpsd-root .wpsd-notice-closed {
	background: var(--wpsd-surface);
	color: var(--wpsd-text-secondary);
}

#wpsd-root .wpsd-offline-banner {
	flex: 0 0 auto;
	padding: 9px 14px;
	background: color-mix(in srgb, var(--wpsd-warning) 12%, transparent);
	color: var(--wpsd-warning);
	font-size: var(--wpsd-font-size-sm);
	text-align: center;
}

#wpsd-root .wpsd-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 30px;
	color: var(--wpsd-text-secondary);
	font-size: var(--wpsd-font-size-sm);
}

#wpsd-root .wpsd-spinner {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 2.4px solid var(--wpsd-surface);
	border-top-color: var(--wpsd-primary);
	border-radius: 50%;
	animation: wpsd-spin 0.8s linear infinite;
}

@keyframes wpsd-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================
   ۱۳. دسترس‌پذیری
   ========================================================== */

/* بلوک «حالت تاریک» حذف شد.
 *
 * کلاس `wpsd-auto-theme` که فعالش می‌کرد از WidgetRenderer برداشته
 * شده بود، پس این قواعد هرگز اجرا نمی‌شدند — ولی توکن‌های مرده‌ای
 * مثل --wpsd-glass-border را زنده نگه می‌داشتند و خواندن فایل را
 * گمراه‌کننده می‌کردند. ظاهر ویجت همیشه روشن است. */

/* کاربرانی که کاهش حرکت را فعال کرده‌اند نباید انیمیشن ببینند */
@media (prefers-reduced-motion: reduce) {
	#wpsd-root .wpsd-msg {
		animation: none;
	}

	#wpsd-root .wpsd-spinner {
		animation-duration: 2s;
	}

	#wpsd-root *,
	#wpsd-root *::before,
	#wpsd-root *::after {
		transition-duration: 0.01ms !important;
	}
}

/* در کنتراست بالا شیشه مات می‌شود؛ شفافیت روی پس‌زمینه‌ی شلوغِ قالب
   خوانایی متن را پایین می‌آورد. */
@media (prefers-contrast: more) {
	#wpsd-root .wpsd-window {
		background: var(--wpsd-bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

#wpsd-root button:focus-visible,
#wpsd-root a:focus-visible,
#wpsd-root [tabindex]:focus-visible {
	outline: 2px solid var(--wpsd-primary);
	outline-offset: 2px;
}

/* ==========================================================
   ۱۵. نوار امضا
   ========================================================== */

/* نوار پایین پنجره — مطابق نمونه. */
/* نوار امضا — باید تقریباً نامرئی باشد.
 *
 * ارتفاع ثابتِ کوچک و بدون خط جداکننده: خط بالایی این نوار را به یک
 * بخشِ مستقل تبدیل می‌کرد، در حالی که فقط یک امضای کم‌رنگ است و
 * نباید با گفتگو رقابت کند. */
#wpsd-root .wpsd-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 34px;
	padding: 0 var(--wpsd-space-3);
	background: var(--wpsd-bg);
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--wpsd-text-muted);
}

#wpsd-root .wpsd-brand-name {
	color: var(--wpsd-primary);
	font-weight: 500;
}

/* حباب پشتیبان خاکستری روشن روی پس‌زمینه‌ی سفید می‌نشیند، پس سایه
   لازم ندارد. */

/* ==========================================================
   ۱۶. حالت‌های آماده برای فاز بعد
   ==========================================================

   این دو مؤلفه ظاهرشان ساخته شده ولی هنوز هیچ منطقی در فرانت‌اند
   آن‌ها را روشن نمی‌کند. عمداً اینجا تعریف شده‌اند تا وقتی قابلیتش
   اضافه شد، ظاهر از قبل آماده و هم‌خوان باشد.

   هیچ‌کدام رفتار سروری تازه‌ای فرض نمی‌کنند. */

/* نشانگر «در حال نوشتن».
   نیازمند رویداد typing از سرور است که فعلاً وجود ندارد. */
#wpsd-root .wpsd-typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 14px;
	border-radius: var(--wpsd-radius-lg);
	background: var(--wpsd-surface);
	width: fit-content;
}

#wpsd-root .wpsd-typing-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wpsd-text-muted);
	animation: wpsd-typing 1.2s ease-in-out infinite;
}

#wpsd-root .wpsd-typing-dot:nth-child(2) {
	animation-delay: 0.15s;
}

#wpsd-root .wpsd-typing-dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes wpsd-typing {
	0%,
	60%,
	100% {
		opacity: 0.3;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* نوار «در حال اتصال دوباره».
   منطق قطع/وصل شبکه هست ولی این نوار هنوز صدا زده نمی‌شود؛ فعلاً
   فقط بنر آفلاین نمایش داده می‌شود. */
#wpsd-root .wpsd-reconnecting {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpsd-space-2);
	padding: var(--wpsd-space-2) var(--wpsd-space-3);
	background: var(--wpsd-warning-surface);
	color: var(--wpsd-warning-text);
	font-size: var(--wpsd-font-size-xs);
}

#wpsd-root .wpsd-reconnecting svg {
	width: 14px;
	height: 14px;
	animation: wpsd-spin 1s linear infinite;
}