/**
 * استایل فرانت‌اند سیستم تیکت پشتیبانی - شیشه‌ای مسطح (Flat Glass) و سبک
 *
 * تصمیم‌های عمدی این نسخه:
 * ۱) روی هیچ فیلد ورودی/دکمه‌ای backdrop-filter گذاشته نشده - چون در برخی مرورگرها باعث
 *    تار شدن خودِ متن تایپ‌شده داخل input/textarea می‌شود، نه فقط پس‌زمینه.
 * ۲) هیچ box-shadow ای در کل فایل استفاده نشده (نه روی دکمه‌ها، نه کارت‌ها) چون رندر آن
 *    روی موبایل هزینه‌بر است؛ حس «شیشه‌ای» فقط با رنگ نیمه‌شفاف + بردر ظریف ساخته می‌شود.
 * ۳) همه‌ی button/input/select/textarea با «all: unset» صفر می‌شوند تا استایل پیش‌فرض
 *    وردپرس/المنتور/قالب هرگز روی این کامپوننت اثر نگذارد؛ بعد از آن، استایل خودمان
 *    به‌صورت کامل و صریح بازتعریف می‌شود.
 * ۴) کنتراست متن روی همه‌ی پس‌زمینه‌ها (چه تیره، چه روی گرادیانت دکمه‌ی اصلی) به‌صورت
 *    دستی بررسی و با پس‌زمینه‌ی نیمه‌شفاف تیره‌تر پشت متن تضمین شده است.
 */

.pst-wrap {
	--pst-primary: var( --pum-primary, #7c6df2 );
	/* دکمه/تب/صفحه‌بندیِ حالت فعال از یک نسخه‌ی تیره‌ترِ primary استفاده می‌کنند تا متن سفید
	   رویش همیشه کنتراست AA (≥4.5:1) داشته باشد - حتی اگر سایت میزبان --pum-primary را با
	   رنگی روشن‌تر بازنویسی کند. #6357c2 مقدار fallback برای مرورگرهای بدون پشتیبانی از color-mix است. */
	--pst-primary-solid: #6357c2;
	--pst-primary-solid: color-mix( in srgb, var( --pst-primary ) 80%, black );
	--pst-primary-solid-hover: #574ca9;
	--pst-primary-solid-hover: color-mix( in srgb, var( --pst-primary ) 70%, black );
	--pst-accent: #22d3ee;
	--pst-bg-1: #150f33;
	--pst-bg-2: #1c1450;
	--pst-surface: rgba( 255, 255, 255, .09 );
	--pst-surface-strong: rgba( 255, 255, 255, .15 );
	--pst-field-bg: #171233;
	--pst-field-bg-focus: #1c1640;
	--pst-elevated: #211a54;
	--pst-border: rgba( 255, 255, 255, .16 );
	--pst-border-strong: rgba( 255, 255, 255, .28 );
	--pst-text: #f5f3ff;
	--pst-text-dim: #b9b3d6;
	--pst-radius: 16px;
	--pst-radius-sm: 10px;
	--pst-success: #4ade80;
	--pst-warning: #fbbf24;
	--pst-danger: #f87171;
	--pst-info: #60a5fa;
	/* «درخشش شیشه‌ای»: یک گرادیانت واحد و ثابت که روی همه‌ی دکمه‌ها استفاده می‌شود و هرگز
	   در حالت hover/active تغییر نمی‌کند - فقط background-color زیرش عوض می‌شود. این یعنی
	   مرورگر هیچ‌وقت مجبور به محاسبه‌ی دوباره‌ی گرادیانت هنگام تعامل نیست (فقط رنگ ساده که
	   ارزان‌ترین پراپرتی قابل ترنزیشن است) - تفاوت مستقیم با نسخه‌ی قبلی که گرادیانت خودش
	   هم در hover عوض می‌شد و عملاً هیچ انیمیشن نرمی هم تولید نمی‌کرد (background-image
	   قابل تروین شدن نیست، فقط snap می‌کند). */
	--pst-sheen: linear-gradient( 180deg, rgba( 255, 255, 255, .1 ), rgba( 255, 255, 255, 0 ) 60% );

	position: relative;
	color: var( --pst-text );
	line-height: 1.8;
	box-sizing: border-box;
}
.pst-wrap *, .pst-wrap *::before, .pst-wrap *::after { box-sizing: border-box; }

/* ===== ریست کامل عناصر فرم/دکمه =====
   نکته‌ی مهم: چرا :where() ؟ چون «.pst-wrap button» به‌خودی‌خود (کلاس + نوع‌عنصر) از
   «.pst-btn» (فقط یک کلاس) اسپسیفیسیتی بالاتری دارد؛ یعنی همین ریست، بدون هیچ ربطی به
   قالب/المنتور، به‌تنهایی داشت روی استایل‌های خودِ «.pst-btn» و مشابه‌هایش غالب می‌شد -
   دقیقاً همان چیزی که باعث می‌شد دکمه‌ها بدون padding/پس‌زمینه دیده شوند. با :where() نوع‌عنصر
   هیچ اسپسیفیسیتی‌ای اضافه نمی‌کند، پس این ریست هم‌سطح یک کلاس ساده می‌شود و کلاس‌های
   کامپوننت (که بعد از این بلوک تعریف شده‌اند) طبیعتاً برنده می‌شوند. */
.pst-wrap :where( button, input, select, textarea ) {
	all: unset;
	box-sizing: border-box;
	display: block;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
}
.pst-wrap :where( input, select, textarea ) { cursor: text; width: 100%; }
.pst-wrap select { cursor: pointer; }
/* input فایل همیشه مخفی است (خودمان یک دکمه‌ی سفارشی برایش می‌سازیم). !important این‌جا
   صرفاً یک لایه‌ی دفاعی اضافه در برابر ریست‌های عمومی نامعلوم قالب/صفحه‌ساز است. */
.pst-wrap input[type="file"] { display: none !important; }

/* ===== پوسته‌ی اصلی: گرادیانت تخت، بدون بلور و بدون سایه ===== */
.pst-panel {
	position: relative;
	border-radius: var( --pst-radius );
	padding: 22px;
	background:
		linear-gradient( 135deg, rgba( 124, 109, 242, .16 ), transparent 45% ),
		linear-gradient( 315deg, rgba( 34, 211, 238, .1 ), transparent 40% ),
		linear-gradient( 160deg, var( --pst-bg-1 ), var( --pst-bg-2 ) );
	border: 1px solid var( --pst-border );
}

.pst-view { position: relative; z-index: 1; }

.pst-wrap.is-loading .pst-panel { opacity: .75; pointer-events: none; }

/* ===== toast ===== */
/* رنگ‌های استاندارد وضعیت (سبز/قرمز تیره) با متن سفید؛ نسبت کنتراست ≥ 5:1 (WCAG AA).
   طرح قبلی پس‌زمینه‌ی هم‌رنگ پنل داشت و فقط با حاشیه‌ی نیمه‌شفاف متمایز می‌شد. */
.pst-toast {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translate( -50%, -10px );
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min( 92%, 480px );
	padding: 12px 20px;
	border-radius: 10px;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
	background: #1f2937;
	border: 1px solid rgba( 255, 255, 255, .22 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, .35 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

/* آیکن وضعیت داخل دایره‌ی نیمه‌شفاف؛ با فاصله‌ی منظم از متن (gap). */
.pst-toast::before {
	content: '✓';
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .25 );
	font-size: .72rem;
	font-weight: 800;
	line-height: 1;
}

.pst-toast.is-visible { opacity: 1; transform: translate( -50%, 0 ); pointer-events: auto; }

/* موفقیت: سبز استاندارد (green-700) - کنتراست متن سفید ≈ 5.0:1 */
.pst-toast-ok { background: #15803d; }

/* خطا: قرمز استاندارد (red-700) - کنتراست متن سفید ≈ 6.2:1 */
.pst-toast-err { background: #b91c1c; }
.pst-toast-err::before { content: '!'; }

/* ===== نوار ابزار بالای هر نما: محل ثابت دکمه‌ها ===== */
.pst-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.pst-toolbar-form, .pst-toolbar-ticket { justify-content: flex-start; }
.pst-toolbar-ticket .pst-toolbar-title { flex: 1; min-width: 0; }
.pst-toolbar-spacer { flex: 1; }

.pst-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var( --pst-text ); }
.pst-ticket-meta { font-size: .75rem; color: var( --pst-text-dim ); }

/* تب‌های فیلتر وضعیت قبلی حذف شدند؛ به‌جایش دراپ‌داون سفارشی زیر استفاده می‌شود. */

/* ===== دراپ‌داون فیلتر وضعیت - استایل هماهنگ با بقیه‌ی دکمه‌ها (همان --pst-sheen)،
   بدون سایه/بلور. موقعیت منو با inset-inline-end (نه left/right ثابت) مشخص شده تا زیر
   RTL هم درست (سمت راست) باز شود، نه فقط با یک dir="rtl" ظاهری. */
.pst-dropdown { position: relative; }
/* .pst-dropdown-trigger تکرار شده (class-doubling) تا specificity بالاتر از قوانین سراسری
   دکمه‌ی المنتور/قالب باشد (که معمولاً با یک کلاس سطح body ترکیب می‌شوند و به‌تنهایی از یک
   کلاس ساده قوی‌تر عمل می‌کنند). این یک ترفند استاندارد CSS است، نه تکرار اشتباه. */
.pst-dropdown-trigger.pst-dropdown-trigger {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 12px !important;
	border-radius: 9px !important;
	border: 1px solid var( --pst-border ) !important;
	background-image: var( --pst-sheen ) !important;
	background-color: var( --pst-surface ) !important;
	color: var( --pst-text ) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	transition: background-color .12s ease, border-color .12s ease;
}
.pst-dropdown-trigger.pst-dropdown-trigger:hover { background-color: var( --pst-surface-strong ) !important; }

/* پیش‌تر این دو span هیچ !important ای نداشتند و همین باعث می‌شد استایل عمومی span/تایپوگرافی
   قالب (مثلاً روی font-size یا line-height) رویشان اثر بگذارد و آیکون به‌نظر «زیر متن گم» شود.
   min-width:0 هم یک نکته‌ی واقعی flexbox است: بدون آن، text-overflow:ellipsis روی فرزند فلکس
   درست کار نمی‌کند و لیبل می‌تواند بیشتر از حد لازم رشد کند و جای شورون را بگیرد. */
.pst-dropdown-label.pst-dropdown-label {
	display: inline-block !important;
	max-width: 140px !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	flex-shrink: 1 !important;
}
.pst-dropdown-chevron.pst-dropdown-chevron {
	display: inline-block !important;
	flex-shrink: 0 !important;
	font-size: .65rem !important;
	color: var( --pst-text-dim ) !important;
	transition: transform .12s ease;
}
.pst-dropdown.is-open .pst-dropdown-chevron { transform: rotate( 180deg ); }

.pst-dropdown-menu {
	position: absolute;
	top: calc( 100% + 6px );
	/* روی inset-inline-end (نه start) عمداً - چون این دراپ‌داون سمت چپ نوار ابزار قرار دارد
	   (زیر RTL) و اگر از سمت start باز شود، جایی برای رشد به‌جز بیرون از پنل ندارد و overflow
	   می‌دهد. با end، دقیقاً هم‌ارزِ left:0 زیر RTL است و به‌جای پنل (سمت راست) باز می‌شود. */
	inset-inline-end: 0;
	min-width: 190px;
	max-width: min( 260px, calc( 100vw - 48px ) );
	z-index: 30;
	background-color: var( --pst-elevated );
	border: 1px solid var( --pst-border );
	border-radius: var( --pst-radius-sm );
	padding: 5px;
	display: none;
	flex-direction: column;
	gap: 2px;
}
.pst-dropdown.is-open .pst-dropdown-menu { display: flex; }

.pst-dropdown-item {
	display: block !important;
	width: 100%;
	text-align: right !important;
	padding: 8px 12px !important;
	border-radius: 7px !important;
	border: none !important;
	background-color: transparent !important;
	color: var( --pst-text-dim ) !important;
	font-size: .82rem !important;
	font-weight: 500;
	transition: background-color .12s ease, color .12s ease;
}
.pst-dropdown-item:hover { background-color: rgba( 255, 255, 255, .08 ) !important; color: var( --pst-text ) !important; }
.pst-dropdown-item.is-active { background-color: var( --pst-primary-solid ) !important; color: #fff !important; }

/* =====================================================================
   دکمه‌ها: سیستم واحد شیشه‌ای - سایز جمع‌وجور، فاصله‌گذاری استاندارد (مقیاس ۴px)
   جلوه‌ی شیشه‌ای فقط با یک گرادیانتِ «درخشش» سبک ساخته می‌شود (بدون blur/shadow):
   یک لایه‌ی سفیدِ کم‌رنگ که از بالای دکمه شروع و سریع محو می‌شود، روی رنگ پایه می‌نشیند.
   ترانزیشن‌ها فقط روی رنگ/پس‌زمینه‌اند (بدون transform/انیمیشن تزئینی) تا رندر روی موبایل سبک بماند.
   ===================================================================== */
/* .pst-btn تکرار شده (class-doubling) به همان دلیلی که در .pst-dropdown-trigger توضیح داده شد:
   بدون این، حتی اگر .pst-btn-primary رنگ درست را ببرد، شکل/پدینگ پایه‌ای که فقط اینجا تعریف
   شده می‌توانست همچنان از قانون سراسری دکمه‌ی قالب/المنتور شکست بخورد. */
.pst-btn.pst-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	padding: 7px 14px !important;
	border-radius: 9px !important;
	border: 1px solid var( --pst-border ) !important;
	background-image: var( --pst-sheen ) !important;
	background-color: var( --pst-surface ) !important;
	color: var( --pst-text ) !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
	white-space: nowrap;
}
.pst-btn.pst-btn:hover { background-color: var( --pst-surface-strong ) !important; border-color: var( --pst-border-strong ) !important; }
.pst-btn.pst-btn:active { opacity: .82; }
.pst-btn.pst-btn:disabled { opacity: .5; cursor: default; }
.pst-btn.pst-btn:focus-visible { outline: 2px solid var( --pst-accent ); outline-offset: 1px; }

/* تکرار کلاس (class-doubling) روی دکمه‌ی اصلی: بعضی صفحه‌سازها (مثل المنتور) استایل پیش‌فرض
   دکمه را از طریق یک کلاس سطح body ترکیب می‌کنند (مثلاً body.elementor-kit-X button) که به‌تنهایی
   از یک کلاس ساده مثل .pst-btn-primary قوی‌تر است؛ تکرار کلاس این عدم‌تعادل را جبران می‌کند. */
.pst-btn-primary.pst-btn-primary {
	color: #fff !important;
}
.pst-btn-primary.pst-btn-primary:hover { background-color: var( --pst-primary-solid-hover ) !important; border-color: var( --pst-primary-solid-hover ) !important; }

.pst-btn-ghost.pst-btn-ghost { background-color: transparent !important; }
.pst-btn-ghost.pst-btn-ghost:hover { background-color: rgba( 255, 255, 255, .07 ) !important; }
.pst-btn-danger.pst-btn-danger { color: #ffd3d3 !important; border-color: rgba( 248, 113, 113, .4 ) !important; background-color: transparent !important; background-image: none !important; }
.pst-btn-danger.pst-btn-danger:hover { background-color: rgba( 248, 113, 113, .12 ) !important; border-color: rgba( 248, 113, 113, .55 ) !important; }
.pst-btn-block { width: 100%; }
.pst-btn-back { order: -1; }
.pst-btn-icon { font-size: .92rem; line-height: 1; }

.pst-spinner {
	width: 13px; height: 13px; border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, .35 );
	border-top-color: #fff;
	display: inline-block;
	animation: pstSpin .6s linear infinite;
}
@keyframes pstSpin { to { transform: rotate( 360deg ); } }

/* ===== فهرست تیکت‌ها ===== */
.pst-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 56px 20px; color: var( --pst-text-dim );
}
.pst-empty-icon { font-size: 2.2rem; margin-bottom: 10px; opacity: .85; }
.pst-empty .pst-btn { margin-top: 16px; }

.pst-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.pst-ticket-row {
	display: flex !important;
	align-items: center; justify-content: space-between; gap: 10px;
	width: 100%;
	background-color: var( --pst-surface ) !important;
	background-image: none !important;
	border: 1px solid var( --pst-border ) !important;
	border-radius: var( --pst-radius-sm ) !important;
	padding: 14px 16px !important;
	color: var( --pst-text ) !important;
	text-align: right;
	transition: background-color .12s ease, border-color .12s ease;
	/* روی لیست‌های بلند، مرورگر layout/paint سطرهای خارج از دید را تا رسیدن نوبتشان به تعویق
	   می‌اندازد؛ عدد بعدی فقط یک تخمینِ ارتفاع برای جلوگیری از پرش اسکرول‌بار است. */
	content-visibility: auto;
	contain-intrinsic-size: auto 60px;
}
.pst-ticket-row:hover { background-color: var( --pst-surface-strong ) !important; border-color: var( --pst-border-strong ) !important; }
.pst-ticket-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pst-ticket-subject { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst-ticket-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pst-chevron {
	color: var( --pst-text-dim ); font-size: 1.2rem;
	/* در بستر RTL نویسه‌ی ‹ به‌صورت آینه‌ای (رو به راست) رندر می‌شد؛ با قرینه‌سازی افقی
	   دوباره رو به چپ (جهت ورود به جزئیات تیکت) نمایش داده می‌شود. */
	display: inline-block;
	transform: scaleX( -1 );
}

.pst-badge { padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.pst-status-open { background: rgba( 96, 165, 250, .18 ); color: #bfdbfe; border-color: rgba( 96, 165, 250, .4 ); }
.pst-status-answered { background: rgba( 74, 222, 128, .18 ); color: #bbf7d0; border-color: rgba( 74, 222, 128, .4 ); }
.pst-status-pending { background: rgba( 251, 191, 36, .18 ); color: #fde68a; border-color: rgba( 251, 191, 36, .4 ); }
.pst-status-closed { background: rgba( 255, 255, 255, .1 ); color: var( --pst-text-dim ); border-color: var( --pst-border ); }
.pst-priority-low { background: rgba( 255, 255, 255, .08 ); color: var( --pst-text-dim ); }
.pst-priority-normal { background: rgba( 124, 109, 242, .2 ); color: #dcd6ff; }
.pst-priority-high { background: rgba( 251, 146, 60, .2 ); color: #fed7aa; }
.pst-priority-urgent { background: rgba( 248, 113, 113, .22 ); color: #ffd3d3; }

.pst-pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.pst-page-link {
	padding: 5px 11px !important; border: 1px solid var( --pst-border ) !important; border-radius: 999px !important;
	background-image: var( --pst-sheen ) !important; background-color: var( --pst-surface ) !important;
	color: var( --pst-text-dim ) !important; font-size: .78rem !important;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pst-page-link.is-active { background-color: var( --pst-primary-solid ) !important; color: #fff !important; border-color: var( --pst-primary-solid ) !important; }

/* =====================================================================
   فرم - فیلدهای ورودی: پس‌زمینه‌ی تیره‌ی نیمه‌شفاف اما بدون بلور تا متنِ
   داخل input/textarea همیشه کاملاً واضح و خوانا بماند.
   ===================================================================== */
.pst-form { display: flex; flex-direction: column; gap: 16px; }
.pst-field { display: flex; flex-direction: column; gap: 6px; }
.pst-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.pst-field-row .pst-field { flex: 1; min-width: 160px; }
.pst-field label { font-weight: 600; font-size: .85rem; color: var( --pst-text-dim ); }

.pst-field input[type="text"],
.pst-field select,
.pst-field textarea {
	padding: 12px 14px !important;
	border: 1px solid var( --pst-border ) !important;
	border-radius: var( --pst-radius-sm ) !important;
	font-size: .92rem;
	background-color: var( --pst-field-bg ) !important;
	background-image: none;
	color: var( --pst-text ) !important;
	transition: border-color .12s ease, background-color .12s ease;
}
.pst-field select {
	/* فلش دراپ‌داون با یک SVG تک‌تکه رسم می‌شود؛ روش قبلی (دو linear-gradient مکمل)
	   در برخی مرورگرها/زوم‌ها دو نیمه‌ی مثلث را ناهم‌راستا رندر می‌کرد و شکل شکسته دیده می‌شد. */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%23aca6d9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	/* فلش در سمت چپ فیزیکی (قرارداد RTL)، هماهنگ با padding-inline-end. */
	background-position: left 14px center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	padding-inline-end: 38px !important;
}
.pst-field select option { background: #201954; color: var( --pst-text ); }
.pst-field textarea { resize: vertical; line-height: 1.7; }
.pst-field input::placeholder, .pst-field textarea::placeholder { color: rgba( 245, 243, 255, .38 ); }
.pst-field input:focus, .pst-field select:focus, .pst-field textarea:focus {
	border-color: var( --pst-primary ) !important;
	background-color: var( --pst-field-bg-focus ) !important;
}
.pst-hint { font-size: .75rem; color: var( --pst-text-dim ); }
.pst-form-actions { margin-top: 4px; }

/* چیپ‌های فایلِ انتخاب‌شده (پیش از آپلود) با دکمه‌ی × برای حذف تک‌تک فایل‌ها بدون نیاز به
   انتخاب دوباره‌ی همه‌ی فایل‌ها. جدا از .pst-attachment که برای فایل‌های واقعاً آپلودشده است. */
.pst-file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pst-file-chip {
	display: inline-flex; align-items: center; gap: 6px;
	max-width: 220px;
	padding: 4px 6px 4px 10px;
	border: 1px solid var( --pst-border );
	border-radius: 999px;
	background-color: rgba( 255, 255, 255, .07 );
	font-size: .76rem;
	color: var( --pst-text-dim );
}
.pst-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pst-file-chip-remove.pst-file-chip-remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba( 255, 255, 255, .1 ) !important;
	color: var( --pst-text-dim ) !important;
	font-size: .78rem !important;
	line-height: 1 !important;
	transition: background-color .12s ease, color .12s ease;
}
.pst-file-chip-remove.pst-file-chip-remove:hover { background-color: rgba( 248, 113, 113, .25 ) !important; color: #ffd3d3 !important; }

/* رفع باگ مرورگر: Chrome/Edge/Safari هنگام autofill پس‌زمینه‌ی input را به‌زور سفید/کرم
   می‌کنند و با background معمولی CSS قابل بازنویسی نیست - همین باعث می‌شد فیلد «موضوع» به‌صورت
   پس‌زمینه‌ی سفید با متن سفید (نامرئی) دیده شود. !important این‌جا ضروری است چون خودِ استایل
   داخلی مرورگر برای autofill اولویت بسیار بالایی دارد و با روش عادی قابل غلبه نیست. */
.pst-field input:-webkit-autofill,
.pst-field input:-webkit-autofill:hover,
.pst-field input:-webkit-autofill:focus,
.pst-field textarea:-webkit-autofill {
	-webkit-text-fill-color: var( --pst-text ) !important;
	-webkit-box-shadow: 0 0 0 1000px var( --pst-field-bg ) inset !important;
	box-shadow: 0 0 0 1000px var( --pst-field-bg ) inset !important;
	caret-color: var( --pst-text ) !important;
	transition: background-color 99999s ease-in-out 0s !important;
}
.pst-field input, .pst-field select, .pst-field textarea { caret-color: var( --pst-text ); }

.pst-file-label { cursor: pointer; display: inline-flex; width: fit-content; }
.pst-attach-btn {
	display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
	padding: 6px 12px; border: 1px dashed var( --pst-border-strong ); border-radius: 8px;
	background-image: var( --pst-sheen ); background-color: var( --pst-surface );
	font-size: .78rem; color: var( --pst-text-dim );
	transition: background-color .12s ease, border-color .12s ease;
}
.pst-attach-btn:hover { background-color: var( --pst-surface-strong ); }
.pst-attach-names { font-size: .76rem; color: var( --pst-text-dim ); margin-inline-start: 6px; }

.pst-notice { padding: 12px 16px; border-radius: var( --pst-radius-sm ); margin-bottom: 14px; border: 1px solid; }
.pst-notice p { margin: 0; }
.pst-notice.pst-error { background: rgba( 248, 113, 113, .14 ); color: #ffd3d3; border-color: rgba( 248, 113, 113, .4 ); }
.pst-notice.pst-info { background: rgba( 96, 165, 250, .14 ); color: #d3e6ff; border-color: rgba( 96, 165, 250, .4 ); }

/* ===== گفتگو (thread) ===== */
.pst-thread {
	display: flex; flex-direction: column; gap: 14px;
	max-height: 58vh; overflow-y: auto;
	padding: 4px 4px 4px 0;
	margin-bottom: 16px;
	scrollbar-width: thin;
	scrollbar-color: var( --pst-border ) transparent;
}
.pst-thread::-webkit-scrollbar { width: 6px; }
.pst-thread::-webkit-scrollbar-thumb { background: var( --pst-border ); border-radius: 999px; }

.pst-msg {
	border-radius: var( --pst-radius-sm );
	padding: 14px 16px;
	max-width: 82%;
	border: 1px solid var( --pst-border );
	content-visibility: auto;
	contain-intrinsic-size: auto 90px;
}
.pst-msg-user { background: var( --pst-surface ); align-self: flex-end; }
.pst-msg-staff {
	background: rgba( 124, 109, 242, .16 );
	border-color: rgba( 124, 109, 242, .4 );
	align-self: flex-start;
}

.pst-msg-head { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: var( --pst-text-dim ); margin-bottom: 6px; }
.pst-msg-author { font-weight: 700; color: var( --pst-text ); }
.pst-msg-body p { margin: 0 0 8px; }
.pst-msg-body p:last-child { margin-bottom: 0; }
.pst-msg-attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.pst-attachment {
	font-size: .78rem; padding: 5px 12px; background: rgba( 255, 255, 255, .08 );
	border: 1px solid var( --pst-border ); border-radius: 999px; text-decoration: none; color: var( --pst-text );
}
.pst-attachment:hover { background: rgba( 255, 255, 255, .14 ); }

/* ===== دک پاسخ (composer) - همیشه پایین تیکت، بدون بلور و بدون سایه ===== */
.pst-composer {
	display: flex; flex-direction: column; gap: 10px;
	background: var( --pst-surface-strong );
	border: 1px solid var( --pst-border );
	border-radius: var( --pst-radius );
	padding: 14px;
}
.pst-composer textarea {
	width: 100%; border: none !important; background: transparent !important; color: var( --pst-text ) !important;
	font-size: .92rem; resize: none; padding: 6px 4px; line-height: 1.7;
}
.pst-composer textarea::placeholder { color: rgba( 245, 243, 255, .4 ); }

.pst-composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pst-composer-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pst-composer-right { display: flex; align-items: center; gap: 8px; }

.pst-composer .pst-attach-btn {
	border: 1px solid var( --pst-border ); border-radius: 999px;
	padding: 6px 9px; font-size: .92rem;
}
.pst-composer .pst-attach-names { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pst-btn-send { min-width: 92px; }
.pst-form-msg { font-size: .8rem; padding: 0 4px; }
.pst-form-msg.pst-msg-ok { color: var( --pst-success ); }
.pst-form-msg.pst-msg-err { color: var( --pst-danger ); }

/* ===== دک وضعیت بسته/امتیازدهی (همان محل composer وقتی تیکت بسته است) ===== */
.pst-dock {
	background: var( --pst-surface-strong );
	border: 1px solid var( --pst-border );
	border-radius: var( --pst-radius );
	padding: 16px;
	display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
	text-align: center;
}
.pst-dock-static { color: var( --pst-text-dim ); font-size: .9rem; }
.pst-rating-label { font-size: .88rem; color: var( --pst-text-dim ); }
.pst-stars { display: flex; gap: 4px; }
.pst-star {
	background: none !important; border: none !important; font-size: 1.6rem !important; color: rgba( 255, 255, 255, .28 ) !important;
	padding: 0 !important; line-height: 1; cursor: pointer; transition: color .12s ease, transform .12s ease;
}
.pst-star.active { color: var( --pst-warning ) !important; }
/* هاور ستاره‌ها: ستاره‌ی زیر نشانگر و ستاره‌های قبل از آن روشن می‌شوند.
   (چیدمان RTL است؛ ستاره‌های بعدیِ DOM سمت چپ قرار می‌گیرند و با ~ خاموش می‌مانند) */
.pst-stars:hover .pst-star { color: var( --pst-warning ) !important; }
.pst-stars .pst-star:hover ~ .pst-star { color: rgba( 255, 255, 255, .28 ) !important; }
.pst-stars .pst-star:hover { transform: scale( 1.18 ); }
.pst-rated { color: var( --pst-warning ); font-weight: 700; }

/* ===== مهمان ===== */
.pst-guest-notice .pst-panel { text-align: center; padding: 50px 20px; }
.pst-guest-notice p { margin-bottom: 18px; color: var( --pst-text-dim ); }

@media ( max-width: 600px ) {
	.pst-panel { padding: 16px; border-radius: 14px; }
	.pst-msg { max-width: 100%; }
	.pst-field-row { flex-direction: column; }
	.pst-thread { max-height: 50vh; }
	.pst-toolbar-ticket { flex-wrap: wrap; }
	.pst-composer-toolbar { flex-direction: column; align-items: stretch; }
	.pst-composer-right { justify-content: flex-end; }
}

@media ( prefers-reduced-motion: reduce ) {
	.pst-btn, .pst-tab, .pst-page-link, .pst-ticket-row, .pst-attachment, .pst-star { transition: none !important; }
}