/**
 * Zhimiao Feed Video — 外壳与播放态样式
 * 所有选择器都挂在 .zfv 命名空间下，不含任何全局选择器，
 * 插件停用/删除后页面样式 100% 恢复原样。
 */

/* ---------- 外壳 ---------- */
.zfv {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0d1117;
	line-height: 0;
	/* 让壳与周围卡片圆角一致，避免视频直角盖住卡片圆角 */
	border-radius: inherit;
	/* 默认 16:9 —— 用 aspect-ratio，旧浏览器回退到 padding-top 由内联样式提供 */
	aspect-ratio: 16 / 9;
	width: 100%;
}

/* 未支持 aspect-ratio 的浏览器：容器撑满父级 */
@supports not (aspect-ratio: 16 / 9) {
	.zfv:not(.zfv-in-thumb) {
		height: 0;
	}
	.zfv:not(.zfv-in-thumb) > video.zfv-v,
	.zfv:not(.zfv-in-thumb) > .zfv-iframe {
		height: 100vh;
		max-height: 100%;
	}
}

.zfv > video.zfv-v,
.zfv > .zfv-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #0d1117;
	border: 0;
}

/* 视频层不吃点击，让点击穿透到上层链接 */
.zfv > video.zfv-v {
	pointer-events: none;
}

/* 信息流卡片内：铺满缩略图容器 */
.zfv.zfv-in-thumb {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 0;
}

/* .post-module-thumb 已用 padding-top 撑高，内部绝对定位即可 */

/* ---------- 播放按钮 ---------- */
.zfv .zfv-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(12, 16, 24, .58);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
	cursor: pointer;
	opacity: 0;
	transform: scale(.86);
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
	pointer-events: none;
	line-height: 0;
}

.zfv .zfv-play svg {
	margin-left: 2px;
}

/* 未播放 / 需要点击 / 暂停时显示按钮 */
.zfv[data-state="idle"] .zfv-play,
.zfv[data-state="paused"] .zfv-play,
.zfv[data-state="error"] .zfv-play,
.zfv.zfv-needtap .zfv-play {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.zfv[data-state="playing"] .zfv-play {
	/* 播放中隐藏，但 hover 或触屏点按后仍可见 */
	opacity: 0;
	pointer-events: none;
}

.zfv:hover .zfv-play:not([hidden]) {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.zfv .zfv-play:hover,
.zfv .zfv-play:focus-visible {
	background: rgba(12, 16, 24, .78);
	transform: scale(1.06);
}

.zfv .zfv-play:focus-visible,
.zfv .zfv-mute:focus-visible {
	outline: 2px solid #4f9cf9;
	outline-offset: 2px;
}

/* ---------- 静音开关 ---------- */
.zfv .zfv-mute {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(12, 16, 24, .58);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
	line-height: 0;
}

.zfv[data-state="playing"] .zfv-mute,
.zfv:hover .zfv-mute {
	opacity: 1;
	pointer-events: auto;
}

.zfv .zfv-mute .i-on {
	display: none;
}

.zfv .zfv-mute.is-on .i-off {
	display: none;
}

.zfv .zfv-mute.is-on .i-on {
	display: block;
}

/* ---------- 加载态 ---------- */
.zfv[data-state="loading"]::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid rgba(255, 255, 255, .22);
	border-top-color: #fff;
	border-radius: 50%;
	animation: zfv-spin .8s linear infinite;
}

@keyframes zfv-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- 错误 / 拦截提示 ---------- */
.zfv .zfv-tip {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c9d1d9;
	font-size: 13px;
	line-height: 1.4;
	background: rgba(13, 17, 23, .92);
	letter-spacing: .5px;
}

.zfv.zfv-error .zfv-play {
	display: none;
}

/* ---------- 第三方平台封面卡 ---------- */
.zfv.zfv-embed .zfv-embed-play {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: background .2s ease;
	line-height: 0;
}

.zfv.zfv-embed .zfv-embed-play svg {
	width: 54px;
	height: 54px;
	padding: 12px;
	box-sizing: content-box;
	border-radius: 50%;
	background: rgba(12, 16, 24, .58);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform .2s ease;
}

.zfv.zfv-embed .zfv-embed-play:hover {
	background: rgba(0, 0, 0, .42);
}

.zfv.zfv-embed .zfv-embed-play:hover svg {
	transform: scale(1.06);
}

/* ---------- 信息流卡片上的小角标（可选） ---------- */
.zfv-badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 2;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ---------- 移动端：按钮放大到可点区域 ---------- */
@media screen and (max-width: 768px) {
	.zfv .zfv-play {
		width: 46px;
		height: 46px;
		margin: -23px 0 0 -23px;
	}

	.zfv .zfv-mute {
		width: 32px;
		height: 32px;
		right: 6px;
		bottom: 6px;
		opacity: 1;
		pointer-events: auto;
	}
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
	.zfv .zfv-play,
	.zfv .zfv-mute,
	.zfv.zfv-embed .zfv-embed-play svg {
		transition: none;
	}

	.zfv[data-state="loading"]::after {
		animation-duration: 2s;
	}
}

/* ---------- 打印：不显示任何视频层 ---------- */
@media print {
	.zfv {
		display: none !important;
	}
}