.jf-contact-dock {
	/*
	 * موقعیت ثابت در هر دو زبان.
	 * `inset-inline-end` با جهت متن جابه‌جا می‌شد (فارسی چپ، انگلیسی راست)
	 * و در انگلیسی با دکمه زبان تداخل داشت. حالا همیشه سمت چپ.
	 */
	position: fixed;
	bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	left: max(1rem, env(safe-area-inset-left, 0px));
	right: auto;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.55rem;
	max-height: calc(100dvh - 1.5rem);
	max-height: calc(100vh - 1.5rem);
	pointer-events: none;
	/* Room for green eval FAB stacked above this dock. */
	padding-block-start: 0.25rem;
}

.jf-contact-dock__toggle,
.jf-contact-dock__panel {
	pointer-events: auto;
}

.jf-contact-dock__toggle {
	width: 3.4rem;
	height: 3.4rem;
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: grid;
	place-items: center;
	background: linear-gradient(145deg, #d4af37, #b8921a);
	color: #16120a;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
	transition: transform 0.2s ease, filter 0.2s ease;
}

.jf-contact-dock__toggle:hover,
.jf-contact-dock__toggle:focus-visible {
	transform: translateY(-2px) scale(1.03);
	filter: brightness(1.05);
	outline: none;
}

.jf-contact-dock__toggle-icon {
	display: grid;
	place-items: center;
	line-height: 0;
}

.jf-contact-dock__toggle-icon--close {
	display: none;
}

.jf-contact-dock.is-open .jf-contact-dock__toggle-icon--chat {
	display: none;
}

.jf-contact-dock.is-open .jf-contact-dock__toggle-icon--close {
	display: grid;
}

.jf-contact-dock__panel {
	width: min(15.5rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 5.5rem);
	max-height: calc(100vh - 5.5rem);
	overflow: hidden;
	transform-origin: bottom end;
	transform: translateY(0.5rem) scale(0.96);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.jf-contact-dock.is-open .jf-contact-dock__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.jf-contact-dock__panel[hidden] {
	display: none !important;
}

.jf-contact-dock.is-open .jf-contact-dock__panel {
	display: flex !important;
	flex-direction: column;
}

.jf-contact-dock__list {
	list-style: none;
	margin: 0;
	padding: 0.35rem;
	border-radius: 0.9rem;
	background: rgba(18, 24, 32, 0.97);
	border: 1px solid rgba(232, 238, 244, 0.12);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(10px);
	display: grid;
	gap: 0.2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	max-height: inherit;
	-webkit-overflow-scrolling: touch;
}

html[data-theme="light"] .jf-contact-dock__list {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(23, 32, 41, 0.14);
	box-shadow: 0 16px 36px rgba(23, 32, 41, 0.16);
}

.jf-contact-dock__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.65rem;
	border-radius: 0.65rem;
	text-decoration: none !important;
	color: #e8eef4 !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

html[data-theme="light"] .jf-contact-dock__link {
	color: #172029 !important;
}

.jf-contact-dock__link:hover,
.jf-contact-dock__link:focus-visible {
	background: rgba(201, 162, 39, 0.16);
	transform: translateX(-2px);
	outline: none;
}

html[dir="ltr"] .jf-contact-dock__link:hover,
html[dir="ltr"] .jf-contact-dock__link:focus-visible {
	transform: translateX(2px);
}

.jf-contact-dock__ico {
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 0.55rem;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: #16120a;
}

.jf-contact-dock__link--phone .jf-contact-dock__ico { background: #3b82a8; color: #fff; }
.jf-contact-dock__link--sms .jf-contact-dock__ico { background: #64748b; color: #fff; }
.jf-contact-dock__link--whatsapp .jf-contact-dock__ico { background: #1f8f5a; color: #fff; }
.jf-contact-dock__link--bale .jf-contact-dock__ico { background: #00a3e0; color: #fff; }
.jf-contact-dock__link--eitaa .jf-contact-dock__ico { background: #f59e0b; color: #16120a; }
.jf-contact-dock__link--telegram .jf-contact-dock__ico { background: #229ed9; color: #fff; }
.jf-contact-dock__link--instagram .jf-contact-dock__ico {
	background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
	color: #fff;
}

.jf-contact-dock__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.jf-contact-dock__name {
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
	.jf-contact-dock__toggle,
	.jf-contact-dock__panel,
	.jf-contact-dock__link {
		transition: none;
	}
}