/**
 * Image Generator Result Styles
 *
 * Preview display, action buttons, and success states.
 *
 * @package AgenticWP
 */

/* ==========================================================================
   Generating Animation Overlay
   ========================================================================== */

.agenticwp-generating-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--agenticwp-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	animation: fadeIn 0.3s ease-out;
}

.agenticwp-generating-overlay[hidden] {
	display: none;
}

.agenticwp-generating-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--agenticwp-space-xl);
	padding: var(--agenticwp-space-xl);
}

/* Animation Container */
.agenticwp-generating-animation {
	position: relative;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Central Orb */
.agenticwp-generating-orb {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--agenticwp-primary), #6366f1);
	box-shadow:
		0 0 30px rgba(0, 113, 227, 0.4),
		0 0 60px rgba(0, 113, 227, 0.2);
	animation: orbPulse 2s ease-in-out infinite;
}

@keyframes orbPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow:
			0 0 30px rgba(0, 113, 227, 0.4),
			0 0 60px rgba(0, 113, 227, 0.2);
	}
	50% {
		transform: scale(1.1);
		box-shadow:
			0 0 40px rgba(0, 113, 227, 0.5),
			0 0 80px rgba(0, 113, 227, 0.3);
	}
}

/* Rings Container */
.agenticwp-generating-rings {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Individual Rings */
.agenticwp-generating-ring {
	position: absolute;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--agenticwp-primary);
	animation: ringRotate 1.5s linear infinite;
}

.agenticwp-generating-ring:nth-child(1) {
	width: 60px;
	height: 60px;
	border-top-color: var(--agenticwp-primary);
	animation-duration: 1.5s;
}

.agenticwp-generating-ring:nth-child(2) {
	width: 85px;
	height: 85px;
	border-top-color: #6366f1;
	animation-duration: 2s;
	animation-direction: reverse;
}

.agenticwp-generating-ring:nth-child(3) {
	width: 110px;
	height: 110px;
	border-top-color: #8b5cf6;
	animation-duration: 2.5s;
}

@keyframes ringRotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Text */
.agenticwp-generating-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--agenticwp-space-sm);
	text-align: center;
}

.agenticwp-generating-title {
	font-size: var(--agenticwp-text-lg);
	font-weight: var(--agenticwp-font-semibold);
	color: var(--agenticwp-text-primary);
}

.agenticwp-generating-subtitle {
	font-size: var(--agenticwp-text-sm);
	color: var(--agenticwp-text-muted);
}

/* ==========================================================================
   Preview Section
   ========================================================================== */

.agenticwp-preview-section {
	background: var(--agenticwp-bg-white);
	border-radius: var(--agenticwp-radius-lg);
	padding: var(--agenticwp-space-xl);
	border: 1px solid var(--agenticwp-border-light);
	box-shadow: var(--agenticwp-shadow-xs);
	margin-bottom: var(--agenticwp-space-xl);
	animation: fadeIn 0.3s ease-out;
}

.agenticwp-preview-container {
	display: flex;
	flex-direction: column;
	gap: var(--agenticwp-space-xl);
}

/* ==========================================================================
   Preview Image
   ========================================================================== */

.agenticwp-preview-image-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--agenticwp-bg-light);
	border-radius: var(--agenticwp-radius);
	padding: var(--agenticwp-space-lg);
	min-height: 300px;
	position: relative;
	overflow: hidden;
}

/* Checkerboard pattern for transparent images */
.agenticwp-preview-image-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(45deg, #e8e8ed 25%, transparent 25%),
		linear-gradient(-45deg, #e8e8ed 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e8e8ed 75%),
		linear-gradient(-45deg, transparent 75%, #e8e8ed 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
	opacity: 0.5;
}

#agenticwp-preview-image {
	position: relative;
	max-width: 100%;
	max-height: 600px;
	height: auto;
	border-radius: var(--agenticwp-radius-sm);
	box-shadow: var(--agenticwp-shadow-lg);
	animation: scaleIn 0.3s ease-out;
}

/* ==========================================================================
   Preview Actions
   ========================================================================== */

.agenticwp-preview-actions {
	display: flex;
	justify-content: center;
	gap: var(--agenticwp-space-md);
	flex-wrap: wrap;
}

.agenticwp-preview-actions .button {
	display: inline-flex;
	align-items: center;
	gap: var(--agenticwp-space-sm);
	padding: var(--agenticwp-space-sm) var(--agenticwp-space-lg);
	font-size: var(--agenticwp-text-sm);
	font-weight: var(--agenticwp-font-medium);
	border-radius: var(--agenticwp-radius-sm);
	transition: var(--agenticwp-transition-fast);
}

.agenticwp-preview-actions .button .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Save Button */
#agenticwp-save-btn {
	background: var(--agenticwp-success);
	border-color: var(--agenticwp-success);
	color: white;
}

#agenticwp-save-btn:hover {
	background: #2eb34d;
	border-color: #2eb34d;
	box-shadow: var(--agenticwp-shadow-success);
}

#agenticwp-save-btn:focus {
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
}

#agenticwp-save-btn:disabled {
	background: var(--agenticwp-text-muted);
	border-color: var(--agenticwp-text-muted);
}

#agenticwp-save-btn.loading .dashicons {
	animation: spin 1s linear infinite;
}

/* Download Button */
#agenticwp-download-btn {
	background: var(--agenticwp-bg-white);
	border-color: var(--agenticwp-primary);
	color: var(--agenticwp-primary);
}

#agenticwp-download-btn:hover {
	background: var(--agenticwp-primary);
	border-color: var(--agenticwp-primary);
	color: white;
}

#agenticwp-download-btn:focus {
	box-shadow: 0 0 0 3px var(--agenticwp-primary-light);
}

/* Regenerate Button */
#agenticwp-regenerate-btn {
	background: var(--agenticwp-bg-white);
	border-color: var(--agenticwp-border);
	color: var(--agenticwp-text-primary);
}

#agenticwp-regenerate-btn:hover {
	background: var(--agenticwp-bg-light);
	border-color: var(--agenticwp-border-dark);
}

#agenticwp-regenerate-btn:focus {
	box-shadow: 0 0 0 3px var(--agenticwp-primary-light);
}

#agenticwp-regenerate-btn.loading .dashicons {
	animation: spin 1s linear infinite;
}

/* Discard Button */
#agenticwp-discard-btn {
	color: var(--agenticwp-danger);
	background: none;
	border: none;
	padding: var(--agenticwp-space-sm) var(--agenticwp-space-md);
}

#agenticwp-discard-btn:hover {
	background: rgba(255, 59, 48, 0.1);
	text-decoration: none;
}

#agenticwp-discard-btn:focus {
	box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.25);
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */

.agenticwp-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--agenticwp-space-lg);
	border-radius: var(--agenticwp-radius);
	z-index: 10;
}

.agenticwp-loading-spinner {
	width: 48px;
	height: 48px;
	border: 3px solid var(--agenticwp-border-light);
	border-top-color: var(--agenticwp-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.agenticwp-loading-text {
	font-size: var(--agenticwp-text-base);
	color: var(--agenticwp-text-secondary);
	font-weight: var(--agenticwp-font-medium);
}

/* ==========================================================================
   Error State
   ========================================================================== */

.agenticwp-error-message {
	display: flex;
	align-items: flex-start;
	gap: var(--agenticwp-space-md);
	padding: var(--agenticwp-space-lg);
	background: rgba(255, 59, 48, 0.1);
	border: 1px solid rgba(255, 59, 48, 0.3);
	border-radius: var(--agenticwp-radius);
	margin-top: var(--agenticwp-space-lg);
	animation: fadeIn 0.3s ease-out;
}

.agenticwp-error-message .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--agenticwp-danger);
	flex-shrink: 0;
	margin-top: 2px;
}

.agenticwp-error-message p {
	margin: 0;
	font-size: var(--agenticwp-text-sm);
	color: var(--agenticwp-text-primary);
	line-height: var(--agenticwp-leading-normal);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
	.agenticwp-preview-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.agenticwp-preview-actions .button {
		justify-content: center;
	}
}
