/**
 * CVD Designer — dedicated desktop / tablet / phone layouts.
 * Desktop (>1200px): 4-column grid (unchanged in frontend.css).
 * Tablet (769–1200px): rail + full-width stage + dock + slide-in side panels.
 * Phone (≤768px): single-column + bottom dock + bottom sheets.
 */

/* Allow mobile/tablet use — remove maintenance blocker */
.cvdds6-mobile-maintenance {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* ── Tablet only (769–1200px) — bottom dock controls panels; no side rail ── */
@media (min-width: 769px) and (max-width: 1200px) {
	.cvdds6-app {
		--cvdds6-compact-dock: 56px;
		--cvdds6-compact-status: 34px;
	}

	.cvdds6-app,
	.cvdds6-app:not(.cvdds6-storefront-pick-solo),
	.cvdds6-app.cvdds6-left-collapsed:not(.cvdds6-storefront-pick-solo),
	.cvdds6-app.cvdds6-options-gated:not(.cvdds6-storefront-pick-solo) {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: 74px minmax(0, 1fr) var(--cvdds6-compact-status) var(--cvdds6-compact-dock) !important;
	}

	.cvdds6-rail,
	.cvdds6-rail.left {
		display: none !important;
	}

	.cvdds6-bottombar {
		display: none !important;
	}

	.cvdds6-flow {
		display: none !important;
	}

	.cvdds6-topbar {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.cvdds6-stage {
		grid-column: 1 !important;
		grid-row: 2 !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	.cvdds6-app.cvdds6-options-gated .cvdds6-stage {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	.cvdds6-left,
	.cvdds6-right {
		position: fixed !important;
		grid-column: unset !important;
		grid-row: unset !important;
		left: 0 !important;
		right: 0 !important;
		top: 74px !important;
		bottom: calc(var(--cvdds6-compact-status) + var(--cvdds6-compact-dock) + env(safe-area-inset-bottom, 0px)) !important;
		width: 100% !important;
		max-width: 100vw !important;
		height: auto !important;
		max-height: min(68vh, 620px) !important;
		margin: 0 !important;
		border-radius: 22px 22px 0 0 !important;
		border-left: none !important;
		border-right: none !important;
		box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55) !important;
		transform: translate3d(0, calc(100% + 24px), 0) !important;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
		z-index: 42 !important;
		padding-top: 4px !important;
	}

	.cvdds6-left.open,
	.cvdds6-right.open {
		transform: translate3d(0, 0, 0) !important;
		pointer-events: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		max-width: 100vw !important;
		max-height: min(68vh, 620px) !important;
		height: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}

	.cvdds6-left.cvdds6-block-stack,
	.cvdds6-right.cvdds6-block-stack {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.cvdds6-statusbar {
		grid-column: 1 !important;
		grid-row: 3 !important;
	}

	.cvdds6-mobile-dock {
		display: flex !important;
		grid-column: 1 !important;
		grid-row: 4 !important;
		align-items: stretch;
		justify-content: space-around;
		gap: 4px;
		padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) 10px !important;
		background: linear-gradient(180deg, rgba(12, 8, 28, 0.97), rgba(6, 4, 14, 0.99)) !important;
		border-top: 1px solid rgba(150, 60, 255, 0.4) !important;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
		z-index: 48 !important;
	}

	.cvdds6-mobile-dock .cvdds6-dock {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		margin: 0;
		padding: 8px 6px;
		border: none;
		border-radius: 14px;
		background: transparent;
		color: #c9b8f0;
		font-size: 11px;
		font-weight: 800;
		cursor: pointer;
		touch-action: manipulation;
	}

	.cvdds6-mobile-dock .cvdds6-dock__ic {
		font-size: 22px;
		line-height: 1;
	}

	.cvdds6-mobile-dock .cvdds6-dock__lbl {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.cvdds6-mobile-dock .cvdds6-dock.is-active {
		background: rgba(124, 32, 255, 0.28) !important;
		color: #fff;
	}

	.cvdds6-mobile-dock .cvdds6-dock--cart {
		background: var(--grad) !important;
		color: #fff !important;
	}

	.cvdds6-mobile-chip-strip {
		display: flex !important;
	}

	.cvdds6-stage-head {
		padding: 12px 16px !important;
	}

	.cvdds6-stage-head h2 {
		font-size: 18px !important;
	}

	.cvdds6-canvas-area {
		width: 100% !important;
		max-width: none !important;
	}

	.cvdds6-top-actions button,
	.cvdds6-top-actions a {
		padding: 9px 12px !important;
		font-size: 13px !important;
	}
}

/* ── Compact touch layering (tablet + phone) — iOS ignores pointer-events on fixed layers ── */
@media (max-width: 1200px) {
	#cvdds6-fullscreen-host .cvdds6-stage {
		z-index: 24 !important;
		position: relative !important;
	}

	#cvdds6-fullscreen-host .cvdds6-topbar {
		z-index: 50 !important;
		position: relative !important;
	}

	#cvdds6-fullscreen-host .cvdds6-statusbar,
	#cvdds6-fullscreen-host .cvdds6-mobile-dock {
		z-index: 48 !important;
		position: relative !important;
	}

	#cvdds6-fullscreen-host .cvdds6-stage-head,
	#cvdds6-fullscreen-host .cvdds6-stage-head-actions,
	#cvdds6-fullscreen-host .cvdds6-stage-head button,
	#cvdds6-fullscreen-host .cvdds6-floating-tools-toggle--head {
		pointer-events: auto !important;
		touch-action: manipulation !important;
	}

	#cvdds6-fullscreen-host .cvdds6-left:not(.open),
	#cvdds6-fullscreen-host .cvdds6-right:not(.open) {
		width: 0 !important;
		height: 0 !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		clip: rect(0, 0, 0, 0) !important;
		clip-path: inset(100%) !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		z-index: -1 !important;
	}

	#cvdds6-fullscreen-host .cvdds6-mobile-sheet-backdrop:not(.is-visible) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	#cvdds6-fullscreen-host .cvdds6-mobile-sheet-backdrop.is-visible {
		display: block !important;
		position: fixed !important;
		z-index: 40 !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	#cvdds6-fullscreen-host .cvdds6-mobile-maintenance {
		display: none !important;
		pointer-events: none !important;
		visibility: hidden !important;
	}

	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area,
	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area .canvas-container,
	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area .upper-canvas,
	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area .lower-canvas {
		pointer-events: auto !important;
	}

	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area .canvas-container,
	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area .upper-canvas,
	#cvdds6-app:not(.cvdds6-options-gated) .cvdds6-canvas-area .lower-canvas {
		touch-action: none !important;
		-ms-touch-action: none !important;
	}
}

/* ── Phone only (≤768px) ── */
@media (max-width: 768px) {
	html.cvdds6-fullscreen-active,
	body.cvdds6-fullscreen-active,
	#cvdds6-fullscreen-host,
	#cvdds6-fullscreen-host #cvdds6-app {
		width: 100% !important;
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}

	.cvdds6-app {
		--cvdds6-compact-dock: 60px;
		--cvdds6-compact-status: 28px;
		--cvdds6-m-dock: 60px;
		--cvdds6-m-status: 28px;
	}

	/* Single column — beat tablet :not() selectors and desktop option-gate grid */
	.cvdds6-app,
	.cvdds6-app:not(.cvdds6-storefront-pick-solo),
	.cvdds6-app.cvdds6-left-collapsed,
	.cvdds6-app.cvdds6-left-collapsed:not(.cvdds6-storefront-pick-solo),
	.cvdds6-app.cvdds6-options-gated,
	.cvdds6-app.cvdds6-options-gated:not(.cvdds6-storefront-pick-solo) {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: 52px minmax(0, 1fr) var(--cvdds6-compact-status) var(--cvdds6-compact-dock) !important;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
		overflow-x: hidden !important;
	}

	.cvdds6-rail,
	.cvdds6-rail.left {
		display: none !important;
	}

	.cvdds6-bottombar {
		display: none !important;
	}

	.cvdds6-flow {
		display: none !important;
	}

	.cvdds6-topbar {
		grid-column: 1 !important;
		grid-row: 1 !important;
		padding: 0 10px 0 12px !important;
		min-height: 52px !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.cvdds6-stage {
		grid-column: 1 !important;
		grid-row: 2 !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}

	.cvdds6-app.cvdds6-options-gated .cvdds6-stage {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	.cvdds6-left,
	.cvdds6-right {
		position: fixed !important;
		grid-column: unset !important;
		grid-row: unset !important;
		left: 0 !important;
		right: 0 !important;
		top: 52px !important;
		bottom: calc(var(--cvdds6-compact-status) + var(--cvdds6-compact-dock) + env(safe-area-inset-bottom, 0px)) !important;
		width: 100% !important;
		max-width: 100vw !important;
		height: auto !important;
		max-height: min(62vh, 560px) !important;
		margin: 0 !important;
		border-radius: 22px 22px 0 0 !important;
		border-left: none !important;
		border-right: none !important;
		transform: translate3d(0, calc(100% + 24px), 0) !important;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
		z-index: 42 !important;
		box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55) !important;
		padding-top: 4px !important;
		pointer-events: none !important;
	}

	.cvdds6-left.open,
	.cvdds6-right.open {
		transform: translate3d(0, 0, 0) !important;
		pointer-events: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		max-width: 100vw !important;
		max-height: min(62vh, 560px) !important;
		height: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		z-index: 42 !important;
	}

	.cvdds6-mobile-sheet-backdrop.is-visible {
		display: block !important;
		position: fixed !important;
		inset: 52px 0 calc(var(--cvdds6-compact-status) + var(--cvdds6-compact-dock) + env(safe-area-inset-bottom, 0px)) 0 !important;
		z-index: 40 !important;
		background: rgba(3, 2, 10, 0.48) !important;
		backdrop-filter: blur(5px) !important;
		-webkit-backdrop-filter: blur(5px) !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		cursor: pointer !important;
	}

	.cvdds6-mobile-chip-strip {
		display: flex !important;
	}

	.cvdds6-statusbar {
		grid-column: 1 !important;
		grid-row: 3 !important;
		height: var(--cvdds6-compact-status) !important;
		padding: 0 10px !important;
		font-size: 11px !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.cvdds6-mobile-dock {
		display: flex !important;
		grid-column: 1 !important;
		grid-row: 4 !important;
		align-items: stretch;
		justify-content: space-around;
		gap: 2px;
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px !important;
		background: linear-gradient(180deg, rgba(12, 8, 28, 0.97), rgba(6, 4, 14, 0.99)) !important;
		border-top: 1px solid rgba(150, 60, 255, 0.4) !important;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
		max-width: 100% !important;
		min-width: 0 !important;
		z-index: 48 !important;
	}

	.cvdds6-mobile-dock .cvdds6-dock {
		flex: 1;
		min-width: 0;
	}

	#cvdds6-need-help.cvdds6-statusbar__hint--action {
		display: inline-flex !important;
	}

	.cvdds6-top-actions button:nth-child(-n + 2) {
		display: none !important;
	}

	.cvdds6-canvas-area {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ── Desktop only (>1200px): panel collapse widens canvas ── */
@media (min-width: 1201px) {
	.cvdds6-mobile-dock,
	.cvdds6-mobile-sheet-backdrop {
		display: none !important;
	}

	.cvdds6-app.cvdds6-left-collapsed:not(.cvdds6-storefront-pick-solo) {
		grid-template-columns: 74px 0px minmax(0, 1fr) 380px !important;
	}

	.cvdds6-app.cvdds6-left-collapsed .cvdds6-left {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		overflow: hidden !important;
		width: 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.cvdds6-app.cvdds6-left-collapsed .cvdds6-stage {
		grid-column: 2 / 4 !important;
		width: 100% !important;
		max-width: none !important;
	}

	.cvdds6-app.cvdds6-left-collapsed .cvdds6-right {
		grid-column: 4 !important;
	}

	.cvdds6-app.cvdds6-left-collapsed .cvdds6-bottombar,
	.cvdds6-app.cvdds6-left-collapsed .cvdds6-statusbar {
		grid-column: 2 / 5 !important;
	}

	.cvdds6-app.cvdds6-options-gated.cvdds6-left-collapsed:not(.cvdds6-storefront-pick-solo) {
		grid-template-columns: 74px 0px minmax(0, 1fr) 0px !important;
	}

	.cvdds6-app.cvdds6-options-gated.cvdds6-left-collapsed .cvdds6-stage {
		grid-column: 2 / 5 !important;
	}

	.cvdds6-app.cvdds6-options-gated.cvdds6-left-collapsed .cvdds6-bottombar,
	.cvdds6-app.cvdds6-options-gated.cvdds6-left-collapsed .cvdds6-statusbar {
		grid-column: 2 / 5 !important;
	}

	.cvdds6-app.cvdds6-left-collapsed .cvdds6-canvas-area {
		width: 100% !important;
		max-width: none !important;
	}
}