/**
 * Admin Preview Styles
 * Styles for the live widget preview in the settings page.
 */

/* Two-column layout wrapper */
.mac-admin-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

/* Main settings content area */
.mac-admin-main {
	flex: 1;
	min-width: 0;
}

/* Preview sidebar */
.mac-admin-preview {
	width: 380px;
	flex-shrink: 0;
	position: sticky;
	top: 56px; /* Below WP admin bar (32px) + some spacing */
	max-height: calc(100vh - 80px);
	padding: 24px;
	background: #f6f7f7;
	border-radius: 12px;
	border: 1px solid #e0e0e0;
}

.mac-admin-preview-title {
	margin: 0 0 16px 0;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mac-admin-preview-title svg {
	width: 18px;
	height: 18px;
	color: #2D8CFF;
}

/* Preview viewport - simulates a browser/device screen */
.mac-preview-viewport {
	position: relative;
	width: 100%;
	height: 500px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 8px;
	border: 1px solid #ddd;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Simulated page content background pattern */
.mac-preview-viewport::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
}

/* Floating widget root inside preview */
.mac-preview-viewport .mac-floating-root {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* Position variants */
.mac-preview-viewport .mac-floating-root.position-left {
	align-items: flex-start;
}

/* FAB button adjustments for preview */
.mac-preview-viewport .mac-fab {
	width: 48px;
	height: 48px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mac-preview-viewport .mac-icon-open,
.mac-preview-viewport .mac-icon-close {
	width: 22px;
	height: 22px;
}

/* Panel container adjustments */
.mac-preview-viewport .mac-floating-container {
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Ensure ChatKit fills the panel */
.mac-preview-viewport .mac-floating-container .mac-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

/* Hide preview on smaller screens */
@media (max-width: 1100px) {
	.mac-admin-layout {
		flex-direction: column;
	}

	.mac-admin-preview {
		width: 100%;
		position: static;
		max-height: none;
		order: -1; /* Show preview above settings on mobile */
	}

	.mac-preview-viewport {
		height: 450px;
	}
}

/* Extra small screens */
@media (max-width: 782px) {
	.mac-admin-preview {
		padding: 16px;
	}

	.mac-preview-viewport {
		height: 400px;
	}
}