/**
 * Pilipost AI excerpt — Gemini 视觉方案落地
 * Prefix: .pilipost-ae | Modifier: .pilipost-ae--{style}
 */

.pilipost-ae {
	--pilipost-ae-accent: #0f766e;
	--pilipost-ae-bg-soft: #f0fdfa;
	--pilipost-ae-bg-soft: color-mix(in srgb, var(--pilipost-ae-accent) 6%, transparent);
	--pilipost-ae-border-soft: #ccfbf1;
	--pilipost-ae-border-soft: color-mix(in srgb, var(--pilipost-ae-accent) 20%, transparent);
	--pilipost-ae-border-mid: #99f6e4;
	--pilipost-ae-border-mid: color-mix(in srgb, var(--pilipost-ae-accent) 35%, transparent);
	--pilipost-ae-text-main: #1e293b;
	--pilipost-ae-text-muted: #64748b;
	--pilipost-ae-surface: #ffffff;
	--pilipost-ae-radius: 8px;
	--pilipost-ae-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--pilipost-ae-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		monospace;

	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 1.25rem 0;
	padding: 18px 20px;
	position: relative;
	border-radius: var(--pilipost-ae-radius);
	font-family: var(--pilipost-ae-font-sans);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--pilipost-ae-text-main);
	word-break: break-word;
	-webkit-font-smoothing: antialiased;
}

.pilipost-ae *,
.pilipost-ae *::before,
.pilipost-ae *::after {
	box-sizing: inherit;
}

.pilipost-ae-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.pilipost-ae-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var(--pilipost-ae-accent);
	letter-spacing: 0.01em;
}

.pilipost-ae-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	line-height: 1;
	font-size: 16px;
	color: inherit;
}

.pilipost-ae-icon:not([class*="ri-"]):empty {
	display: none;
}

.pilipost-ae-mark {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.pilipost-ae-mascot {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -6px 0 -6px -2px;
	flex-shrink: 0;
	line-height: 0;
	overflow: visible;
}

.pilipost-ae-mascot.is-on,
.pilipost-ae-mascot:has(.xun-pilibot) {
	display: inline-flex !important;
}

.pilipost-ae-mascot.is-on .xun-pilibot__canvas {
	width: 40px !important;
	height: 40px !important;
	max-width: 40px;
	max-height: 40px;
}

.pilipost-ae--chip .pilipost-ae-mascot.is-on .xun-pilibot__canvas {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px;
	max-height: 28px;
}

.pilipost-ae-mascot .xun-pilibot,
.pilipost-ae-mascot .xun-pilibot__stage,
.pilipost-ae-mascot .xun-pilibot__canvas {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent !important;
	box-shadow: none !important;
}

.pilipost-ae-mascot .xun-pilibot__meta {
	display: none !important;
}

.pilipost-ae--chip .pilipost-ae-mascot {
	width: 28px;
	height: 28px;
	margin: -4px -2px -4px -4px;
}

.pilipost-ae-icon i,
.pilipost-ae-icon .xun-ri-icon {
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

.pilipost-ae-body {
	margin: 0;
	color: var(--pilipost-ae-text-main);
	opacity: 0.92;
	white-space: pre-wrap;
}

.pilipost-ae-desc {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--pilipost-ae-text-muted);
	opacity: 0.8;
}

/* —— plain —— */
.pilipost-ae--plain {
	padding: 14px 0;
	border-radius: 0;
	border-top: 1px solid var(--pilipost-ae-border-soft);
	border-bottom: 1px solid var(--pilipost-ae-border-soft);
	background: transparent;
}

.pilipost-ae--plain .pilipost-ae-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* —— soft —— */
.pilipost-ae--soft {
	background-color: var(--pilipost-ae-bg-soft);
	border-left: 3px solid var(--pilipost-ae-accent);
	border-radius: 0 var(--pilipost-ae-radius) var(--pilipost-ae-radius) 0;
}

/* —— card —— */
.pilipost-ae--card {
	padding: 20px;
	background-color: var(--pilipost-ae-surface);
	border: 1px solid var(--pilipost-ae-border-soft);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.04);
}

.pilipost-ae--card .pilipost-ae-header {
	padding-bottom: 8px;
	margin-bottom: 12px;
	border-bottom: 1px dashed var(--pilipost-ae-border-soft);
}

/* —— quote（无图标，巨型引号） —— */
.pilipost-ae--quote {
	padding: 20px 24px 18px 40px;
	background-color: var(--pilipost-ae-bg-soft);
	border-radius: var(--pilipost-ae-radius);
}

.pilipost-ae--quote::before {
	content: "“";
	position: absolute;
	top: 6px;
	left: 12px;
	font-size: 42px;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--pilipost-ae-accent);
	opacity: 0.4;
	pointer-events: none;
}

.pilipost-ae--quote .pilipost-ae-title {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
}

.pilipost-ae--quote .pilipost-ae-body {
	font-style: italic;
}

/* —— chip —— */
.pilipost-ae--chip {
	margin-top: 28px;
	padding-top: 22px;
	background-color: var(--pilipost-ae-surface);
	border: 1px solid var(--pilipost-ae-border-soft);
}

.pilipost-ae--chip .pilipost-ae-chip {
	position: absolute;
	top: -14px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	border-radius: 20px;
	background: var(--pilipost-ae-accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--pilipost-ae-accent) 30%, transparent);
}

.pilipost-ae--chip .pilipost-ae-chip .pilipost-ae-icon {
	width: 14px;
	height: 14px;
	font-size: 12px;
	color: #ffffff;
}

.pilipost-ae--chip .pilipost-ae-chip .pilipost-ae-mascot .xun-pilibot__canvas {
	filter: drop-shadow(0 0 0 transparent);
}

/* —— outline —— */
.pilipost-ae--outline {
	border: 1.5px dashed var(--pilipost-ae-border-mid);
	background: transparent;
}

/* —— band —— */
.pilipost-ae--band {
	background-color: var(--pilipost-ae-bg-soft);
	border-top: 3.5px solid var(--pilipost-ae-accent);
	border-radius: 0 0 var(--pilipost-ae-radius) var(--pilipost-ae-radius);
}

/* —— bubble —— */
.pilipost-ae--bubble {
	margin-top: 24px;
	background-color: var(--pilipost-ae-bg-soft);
	border: 1px solid var(--pilipost-ae-border-soft);
	border-radius: 12px;
}

.pilipost-ae--bubble::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 26px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid var(--pilipost-ae-border-soft);
	z-index: 1;
}

.pilipost-ae--bubble::after {
	content: "";
	position: absolute;
	top: -6.5px;
	left: 27px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 7px solid var(--pilipost-ae-bg-soft);
	z-index: 2;
}

/* —— motion —— */
.pilipost-ae--motion {
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: var(--pilipost-ae-surface);
	background-image: linear-gradient(var(--pilipost-ae-surface), var(--pilipost-ae-surface)),
		linear-gradient(120deg, var(--pilipost-ae-accent), transparent 60%, var(--pilipost-ae-accent));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-size: 200% 100%;
	animation: pilipostAeGradientShift 6s linear infinite;
}

.pilipost-ae-status-bar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--pilipost-ae-accent);
	background: var(--pilipost-ae-bg-soft);
	flex-shrink: 0;
}

.pilipost-ae-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--pilipost-ae-accent);
	animation: pilipostAePulse 1.8s ease-in-out infinite;
}

.pilipost-ae-motion-cursor {
	display: inline-block;
	width: 2px;
	height: 0.95em;
	margin-left: 2px;
	vertical-align: -0.1em;
	background: var(--pilipost-ae-accent);
	animation: pilipostAeBlink 1s step-end infinite;
}

.pilipost-ae--motion.finished .pilipost-ae-motion-cursor,
.pilipost-ae--motion.is-preview .pilipost-ae-motion-cursor,
.pilipost-ae--typewriter.finished .pilipost-ae-motion-cursor,
.pilipost-ae--typewriter.is-preview .pilipost-ae-motion-cursor {
	display: none;
}

.pilipost-ae--motion.finished .pilipost-ae-dot,
.pilipost-ae--typewriter.finished .pilipost-ae-dot {
	animation: none;
	opacity: 0.85;
}

@keyframes pilipostAeGradientShift {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 200% 0%;
	}
}

@keyframes pilipostAePulse {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

@keyframes pilipostAeBlink {
	50% {
		opacity: 0;
	}
}

/* —— 进场效果（仅摘要文字） —— */
.pilipost-ae--fx .pilipost-ae-fx-text {
	display: inline;
}

.pilipost-ae--fx-soft:not(.is-preview):not(.finished) .pilipost-ae-fx-text,
.pilipost-ae--fx-mask:not(.is-preview):not(.finished) .pilipost-ae-fx-text,
.pilipost-ae--fx-glow:not(.is-preview):not(.finished) .pilipost-ae-fx-text,
.pilipost-ae--fx-shimmer:not(.is-preview):not(.finished) .pilipost-ae-fx-text {
	display: inline-block;
	max-width: 100%;
	vertical-align: baseline;
}

/* soft：柔和浮现 */
.pilipost-ae--fx-soft:not(.is-preview):not(.finished) .pilipost-ae-fx-text {
	opacity: 0;
	transform: translateY(0.45em);
	filter: blur(5px);
	letter-spacing: 0.03em;
	animation: pilipostAeFxSoft 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pilipostAeFxSoft {
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
		letter-spacing: normal;
	}
}

/* mask：墨迹式擦开 */
.pilipost-ae--fx-mask:not(.is-preview):not(.finished) .pilipost-ae-fx-text {
	opacity: 1;
	-webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 55%);
	mask-image: linear-gradient(90deg, #000 20%, transparent 55%);
	-webkit-mask-size: 0% 100%;
	mask-size: 0% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: pilipostAeFxMask 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pilipostAeFxMask {
	to {
		-webkit-mask-size: 250% 100%;
		mask-size: 250% 100%;
	}
}

/* glow：强调色光晕落定 */
.pilipost-ae--fx-glow:not(.is-preview):not(.finished) .pilipost-ae-fx-text {
	opacity: 0;
	filter: blur(3px);
	text-shadow: 0 0 18px color-mix(in srgb, var(--pilipost-ae-accent) 65%, transparent);
	animation: pilipostAeFxGlow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pilipostAeFxGlow {
	0% {
		opacity: 0;
		filter: blur(3px);
		text-shadow: 0 0 20px color-mix(in srgb, var(--pilipost-ae-accent) 70%, transparent);
	}
	55% {
		opacity: 1;
		filter: blur(0);
		text-shadow: 0 0 14px color-mix(in srgb, var(--pilipost-ae-accent) 45%, transparent);
	}
	100% {
		opacity: 1;
		filter: blur(0);
		text-shadow: 0 0 0 transparent;
	}
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.pilipost-ae--fx-glow:not(.is-preview):not(.finished) .pilipost-ae-fx-text {
		text-shadow: 0 0 16px var(--pilipost-ae-accent);
	}
	@keyframes pilipostAeFxGlow {
		0% {
			opacity: 0;
			filter: blur(3px);
			text-shadow: 0 0 18px var(--pilipost-ae-accent);
		}
		55% {
			opacity: 1;
			filter: blur(0);
			text-shadow: 0 0 10px var(--pilipost-ae-accent);
		}
		100% {
			opacity: 1;
			filter: blur(0);
			text-shadow: none;
		}
	}
}

/* cascade：逐字错落下沉 */
.pilipost-ae--fx-cascade .pilipost-ae-fx-ch {
	display: inline-block;
}

.pilipost-ae--fx-cascade:not(.is-preview):not(.finished) .pilipost-ae-fx-ch {
	opacity: 0;
	transform: translateY(0.55em) scale(0.98);
	filter: blur(2px);
	animation: pilipostAeFxCascade 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes pilipostAeFxCascade {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

/* shimmer：流光扫过 */
.pilipost-ae--fx-shimmer:not(.is-preview):not(.finished) .pilipost-ae-fx-text {
	position: relative;
	opacity: 0;
	transform: translateY(0.25em);
	animation: pilipostAeFxShimmerIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pilipost-ae--fx-shimmer:not(.is-preview):not(.finished) .pilipost-ae-fx-text::after {
	content: '';
	position: absolute;
	inset: -0.1em -0.2em;
	border-radius: 2px;
	background: linear-gradient(
		105deg,
		transparent 0%,
		transparent 35%,
		color-mix(in srgb, var(--pilipost-ae-accent) 55%, #fff) 50%,
		transparent 65%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-position: 120% 0;
	animation: pilipostAeFxShimmerSweep 0.95s 0.12s ease forwards;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.pilipost-ae--fx-shimmer:not(.is-preview):not(.finished) .pilipost-ae-fx-text::after {
		background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
		background-size: 220% 100%;
		background-position: 120% 0;
	}
}

@keyframes pilipostAeFxShimmerIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pilipostAeFxShimmerSweep {
	to {
		background-position: -120% 0;
		opacity: 0;
	}
}

/* —— terminal —— */
.pilipost-ae--terminal {
	padding: 0;
	overflow: hidden;
	background: #111827;
	color: #e5e7eb;
	border: 1px solid #374151;
	border-radius: 10px;
	box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.25);
}

.pilipost-ae--terminal .pilipost-ae-header {
	margin-bottom: 0;
	padding: 10px 16px;
	background: #1f2937;
	border-bottom: 1px solid #374151;
}

.pilipost-ae-terminal-controls {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pilipost-ae-terminal-controls span {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.pilipost-ae-terminal-controls .btn-close {
	background: #ef4444;
}

.pilipost-ae-terminal-controls .btn-min {
	background: #f59e0b;
}

.pilipost-ae-terminal-controls .btn-max {
	background: #10b981;
}

.pilipost-ae--terminal .pilipost-ae-title {
	color: #9ca3af;
	font-family: var(--pilipost-ae-font-mono);
	font-size: 12px;
	font-weight: 500;
}

.pilipost-ae--terminal .pilipost-ae-badge {
	font-family: var(--pilipost-ae-font-mono);
	font-size: 11px;
	color: #10b981;
	background: rgba(16, 185, 129, 0.15);
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.pilipost-ae--terminal .pilipost-ae-body {
	padding: 16px 20px;
	color: #d1d5db;
	opacity: 1;
}

.pilipost-ae-terminal-prompt {
	margin-right: 6px;
	color: #10b981;
	font-family: var(--pilipost-ae-font-mono);
	font-weight: 700;
	user-select: none;
}

.pilipost-ae--terminal .pilipost-ae-desc {
	margin-top: 0;
	padding: 0 20px 14px;
	color: #6b7280;
	font-family: var(--pilipost-ae-font-mono);
	font-size: 11px;
	opacity: 1;
}

/* —— terminal light —— */
.pilipost-ae--terminal-light {
	background: #f8fafc;
	color: #1e293b;
	border: 1px solid #e2e8f0;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 10px 28px -12px rgba(15, 23, 42, 0.18);
}

.pilipost-ae--terminal-light .pilipost-ae-header {
	background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
	border-bottom: 1px solid #e2e8f0;
}

.pilipost-ae--terminal-light .pilipost-ae-title {
	color: #64748b;
}

.pilipost-ae--terminal-light .pilipost-ae-badge {
	color: var(--pilipost-ae-accent, #0f766e);
	background: color-mix(in srgb, var(--pilipost-ae-accent, #0f766e) 12%, #fff);
	border-color: color-mix(in srgb, var(--pilipost-ae-accent, #0f766e) 28%, #e2e8f0);
}

.pilipost-ae--terminal-light .pilipost-ae-body {
	color: #334155;
	background: #ffffff;
}

.pilipost-ae--terminal-light .pilipost-ae-terminal-prompt {
	color: var(--pilipost-ae-accent, #0f766e);
}

.pilipost-ae--terminal-light .pilipost-ae-desc {
	color: #94a3b8;
	background: #ffffff;
	border-top: 1px dashed #e2e8f0;
	padding-top: 10px;
	margin-top: 0;
}

.pilipost-ae--terminal-light .pilipost-ae-motion-cursor {
	background: var(--pilipost-ae-accent, #0f766e);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.pilipost-ae--terminal-light .pilipost-ae-badge {
		color: #0f766e;
		background: rgba(15, 118, 110, 0.1);
		border-color: rgba(15, 118, 110, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pilipost-ae--motion {
		animation: none;
		border-color: var(--pilipost-ae-border-soft);
		background-image: none;
		background-color: var(--pilipost-ae-surface);
	}

	.pilipost-ae-dot,
	.pilipost-ae-motion-cursor {
		animation: none !important;
	}

	.pilipost-ae-dot {
		opacity: 0.8;
	}

	.pilipost-ae--fx-soft .pilipost-ae-fx-text,
	.pilipost-ae--fx-mask .pilipost-ae-fx-text,
	.pilipost-ae--fx-glow .pilipost-ae-fx-text,
	.pilipost-ae--fx-shimmer .pilipost-ae-fx-text,
	.pilipost-ae--fx-cascade .pilipost-ae-fx-ch {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		letter-spacing: normal !important;
		text-shadow: none !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	.pilipost-ae--fx-shimmer .pilipost-ae-fx-text::after {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.pilipost-ae--motion .pilipost-ae-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.pilipost-ae--terminal .pilipost-ae-header {
		flex-wrap: wrap;
	}
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
	.pilipost-ae {
		--pilipost-ae-bg-soft: rgba(15, 118, 110, 0.06);
		--pilipost-ae-border-soft: rgba(15, 118, 110, 0.2);
		--pilipost-ae-border-mid: rgba(15, 118, 110, 0.35);
	}

	.pilipost-ae--chip .pilipost-ae-chip {
		box-shadow: 0 2px 6px rgba(15, 118, 110, 0.28);
	}
}