/**
 * SERP Preview - AI Overview Indicator
 *
 * Visual indicator showing how AI Overviews affect organic result visibility.
 * ~70% of informational queries trigger AI Overviews (2025-2026 data).
 *
 * @package AgenticWP
 */

/* ============================================
   AI Overview Toggle Button
   ============================================ */

.ai-overview-toggle {
	display: flex;
	align-items: center;
	gap: var(--tool-space-xs);
	min-height: 44px;
	min-width: 44px;
	padding: var(--tool-space-xs) var(--tool-space-sm);
	font-size: var(--tool-font-sm);
	font-weight: 500;
	color: var(--tool-text-muted);
	background: var(--tool-bg-subtle);
	border: 1px solid var(--tool-border);
	border-radius: var(--tool-radius-md);
	cursor: pointer;
	transition:
		background-color var(--tool-transition-base),
		border-color var(--tool-transition-base),
		color var(--tool-transition-base),
		box-shadow var(--tool-transition-base);
}

.ai-overview-toggle:hover {
	background: var(--tool-bg);
	border-color: var(--tool-border-strong);
	color: var(--tool-text);
}

.ai-overview-toggle:focus-visible {
	outline: none;
	box-shadow: var(--tool-shadow-focus);
}

.ai-overview-toggle svg {
	flex-shrink: 0;
	transition: transform var(--tool-transition-base);
}

.ai-overview-toggle-label {
	white-space: nowrap;
}

/* Active state */
.ai-overview-toggle[aria-pressed="true"] {
	background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 100%);
	border-color: transparent;
	color: #fff;
}

.ai-overview-toggle[aria-pressed="true"]:hover {
	background: linear-gradient(135deg, #3b78e7 0%, #2d9649 50%, #f0b004 100%);
}

.ai-overview-toggle[aria-pressed="true"] svg {
	transform: rotate(15deg) scale(1.1);
}

/* ============================================
   AI Overview Indicator Component
   ============================================ */

.ai-overview-indicator {
	display: none;
	flex-direction: column;
	gap: var(--tool-space-sm);
	min-height: 280px;
	padding: var(--tool-space-lg);
	margin-bottom: var(--tool-space-md);
	background: linear-gradient(
		135deg,
		rgba(66, 133, 244, 0.08) 0%,
		rgba(52, 168, 83, 0.06) 50%,
		rgba(251, 188, 5, 0.08) 100%
	);
	border: 2px dashed rgba(66, 133, 244, 0.4);
	border-radius: var(--tool-radius-lg);
	animation: ai-overview-slide-in 0.3s ease-out;
}

/* Visible state */
.ai-overview-indicator:not([hidden]) {
	display: flex;
}

/* Dark theme variant */
.serp-preview--dark .ai-overview-indicator {
	background: linear-gradient(
		135deg,
		rgba(138, 180, 248, 0.12) 0%,
		rgba(129, 201, 149, 0.1) 50%,
		rgba(253, 214, 99, 0.12) 100%
	);
	border-color: rgba(138, 180, 248, 0.4);
}

/* ============================================
   AI Overview Indicator Parts
   ============================================ */

.ai-overview-indicator__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
	border-radius: var(--tool-radius-md);
	color: #fff;
}

.ai-overview-indicator__content {
	flex: 1;
}

.ai-overview-indicator__title {
	margin: 0 0 var(--tool-space-xs);
	font-size: var(--tool-font-base);
	font-weight: 600;
	color: var(--serp-text, #202124);
}

.serp-preview--dark .ai-overview-indicator__title {
	color: #e8eaed;
}

.ai-overview-indicator__description {
	margin: 0;
	font-size: var(--tool-font-sm);
	line-height: 1.5;
	color: var(--serp-text-muted, #5f6368);
}

.serp-preview--dark .ai-overview-indicator__description {
	color: #9aa0a6;
}

.ai-overview-indicator__stats {
	display: flex;
	align-items: center;
	gap: var(--tool-space-sm);
	padding-top: var(--tool-space-sm);
	border-top: 1px dashed rgba(66, 133, 244, 0.3);
	margin-top: auto;
}

.ai-overview-indicator__stat {
	display: inline-flex;
	align-items: center;
	gap: var(--tool-space-xs);
	padding: var(--tool-space-xs) var(--tool-space-sm);
	font-size: var(--tool-font-xs);
	font-weight: 500;
	color: #4285f4;
	background: rgba(66, 133, 244, 0.1);
	border-radius: var(--tool-radius-sm);
}

.serp-preview--dark .ai-overview-indicator__stat {
	color: #8ab4f8;
	background: rgba(138, 180, 248, 0.15);
}

/* ============================================
   Mobile Variant
   ============================================ */

.ai-overview-indicator--mobile {
	min-height: 200px;
	padding: var(--tool-space-md);
}

.ai-overview-indicator--mobile .ai-overview-indicator__icon {
	width: 28px;
	height: 28px;
}

.ai-overview-indicator--mobile .ai-overview-indicator__title {
	font-size: var(--tool-font-sm);
}

.ai-overview-indicator--mobile .ai-overview-indicator__description {
	font-size: var(--tool-font-xs);
}

/* ============================================
   Animations
   ============================================ */

@keyframes ai-overview-slide-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
		max-height: 0;
	}
	to {
		opacity: 1;
		transform: translateY(0);
		max-height: 400px;
	}
}

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

@media (max-width: 480px) {
	.ai-overview-toggle-label {
		/* Hide label on very small screens */
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.ai-overview-toggle {
		padding: var(--tool-space-sm);
	}
}

/* Reduced motion styles consolidated in accessibility.css */

/* ============================================
   No-JS Fallback
   ============================================ */

.no-js .ai-overview-toggle {
	display: none;
}