/* ویجت چت زنده سایت — کاملا مجزا از استایل قالب/تم سایت.
   نکته مهم: هر قانون عمدا با پیشوند #wsc-chat-widget-root نوشته شده (نه
   فقط کلاس تنها)، چون یک انتخابگر تک‌کلاسه به‌راحتی توسط استایل عمومی خودِ
   تم (مثلا یک قانون ساده روی button یا input) بازنویسی می‌شود؛ پیشوند ID
   یک specificity بالاتر تضمین می‌کند که ظاهر ویجت مستقل از تم باقی بماند.

   همچنین عمدا از right/left فیزیکی استفاده شده، نه inset-inline-start/end
   منطقی — چون این‌جا خودِ ریشه dir="rtl" دارد و inset-inline-end در RTL
   یعنی سمت چپ، نه راست؛ برای اینکه انتخاب «راست/چپ» در تنظیمات دقیقا همان
   سمتی باشد که ادمین می‌بیند، باید از سمت فیزیکی واقعی استفاده کرد. */

#wsc-chat-widget-root {
	--wsc-chat-primary: #2f6fed;
	--wsc-chat-ink: #1d2327;
	--wsc-chat-muted: #667085;
	--wsc-chat-border: #e2e4e9;
	--wsc-chat-bg: #f6f7fb;
	--wsc-chat-surface: #ffffff;
	--wsc-chat-offset-bottom: 20px;
	--wsc-chat-offset-side: 20px;
	--wsc-chat-icon-color: #ffffff;
	position: fixed;
	bottom: var(--wsc-chat-offset-bottom);
	z-index: 999999;
	/* فونت خودِ سایت (تم) به ارث می‌رسد تا ویجت با بقیه صفحه یکدست به‌نظر
	   برسد — یک font-family لاتین ثابت (مثل Segoe UI/Tahoma) برای متن
	   فارسی به فونت پیش‌فرض سیستم fallback می‌کند که با فونت اختصاصی خود
	   قالب (مثلا وزیر/ایران‌سنس) یکی نیست. */
	font-family: inherit;
	direction: rtl;
	text-align: right;
	line-height: 1.5;
}

#wsc-chat-widget-root.wsc-chat-pos-right {
	right: var(--wsc-chat-offset-side);
}

#wsc-chat-widget-root.wsc-chat-pos-left {
	left: var(--wsc-chat-offset-side);
}

#wsc-chat-widget-root,
#wsc-chat-widget-root * {
	box-sizing: border-box;
}

/* line-height صریح لازم است — بدون آن، دکمه/لینک/اینپوت‌ها line-height
   سراسری تمِ سایت را به ارث می‌برند (خیلی از قالب‌ها برای متن معمولی
   line-height بزرگ‌تری مثل 1.6-2 دارند)، و چون آن مقدار مستقیم روی خودِ
   تگ button/input/a تعریف شده (نه صرفا ارث‌بری)، هر مقدار ارث‌بری‌شده از
   ریشه ویجت را override می‌کند و باعث می‌شود دکمه‌ها/لینک‌ها خیلی بلندتر
   از حد لازم دیده شوند (فاصله خالی عجیب زیر متن دکمه). */
#wsc-chat-widget-root button,
#wsc-chat-widget-root input,
#wsc-chat-widget-root a {
	font-family: inherit;
	font-size: 13px;
	line-height: 1.3;
	margin: 0;
	border-radius: 8px;
}

#wsc-chat-widget-root .wsc-chat-bubble {
	position: relative;
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	background: var(--wsc-chat-primary);
	color: var(--wsc-chat-icon-color);
	border: none;
	font-size: 26px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(47, 111, 237, 0.4);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.15s ease, transform 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-bubble:hover {
	filter: brightness(90%);
	transform: scale(1.05);
}

#wsc-chat-widget-root .wsc-chat-bubble:active {
	transform: scale(0.96);
}

/* نقطه قرمز کوچک روی حباب، همزمان با نمایش حباب جذب‌توجه — تا وقتی کاربر
   چت را باز نکرده، نشانه دیداری «پیام تازه» باقی می‌ماند. */
#wsc-chat-widget-root .wsc-chat-bubble-has-dot::after {
	content: '';
	position: absolute;
	top: 2px;
	right: 2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #ff4d4f;
	border: 2px solid var(--wsc-chat-surface);
}

/* حباب گفتگوی جذب‌توجه — خودکار (بدون کلیک کاربر) کنار آیکون چت ظاهر
   می‌شود؛ کلیک روی خودش هم چت را باز می‌کند، دکمه ✕ فقط همین حباب را
   می‌بندد بدون باز کردن چت. */
#wsc-chat-widget-root .wsc-chat-greeting {
	position: absolute;
	bottom: 74px;
	/* «width» صریح لازم است، نه فقط max-width: چون #wsc-chat-widget-root
	   خودش هیچ عرض مشخصی ندارد و بر اساس محتوای داخل‌جریانش (فقط دکمه ۵۸
	   پیکسلی حباب) جمع می‌شود، یک فرزند position:absolute با width:auto و
	   فقط یکی از left/right مشخص، در همان عرض بسیار کم حباب فشرده می‌شد و
	   متن کلمه‌به‌کلمه می‌افتاد پایین (دقیقا همین باگ) — width ثابت این
	   محاسبه را کاملا دور می‌زند. */
	width: 230px;
	max-width: calc(100vw - 90px);
	background: var(--wsc-chat-surface);
	color: var(--wsc-chat-ink);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 14px;
	padding: 12px 30px 12px 14px;
	font-size: 13px;
	line-height: 1.6;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.22);
	cursor: pointer;
	animation: wsc-chat-greeting-in 0.25s ease-out;
}

#wsc-chat-widget-root.wsc-chat-pos-right .wsc-chat-greeting {
	right: 0;
}

#wsc-chat-widget-root.wsc-chat-pos-left .wsc-chat-greeting {
	left: 0;
}

#wsc-chat-widget-root .wsc-chat-greeting::after {
	content: '';
	position: absolute;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: var(--wsc-chat-surface);
	border-inline-end: 1px solid var(--wsc-chat-border);
	border-bottom: 1px solid var(--wsc-chat-border);
	transform: rotate(45deg);
}

#wsc-chat-widget-root.wsc-chat-pos-right .wsc-chat-greeting::after {
	right: 20px;
}

#wsc-chat-widget-root.wsc-chat-pos-left .wsc-chat-greeting::after {
	left: 20px;
}

#wsc-chat-widget-root .wsc-chat-greeting-close {
	position: absolute;
	top: 6px;
	left: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--wsc-chat-muted);
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	width: auto;
	height: auto;
	transition: color 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-greeting-close:hover {
	color: var(--wsc-chat-primary);
}

@keyframes wsc-chat-greeting-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* آیکون پیش‌فرض SVG — رنگش از رنگ متن دکمه (color) می‌آید، یعنی همان
   --wsc-chat-icon-color؛ اگر کاربر ایموجی سفارشی وارد کرده باشد، به‌جای
   این svg یک متن ساده رندر می‌شود که رنگ خودش را دارد (ایموجی به color
   واکنش نشان نمی‌دهد). */
#wsc-chat-widget-root .wsc-chat-bubble-icon {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
}

#wsc-chat-widget-root .wsc-chat-panel {
	position: absolute;
	bottom: 74px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 120px);
	background: var(--wsc-chat-surface);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* یک ورودِ نرم (محو + کمی بزرگ‌شدن از پایین) — چون رفتن از display:none
	   به display:flex خودش باعث می‌شود مرورگر انیمیشن CSS را از نو پخش کند،
	   همین یک خط کافی است، بدون نیاز به هماهنگی جاوااسکریپت برای تایمینگ. */
	animation: wsc-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wsc-panel-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* بدون این قانون، دکمه‌های باز/بستن هیچ اثری نداشتند: انتخابگر بالا
   (id + class) از قانون پیش‌فرض مرورگر برای ویژگی hidden (که فقط یک
   attribute selector ساده و کم‌اولویت است) قوی‌تر است، پس display:flex
   همیشه برنده می‌شد و ویژگی hidden که با جاوااسکریپت اضافه/حذف می‌شود را
   نادیده می‌گرفت. این قانون با همان اولویت، حالت hidden را صریحا مخفی
   می‌کند تا واقعا برنده شود. */
#wsc-chat-widget-root .wsc-chat-panel[hidden] {
	display: none;
}

#wsc-chat-widget-root.wsc-chat-pos-right .wsc-chat-panel {
	right: 0;
}

#wsc-chat-widget-root.wsc-chat-pos-left .wsc-chat-panel {
	left: 0;
}

#wsc-chat-widget-root .wsc-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--wsc-chat-primary);
	color: #fff;
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

/* هویت ربات در هدر (آواتار + نام + نقطه آنلاین) — فقط وقتی نام ربات از
   تنظیمات پر شده باشد رندر می‌شود، وگرنه همان تیتر ساده قبلی نمایش
   داده می‌شود (headerIdentityHtml در جاوااسکریپت). */
#wsc-chat-widget-root .wsc-chat-identity {
	display: flex;
	align-items: center;
	gap: 8px;
}

#wsc-chat-widget-root .wsc-chat-bot-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
}

#wsc-chat-widget-root .wsc-chat-identity-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

#wsc-chat-widget-root .wsc-chat-online {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 400;
}

#wsc-chat-widget-root .wsc-chat-online i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.35);
}

#wsc-chat-widget-root .wsc-chat-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

#wsc-chat-widget-root .wsc-chat-close,
#wsc-chat-widget-root .wsc-chat-clear,
#wsc-chat-widget-root .wsc-chat-order-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
	width: auto;
	height: auto;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-close:hover,
#wsc-chat-widget-root .wsc-chat-clear:hover,
#wsc-chat-widget-root .wsc-chat-order-open:hover {
	opacity: 1;
}

/* فرم «قبل از گفتگو» — دریافت نام/شماره موبایل، فقط وقتی از تنظیمات روشن
   شده باشد؛ جای خودِ پیام‌ها و فرم ارسال را تا تکمیل همین فرم می‌گیرد. */
/* پیگیری سفارش — یک لایه روی کل پنل چت (نه فقط بخش پیام‌ها) تا هم هدر خودِ
   چت و هم پیام‌های قبلی موقتا پشت آن مخفی شوند، دقیقا مثل یک ویزارد دو
   مرحله‌ای مستقل؛ با بستنش، همان مکالمه قبلی دست‌نخورده برمی‌گردد. */
#wsc-chat-widget-root .wsc-chat-order-lookup {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: var(--wsc-chat-surface);
}

#wsc-chat-widget-root .wsc-chat-order-lookup[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-order-lookup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--wsc-chat-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-order-lookup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 4px;
	width: auto;
	height: auto;
	line-height: 1;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-order-lookup-close:hover {
	opacity: 1;
}

#wsc-chat-widget-root .wsc-chat-order-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
}

#wsc-chat-widget-root .wsc-chat-order-step[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-order-hint {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wsc-chat-ink);
	line-height: 1.7;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-order-phone,
#wsc-chat-widget-root .wsc-chat-order-code {
	border: 1px solid var(--wsc-chat-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	background: var(--wsc-chat-surface);
	color: var(--wsc-chat-ink);
	height: auto;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-order-btn {
	background: var(--wsc-chat-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: auto;
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-order-btn:hover {
	filter: brightness(94%);
}

#wsc-chat-widget-root .wsc-chat-order-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

#wsc-chat-widget-root .wsc-chat-order-resend-btn {
	background: none;
	border: none;
	color: var(--wsc-chat-primary);
	font-size: 12px;
	cursor: pointer;
	padding: 4px;
	width: auto;
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-order-resend-btn:disabled {
	color: var(--wsc-chat-muted);
	cursor: default;
}

#wsc-chat-widget-root .wsc-chat-order-error {
	margin: 0 16px 14px;
	font-size: 12px;
	color: #d0342c;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-order-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 12px;
	padding: 12px;
}

#wsc-chat-widget-root .wsc-chat-order-row {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--wsc-chat-ink);
}

#wsc-chat-widget-root .wsc-chat-order-row span {
	color: var(--wsc-chat-muted);
}

/* فرم «درخواست تماس انسانی» — درست مثل یک پیام دیگر داخل جریان گفتگو
   ظاهر می‌شود (نه یک لایه/overlay)، چون در ادامه طبیعی همان پاسخ هوش
   مصنوعی است که نتوانست کمک کند. */
#wsc-chat-widget-root .wsc-chat-handoff-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 12px;
	padding: 12px;
	align-self: flex-start;
	max-width: 85%;
}

#wsc-chat-widget-root .wsc-chat-handoff-name,
#wsc-chat-widget-root .wsc-chat-handoff-phone {
	border: 1px solid var(--wsc-chat-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	background: var(--wsc-chat-bg);
	color: var(--wsc-chat-ink);
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-handoff-error {
	font-size: 12px;
	color: #d0342c;
}

#wsc-chat-widget-root .wsc-chat-handoff-submit {
	background: var(--wsc-chat-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: auto;
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-handoff-submit:hover {
	filter: brightness(94%);
}

#wsc-chat-widget-root .wsc-chat-handoff-submit:disabled {
	opacity: 0.7;
	cursor: default;
}

#wsc-chat-widget-root .wsc-chat-handoff-done {
	font-size: 12.5px;
	font-weight: 600;
	color: #1a9d5c;
}

/* منوی انتخاب هدف — دقیقا مثل wsc-chat-lead-gate یک لایه جایگزین محتوای
   اصلی پنل است (نه overlay روی آن)، چون این هم یک قدم قبل از شروع
   مکالمه واقعی است. */
#wsc-chat-widget-root .wsc-chat-intent-menu {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
	background: var(--wsc-chat-bg);
}

#wsc-chat-widget-root .wsc-chat-intent-menu[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-intent-title {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wsc-chat-ink);
	line-height: 1.7;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-intent-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#wsc-chat-widget-root .wsc-chat-intent-btn {
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 10px;
	padding: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wsc-chat-ink);
	cursor: pointer;
	width: 100%;
	height: auto;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-intent-btn:hover {
	border-color: var(--wsc-chat-primary);
	color: var(--wsc-chat-primary);
}

/* ورود اجباری با حساب کاربری — دقیقا هم‌شکل wsc-chat-lead-gate (یک لایه
   جایگزین محتوای پیام‌ها)، چون از نظر UX همان الگوی «گیت قبل از گفتگو» است. */
#wsc-chat-widget-root .wsc-chat-login-gate {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
	background: var(--wsc-chat-bg);
}

#wsc-chat-widget-root .wsc-chat-login-gate[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-login-intro {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wsc-chat-ink);
	line-height: 1.7;
	text-align: center;
}

/* دو مرحله «شماره موبایل» و «کد تایید» — دقیقا هم‌شکل wsc-chat-order-step،
   چون همان الگوی اثبات‌شده OTP پیگیری سفارش است. */
#wsc-chat-widget-root .wsc-chat-login-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#wsc-chat-widget-root .wsc-chat-login-step[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-login-hint {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wsc-chat-ink);
	line-height: 1.7;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-login-phone,
#wsc-chat-widget-root .wsc-chat-login-code {
	border: 1px solid var(--wsc-chat-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	background: var(--wsc-chat-surface);
	color: var(--wsc-chat-ink);
	height: auto;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-login-error {
	margin-top: 4px;
	font-size: 12px;
	color: #d0342c;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-login-btn {
	background: var(--wsc-chat-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: auto;
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-login-btn:hover {
	filter: brightness(94%);
}

#wsc-chat-widget-root .wsc-chat-login-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

#wsc-chat-widget-root .wsc-chat-login-resend-btn {
	background: none;
	border: none;
	color: var(--wsc-chat-primary);
	font-size: 12px;
	cursor: pointer;
	padding: 4px;
	width: auto;
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-login-resend-btn:disabled {
	color: var(--wsc-chat-muted);
	cursor: default;
}

#wsc-chat-widget-root .wsc-chat-lead-gate {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
	background: var(--wsc-chat-bg);
}

/* بدون این قانون، همان مشکل specificity قدیمی پنل تکرار می‌شود: چون
   انتخابگر بالا (id + class) از استایل پیش‌فرض مرورگر برای [hidden]
   قوی‌تر است، display:flex همیشه برنده می‌شد حتی وقتی JS ویژگی hidden را
   اضافه می‌کند. */
#wsc-chat-widget-root .wsc-chat-lead-gate[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-lead-intro {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wsc-chat-ink);
	line-height: 1.7;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-lead-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#wsc-chat-widget-root .wsc-chat-lead-name,
#wsc-chat-widget-root .wsc-chat-lead-phone {
	border: 1px solid var(--wsc-chat-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	background: var(--wsc-chat-surface);
	color: var(--wsc-chat-ink);
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-lead-error {
	font-size: 12px;
	color: #d0342c;
}

#wsc-chat-widget-root .wsc-chat-lead-submit {
	background: var(--wsc-chat-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: auto;
	height: auto;
}

#wsc-chat-widget-root .wsc-chat-lead-submit:hover {
	filter: brightness(94%);
}

#wsc-chat-widget-root .wsc-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--wsc-chat-bg);
}

#wsc-chat-widget-root .wsc-chat-msg {
	max-width: 80%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
	animation: wsc-msg-in 0.22s ease both;
}

/* یک انیمیشن ورودِ نرم مشترک برای هر چیزی که تازه به جریان چت اضافه
   می‌شود (پیام، کارت محصول/مقاله/سفارش، فرم تماس انسانی) — به‌جای
   ظاهرشدن ناگهانی، کمی محو و از پایین بالا می‌آید. */
@keyframes wsc-msg-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#wsc-chat-widget-root .wsc-chat-product-card,
#wsc-chat-widget-root .wsc-chat-article-card,
#wsc-chat-widget-root .wsc-chat-order-card,
#wsc-chat-widget-root .wsc-chat-handoff-card {
	animation: wsc-msg-in 0.22s ease both;
}

#wsc-chat-widget-root .wsc-chat-msg-user {
	align-self: flex-end;
	background: var(--wsc-chat-primary);
	color: #fff;
	border-bottom-left-radius: 4px;
}

#wsc-chat-widget-root .wsc-chat-msg-bot {
	align-self: flex-start;
	background: var(--wsc-chat-surface);
	color: var(--wsc-chat-ink);
	border: 1px solid var(--wsc-chat-border);
	border-bottom-right-radius: 4px;
}

/* بدون رنگ صریح، لینک‌های داخل پیام (linkify در JS) رنگ پیش‌فرض
   مرورگر/تم سایت را می‌گیرند که ممکن است با رنگ متن پیام فرق چندانی
   نداشته باشد و کاربر متوجه قابل‌کلیک بودنش نشود. */
#wsc-chat-widget-root .wsc-chat-msg-bot a {
	color: var(--wsc-chat-primary);
	text-decoration: underline;
	word-break: break-all;
}

#wsc-chat-widget-root .wsc-chat-faq-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: stretch;
}

#wsc-chat-widget-root .wsc-chat-faq-btn {
	align-self: flex-start;
	max-width: 100%;
	text-align: right;
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-primary);
	color: var(--wsc-chat-primary);
	border-radius: 14px;
	padding: 7px 12px;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
	width: auto;
	height: auto;
	white-space: normal;
}

#wsc-chat-widget-root .wsc-chat-faq-btn:hover {
	background: var(--wsc-chat-primary);
	color: #fff;
}

/* سه نقطه بالا-پایین‌رونده با تاخیر پلکانی، به‌جای متن ساده «در حال
   تایپ...» — جلوه رایج و نرم چت‌های مدرن. */
#wsc-chat-widget-root .wsc-chat-typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 12px;
	border-bottom-right-radius: 4px;
	animation: wsc-msg-in 0.22s ease both;
	max-width: 80%;
}

#wsc-chat-widget-root .wsc-chat-typing-avatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wsc-chat-muted);
	animation: wsc-typing-bounce 1s ease-in-out infinite;
}

#wsc-chat-widget-root .wsc-chat-typing-dots span:nth-child(2) {
	animation-delay: 0.15s;
}

#wsc-chat-widget-root .wsc-chat-typing-dots span:nth-child(3) {
	animation-delay: 0.3s;
}

#wsc-chat-widget-root .wsc-chat-typing-label {
	font-size: 11px;
	color: var(--wsc-chat-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@keyframes wsc-typing-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.5;
	}
	30% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

/* خط چشمک‌زن انتهای پیام درحال‌تایپ (افکت typewriter) — دقیقا مثل نشانگر
   نوشتن، تا حس «همین الان دارد نوشته می‌شود» تقویت شود. */
#wsc-chat-widget-root .wsc-chat-msg-typing::after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 12px;
	margin-inline-start: 2px;
	background: currentColor;
	vertical-align: -2px;
	animation: wsc-cursor-blink 0.9s steps(1, end) infinite;
}

@keyframes wsc-cursor-blink {
	50% {
		opacity: 0;
	}
}

#wsc-chat-widget-root .wsc-chat-products {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#wsc-chat-widget-root .wsc-chat-product-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 12px;
	padding: 10px;
}

#wsc-chat-widget-root .wsc-chat-product-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

#wsc-chat-widget-root .wsc-chat-product-img {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	max-width: none;
}

#wsc-chat-widget-root .wsc-chat-product-info {
	flex: 1;
	min-width: 0;
}

#wsc-chat-widget-root .wsc-chat-product-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--wsc-chat-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#wsc-chat-widget-root .wsc-chat-product-price {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wsc-chat-primary);
	margin-top: 3px;
}

#wsc-chat-widget-root .wsc-chat-product-stock {
	font-size: 11px;
	margin-top: 3px;
}

#wsc-chat-widget-root .wsc-chat-product-stock.wsc-in-stock {
	color: #1a9d5c;
}

#wsc-chat-widget-root .wsc-chat-product-stock.wsc-out-stock {
	color: #d0342c;
}

#wsc-chat-widget-root .wsc-chat-product-actions {
	display: flex;
	gap: 6px;
}

/* کارت مقاله — نسخه ساده‌تر کارت محصول (بدون قیمت/موجودی/افزودن به سبد)،
   فقط تصویر شاخص (اگر مقاله داشته باشد)، عنوان و لینک مطالعه. */
#wsc-chat-widget-root .wsc-chat-article-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wsc-chat-surface);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 12px;
	padding: 10px;
}

#wsc-chat-widget-root .wsc-chat-article-img {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	max-width: none;
}

#wsc-chat-widget-root .wsc-chat-article-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#wsc-chat-widget-root .wsc-chat-article-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--wsc-chat-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#wsc-chat-widget-root .wsc-chat-article-link {
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 0 12px;
	height: 32px;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--wsc-chat-primary);
	color: var(--wsc-chat-primary);
	background: var(--wsc-chat-surface);
	transition: filter 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-article-link:hover {
	background: var(--wsc-chat-primary);
	color: #fff;
}

/* height صریح (نه فقط padding+line-height) عمدا استفاده شده — همان راه‌حلی
   که برای اختلاف ارتفاع دکمه/آیکون پاک‌کردن کلید API در تنظیمات هم به‌کار
   رفت: <a> و <button> با همان padding/line-height هم می‌توانند به‌دلایل
   ظریف مرورگر/تم (baseline پیش‌فرض متفاوت عنصر replaced/non-replaced و
   غیره) کمی ارتفاع متفاوت بگیرند؛ یک height ثابت + flex برای وسط‌چین‌کردن
   محتوا، این اختلاف را کاملا از بین می‌برد. */
#wsc-chat-widget-root .wsc-chat-product-link,
#wsc-chat-widget-root .wsc-chat-add-to-cart,
#wsc-chat-widget-root .wsc-chat-checkout-link {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 0 8px;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--wsc-chat-border);
	background: var(--wsc-chat-bg);
	color: var(--wsc-chat-ink);
	width: auto;
	height: 36px;
	/* min-height/max-height صریح لازم است، نه فقط height — اگر تمِ سایت یک
	   min-height سراسری روی <button> بگذارد (خیلی رایج است، برای اندازه
	   لمسی راحت‌تر)، آن min-height مستقل از specificity همیشه به‌عنوان کف
	   ارتفاع اعمال می‌شود و height ما را نادیده می‌گیرد — دقیقا همین چیزی
	   بود که باعث می‌شد فقط دکمه <button> (نه <a>) کمی بلندتر دربیاید. */
	min-height: 36px;
	max-height: 36px;
	line-height: 1;
	transition: filter 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-add-to-cart,
#wsc-chat-widget-root .wsc-chat-checkout-link {
	background: var(--wsc-chat-primary);
	color: #fff;
	border-color: var(--wsc-chat-primary);
}

#wsc-chat-widget-root .wsc-chat-add-to-cart:hover,
#wsc-chat-widget-root .wsc-chat-checkout-link:hover,
#wsc-chat-widget-root .wsc-chat-product-link:hover {
	filter: brightness(94%);
}

#wsc-chat-widget-root .wsc-chat-add-to-cart:disabled {
	opacity: 0.7;
	cursor: default;
}

/* .wsc-chat-product-actions (والدِ این‌ها) خودش یک ردیف فلکس است — بدون
   این wrap ستونی، پیام موفقیت و دکمه‌ها به‌جای زیر هم، کنار هم و فشرده
   می‌افتادند (دقیقا همان چیزی که باعث می‌شد متن موفقیت کلمه‌به‌کلمه
   بشکند). */
#wsc-chat-widget-root .wsc-chat-post-add {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

#wsc-chat-widget-root .wsc-chat-add-success {
	font-size: 12px;
	font-weight: 600;
	color: #1a9d5c;
	text-align: center;
}

#wsc-chat-widget-root .wsc-chat-post-add-links {
	display: flex;
	gap: 6px;
}

#wsc-chat-widget-root .wsc-chat-form {
	display: flex;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--wsc-chat-border);
	background: var(--wsc-chat-surface);
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-input {
	flex: 1;
	border: 1px solid var(--wsc-chat-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	min-width: 0;
	height: auto;
	background: #fff;
	color: var(--wsc-chat-ink);
}

#wsc-chat-widget-root .wsc-chat-send {
	background: var(--wsc-chat-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12.5px;
	cursor: pointer;
	width: auto;
	height: auto;
	white-space: nowrap;
}

#wsc-chat-widget-root .wsc-chat-send:hover {
	filter: brightness(90%);
}

/* دکمه ورودی صوتی — کنار اینپوت پیام، فقط وقتی مرورگر از Web Speech API
   پشتیبانی کند رندر می‌شود (voiceInputAvailable در جاوااسکریپت). */
#wsc-chat-widget-root .wsc-chat-mic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--wsc-chat-muted);
	width: auto;
	height: auto;
	padding: 6px;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 50%;
	transition: color 0.15s ease, background 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-mic:hover {
	color: var(--wsc-chat-primary);
}

#wsc-chat-widget-root .wsc-chat-mic-active {
	color: #fff;
	background: #ef4444;
	animation: wsc-mic-pulse 1s ease-in-out infinite;
}

@keyframes wsc-mic-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
	}
}

/* نوار چسبان سبد خرید — بالای فرم ارسال پیام، بعد از افزودن موفق یک
   محصول ظاهر می‌شود (refreshCartBar در جاوااسکریپت). */
#wsc-chat-widget-root .wsc-chat-cart-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--wsc-chat-surface);
	border-top: 1px solid var(--wsc-chat-border);
	flex-shrink: 0;
	animation: wsc-msg-in 0.2s ease both;
}

#wsc-chat-widget-root .wsc-chat-cart-bar[hidden] {
	display: none;
}

#wsc-chat-widget-root .wsc-chat-cart-bar-icon {
	font-size: 15px;
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-cart-bar-text {
	flex: 1;
	font-size: 12px;
	color: var(--wsc-chat-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wsc-chat-widget-root .wsc-chat-cart-bar-btn {
	background: var(--wsc-chat-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

#wsc-chat-widget-root .wsc-chat-cart-bar-btn:hover {
	filter: brightness(94%);
}

/* ردیف اقدامات زیر پیام‌های ربات (کپی + بازخورد مفید/غیرمفید) — فقط بعد
   از پایان افکت تایپ تدریجی اضافه می‌شود (appendMessageActions در
   جاوااسکریپت)، تا وسط تایپ حواس‌پرتی ایجاد نکند. */
#wsc-chat-widget-root .wsc-chat-msg-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: -4px;
	padding: 0 4px;
	animation: wsc-msg-in 0.18s ease both;
}

#wsc-chat-widget-root .wsc-chat-msg-copy,
#wsc-chat-widget-root .wsc-chat-msg-vote {
	background: none;
	border: none;
	color: var(--wsc-chat-muted);
	font-size: 12px;
	padding: 2px 4px;
	cursor: pointer;
	width: auto;
	height: auto;
	line-height: 1;
	opacity: 0.65;
	transition: opacity 0.15s ease, color 0.15s ease;
}

#wsc-chat-widget-root .wsc-chat-msg-copy:hover,
#wsc-chat-widget-root .wsc-chat-msg-vote:hover {
	opacity: 1;
	color: var(--wsc-chat-primary);
}

#wsc-chat-widget-root .wsc-chat-msg-copy.wsc-chat-copied {
	color: #22c55e;
	opacity: 1;
}

#wsc-chat-widget-root .wsc-chat-msg-vote:disabled {
	cursor: default;
	opacity: 0.4;
}

#wsc-chat-widget-root .wsc-chat-msg-vote-done {
	font-size: 11px;
	color: var(--wsc-chat-muted);
}

/* چیپ کوچک تاریخ، وسط لیست پیام‌ها — فقط یک‌بار در ابتدای هر روزِ تازه
   (maybeInsertDateChip در جاوااسکریپت). */
#wsc-chat-widget-root .wsc-chat-date-chip {
	align-self: center;
	font-size: 11px;
	color: var(--wsc-chat-muted);
	background: var(--wsc-chat-bg);
	border: 1px solid var(--wsc-chat-border);
	border-radius: 20px;
	padding: 3px 12px;
	margin: 4px 0;
}

/* تیک دوتاییِ صرفا نمایشی زیر پیام‌های خودِ کاربر — تاییدِ «ارسال شد»،
   نه رسید واقعیِ خواندن (این افزونه چنین چیزی را دنبال نمی‌کند). */
#wsc-chat-widget-root .wsc-chat-msg-receipt {
	display: block;
	text-align: left;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 3px;
}

@media (max-width: 480px) {
	/* فاصله از پایین/کنار صفحه دیگر اینجا هاردکد نیست — از تنظیمات (جداگانه
	   برای موبایل/تبلت/دسکتاپ) به‌صورت پویا در یک <style> اختصاصی توسط
	   WSC_Website_Widget::responsive_placement_style() چاپ می‌شود. */
	#wsc-chat-widget-root .wsc-chat-panel {
		width: calc(100vw - 24px);
	}
	/* سافاری آیفون خودکار روی هر input/textarea با فونت کوچک‌تر از 16px
	   هنگام فوکوس زوم می‌کند (رفتار خودِ iOS، نه یک تنظیم اشتباه در گوشی
	   کاربر) — چون بقیه ویجت عمدا با فونت جمع‌وجور 13px طراحی شده، این
	   override فقط همین سه فیلد متنی را در موبایل به 16px می‌رساند تا زوم
	   ناخواسته وسط تایپ کردن اتفاق نیفتد.
	   */
	#wsc-chat-widget-root .wsc-chat-input,
	#wsc-chat-widget-root .wsc-chat-login-phone,
	#wsc-chat-widget-root .wsc-chat-login-code,
	#wsc-chat-widget-root .wsc-chat-lead-name,
	#wsc-chat-widget-root .wsc-chat-lead-phone,
	#wsc-chat-widget-root .wsc-chat-order-phone,
	#wsc-chat-widget-root .wsc-chat-order-code,
	#wsc-chat-widget-root .wsc-chat-handoff-name,
	#wsc-chat-widget-root .wsc-chat-handoff-phone {
		font-size: 16px;
	}
}