/**
 * Skeleton loaders for JBM Library / My Library / Owner Library.
 */

@keyframes bm-lib-skeleton-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.joc-blockora-morph-app .bm-lib-skeleton {
	--bm-skeleton-base: color-mix(in srgb, var(--bm-color-outline-variant) 55%, #f4f6fb);
	--bm-skeleton-shine: color-mix(in srgb, #ffffff 78%, var(--bm-color-primary-container, #ebe9ff));
}

.joc-blockora-morph-app .bm-lib-skeleton__bone {
	display: block;
	border-radius: 0.55rem;
	background: linear-gradient(
		90deg,
		var(--bm-skeleton-base) 0%,
		var(--bm-skeleton-shine) 42%,
		var(--bm-skeleton-base) 84%
	);
	background-size: 220% 100%;
	animation: bm-lib-skeleton-shimmer 1.35s ease-in-out infinite;
}

.joc-blockora-morph-app .bm-lib-skeleton--grid .bm-lib-skeleton__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.35rem;
	border: 1px solid color-mix(in srgb, var(--bm-color-outline-variant) 42%, transparent);
	background:
		linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 1px 2px rgba(53, 37, 205, 0.04),
		0 18px 40px -28px rgba(53, 37, 205, 0.22);
	pointer-events: none;
}

.joc-blockora-morph-app .bm-lib-skeleton__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f7f8fc;
}

.joc-blockora-morph-app .bm-lib-skeleton__chrome {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	height: 1.35rem;
	padding: 0 0.7rem;
	background: linear-gradient(180deg, #f4f7fb 0%, #e8eef6 100%);
	border-bottom: 1px solid rgba(53, 37, 205, 0.06);
}

.joc-blockora-morph-app .bm-lib-skeleton__dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #d4d2e2;
}

.joc-blockora-morph-app .bm-lib-skeleton__dot:nth-child(1) {
	background: color-mix(in srgb, #f87171 55%, #e8eef6);
}

.joc-blockora-morph-app .bm-lib-skeleton__dot:nth-child(2) {
	background: color-mix(in srgb, #fbbf24 55%, #e8eef6);
}

.joc-blockora-morph-app .bm-lib-skeleton__dot:nth-child(3) {
	background: color-mix(in srgb, #34d399 55%, #e8eef6);
}

.joc-blockora-morph-app .bm-lib-skeleton__preview {
	position: absolute;
	inset: 1.35rem 0.85rem 0.85rem;
	border-radius: 0.75rem;
	opacity: 0.92;
}

.joc-blockora-morph-app .bm-lib-skeleton__badge {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	width: 4.5rem;
	height: 1.35rem;
	border-radius: 999px;
	z-index: 2;
}

.joc-blockora-morph-app .bm-lib-skeleton__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.05rem 1.15rem 1.2rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__title {
	width: 68%;
	height: 1rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__desc {
	width: 100%;
	height: 0.7rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__desc.is-short {
	width: 72%;
}

.joc-blockora-morph-app .bm-lib-skeleton__meta {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 0.45rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__chip {
	width: 3.75rem;
	height: 1.25rem;
	border-radius: 999px;
}

.joc-blockora-morph-app .bm-lib-skeleton__chip.is-wide {
	width: 5.5rem;
}

/* Stagger shimmer so cards feel alive */
.joc-blockora-morph-app .bm-lib-skeleton--grid .bm-lib-skeleton__card:nth-child(2) .bm-lib-skeleton__bone {
	animation-delay: 0.08s;
}
.joc-blockora-morph-app .bm-lib-skeleton--grid .bm-lib-skeleton__card:nth-child(3) .bm-lib-skeleton__bone {
	animation-delay: 0.16s;
}
.joc-blockora-morph-app .bm-lib-skeleton--grid .bm-lib-skeleton__card:nth-child(4) .bm-lib-skeleton__bone {
	animation-delay: 0.24s;
}
.joc-blockora-morph-app .bm-lib-skeleton--grid .bm-lib-skeleton__card:nth-child(5) .bm-lib-skeleton__bone {
	animation-delay: 0.32s;
}
.joc-blockora-morph-app .bm-lib-skeleton--grid .bm-lib-skeleton__card:nth-child(6) .bm-lib-skeleton__bone {
	animation-delay: 0.4s;
}

/* My Library list rows */
.joc-blockora-morph-app .bm-lib-skeleton--list {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0.35rem 0;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-card {
	display: grid;
	grid-template-columns: 1.25rem minmax(5.5rem, 7.5rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.85rem 1rem;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid color-mix(in srgb, var(--bm-color-outline-variant) 55%, transparent);
	pointer-events: none;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-card:last-child {
	border-bottom: 0;
}

.joc-blockora-morph-app .bm-lib-skeleton__check {
	width: 1rem;
	height: 1rem;
	border-radius: 0.3rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 0.65rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-body .bm-lib-skeleton__title {
	width: 42%;
	min-width: 8rem;
	height: 0.95rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-body .bm-lib-skeleton__meta {
	width: 58%;
	min-width: 10rem;
	height: 0.65rem;
	margin: 0;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-actions {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__list-actions .bm-lib-skeleton__chip {
	width: 2.35rem;
	height: 2.05rem;
	border-radius: 0.55rem;
}

.joc-blockora-morph-app .bm-lib-skeleton--list .bm-lib-skeleton__list-card:nth-child(2) .bm-lib-skeleton__bone {
	animation-delay: 0.07s;
}
.joc-blockora-morph-app .bm-lib-skeleton--list .bm-lib-skeleton__list-card:nth-child(3) .bm-lib-skeleton__bone {
	animation-delay: 0.14s;
}
.joc-blockora-morph-app .bm-lib-skeleton--list .bm-lib-skeleton__list-card:nth-child(4) .bm-lib-skeleton__bone {
	animation-delay: 0.21s;
}
.joc-blockora-morph-app .bm-lib-skeleton--list .bm-lib-skeleton__list-card:nth-child(5) .bm-lib-skeleton__bone {
	animation-delay: 0.28s;
}

@media (max-width: 720px) {
	.joc-blockora-morph-app .bm-lib-skeleton__list-card {
		grid-template-columns: 1.25rem minmax(4.5rem, 6rem) minmax(0, 1fr);
	}

	.joc-blockora-morph-app .bm-lib-skeleton__list-actions {
		grid-column: 2 / -1;
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.joc-blockora-morph-app .bm-lib-skeleton__bone {
		animation: none;
		background: var(--bm-skeleton-base);
	}
}

/* Global Settings */
.joc-blockora-morph-app .bm-lib-skeleton__settings-shell {
	display: grid;
	grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-nav {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.85rem;
	border-radius: 1.1rem;
	border: 1px solid color-mix(in srgb, var(--bm-color-outline-variant) 48%, transparent);
	background: #fff;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-nav-item {
	width: 100%;
	height: 2.65rem;
	border-radius: 0.75rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-nav-item.is-short {
	width: 72%;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-main {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-width: 0;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-eyebrow {
	width: 7rem;
	height: 0.55rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-heading {
	width: min(18rem, 55%);
	height: 1.55rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-lead {
	width: min(34rem, 88%);
	height: 0.75rem;
	margin-bottom: 0.65rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-layout {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-side {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.75rem;
	border-radius: 1rem;
	border: 1px solid color-mix(in srgb, var(--bm-color-outline-variant) 42%, transparent);
	background: #fff;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-side-item {
	width: 100%;
	height: 2.15rem;
	border-radius: 0.65rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-panel {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem 1.35rem 1.5rem;
	border-radius: 1.15rem;
	border: 1px solid color-mix(in srgb, var(--bm-color-outline-variant) 42%, transparent);
	background:
		linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 18px 40px -28px rgba(53, 37, 205, 0.18);
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-panel-title {
	width: 9rem;
	height: 0.95rem;
	margin-bottom: 0.25rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-row {
	width: 100%;
	height: 2.35rem;
	border-radius: 0.7rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-row.is-mid {
	width: 78%;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-row.is-short {
	width: 54%;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin: 0.25rem 0 0.35rem;
}

.joc-blockora-morph-app .bm-lib-skeleton__settings-swatch {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
}

@media (max-width: 900px) {
	.joc-blockora-morph-app .bm-lib-skeleton__settings-shell,
	.joc-blockora-morph-app .bm-lib-skeleton__settings-layout {
		grid-template-columns: 1fr;
	}
}
