/**
 * HT Mega AI Section Assistant — editor UI styles
 * File: admin/assets/css/htmega-ai-section-assistant.css
 */

/* Deliberately overrides Elementor's circular '.elementor-add-section-area-button'
 * sizing into a pill with a visible label — a shape/text difference reads as
 * distinct regardless of icon choice, unlike matching icon-only circles
 * (which twice ended up looking the same as another button in this row).
 *
 * !important is deliberate here, not a shortcut: this element also carries
 * Elementor's own '.elementor-add-section-area-button' class (for baseline
 * button behavior/positioning in their row), whose fixed circular
 * width/height otherwise wins the cascade and leaves our text overflowing a
 * still-circular box instead of actually becoming a pill. */
.htmega-ai-section-sparkle {
	width: auto !important;
	height: 40px !important;
	padding: 0 14px !important;
	border-radius: 20px !important;
	background: #6c3fc9 !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
}

.htmega-ai-section-sparkle i {
	font-size: 14px;
}

.htmega-ai-section-sparkle span {
	font-size: 12px;
	font-weight: 600;
}

/* Modal visual language deliberately matches the existing "HT Mega AI Writer"
 * popup (admin/assets/css/htmega-ai-integration.css: .htmega-ai-modal-*) —
 * same gradient header, corner radius, shadow, field/button treatment — so
 * the two AI features in this plugin read as one product, not two bolted-on
 * UIs. Values copied intentionally, not re-derived. */
.htmega-ai-section-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.htmega-ai-section-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	backdrop-filter: blur( 3px );
}

.htmega-ai-section-modal__box {
	position: relative;
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 25px rgba( 0, 0, 0, 0.1 );
	animation: htmegaAiSectionModalFadeIn 0.3s ease;
}

@keyframes htmegaAiSectionModalFadeIn {
	from { opacity: 0; transform: translateY( 20px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.htmega-ai-section-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background: linear-gradient( 135deg, #667eea 0%, #764ba2 100% );
	border-radius: 14px 14px 0 0;
	color: #fff;
}

.htmega-ai-section-modal__header strong {
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.htmega-ai-section-modal__header strong::before {
	content: '';
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c-.25 0-.49-.09-.69-.26l-2.35-2.17c-.4-.35-.94-.52-1.49-.55-.2 0-.38 0-.57-.01a1.43 1.43 0 0 1-.94-.4 1.38 1.38 0 0 1 0-1.88l2.15-2.33c.35-.39.52-.89.56-1.36 0-.17.03-.34.07-.5.13-.46.39-.87.75-1.18a1.38 1.38 0 0 1 1.75 0c.36.31.62.72.75 1.18.04.16.06.33.07.5.03.47.21.97.56 1.36l2.15 2.33a1.38 1.38 0 0 1 0 1.88c-.26.25-.6.39-.95.4-.18 0-.36.01-.57.01-.55.03-1.09.2-1.49.55l-2.35 2.17c-.2.17-.44.26-.69.26ZM18 13.97a4.2 4.2 0 0 1-.75-1.51 4.2 4.2 0 0 1-1.38-.96 4.2 4.2 0 0 1 1.38-.96c.2-.63.5-1.2.75-1.51.2.31.55.88.75 1.51.53.21 1.02.54 1.38.96a4.2 4.2 0 0 1-1.38.96c-.2.63-.55 1.2-.75 1.51ZM6 13.97a4.2 4.2 0 0 1-.75-1.51 4.2 4.2 0 0 1-1.38-.96 4.2 4.2 0 0 1 1.38-.96c.2-.63.55-1.2.75-1.51.2.31.55.88.75 1.51.53.21 1.02.54 1.38.96a4.2 4.2 0 0 1-1.38.96c-.2.63-.55 1.2-.75 1.51ZM12 7.97c-.28-1.15-1.03-2.01-2.2-2.4 1.17-.43 1.92-1.29 2.2-2.4.28 1.15 1.03 2.01 2.2 2.4-1.17.43-1.92 1.29-2.2 2.4Z'/%3E%3C/svg%3E" ) no-repeat center / contain;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c-.25 0-.49-.09-.69-.26l-2.35-2.17c-.4-.35-.94-.52-1.49-.55-.2 0-.38 0-.57-.01a1.43 1.43 0 0 1-.94-.4 1.38 1.38 0 0 1 0-1.88l2.15-2.33c.35-.39.52-.89.56-1.36 0-.17.03-.34.07-.5.13-.46.39-.87.75-1.18a1.38 1.38 0 0 1 1.75 0c.36.31.62.72.75 1.18.04.16.06.33.07.5.03.47.21.97.56 1.36l2.15 2.33a1.38 1.38 0 0 1 0 1.88c-.26.25-.6.39-.95.4-.18 0-.36.01-.57.01-.55.03-1.09.2-1.49.55l-2.35 2.17c-.2.17-.44.26-.69.26ZM18 13.97a4.2 4.2 0 0 1-.75-1.51 4.2 4.2 0 0 1-1.38-.96 4.2 4.2 0 0 1 1.38-.96c.2-.63.5-1.2.75-1.51.2.31.55.88.75 1.51.53.21 1.02.54 1.38.96a4.2 4.2 0 0 1-1.38.96c-.2.63-.55 1.2-.75 1.51ZM6 13.97a4.2 4.2 0 0 1-.75-1.51 4.2 4.2 0 0 1-1.38-.96 4.2 4.2 0 0 1 1.38-.96c.2-.63.55-1.2.75-1.51.2.31.55.88.75 1.51.53.21 1.02.54 1.38.96a4.2 4.2 0 0 1-1.38.96c-.2.63-.55 1.2-.75 1.51ZM12 7.97c-.28-1.15-1.03-2.01-2.2-2.4 1.17-.43 1.92-1.29 2.2-2.4.28 1.15 1.03 2.01 2.2 2.4-1.17.43-1.92 1.29-2.2 2.4Z'/%3E%3C/svg%3E" ) no-repeat center / contain;
	flex-shrink: 0;
}

.htmega-ai-section-modal__close {
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	padding: 5px;
	line-height: 1;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s ease;
}

.htmega-ai-section-modal__close:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

.htmega-ai-section-modal__body {
    padding: 25px;
    max-height: 70vh;
    overflow: auto;
}

.htmega-ai-section-modal__field-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #333;
	font-size: 14px;
}

.htmega-ai-section-modal__mode {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #444;
}

.htmega-ai-section-modal__mode label {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	cursor: pointer;
}

.htmega-ai-page-name-wrap {
	margin-bottom: 16px;
}

.htmega-ai-page-name {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #e1e5e9;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.htmega-ai-section-modal__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: #888;
	line-height: 1.4;
}

.htmega-ai-page-name:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba( 102, 126, 234, 0.1 );
}

.htmega-ai-section-modal__prompt {
	width: 100%;
	min-height: 90px;
	padding: 12px;
	border: 2px solid #e1e5e9;
	border-radius: 6px;
	resize: vertical;
	box-sizing: border-box;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.2s ease;
}

.htmega-ai-section-modal__prompt:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba( 102, 126, 234, 0.1 );
}

.htmega-ai-section-modal__status {
	margin-top: 14px;
	font-size: 13px;
}

.htmega-ai-section-modal__results {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.htmega-ai-section-result {
	display: flex;
	flex-direction: column;
	background: #f8f9fa;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	font-size: 13px;
}

.htmega-ai-section-result__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
}

/* Regenerate-history tag ("v1", "v2"...) — a small pill, not inline text
 * appended to the sentence, so it reads as metadata rather than part of the
 * descriptor itself. Purple to match Regenerate, the feature it belongs to. */
.htmega-ai-section-result__version {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f5f0fa;
	color: #764ba2;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

/* Visual preview thumbnail — a real server-rendered iframe of the generated
 * widget (see renderPreview()/handle_render_preview()), scaled down to fit.
 * The :empty state (before the async render call resolves, or if it silently
 * fails) shows a "Loading…" placeholder rather than a blank box. */
.htmega-ai-preview-thumb {
	position: relative;
	width: 100%;
	height: 185px;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.htmega-ai-preview-thumb:empty::after {
	content: 'Loading preview…';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 12px;
}

.htmega-ai-preview-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1440px;
	height: 500px;
	border: 0;
	transform: scale( 0.28 );
	transform-origin: top left;
	pointer-events: none; /* thumbnail only — clicks go to Insert, not into the preview */
}

.htmega-ai-preview-thumb-wrap {
	position: relative;
}

.htmega-ai-preview-btn {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 5px 10px;
	font-size: 11px;
	font-weight: 500;
	border: none;
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.65 );
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.htmega-ai-preview-btn:hover {
	background: rgba( 0, 0, 0, 0.8 );
}

/* Full-size preview overlay — separate from the main modal, higher z-index,
 * shows an uncropped, unscaled-to-a-tiny-box render of whichever result was
 * clicked. See openPreviewLightbox() for the fit-to-viewport-width scaling. */
.htmega-ai-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.htmega-ai-lightbox-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.75 );
}

.htmega-ai-lightbox-actions {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}

.htmega-ai-lightbox-insert {
	font-size: 14px;
	padding: 10px 20px;
}

.htmega-ai-lightbox-close {
	width: 40px;
	height: 40px;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 50%;
	/* A fixed dark chip, not a translucent white tint — the tint version only
	 * had contrast over a dark section render (e.g. Dark Minimal/Neo-Brutalist
	 * styles); over a white/light section (Bento, Glassmorphism, etc.) it
	 * nearly disappeared. A solid dark background + white icon reads the same
	 * regardless of what's rendered behind it. */
	background: rgba( 0, 0, 0, 0.55 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.3 );
	color: #fff;
	font-size: 24px;
	cursor: pointer;
}

.htmega-ai-lightbox-close:hover {
	background: rgba( 0, 0, 0, 0.75 );
}

.htmega-ai-lightbox-scroll {
	position: relative;
	/* 100%, not 100vw — the parent (.htmega-ai-lightbox) is already
	 * position:fixed; inset:0, so it's exactly viewport-sized. 100vw can end up
	 * slightly wider than the visible area when a vertical scrollbar is present,
	 * causing a stray horizontal scrollbar; 100% of an already-viewport-sized
	 * parent doesn't have that issue. */
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	max-width: 98%;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.4 );
}

.htmega-ai-lightbox-body {
	position: relative;
	background: #fff;
}

.htmega-ai-lightbox-iframe {
	border: 0;
	display: block;
	/* Its own document has no internal overflow (height is set to exactly match
	 * content), so without this, mouse-wheel scrolling over it targets the
	 * iframe's own (non-scrolling) document instead of chaining to
	 * .htmega-ai-lightbox-scroll behind it — the lightbox would feel frozen.
	 * Read-only preview, so disabling all pointer interaction with it is safe. */
	pointer-events: none;
}

.htmega-ai-section-modal__footer {
	padding: 20px 25px;
	border-top: 1px solid #eee;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	border-radius: 0 0 14px 14px;
}

/* Shared base sizing for every modal button — Cancel/Generate in the footer,
 * plus Insert/Insert all in the results list (different classes below give
 * each its own color: purple = "fetch content" action, green = "confirm/
 * commit" action — Insert used to share Generate's exact purple styling,
 * which read as the same action twice). */
.htmega-ai-section-modal__cancel,
.htmega-ai-section-modal__regenerate,
.htmega-ai-section-modal__generate,
.htmega-ai-section-result__insert,
.htmega-ai-section-result__insert-all {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	min-width: 100px;
}

/* Purple outline, not a solid fill — visually "try again" rather than Generate's
 * solid "go" action or Cancel's neutral gray, since both can be present at once. */
.htmega-ai-section-modal__regenerate {
	background: #fff;
	border: 1px solid #764ba2 !important;
	color: #764ba2;
}

.htmega-ai-section-modal__regenerate:hover {
	background: #f5f0fa;
}

.htmega-ai-section-result__insert {
	min-width: auto;
	padding: 8px 16px;
	font-size: 13px;
}

.htmega-ai-section-modal__cancel {
	background: #f5f5f5;
	border: 1px solid #ddd !important;
	color: #666;
}

.htmega-ai-section-modal__cancel:hover {
	background: #eeeeee;
	color: #333;
}

.htmega-ai-section-modal__generate {
	background: linear-gradient( 135deg, #667eea 0%, #764ba2 100% );
	color: #fff;
}

.htmega-ai-section-modal__generate:hover {
	background: linear-gradient( 135deg, #5c71d6 0%, #6a4492 100% );
	transform: translateY( -1px );
	box-shadow: 0 4px 8px rgba( 102, 126, 234, 0.2 );
}

.htmega-ai-section-result__insert,
.htmega-ai-section-result__insert-all {
	background: linear-gradient( 135deg, #16a34a 0%, #15803d 100% );
	color: #fff;
}

.htmega-ai-section-result__insert:hover,
.htmega-ai-section-result__insert-all:hover {
	background: linear-gradient( 135deg, #148a3f 0%, #106b32 100% );
	transform: translateY( -1px );
	box-shadow: 0 4px 8px rgba( 22, 163, 74, 0.25 );
}

.htmega-ai-section-modal__generate:disabled,
.htmega-ai-section-modal__regenerate:disabled,
.htmega-ai-section-result__insert:disabled,
.htmega-ai-section-result__insert-all:disabled {
	opacity: 0.7;
	cursor: default;
	transform: none;
	box-shadow: none;
}