/*
 * دکمهٔ شناورِ پیامِ المارو — طرحِ بخشِ ۳۹ سندِ طراحی.
 *
 * هیچ هگزِ خامی اینجا تصمیم‌گیر نیست؛ همهٔ رنگ‌ها از توکن‌های `--c-*` می‌آیند و
 * هگزِ کنارشان فقط «پشتیبان» است تا اگر قالبی توکن‌ها را نداشت، دکمه بی‌رنگ نشود.
 */

/*
 * جعبهٔ بیرونی دقیقاً به اندازهٔ خودِ دکمه است — منو با `absolute` بالای آن سوار
 * می‌شود و هیچ فضایی نمی‌گیرد. اگر منو در جریانِ عادی می‌ماند، ارتفاعِ نامرئی‌اش
 * جای دکمه را در حالتِ چسبیده به فوتر جابه‌جا می‌کرد.
 */
.elm-sup {
	position: fixed;
	right: 16px;
	bottom: 24px;
	z-index: 9997;
	direction: rtl;
	font-family: inherit;
}

/*
 * حالتِ چسبیده به لبهٔ فوتر: دکمه از «شناور» درمی‌آید و مثل یک المانِ عادیِ صفحه
 * روی لبهٔ فوتر می‌نشیند؛ یعنی با ادامهٔ پیمایش، خودش هم با فوتر بالا می‌رود.
 * z-index پایین می‌آید تا هنگامِ بالا رفتن، پشتِ هدرِ چسبیده رد شود نه رویش.
 */
.elm-sup.is-docked {
	position: absolute;
	bottom: auto;
	z-index: 900;
}

.elm-sup.is-docked .elm-sup__btn {
	box-shadow: 0 8px 22px rgba(62, 35, 41, .34);
}

/* وقتی کشوی منو باز است، دکمه پشتِ پرده نمی‌ماند؛ کنار می‌رود. */
html.elm-drawer-open .elm-sup,
html.elm-msearch-open .elm-sup {
	opacity: 0;
	pointer-events: none;
}

/* ---------- دکمهٔ گِرد ---------- */

.elm-sup__btn {
	width: 56px;
	height: 56px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	border-radius: var(--r-pill, 999px);
	background: var(--c-primary, #A0455A);
	color: var(--c-on-primary, #FFF6F3);
	box-shadow: 0 12px 32px rgba(62, 35, 41, .28);
	/* حلقهٔ هم‌رنگِ پس‌زمینه: روی صفحه دیده نمی‌شود، روی فوترِ تیره دکمه را جدا می‌کند. */
	outline: 3px solid var(--c-bg, #FFFCFB);
	outline-offset: 0;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1)),
		transform var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.elm-sup__btn:hover {
	background: var(--c-primary-hover, #8C3A4E);
}

.elm-sup__btn:active {
	transform: scale(.94);
}

.elm-sup__btn:focus-visible {
	outline: 3px solid var(--c-primary, #A0455A);
	outline-offset: 2px;
}

.elm-sup__btn svg {
	width: 26px;
	height: 26px;
	display: block;
	pointer-events: none;
}

/*
 * آیکونِ بستن فقط وقتی منو باز است.
 * وزنِ گزینشگر عمداً از `.elm-sup__btn svg` بالاتر گرفته شده، وگرنه آن قاعده
 * `display:block` را برمی‌گرداند و هر دو آیکون روی هم می‌افتند.
 */
.elm-sup__btn .elm-sup__ico--x {
	display: none;
}

.elm-sup.is-open .elm-sup__btn .elm-sup__ico--chat {
	display: none;
}

.elm-sup.is-open .elm-sup__btn .elm-sup__ico--x {
	display: block;
}

/* نقطهٔ کوچکِ «آنلاین» گوشهٔ دکمه. */
.elm-sup__dot {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 12px;
	height: 12px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-success, #2E7D5B);
	border: 2px solid var(--c-bg, #FFFCFB);
}

.elm-sup.is-open .elm-sup__dot {
	display: none;
}

.elm-sup__btnwrap {
	position: relative;
	display: flex;
}

/* ---------- منوی راه‌های تماس ---------- */

.elm-sup__menu {
	position: absolute;
	bottom: calc(100% + 10px);
	right: 0;
	display: flex;
	flex-direction: column;
	/* ستون در راست‌به‌چپ: `flex-start` یعنی لبهٔ راست — همان لبهٔ دکمه. */
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px) scale(.96);
	transform-origin: bottom right;
	transition:
		opacity var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1)),
		transform var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1)),
		visibility var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.elm-sup.is-open .elm-sup__menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.elm-sup__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elm-sup__item {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 12px 0 16px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-surface, #FFFFFF);
	border: 1px solid var(--c-border, #F0DED7);
	box-shadow: 0 6px 18px rgba(62, 35, 41, .16);
	color: var(--c-text, #3E2329);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1)),
		border-color var(--dur, 180ms) var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.elm-sup__item:hover {
	background: var(--c-surface-alt, #F9E7E3);
	border-color: var(--c-border-strong, #DEC3BC);
	color: var(--c-text, #3E2329);
}

.elm-sup__item:focus-visible {
	outline: 3px solid var(--c-primary, #A0455A);
	outline-offset: 2px;
}

.elm-sup__ic {
	width: 30px;
	height: 30px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-pill, 999px);
	background: var(--c-rose, #F3D9D3);
	color: var(--c-primary, #A0455A);
}

.elm-sup__ic svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* ---------- دسکتاپ ---------- */

@media (min-width: 1025px) {
	.elm-sup {
		right: 22px;
	}

	.elm-sup__btn {
		width: 60px;
		height: 60px;
	}

	.elm-sup__btn svg {
		width: 28px;
		height: 28px;
	}
}

/* ---------- کم‌کردنِ حرکت ---------- */

@media (prefers-reduced-motion: reduce) {

	.elm-sup__btn,
	.elm-sup__item,
	.elm-sup__menu {
		transition: none;
	}
}