/* Боковая панель соцсетей, приклеена к правому краю экрана. */

.fcrv-rail {
	position: fixed;
	right: 0;
	/* Отступ снизу — 15% высоты окна. Раньше панель стояла по центру
	   правого края и попадала ровно в область чтения. */
	bottom: 15%;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	border-radius: var(--r-md, 20px) 0 0 var(--r-md, 20px);
	background: rgba(255, 255, 255, .82);
	backdrop-filter: saturate(160%) blur(10px);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 47, 157, .08));
	transition: box-shadow var(--dur, .28s) var(--ease, ease);
}

.fcrv-rail:hover { box-shadow: var(--shadow-lift, 0 12px 32px rgba(0, 47, 157, .14)); }

.fcrv-rail__item {
	position: relative;
	display: flex;
	align-items: center;
	width: 46px;
	height: 46px;
	overflow: hidden;
	color: var(--c-blue-900, #002f9d);
	background: #fff;
	border-radius: var(--r-sm, 12px);
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 47, 157, .06));
	text-decoration: none !important;
	will-change: width;
	transition:
		width      var(--dur, .28s) var(--ease, cubic-bezier(.2, .7, .3, 1)),
		background var(--dur, .28s) var(--ease, cubic-bezier(.2, .7, .3, 1)),
		color      var(--dur, .28s) var(--ease, cubic-bezier(.2, .7, .3, 1)),
		box-shadow var(--dur, .28s) var(--ease, cubic-bezier(.2, .7, .3, 1));
}

.fcrv-rail__icon {
	flex: 0 0 46px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
}

.fcrv-rail__icon svg {
	width: 22px;
	height: 22px;
	display: block;
	transition: transform var(--dur, .28s) var(--ease, ease);
}

.fcrv-rail__label {
	white-space: nowrap;
	padding-right: 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--dur, .28s) var(--ease, ease), transform var(--dur, .28s) var(--ease, ease);
}

/* ---------------------------------------------------------------------------
   Разворачивается ВСЯ панель целиком, а не отдельный квадрат.
   Пока курсор внутри .fcrv-rail — она остаётся раскрытой, и между значками
   можно спокойно ходить: промежутки принадлежат самой панели.
   --------------------------------------------------------------------------- */

.fcrv-rail:hover .fcrv-rail__item,
.fcrv-rail:focus-within .fcrv-rail__item {
	width: 200px;
}

.fcrv-rail:hover .fcrv-rail__label,
.fcrv-rail:focus-within .fcrv-rail__label {
	opacity: 1;
	transform: none;
}

/* Цветом заливается только тот значок, под которым курсор */
.fcrv-rail__item:hover,
.fcrv-rail__item:focus-visible {
	color: #fff;
	background: var(--rail-accent, var(--c-blue-600, #1456ff));
	box-shadow: var(--shadow-lift, 0 12px 32px rgba(0, 47, 157, .14));
}

.fcrv-rail__item:hover .fcrv-rail__icon svg { transform: scale(1.1); }

/* Планшет */
@media (max-width: 1024px) {
	.fcrv-rail__item,
	.fcrv-rail__icon { width: 42px; height: 42px; flex-basis: 42px; }
	.fcrv-rail:hover .fcrv-rail__item,
	.fcrv-rail:focus-within .fcrv-rail__item { width: 185px; }
}

/* Телефон: панель уезжает вниз и становится горизонтальной */
@media (max-width: 767px) {
	.fcrv-rail {
		top: auto;
		right: 50%;
		bottom: 12px;
		transform: translateX(50%);
		flex-direction: row;
		border-radius: var(--r-pill, 9999px);
	}
	.fcrv-rail__item,
	.fcrv-rail__icon { width: 44px; height: 44px; flex-basis: 44px; }
	.fcrv-rail__item { border-radius: var(--r-pill, 9999px); }
	/* На узком экране не разворачиваем — не хватает места */
	.fcrv-rail:hover .fcrv-rail__item,
	.fcrv-rail:focus-within .fcrv-rail__item { width: 44px; }
	.fcrv-rail__label { display: none; }
}

@media print { .fcrv-rail { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.fcrv-rail,
	.fcrv-rail__item,
	.fcrv-rail__label,
	.fcrv-rail__icon svg { transition: none !important; }
}