/**
 * Shared MeowKats plugin presentation contract.
 * Loaded only when a detected front-end MeowKats integration is active.
 */

:root {
	/* Backward-compatible aliases for plugin authors. */
	--mk-floating-side-offset: var(--mk-floating-inline-offset);
	--mk-floating-mobile-side-offset: var(--mk-floating-mobile-inline-offset);
	--mk-plugin-safe-top: max(12px, env(safe-area-inset-top));
	--mk-plugin-safe-bottom: max(var(--mk-floating-bottom-offset), env(safe-area-inset-bottom));
	--mk-plugin-modal-gutter: clamp(8px, 2vw, 24px);
}

.mk-plugin-surface {
	min-inline-size: 0;
	max-inline-size: 100%;
	color: var(--mk-text);
	font-family: var(--mk-font-body);
}

.mk-plugin-surface img,
.mk-plugin-surface video,
.mk-plugin-surface iframe,
.mk-plugin-surface table {
	max-inline-size: 100%;
}

.mk-plugin-surface :where(button, input, select, textarea) {
	font: inherit;
}

.mk-plugin-floating-control {
	position: fixed;
	inset-block-end: max(var(--mk-floating-bottom-offset), var(--mk-safe-area-bottom));
	inset-inline-end: var(--mk-floating-inline-offset);
	z-index: var(--mk-floating-z-index);
}

@media (max-width: 767px) {
	.mk-plugin-floating-control {
		inset-block-end: max(var(--mk-floating-mobile-bottom-offset), calc(var(--mk-safe-area-bottom) + 14px));
		inset-inline-end: var(--mk-floating-mobile-inline-offset);
	}
}