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

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

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

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

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

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

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

#wsib-chat-widget-root .wsib-chat-bubble {
	position: relative;
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	background: var(--wsib-chat-primary);
	color: var(--wsib-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;
}

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

/* نقطه قرمز کوچک روی حباب، همزمان با نمایش حباب جذب‌توجه — تا وقتی کاربر
   چت را باز نکرده، نشانه دیداری «پیام تازه» باقی می‌ماند. */
#wsib-chat-widget-root .wsib-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(--wsib-chat-surface);
}

/* حباب گفتگوی جذب‌توجه — خودکار (بدون کلیک کاربر) کنار آیکون چت ظاهر
   می‌شود؛ کلیک روی خودش هم چت را باز می‌کند، دکمه ✕ فقط همین حباب را
   می‌بندد بدون باز کردن چت. */
#wsib-chat-widget-root .wsib-chat-greeting {
	position: absolute;
	bottom: 74px;
	/* «width» صریح لازم است، نه فقط max-width: چون #wsib-chat-widget-root
	   خودش هیچ عرض مشخصی ندارد و بر اساس محتوای داخل‌جریانش (فقط دکمه ۵۸
	   پیکسلی حباب) جمع می‌شود، یک فرزند position:absolute با width:auto و
	   فقط یکی از left/right مشخص، در همان عرض بسیار کم حباب فشرده می‌شد و
	   متن کلمه‌به‌کلمه می‌افتاد پایین (دقیقا همین باگ) — width ثابت این
	   محاسبه را کاملا دور می‌زند. */
	width: 230px;
	max-width: calc(100vw - 90px);
	background: var(--wsib-chat-surface);
	color: var(--wsib-chat-ink);
	border: 1px solid var(--wsib-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: wsib-chat-greeting-in 0.25s ease-out;
}

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

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

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

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

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

#wsib-chat-widget-root .wsib-chat-greeting-close {
	position: absolute;
	top: 6px;
	left: 6px;
	background: none;
	border: none;
	color: var(--wsib-chat-muted);
	font-size: 12px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	width: auto;
	height: auto;
}

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

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

#wsib-chat-widget-root .wsib-chat-panel {
	position: absolute;
	bottom: 74px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 120px);
	background: var(--wsib-chat-surface);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

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

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

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

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

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

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

#wsib-chat-widget-root .wsib-chat-close,
#wsib-chat-widget-root .wsib-chat-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
	width: auto;
	height: auto;
	opacity: 0.9;
}

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

#wsib-chat-widget-root .wsib-chat-clear {
	font-size: 14px;
}

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

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

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

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

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

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

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

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

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

#wsib-chat-widget-root .wsib-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;
}

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

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

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

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

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

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

#wsib-chat-widget-root .wsib-chat-typing {
	align-self: flex-start;
	font-size: 11.5px;
	color: var(--wsib-chat-muted);
	padding: 0 4px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#wsib-chat-widget-root .wsib-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(--wsib-chat-primary);
	color: var(--wsib-chat-primary);
	background: var(--wsib-chat-surface);
	transition: filter 0.15s ease;
}

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

/* height صریح (نه فقط padding+line-height) عمدا استفاده شده — همان راه‌حلی
   که برای اختلاف ارتفاع دکمه/آیکون پاک‌کردن کلید API در تنظیمات هم به‌کار
   رفت: <a> و <button> با همان padding/line-height هم می‌توانند به‌دلایل
   ظریف مرورگر/تم (baseline پیش‌فرض متفاوت عنصر replaced/non-replaced و
   غیره) کمی ارتفاع متفاوت بگیرند؛ یک height ثابت + flex برای وسط‌چین‌کردن
   محتوا، این اختلاف را کاملا از بین می‌برد. */
#wsib-chat-widget-root .wsib-chat-product-link,
#wsib-chat-widget-root .wsib-chat-add-to-cart,
#wsib-chat-widget-root .wsib-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(--wsib-chat-border);
	background: var(--wsib-chat-bg);
	color: var(--wsib-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;
}

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

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

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

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

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

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

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

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

#wsib-chat-widget-root .wsib-chat-send {
	background: var(--wsib-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;
}

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

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