/* ===================================================================
   Instagram Stories Pro — استایل فرانت‌اند
   موبایل‌فرست، رسپانسیو و کاملاً سازگار با سایت‌های راست‌چین (RTL)
   از طریق CSS Logical Properties (که خودکار با dir صفحه هماهنگ می‌شوند).
   =================================================================== */

.isp-widget-container {
	/* توجه: مقادیر پیش‌فرض رنگ‌ها عمداً اینجا (روی خودِ ویجت) تعریف نمی‌شوند.
	   المنتور این متغیرها را روی المان والدِ ویجت ({{WRAPPER}}) ست می‌کند و باید
	   به‌صورت Inherit به پایین برسد؛ اگر همین‌جا هم مقدار ثابتی تعریف شود،
	   چون یک مقدار مستقیم همیشه بر مقدار به‌ارث‌رسیده اولویت دارد، رنگ انتخابی
	   در تنظیمات استایل ویجت هرگز اعمال نمی‌شد. مقادیر پیش‌فرض به‌جای آن، در
	   نقطه‌ی مصرف هر متغیر (داخل var(...)) تعریف شده‌اند. */
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.isp-widget-container *,
.isp-widget-container *::before,
.isp-widget-container *::after {
	box-sizing: border-box;
}

/* «لنگرهای استایل» (Style Anchors): المان‌های نامرئی که فقط برای این ساخته شده‌اند که
   کنترل‌های تایپوگرافی/رنگ تب استایل المنتور روی آن‌ها اثر بگذارد. چون پنجره‌ی
   تمام‌صفحه‌ی استوری بیرون از DOM همین ویجت (روی body) قرار می‌گیرد، جاوااسکریپت مقدار
   محاسبه‌شده‌ی این المان‌ها را هنگام باز شدن هر استوری می‌خواند و به عناصر واقعی
   (متن لینک، کامنت‌ها، نام نویسنده) اعمال می‌کند. */
.isp-style-anchor {
	display: none !important;
}

.isp-empty-message {
	color: #8e8e8e;
	font-size: 14px;
	margin: 0;
}

/* ---------------------------- ردیف آواتارها ---------------------------- */

.isp-avatars-scroller {
	position: relative;
	display: flex;
	align-items: center;
}

.isp-avatars-list {
	display: flex;
	/* flex:1 + min-width:0 داخل ظرف isp-avatars-scroller (که خودش flex است): بدون
	   min-width:0، حداقل عرض پیش‌فرض یک آیتم flex برابر با عرض کامل محتوایش است و
	   overflow-x نمی‌تواند به‌درستی فعال شود (یکی از تله‌های رایج Flexbox). */
	flex: 1 1 auto;
	min-width: 0;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	/* حداقل فاصله؛ فقط برای این‌که افکت بزرگ‌نمایی هاور/فوکوس دایره‌ها بریده نشود.
	   فاصله‌ی واقعی بین این ویجت و ویجت‌های اطراف، عمداً اینجا تعیین نمی‌شود
	   تا کاملاً با تنظیمات Margin/Padding خودِ المنتور (تب Advanced) کنترل شود. */
	padding-block: 3px;
	padding-inline: 4px;
	margin: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* عمداً جهت اسکرول همیشه ltr است (مستقل از راست‌چین/چپ‌چین بودن سایت)، چون رفتار
	   scrollLeft در حالت RTL بین مرورگرها ناهماهنگ است (برخی مقدار منفی برمی‌گردانند،
	   برخی مثبت). ترتیب دیداری آیتم‌ها برای سایت‌های راست‌چین با کلاس isp-rtl
	   (افزوده‌شده توسط جاوااسکریپت) و row-reverse حفظ می‌شود؛ این فقط ریاضیِ
	   اسکرول را در همه‌ی مرورگرها یکسان و قابل پیش‌بینی می‌کند. */
	direction: ltr;
	width: 100%;
}

.isp-avatars-list.isp-rtl {
	flex-direction: row-reverse;
}

.isp-avatars-list::-webkit-scrollbar {
	display: none;
}

.isp-story-item {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	/* عرض ثابت نیست: حداقل به اندازه‌ی دایره‌ی آواتار و حداکثر تا جایی که عنوانِ
	   طولانی‌تر بدون بریده‌شدن جا شود؛ به همین ترتیب با فاصله (gap) ردیف استوری‌ها،
	   استوری‌های با عنوان بلندتر فضای بیشتری از هم می‌گیرند (طبق تصویر مرجع). */
	inline-size: auto;
	min-inline-size: 78px;
	max-inline-size: 112px;
	text-align: center;
	background: none;
	border: none;
	padding: 0;
}

.isp-avatar-ring {
	position: relative;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient(45deg, var(--isp-ring-start, #f09433), var(--isp-ring-end, #bc1888));
	transition: transform 0.2s ease;
}

.isp-story-item:hover .isp-avatar-ring,
.isp-story-item:focus-visible .isp-avatar-ring {
	transform: scale(1.06);
}

.isp-story-item.isp-seen .isp-avatar-ring {
	background: var(--isp-ring-seen, #c7c7c7);
}

/* حلقه‌ی چرخانِ «در حال بارگذاری»: دقیقاً طبق درخواست، به‌جای باز شدن فوری استوری،
   تا زمانی که رسانه در پس‌زمینه کامل بارگذاری شود، این حلقه دور همان دایره‌ی
   کلیک‌شده نمایش داده می‌شود. با ::after (نه تغییر background خودِ حلقه) پیاده‌سازی
   شده تا با گرادینت رنگی حلقه یا حالت «دیده‌شده» تداخلی نداشته باشد. */
.isp-story-item.isp-loading .isp-avatar-ring::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2.5px solid transparent;
	/* رنگ پیش‌فرض؛ کنترل اختصاصی «رنگ حلقه‌ی در حال بارگذاری» در تب استایل المنتور
	   (ویجت.php → loading_ring_color) مستقیماً همین دو خط را بازنویسی می‌کند، نه
	   یک متغیر CSS مشترک - تا وابسته به وراثت/اسکوپ متغیر نباشد و همیشه اعمال شود. */
	border-top-color: #6c5dd3;
	border-inline-end-color: #6c5dd3;
	animation: isp-ring-spin 0.7s linear infinite;
}

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

/* ---------------------------- فلش‌های اسکرول (لپ‌تاپ/دسکتاپ) ----------------------------
   فقط برای دستگاه‌های دارای اشاره‌گر دقیق (ماوس) نمایش داده می‌شوند؛ در موبایل/تبلت با
   اسکرول لمسی طبیعی جابجا می‌شود. اندازه/شکل/رنگ/حاشیه/سایه از تب استایل ویجت
   المنتور کاملاً قابل تنظیم است (رجوع کنید به class-isp-story-widget.php). */

.isp-scroll-arrow {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: opacity 0.15s ease;
}

.isp-scroll-arrow-left {
	left: -6px;
}

.isp-scroll-arrow-right {
	right: -6px;
}

.isp-scroll-arrow svg {
	width: 14px;
	height: 14px;
	stroke: #262626;
	fill: none;
}

.isp-scroll-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.isp-scroll-arrow.is-hidden {
	display: none;
}

/* فقط دستگاه‌های دارای ماوس/اشاره‌گر دقیق (لپ‌تاپ/دسکتاپ)؛ در لمسی همیشه پنهان. */
@media not all and (hover: hover) and (pointer: fine) {
	.isp-scroll-arrow {
		display: none !important;
	}
}

.isp-avatar-wrap {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: #fff;
	padding: 2.5px;
	overflow: hidden;
}

.isp-avatar-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.isp-cover-fallback {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #8e8e8e;
}

.isp-cover-fallback svg {
	width: 46%;
	height: 46%;
	fill: #fff;
}

.isp-caption {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 6px;
	/* عرض واقعیِ عنوان را می‌گیرد (حداکثر تا 112px، هم‌راستا با .isp-story-item)؛
	   عنوان‌های کوتاه فقط به اندازه‌ی خودشان جا می‌گیرند، عنوان‌های بلندتر تا این
	   سقف باز می‌شوند و ردیف استوری‌ها با gap موجود متناسب فاصله می‌گیرد. */
	max-inline-size: 112px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #262626;
	/* راست‌چین + جهت RTL صریح: چون والدِ این عنصر (.isp-avatars-list) برای محاسبه‌ی
	   دقیق اسکرول عمداً direction: ltr دارد (رجوع کنید به بخش «ردیف آواتارها»)،
	   بدون این override متن فارسی هم با جهت اشتباه برش می‌خورد و «…» به‌جای انتهای
	   جمله، در ابتدای آن (سمت راست) ظاهر می‌شود. unicode-bidi اطمینان می‌دهد جهتِ
	   طبیعیِ خودِ متن (فارسی/عربی در برابر لینک یا عدد لاتین داخل عنوان) حفظ شود. */
	direction: rtl;
	unicode-bidi: plaintext;
	text-align: right;
}

/* ---------------------------- مودال تمام‌صفحه ---------------------------- */

.isp-modal {
	--isp-action-bg: #6c5dd3;

	position: fixed;
	inset: 0;
	/* پس‌زمینه‌ی تیرهِ نیمه‌شفاف؛ روی موبایل (که .isp-player تمام صفحه را می‌پوشاند) اصلاً
	   دیده نمی‌شود، اما روی صفحات بزرگ‌تر (که .isp-player یک قاب کوچک‌تر و وسط‌چین است)
	   محتوای پشت آن به‌صورت محو/شیشه‌ای مشخص می‌ماند (رجوع کنید به backdrop-filter پایین). */
	background: rgba(10, 10, 12, 0.6);
	z-index: 999999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	/* جداسازی کامل از تایپوگرافی/رنگ‌های عمومی سایت و المنتور، به‌جز جایی که عمداً Inherit می‌کنیم. */
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
}

.isp-modal.active {
	opacity: 1;
	visibility: visible;
}

body.isp-no-scroll {
	overflow: hidden;
}

.isp-player {
	position: relative;
	width: 100%;
	height: 100dvh;
	max-height: 100vh;
	background: #000;
	overflow: hidden;
}

@media (min-width: 640px) {
	/* backdrop-filter عمداً فقط از این نقطه به بعد فعال می‌شود: در همین اندازه است که
	   .isp-player دیگر تمام صفحه را نمی‌پوشاند و فضای اطراف آن (که پس‌زمینه‌ی سایت از
	   پشتش دیده می‌شود) واقعاً قابل مشاهده است؛ روی موبایل محاسبه‌ی این افکت هم بی‌فایده
	   و هم از نظر پرفورمنس ناموجه است. */
	.isp-modal {
		backdrop-filter: blur(18px) saturate(1.1);
		-webkit-backdrop-filter: blur(18px) saturate(1.1);
	}

	.isp-player {
		width: 420px;
		height: min(90vh, 780px);
		border-radius: 14px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	}
}

/* ---------------------------- رسانه (عکس/ویدیو) ---------------------------- */

.isp-media-container {
	position: absolute;
	inset: 0;
}

.isp-media-container img,
.isp-media-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
	background: #111;
}

.isp-media-container img.active,
.isp-media-container video.active {
	opacity: 1;
}

/* ---------------------------- نوار پیشرفت ---------------------------- */

.isp-progress-wrap {
	position: absolute;
	top: 12px;
	inset-inline: 10px;
	display: flex;
	gap: 4px;
	z-index: 20;
	/* نوار پیشرفت همانند اینستاگرام همیشه از چپ به راست پر می‌شود (جهت زمانی، مستقل از زبان سایت). */
	direction: ltr;
}

.isp-bar {
	flex: 1;
	height: 2.5px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	overflow: hidden;
}

.isp-fill {
	height: 100%;
	width: 0%;
	background: #fff;
	transform-origin: left;
}

/* ---------------------------- هدر (آواتار و نام کاربر) ---------------------------- */

.isp-header {
	position: absolute;
	top: 26px;
	inset-inline: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 20;
	direction: inherit;
}

.isp-header-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.8);
}

.isp-header-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	margin-inline-end: auto;
	min-width: 0;
}

.isp-header-name {
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.isp-header-meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.isp-header-time {
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 11.5px !important;
}

/* شمارنده‌ی بازدید (چشم + عدد)، دقیقاً کنار زمان باقی‌مانده در هدر. */
.isp-views {
	display: flex;
	align-items: center;
	gap: 3px;
	color: rgba(255, 255, 255, 0.75) !important;
}

.isp-eye-icon {
	width: 13px !important;
	height: 13px !important;
	fill: none !important;
	stroke: rgba(255, 255, 255, 0.75) !important;
	stroke-width: 1.8 !important;
}

.isp-views-count {
	font-size: 11.5px !important;
	color: rgba(255, 255, 255, 0.75) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

/* ---------------------------- دکمه‌ی بستن (بدون پس‌زمینه) ----------------------------
   دقیقاً مطابق نمای واقعی استوری اینستاگرام: آیکون شناور ساده با سایه‌ی ملایم برای
   خوانایی روی هر تصویری، بدون هیچ باکس یا پس‌زمینه‌ی رنگی. */

.isp-close {
	all: unset !important;
	box-sizing: border-box !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

.isp-close-icon {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: #fff !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.isp-mute-btn {
	all: unset !important;
	box-sizing: border-box !important;
	width: 30px !important;
	height: 30px !important;
	background: rgba(0, 0, 0, 0.35) !important;
	border-radius: 10px !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	font-size: 15px !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

/* فقط برای استوری‌های ویدیویی نمایش داده می‌شود. */
.isp-mute-btn.is-visible {
	display: flex !important;
}

/* ---------------------------- ناحیه‌های لمسی (قبلی/بعدی) ----------------------------
   مطابق رفتار واقعی اینستاگرام، این نواحی بر اساس موقعیت فیزیکی صفحه ثابت هستند
   (سمت راستِ تصویر = بعدی) و مستقل از جهت متن سایت عمل می‌کنند. */

.isp-zone {
	position: absolute;
	top: 70px;
	bottom: 140px;
	width: 45%;
	z-index: 10;
}

.isp-zone-prev {
	left: 0;
}

.isp-zone-next {
	right: 0;
}

/* ---------------------------- لینک استوری (Link Sticker) ----------------------------
   کلمه‌ای که مدیر هنگام ساخت استوری وارد می‌کند و با تپ روی آن، بازدیدکننده به آدرس
   موردنظر هدایت می‌شود؛ موقعیت عمودی آن از پیشخوان قابل تنظیم است. */

.isp-link-chip {
	all: unset !important;
	box-sizing: border-box !important;
	position: absolute !important;
	/* عمداً left فیزیکی (نه inset-inline-start منطقی): موقعیت لینک، مانند نواحی
	   لمسیِ قبلی/بعدی، مستقل از راست‌چین/چپ‌چین بودن سایت و بر اساس خودِ تصویر است. */
	left: 50% !important;
	transform: translateX(-50%) !important;
	top: 80% !important;
	z-index: 15 !important;
	display: none !important;
	align-items: center !important;
	gap: 6px !important;
	background: rgba(255, 255, 255, 0.96) !important;
	padding: 9px 16px !important;
	border-radius: 999px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	max-width: 78% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.isp-link-chip.is-visible {
	display: inline-flex !important;
}

/* مقادیر پیش‌فرض فونت/رنگ متن لینک.
   نکته‌ی مهم: چون قانون بالا `all: unset !important;` دارد، این شورت‌هند به‌صورت ضمنی
   روی «تمام» ویژگی‌ها از جمله رنگ/فونت هم با اولویت important اعمال می‌شود. بنابراین
   اگر این مقادیر پیش‌فرض بدون important نوشته می‌شدند، طبق قانون کاسکید CSS
   (important همیشه برنده است، مستقل از ترتیب یا اختصاصی‌بودن) هرگز اعمال نمی‌شدند و
   همیشه به مقدار unset/inherit برمی‌گشتند. برای همین این مقادیر هم important شده‌اند؛
   بازنویسی پویا از طریق جاوااسکریپت (کپی مقدار از کنترل تایپوگرافی المنتور) نیز با
   همان اولویت important روی استایل درون‌خطی انجام می‌شود تا بتواند این مقادیر را
   بازنویسی کند (important درون‌خطی بر important شیت استایل اولویت دارد). */
.isp-link-chip {
	color: #111 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

.isp-link-icon {
	width: 15px !important;
	height: 15px !important;
	flex-shrink: 0 !important;
	fill: var(--isp-action-bg, #6c5dd3) !important;
}

.isp-link-text {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	/* رنگ به‌صورت مستقیم روی خودِ کلمه (نه فقط با ارث‌بری از والد) تنظیم می‌شود، چون
	   جاوااسکریپت آن را مستقیماً این‌جا هم کپی می‌کند تا در برابر هر قانون CSS دیگری
	   که ممکن است رنگ را روی این عنصر تنظیم کند، مطمئن باشیم. */
	color: inherit !important;
}

/* ---------------------------- کامنت‌ها: پیش‌نمایش + پنل کامل ----------------------------
   پیش‌فرض: فقط ۲ کامنت آخر به‌صورت خلاصه دیده می‌شود (مانند نسخه‌ی جدید اینستاگرام).
   با تپ روی همین ناحیه، پنل کامل با پس‌زمینه‌ی تیره باز و قابل اسکرول لمسی می‌شود. */

.isp-comments-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45) !important;
	z-index: 19;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.isp-modal.isp-comments-open .isp-comments-backdrop {
	opacity: 1;
	visibility: visible;
}

.isp-comments-list {
	position: absolute;
	bottom: 78px;
	inset-inline: 12px;
	z-index: 21;
	display: none;
	flex-direction: column;
	gap: 6px;
	max-height: 26vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	direction: inherit;
	cursor: pointer;
	transition: max-height 0.25s ease, bottom 0.25s ease;
	/* مقادیر پیش‌فرض فونت متن کامنت‌ها؛ عمداً بدون important، تا با تنظیمات تایپوگرافی
	   ویجت در تب استایل المنتور (که هنگام باز شدن استوری در جاوااسکریپت خوانده و
	   جایگزین می‌شود) قابل بازنویسی باشند. کامنت‌ها این مقادیر را از همین‌جا Inherit می‌کنند. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
	font-size: clamp(11.5px, 3.2vw, 13.5px);
	line-height: 1.5;
}

.isp-comments-list::-webkit-scrollbar {
	display: none;
}

.isp-comments-list.is-expanded {
	bottom: 82px;
	max-height: 46vh;
	cursor: default;
	background: transparent;
	padding-top: 6px;
}

.isp-comments-list.is-expanded::before {
	content: '';
	position: sticky;
	top: 0;
	align-self: center;
	width: 36px;
	height: 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.45);
	margin-bottom: 4px;
	flex-shrink: 0;
}

.isp-comment-row {
	align-self: flex-start;
	max-width: 90%;
	background: rgba(0, 0, 0, 0.4) !important;
	backdrop-filter: blur(3px);
	color: #fff !important;
	/* عمداً inherit: اندازه/فونت واقعی از ظرف .isp-comments-list به ارث می‌رسد
	   (نه یک مقدار ثابت روی خودِ ردیف)، تا تنظیم تایپوگرافی المنتور به‌درستی اثر کند. */
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	padding: 6px 12px;
	border-radius: 14px !important;
	word-break: break-word;
}

.isp-comments-list:not(.is-expanded) .isp-comment-row {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.isp-comment-author {
	font-weight: 700;
	margin-inline-end: 5px;
}

.isp-comment-text {
	color: rgba(255, 255, 255, 0.92) !important;
}

.isp-comments-empty {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 12.5px;
	text-align: center;
	margin: 12px 0 !important;
	font-family: inherit;
}

/* ---------------------------- ریپلای بین کامنت‌ها (Threading) ----------------------------
   دقیقاً مانند اینستاگرام: هر کامنت سطح‌بالا یک دکمه‌ی «پاسخ» دارد؛ پاسخ‌های آن
   پشتِ یک دکمه‌ی «مشاهده‌ی N پاسخ» پنهان و با تپ روی آن باز/بسته می‌شوند. */

.isp-comment-thread {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.isp-comment-reply-btn {
	all: unset !important;
	box-sizing: border-box !important;
	align-self: flex-start !important;
	margin-inline-start: 14px !important;
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

.isp-comments-list:not(.is-expanded) .isp-comment-reply-btn,
.isp-comments-list:not(.is-expanded) .isp-comment-replies-toggle {
	display: none !important;
}

.isp-comment-replies-toggle {
	all: unset !important;
	box-sizing: border-box !important;
	align-self: flex-start !important;
	margin-inline-start: 14px !important;
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

.isp-comment-replies {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-inline-start: 20px;
}

.isp-comment-thread.is-replies-open .isp-comment-replies {
	display: flex;
}

.isp-comment-row.isp-comment-reply {
	opacity: 0.88;
}

.isp-comment-row.isp-comment-reply .isp-comment-text {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* ---------------------------- فوتر: لایک و کامنت (دقیقاً مشابه اینستاگرام) ----------------------------
   بر اساس تصویر واقعی استوری اینستاگرام: هیچ‌کدام از آیکون‌ها پس‌زمینه یا باکس ندارند؛
   فقط یک سایه‌ی ملایم زیر هر آیکون برای خوانایی روی هر تصویری. */

.isp-footer {
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	z-index: 22;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	direction: inherit;
}

.isp-footer-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* نوار «در پاسخ به...»؛ وقتی کاربر روی دکمه‌ی «پاسخ» یک کامنت می‌زند نمایش داده می‌شود. */
.isp-reply-indicator {
	all: unset !important;
	box-sizing: border-box !important;
	display: none !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 6px 14px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-size: 12px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

.isp-reply-indicator.is-visible {
	display: flex !important;
}

.isp-reply-indicator-text {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.isp-reply-cancel {
	all: unset !important;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

.isp-reply-cancel svg {
	width: 14px !important;
	height: 14px !important;
	fill: none !important;
	stroke: #fff !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
}

.isp-comment-send {
	all: unset !important;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 34px !important;
	height: 34px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

.isp-send-icon {
	width: 22px !important;
	height: 22px !important;
	fill: none !important;
	stroke: #fff !important;
	stroke-width: 1.8 !important;
	stroke-linejoin: round !important;
	stroke-linecap: round !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
	transform: scaleX(1);
}

.isp-send-icon:dir(rtl) {
	transform: scaleX(-1);
}

.isp-comment-send:disabled {
	opacity: 0.5 !important;
	cursor: default !important;
}

.isp-comment-form.is-hidden,
.isp-comment-send.is-hidden {
	display: none !important;
}

.isp-comment-form {
	all: unset !important;
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	min-width: 0 !important;
	height: 40px !important;
	background: rgba(255, 255, 255, 0.16) !important;
	border: 1.3px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 999px !important;
	padding-inline: 16px !important;
}

.isp-comment-input {
	all: unset !important;
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: 100% !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-family: inherit !important;
	cursor: text !important;
}

.isp-comment-input::placeholder {
	color: rgba(255, 255, 255, 0.85) !important;
}

.isp-like-wrap {
	all: unset !important;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px !important;
}

.isp-like-btn {
	all: unset !important;
	box-sizing: border-box !important;
	width: 34px !important;
	height: 34px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.isp-heart-icon {
	width: 24px !important;
	height: 24px !important;
	fill: none !important;
	stroke: #fff !important;
	stroke-width: 1.8 !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
	transition: transform 0.2s ease;
}

.isp-like-btn.is-liked .isp-heart-icon {
	fill: #ff3b30 !important;
	stroke: #ff3b30 !important;
	animation: isp-heart-pop 0.35s ease;
}

@keyframes isp-heart-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.isp-like-count {
	color: #fff !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

.isp-comment-feedback {
	position: absolute;
	bottom: 96px;
	inset-inline: 12px;
	text-align: center;
	background: rgba(0, 0, 0, 0.72) !important;
	color: #fff !important;
	font-size: 12.5px !important;
	padding: 8px 12px;
	border-radius: 8px !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 25;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif !important;
}

.isp-comment-feedback.is-visible {
	opacity: 1;
}

/* ---------------------------- شناور (اختیاری برای چیدمان‌های سفارشی) ---------------------------- */

@media (max-width: 380px) {
	.isp-story-item {
		min-inline-size: 68px;
		max-inline-size: 96px;
	}
	.isp-caption {
		max-inline-size: 96px;
	}
	.isp-avatar-wrap {
		width: 58px;
		height: 58px;
	}
}