/* 3D Gallery Studio (extension package). The modal chrome (backdrop,
   frame, header, footer, close, buttons, selects, scrollbars) comes
   from the editor's own modal design (dsm family) - the dialog mounts
   inside #wpie-root exactly for that. Only studio-specific layout
   lives here (prefix wpiegal- so sibling studios never collide).
   Settings cards mirror the 3D Text/Mockup Studio CI (icon header). */

.wpiegal-dialog {
	display: flex;
	flex-direction: column;
	width: min( 1420px, 97vw );
	height: min( 860px, 94vh );
}

.wpiegal-body {
	display: flex;
	flex: 1;
	gap: 0;
	min-height: 0;
}

/* ------------------------------ settings cards ---------------------------- */

.wpiegal-card {

	/* Cards live in flex columns: never let them shrink-clip their
	   content - the panel scrolls instead. */
	flex: none;
	overflow: hidden;
	background: var( --ed-panel-alt, rgba( 255, 255, 255, 0.03 ) );
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 10px;
}

.wpiegal-card-head {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 12px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --ed-text-dim, #b9c0cc );
	text-transform: uppercase;
}

.wpiegal-card-head svg {
	flex: none;
	opacity: 0.85;
}

.wpiegal-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 14px 13px;
}

/* --------------------------------- left ---------------------------------- */

.wpiegal-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 208px;
	min-width: 208px;
	padding: 10px;
	overflow-y: auto;
	border-right: 1px solid var( --ed-border, #2a2f36 );
}

.wpiegal-srcbody {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#wpie-root .wpiegal-add {
	justify-content: center;
	width: 100%;
}

.wpiegal-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpiegal-item {
	position: relative;
	display: flex;
	gap: 7px;
	align-items: center;
	padding: 4px 24px 4px 4px;
	cursor: grab;
	background: var( --ed-panel, #1d2126 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 8px;
}

.wpiegal-item img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 5px;
}

.wpiegal-pill {
	flex: none;
	min-width: 17px;
	padding: 1px 4px;
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	background: var( --accent, #3b66ff );
	border-radius: 999px;
}

.wpiegal-itemtitle {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 11px;
	color: var( --ed-text, #e8ebf0 );
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpiegal-rm {
	position: absolute;
	top: 50%;
	right: 4px;
	display: inline-flex;
	padding: 2px;
	color: var( --ed-text-muted, #9aa1ab );
	cursor: pointer;
	background: transparent;
	border: 0;
	transform: translateY( -50% );
}

#wpie-root .wpiegal-rm:hover {
	color: #ff6473;
}

.wpiegal-search {
	width: 100%;
	padding: 7px 9px;
	font-size: 12px;
	color: var( --ed-text, #e8ebf0 );
	background: var( --ed-panel, #1d2126 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 7px;
}

.wpiegal-results {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 200px;
	overflow-y: auto;
}

#wpie-root .wpiegal-post {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 5px;
	text-align: left;
	cursor: pointer;
	background: var( --ed-panel, #1d2126 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 7px;
}

#wpie-root .wpiegal-post.is-on {
	border-color: var( --accent, #3b66ff );
}

.wpiegal-post img {
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: 4px;
}

.wpiegal-postcol {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wpiegal-posttitle {
	overflow: hidden;
	font-size: 11.5px;
	color: var( --ed-text, #e8ebf0 );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpiegal-postdate {
	font-size: 10px;
	color: var( --ed-text-muted, #9aa1ab );
}

.wpiegal-check {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var( --ed-text, #e8ebf0 );
	cursor: pointer;
}

.wpiegal-follow {
	padding-top: 4px;
	border-top: 1px dashed var( --ed-border, #2a2f36 );
}

.wpiegal-note {
	font-size: 11px;
	line-height: 1.45;
	color: var( --ed-text-muted, #9aa1ab );
}

/* --------------------------------- view ----------------------------------- */

.wpiegal-view {
	position: relative;
	display: grid;
	flex: 1;
	place-items: stretch;
	min-width: 0;
	overflow: hidden;
	background:
		repeating-conic-gradient(
			rgba( 128, 128, 128, 0.07 ) 0 25%,
			transparent 0 50%
		)
		0 0 / 22px 22px;
}

.wpiegal-view canvas {
	width: 100%;
	height: 100%;
	touch-action: none;
}

.wpiegal-view.is-doc {
	background-color: #05060a;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.wpiegal-empty {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	max-width: none;
	padding: 40px;
	font-size: 13px;
	line-height: 1.6;
	color: var( --ed-text-muted, #9aa1ab );
	text-align: center;
	pointer-events: none;
}

.wpiegal-hint {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 2;
	padding: 3px 10px;
	font-size: 10px;

	/* Overlay chrome on the 3D preview: fixed light text on the dark pill so
	   it stays readable in light mode (var(--ed-text-muted) flips to dark). */
	color: rgba( 255, 255, 255, 0.82 );
	pointer-events: none;
	background: rgba( 10, 12, 16, 0.55 );
	border-radius: 20px;
	transform: translateX( -50% );
}

#wpie-root .wpiegal-docbtn {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 4px 11px;
	font-size: 11px;
	color: var( --ed-text-muted, #9aa1ab );
	cursor: pointer;
	background: var( --ed-panel, #1d2126 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 20px;
}

#wpie-root .wpiegal-docbtn[aria-pressed='true'] {
	color: var( --ed-text, #e8ebf0 );
	border-color: var( --accent, #3b66ff );
}

/* --------------------------------- side ----------------------------------- */

.wpiegal-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 384px;
	min-width: 384px;
	padding: 10px 12px 16px;
	overflow-y: auto;
	overflow-x: hidden;
	border-left: 1px solid var( --ed-border, #2a2f36 );
}

.wpiegal-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

#wpie-root .wpiegal-more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	align-self: flex-start;
	padding: 2px 0;
	font-size: 11px;
	color: var( --ed-text-muted, #9aa1ab );
	cursor: pointer;
	background: transparent;
	border: 0;
}

#wpie-root .wpiegal-more:hover {
	color: var( --ed-text, #e8ebf0 );
}

.wpiegal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

#wpie-root .wpiegal-chip {
	padding: 4px 9px;
	font-size: 11px;
	color: var( --ed-text-muted, #9aa1ab );
	cursor: pointer;
	background: var( --ed-panel, #1d2126 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 14px;
}

#wpie-root .wpiegal-chip.is-on {
	color: var( --ed-text, #e8ebf0 );
	background: var( --ed-panel-alt, #242932 );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiegal-chip:hover {
	border-color: var( --accent, #3b66ff );
}

.wpiegal-prow {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.wpiegal-lbl {
	flex: 0 0 82px;
	font-size: 11px;
	color: var( --ed-text-muted, #9aa1ab );
}

.wpiegal-prow .dsm-range {
	flex: 1;
	min-width: 0;
}

.wpiegal-prow .dsm-select {
	flex: 1;
	min-width: 0;
}

.wpiegal-val {
	flex: 0 0 36px;
	font-size: 11px;
	color: var( --ed-text, #e8ebf0 );
	text-align: right;
}

.wpiegal-swatches {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
}

#wpie-root .wpiegal-swatch {
	width: 20px;
	height: 20px;
	cursor: pointer;
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 6px;
}

#wpie-root .wpiegal-swatch.is-on {
	outline: 2px solid var( --accent, #3b66ff );
	outline-offset: 1px;
}

.wpiegal-colorhost {
	display: inline-flex;
}

#wpie-root .wpiegal-mini {
	flex: 0 0 auto;
	padding: 5px 9px;
}

.wpiegal-btnrow {
	display: flex;
	gap: 6px;
}

.wpiegal-btnrow > * {
	flex: 1;
	justify-content: center;
	min-width: 0;
}

.wpiegal-btncol {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#wpie-root .wpiegal-btncol > .ai-btn {
	justify-content: center;
	width: 100%;
}

.wpiegal-gap-top {
	margin-top: 8px;
}

.wpiegal-subhead {
	margin-top: 2px;
	font-size: 10px;
	font-weight: 600;
	color: var( --ed-text-muted, #9aa1ab );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Label-less slider rows (left panel): full-width track, value behind. */
.wpiegal-hrow {
	display: flex;
	gap: 8px;
	align-items: center;
}

.wpiegal-hrow .dsm-range {
	flex: 1;
	min-width: 0;
}

/* -------------------------------- footer ---------------------------------- */

.wpiegal-status {
	display: flex;
	gap: 6px;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpiegal-footbtns {
	display: flex;
	flex: none;
	gap: 8px;
}

@media ( max-width: 1240px ) {

	.wpiegal-left {
		width: 188px;
		min-width: 188px;
	}

	.wpiegal-side {
		width: 320px;
		min-width: 320px;
	}
}

/* Busy spinner inside export buttons (shared pattern across the studios). */
.wpiegal-spin {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	vertical-align: -2px;
	border: 2px solid rgba( 128, 128, 128, 0.35 );
	border-top-color: currentcolor;
	border-radius: 50%;
	animation: wpiegal-spin 0.7s linear infinite;
}

@keyframes wpiegal-spin {

	to {
		transform: rotate( 360deg );
	}
}