/* Плавающая панель записи — «жидкое стекло» в духе Apple (iOS 26 Liquid Glass).
 * Паттерны: почти прозрачная заливка, сильное размытие и насыщенность подложки,
 * световой ободок (ярче сверху-слева и снизу-справа), кнопки без сплошного фона.
 * Цвет содержимого адаптивный: над тёмным — белый, над светлым — тёмный (data-tone, см. dock.js).
 * Углы острые (radius 0) — как у остальных кнопок сайта. Кнопки 44px — минимум для касания пальцем.
 */

.yb-dock {
	--yb-dock-fg: #ffffff;
	--yb-dock-tint: rgba(255, 255, 255, 0.08);
	--yb-dock-btn: rgba(255, 255, 255, 0.14);
	--yb-dock-btn-hover: rgba(255, 255, 255, 0.24);
	--yb-dock-shadow: rgba(0, 0, 0, 0.35);

	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: var(--yb-z-dock);
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px;
	border-radius: 0;
	background: var(--yb-dock-tint);
	-webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.06);
	backdrop-filter: blur(18px) saturate(150%) brightness(1.06);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.35),
		inset 0 -1px 1px rgba(255, 255, 255, 0.08),
		0 10px 36px var(--yb-dock-shadow);
	color: var(--yb-dock-fg);
	font-family: var(--yb-font-body);
	transform: translate(-50%, 0);
	opacity: 1;
	transition:
		transform 0.45s var(--yb-ease),
		opacity 0.3s ease,
		color 0.35s ease,
		background-color 0.35s ease;
}

/* Над светлыми секциями — тёмное содержимое и чуть более плотное стекло. */
.yb-dock[data-tone="light"] {
	--yb-dock-fg: var(--yb-ink-text);
	--yb-dock-tint: rgba(255, 255, 255, 0.28);
	--yb-dock-btn: rgba(255, 255, 255, 0.45);
	--yb-dock-btn-hover: rgba(255, 255, 255, 0.7);
	--yb-dock-shadow: rgba(28, 32, 40, 0.18);
}

.yb-dock[hidden] {
	display: flex;
}

.yb-dock.is-hidden {
	transform: translate(-50%, calc(100% + 40px));
	opacity: 0;
	pointer-events: none;
}

/* Световой ободок: градиентная кромка 1px, вырезанная маской. */
.yb-dock::before {
	content: "";
	display: block;
	position: absolute;
	/* Размеры явно: глобальные стили темы перебивают растяжку через inset. */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.75) 0%,
		rgba(255, 255, 255, 0.12) 30%,
		rgba(255, 255, 255, 0.04) 55%,
		rgba(255, 255, 255, 0.45) 100%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

.yb-dock::after,
.yb-dock *::before,
.yb-dock *::after {
	content: none;
	display: none;
}

/* Основная кнопка — стекло чуть плотнее панели, без сплошной заливки. */
.yb-dock .yb-dock__main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border-radius: 0;
	background: var(--yb-dock-btn);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
	color: var(--yb-dock-fg);
	font-size: var(--yb-fs-ui);
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--yb-duration) ease, color 0.35s ease;
}

.yb-dock .yb-dock__main:hover {
	background: var(--yb-dock-btn-hover);
	color: var(--yb-dock-fg);
}

/* Иконки — квадратные плитки из того же стекла, что и основная кнопка. */
.yb-dock .yb-dock__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 0;
	background: var(--yb-dock-btn);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
	color: var(--yb-dock-fg);
	text-decoration: none;
	transition: background var(--yb-duration) ease, color 0.35s ease;
}

.yb-dock .yb-dock__icon:hover {
	background: var(--yb-dock-btn-hover);
	color: var(--yb-dock-fg);
}

.yb-dock a:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* Без поддержки размытия — плотная подложка, чтобы текст читался. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.yb-dock {
		--yb-dock-tint: rgba(28, 32, 40, 0.9);
	}

	.yb-dock[data-tone="light"] {
		--yb-dock-tint: rgba(250, 247, 244, 0.95);
	}
}

@media (max-width: 480px) {
	.yb-dock {
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		gap: 4px;
		padding: 5px;
		border-radius: 0;
		transform: none;
	}

	.yb-dock.is-hidden {
		transform: translateY(calc(100% + 40px));
	}

	.yb-dock .yb-dock__main {
		flex: 1 1 auto;
		height: 44px;
		padding: 0 14px;
		font-size: var(--yb-fs-ui);
	}

	.yb-dock .yb-dock__icon {
		width: 44px;
		height: 44px;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yb-dock {
		transition: opacity 0.2s ease;
	}
}