/* 底部浮动层：Dock 栏 + 返回顶部按钮（移植自 jiaoxuelian-nav，颜色自包含不依赖主题变量） */

.zb-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 900;
	display: flex;
	justify-content: center;
	/* 整条 fixed 通栏，但只有内部长条可点，避免挡住页面下方的内容 */
	pointer-events: none;
	transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .3s ease;
}
.zb-dock.is-left { justify-content: flex-start; padding-left: 24px; }
.zb-dock.is-right { justify-content: flex-end; padding-right: 24px; }

/*
 * 滚动收起：向下滑时 Dock 让位，向上滑立刻回来。
 * 类名由 body 上的 zb-dock-display-scroll（后台「展示方式」）开启，
 * is-dock-hidden / at-bottom 由 assets/js/dock.js 按滚动方向切换。
 */
.zb-dock-display-scroll .zb-dock.is-dock-hidden {
	transform: translateY(calc(100% + 24px));
	opacity: 0;
}
/* 已经滑到页面最底部时不收起，否则用户眼前什么都没有 */
.zb-dock-display-scroll .zb-dock.is-dock-hidden.at-bottom {
	transform: translateY(0);
	opacity: 1;
}
/* 鼠标贴到窗口底部时唤出（元素已移出视口，:hover 命中不到，由 JS 摘掉 is-dock-hidden） */
.zb-dock-display-scroll .zb-dock.is-dock-hidden:hover,
.zb-dock-display-scroll .zb-dock.is-dock-hidden:focus-within {
	transform: translateY(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.zb-dock { transition: none; }
}

.zb-dock-inner {
	display: flex;
	align-items: center;
	gap: var(--dock-gap, 12px);
	padding: 10px 14px;
	pointer-events: auto;
	/* 毛玻璃长条：半透明底 + 模糊 + 细描边，图标浮在上面 */
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--dock-radius, 22px);
	box-shadow: 0 8px 28px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
	max-width: calc(100vw - 32px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.zb-dock-inner::-webkit-scrollbar { display: none; }

.zb-dock .dock-sep {
	flex: 0 0 auto;
	width: 1px;
	height: var(--dock-icon, 52px);
	margin: 0 4px;
	background: rgba(31, 34, 38, .18);
}

.zb-dock .dock-item {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--dock-icon, 52px);
	height: var(--dock-icon, 52px);
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: calc(var(--dock-icon, 52px) * .24);
	color: #1f2226;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}
.zb-dock .dock-item:hover,
.zb-dock .dock-item:focus-visible {
	transform: translateY(-6px) scale(1.09);
	box-shadow: 0 10px 22px rgba(16, 24, 40, .2);
	z-index: 2;
}
.zb-dock .dock-item:active { transform: translateY(-2px) scale(1.02); }
.zb-dock .dock-item:focus-visible {
	outline: 2px solid #1166e6;
	outline-offset: 2px;
}

.zb-dock .dock-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}
.zb-dock .dock-icon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}
.zb-dock .dock-icon svg {
	width: 52%;
	height: 52%;
}
.zb-dock .dock-icon:empty::before {
	content: "";
	width: 46%;
	height: 46%;
	border-radius: 30%;
	background: #1166e6;
	opacity: .85;
}

/* 悬停气泡：图标里的 .dock-tip 只作文字数据源（长条 overflow 会裁掉内部气泡），
   实际气泡由 dock.js 渲染到 body 层，位置跟随图标。 */
.zb-dock .dock-tip { display: none; }

.zb-dock-flytip {
	position: fixed;
	z-index: 901;
	transform: translate(-50%, -100%);
	padding: 5px 10px;
	background: rgba(31, 34, 38, .9);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.zb-dock-flytip.is-show { opacity: 1; }

/* 常驻文字标签 */
.zb-dock.has-label .dock-item {
	width: auto;
	min-width: var(--dock-icon, 52px);
	height: auto;
	min-height: var(--dock-icon, 52px);
	padding: 7px 10px 8px;
}
.zb-dock.has-label .dock-item .dock-tip { display: none; }
.zb-dock .dock-label {
	max-width: 76px;
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6b7280;
}

/* 尺寸与间距档位（由后台设置写入类名，避免内联 style） */
.zb-dock-size-36 { --dock-icon: 36px; --dock-radius: 16px; }
.zb-dock-size-44 { --dock-icon: 44px; --dock-radius: 18px; }
.zb-dock-size-52 { --dock-icon: 52px; --dock-radius: 22px; }
.zb-dock-size-60 { --dock-icon: 60px; --dock-radius: 24px; }
.zb-dock-size-68 { --dock-icon: 68px; --dock-radius: 26px; }
.zb-dock-size-76 { --dock-icon: 76px; --dock-radius: 28px; }

.zb-dock-gap-4 { --dock-gap: 4px; }
.zb-dock-gap-8 { --dock-gap: 8px; }
.zb-dock-gap-12 { --dock-gap: 12px; }
.zb-dock-gap-16 { --dock-gap: 16px; }
.zb-dock-gap-20 { --dock-gap: 20px; }
.zb-dock-gap-28 { --dock-gap: 28px; }

/* 轻提示 —— 停在 Dock 上方，不要被 Dock 遮住 */
.zb-toast {
	position: fixed;
	left: 50%;
	bottom: 108px;
	z-index: 1400;
	padding: 9px 20px;
	background: rgba(31, 34, 38, .92);
	color: #fff;
	font-size: 13px;
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(16, 24, 40, .18);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: all .24s ease;
}
.zb-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 返回顶部 —— 圆形描边按钮，滚过一屏后淡入上浮。
   底边距由 PHP 按 Dock 实际高度写入 --zb-gotop-bottom，没开 Dock 时用 40px。 */
.zb-gotop {
	position: fixed;
	right: 22px;
	bottom: var(--zb-gotop-bottom, 40px);
	z-index: 899;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: #fff;
	border: 1px solid rgba(31, 34, 38, .12);
	border-radius: 50%;
	color: #6b7280;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.zb-gotop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.zb-gotop:hover,
.zb-gotop:focus-visible {
	background: #1166e6;
	border-color: #1166e6;
	color: #fff;
}
.zb-gotop:focus-visible {
	outline: 2px solid #1166e6;
	outline-offset: 2px;
}
.zb-gotop svg {
	width: 18px;
	height: 18px;
	/* 描边箭头压细一点的观感更接近原版 */
	margin-top: -1px;
}

/* ==================================================================
   文章互动按钮（点赞 / 收藏）—— 「方案 C」
   桌面：浮在 Dock 上方的一小组圆钮，不占 Dock 长条的位置；
   手机：CSS 换成贴屏幕右缘、垂直居中的竖排（抖音风）。
   配色自包含，不依赖主题变量。
   ================================================================== */
.zb-post-act {
	/* 马卡龙色：默认浅调，点亮后换同色系深调，状态一眼可辨 */
	--pa-like-1: #ffb9d2;
	--pa-like-2: #ff8db4;
	--pa-like-on-1: #ff6d9f;
	--pa-like-on-2: #f53f7c;
	--pa-fav-1: #ffe0a3;
	--pa-fav-2: #ffc266;
	--pa-fav-on-1: #ffc24d;
	--pa-fav-on-2: #f59600;

	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--zb-pa-bottom, 104px);
	z-index: 898;
	display: flex;
	justify-content: center;
	/* 整条 fixed 通栏，只有里面那组按钮可点 */
	pointer-events: none;
	transition: opacity .22s ease;
}
.zb-post-act.is-left { justify-content: flex-start; padding-left: 24px; }
.zb-post-act.is-right { justify-content: flex-end; padding-right: 24px; }

.zb-pa-inner {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 6px;
	pointer-events: auto;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
}

.zb-pa-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px 0 5px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #1f2226;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.zb-pa-btn:hover { background: rgba(31, 34, 38, .06); }
.zb-pa-btn:focus-visible {
	outline: 2px solid #1166e6;
	outline-offset: 2px;
}

/* 圆形底色块：马卡龙渐变 + 同色投影，图标压白 */
.zb-pa-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	transition: box-shadow .2s ease;
}
.zb-pa-like .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-like-1), var(--pa-like-2));
	box-shadow: 0 3px 10px rgba(255, 110, 160, .45);
}
.zb-pa-fav .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-fav-1), var(--pa-fav-2));
	box-shadow: 0 3px 10px rgba(255, 176, 60, .45);
}
.zb-pa-btn.is-on .zb-pa-ico {
	box-shadow: 0 4px 14px rgba(16, 24, 40, .22);
}
.zb-pa-like.is-on .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-like-on-1), var(--pa-like-on-2));
	box-shadow: 0 4px 14px rgba(245, 63, 124, .5);
}
.zb-pa-fav.is-on .zb-pa-ico {
	background: linear-gradient(150deg, var(--pa-fav-on-1), var(--pa-fav-on-2));
	box-shadow: 0 4px 14px rgba(245, 150, 0, .5);
}

/* 未点亮是描边图标，点亮后填实：一条 path 靠 fill/stroke 切换，省一份图标 */
.zb-pa-ico svg {
	width: 16px;
	height: 16px;
}
.zb-pa-ico svg path,
.zb-pa-ico svg polygon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* 黄底上白描边略飘，压一层浅影提一下对比 */
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}
.zb-pa-btn.is-on .zb-pa-ico svg path,
.zb-pa-btn.is-on .zb-pa-ico svg polygon {
	fill: currentColor;
	stroke-width: 0;
}

.zb-pa-label {
	white-space: nowrap;
}
.zb-pa-num {
	color: #6b7280;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.zb-pa-btn.is-on .zb-pa-num {
	color: #f53f7c;
	font-weight: 600;
}

/* 点亮瞬间弹一下，给点手感 */
@keyframes zb-pa-bump {
	0% { transform: scale(1); }
	38% { transform: scale(1.24); }
	68% { transform: scale(.94); }
	100% { transform: scale(1); }
}
.zb-pa-btn.is-bump .zb-pa-ico {
	animation: zb-pa-bump .46s cubic-bezier(.3, .9, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.zb-pa-btn.is-bump .zb-pa-ico { animation: none; }
}

@media (max-width: 768px) {
	.zb-dock { bottom: 12px; }
	.zb-dock-inner { max-width: calc(100vw - 20px); }
	/* 触控目标不小于 44px；Dock 的底边距在窄屏少 6px，这里同步收一点 */
	.zb-gotop {
		right: 14px;
		width: 44px;
		height: 44px;
		bottom: calc(var(--zb-gotop-bottom, 40px) - 8px);
	}

	/* 手机：不挂在 Dock 上方了，改成贴屏幕右缘、垂直居中的竖排 */
	.zb-post-act {
		left: auto;
		right: 8px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		justify-content: flex-end;
		padding: 0;
	}
	.zb-pa-inner {
		flex-direction: column;
		gap: 20px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.zb-pa-btn {
		position: relative;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
		background: none;
	}
	.zb-pa-btn:hover { background: none; }
	/* 手机上按钮压在正文上，文字标签去掉，只留圆钮 + 数字 */
	.zb-pa-label { display: none; }
	.zb-pa-ico {
		width: 46px;
		height: 46px;
		border: 2px solid rgba(255, 255, 255, .72);
	}
	.zb-pa-ico svg {
		width: 22px;
		height: 22px;
	}
	.zb-pa-ico svg path,
	.zb-pa-ico svg polygon { stroke-width: 1.9; }
	.zb-pa-num {
		position: absolute;
		left: 50%;
		top: 100%;
		margin-top: 2px;
		transform: translateX(-50%);
		padding: 1px 6px;
		background: rgba(255, 255, 255, .92);
		border-radius: 999px;
		box-shadow: 0 2px 8px rgba(16, 24, 40, .16);
		color: #f53f7c;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.5;
	}
	/* 滚动时压低不透明度，别一直挡着正在读的正文 */
	.zb-post-act.is-dim { opacity: .45; }
}

@media print {
	.zb-dock,
	.zb-post-act,
	.zb-gotop { display: none !important; }
}