@import "tailwindcss" source(none) important;
@import "../tailwind.css" source(none);
@source ".";

@layer components {
	.extendify-agent-markdown :is(h1, h2, h3, h4) {
		@apply font-sans! text-gray-900!;
	}
	.extendify-agent-markdown h1 {
		@apply mb-2! mt-0! text-2xl! font-bold!;
	}
	.extendify-agent-markdown h2 {
		@apply mb-2! mt-0! text-xl! font-semibold!;
	}
	.extendify-agent-markdown h3 {
		@apply mb-1! mt-0! text-lg! font-semibold!;
	}
	.extendify-agent-markdown h4 {
		@apply mb-0.5! mt-0! text-base! font-semibold!;
	}
	.extendify-agent-markdown p {
		@apply m-0! mb-2! text-sm! leading-relaxed! text-gray-900!;
	}
	.extendify-agent-markdown ul {
		@apply my-2! list-disc! pl-2! text-sm! text-gray-900!;
	}
	.extendify-agent-markdown ol {
		@apply my-2! list-decimal! pl-2! text-sm! text-gray-900!;
	}
	.extendify-agent-markdown li {
		@apply mb-1! text-sm! text-gray-900!;
	}
	.extendify-agent-markdown pre {
		@apply my-2! overflow-x-auto! rounded-sm! bg-gray-100! p-2! text-sm! text-gray-900!;
		white-space: pre;
	}
	.extendify-agent-markdown pre code {
		@apply bg-transparent! p-0! font-mono! text-xs! text-gray-900!;
		white-space: pre;
	}
	.extendify-agent-markdown blockquote {
		@apply my-2! border-l-4! border-gray-300! pl-4! text-sm! italic! text-gray-600!;
	}
	.extendify-agent-markdown a {
		@apply text-sm! text-blue-600! underline! transition-colors! hover:text-blue-800!;
	}
}
.extendify-gradient-animation {
	background-image: linear-gradient(
		to right,
		#fff 0%,
		#fff 20%,
		#3858e9 40%,
		#7b90ff 55%,
		#2145e6 80%,
		#fff 90%,
		#fff 100%
	);
	background-size: 500% 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: extendify-gradient-animation 1.5s linear forwards;
}
@keyframes extendify-gradient-animation {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.status-animation {
	background-image: linear-gradient(
		to right,
		#1e1e1e 0% 40%,
		#cccccc 55%,
		#1e1e1e 60% 100%
	);
	background-size: 200% 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: extendify-status-animation 2.5s linear infinite;
}
@keyframes extendify-status-animation {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 00% 50%;
	}
}

body.extendify-agent-mobile-btn-open #site-editor {
	min-height: calc(
		100% -
		var(--extendify-agent-mobile-btn-height, 64px)
	) !important;
	height: calc(
		100vh -
		var(--extendify-agent-mobile-btn-height, 64px)
	) !important;
}
body.extendify-agent-mobile-btn-open .block-editor-block-inspector {
	padding-bottom: var(--extendify-agent-mobile-btn-height, 64px);
}
body.extendify-agent-mobile-btn-open
	.edit-site
	.components-editor-notices__snackbar {
	bottom: calc(
		var(--extendify-agent-mobile-btn-height, 64px) +
		16px
	) !important;
}
/* no-prefix */
.extendify-agent-highlighter-mode {
	user-select: none !important;
}
/* While the agent is running a workflow against the selected block,
 * communicate "you can't click anything else right now." Resting cursor
 * is owned by edit mode's cursor contract (quick-edit.css). */
/* no-prefix */
.extendify-agent-highlighter-mode.extendify-agent-busy {
	cursor: not-allowed !important;
}
/* Ignore button block if inside buttons and only one button */
/* no-prefix */
.extendify-agent-highlighter-mode .wp-block-buttons:has(> .wp-block-button):not(
		:has(> .wp-block-button:nth-of-type(2))
	)
	> .wp-block-button {
	pointer-events: none !important;
}
/* no-prefix */
.extendify-agent-highlighter-mode .wp-block-spacer {
	pointer-events: none !important;
}
/* WP's lightbox img listens for clicks at the page level; suppress here
 * because the capture-phase selector handler in hover-bar otherwise has
 * to compete with the lightbox opening. Anchors / buttons / role=button
 * keep their default pointer-events so the click rule can route them
 * (anchors navigate, form controls focus). */
/* no-prefix */
.extendify-agent-highlighter-mode .wp-lightbox-container img {
	pointer-events: none !important;
}
