/**
 * Loading shell: PHP placeholder shown before React mounts, and page fade-in after mount.
 * Class names: .llmagnet-react-shell (root), .lrs-* (inner skeleton pieces).
 * Keep in sync with render_react_app_mount_placeholder() in includes/class-admin.php.
 */

/* ── Animations ─────────────────────────────────────────────── */

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

@keyframes llmagnet-fadein {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── React-app root fade-in on mount ────────────────────────── */

.llms-txt-react-app,
.llms-bot-analytics-react-app,
.llms-system-information-react-app,
.llms-reports-react-app,
.llms-products-react-app,
.llms-pages-react-app,
.llms-content-settings-react-app,
.llms-schema-jsonld-react-app {
	animation: llmagnet-fadein 0.22s ease-out both;
}

/* ── Outer shell (the React mount point itself) ─────────────── */

.llmagnet-react-shell {
	box-sizing: border-box;
	width: 100%;
	min-height: 60vh;
	background: #ffffff00;
	display: flex;
	flex-direction: column;
}

.llmagnet-react-shell--full {
	min-height: 100vh;
}

/* ── Top-bar skeleton ───────────────────────────────────────── */

.lrs-topbar {
	width: 100%;
	height: 58px;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	flex-shrink: 0;
}

.lrs-topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ── Content body ───────────────────────────────────────────── */

.lrs-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

/* ── Rows ───────────────────────────────────────────────────── */

.lrs-row {
	display: flex;
	gap: 14px;
}

/* ── Shimmer base ───────────────────────────────────────────── */

.lrs-sk {
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		#eeeef1 0%,
		#f7f7f9 48%,
		#eeeef1 96%
	);
	background-size: 200% 100%;
	animation: llmagnet-shimmer 1.5s ease-in-out infinite;
}

/* ── Top-bar pieces ─────────────────────────────────────────── */

.lrs-sk-logo { width: 118px; height: 22px; border-radius: 5px; }
.lrs-sk-icon { width: 28px;  height: 28px; border-radius: 50%; }
.lrs-sk-chip { width: 72px;  height: 28px; border-radius: 14px; }

/* ── Content card types ─────────────────────────────────────── */

/* 4-column stat cards */
.lrs-card      { flex: 1; height: 96px; }

/* Wide chart (2/3) and narrow side panel (1/3) */
.lrs-row-charts .lrs-chart-main { flex: 2; height: 220px; }
.lrs-row-charts .lrs-chart-side { flex: 1; height: 220px; }

/* Full-width block */
.lrs-fullblock { flex: 1; height: 130px; }

/* ── Staggered animation delays ─────────────────────────────── */

.lrs-sk-logo { animation-delay: 0s; }
.lrs-sk-icon { animation-delay: 0.06s; }
.lrs-sk-chip { animation-delay: 0.12s; }

.lrs-row:nth-child(1) .lrs-sk:nth-child(1) { animation-delay: 0s; }
.lrs-row:nth-child(1) .lrs-sk:nth-child(2) { animation-delay: 0.08s; }
.lrs-row:nth-child(1) .lrs-sk:nth-child(3) { animation-delay: 0.16s; }
.lrs-row:nth-child(1) .lrs-sk:nth-child(4) { animation-delay: 0.24s; }

.lrs-row:nth-child(2) .lrs-sk:nth-child(1) { animation-delay: 0.04s; }
.lrs-row:nth-child(2) .lrs-sk:nth-child(2) { animation-delay: 0.12s; }

.lrs-row:nth-child(3) .lrs-sk:nth-child(1) { animation-delay: 0.08s; }
