/**
 * AI Overview Block Styles
 *
 * Override-friendly by design:
 *   1. All themeable values are CSS custom properties (--hamelp-*). Re-skin the
 *      block by overriding these from your theme — no selector battles needed.
 *   2. Every rule below is wrapped in :where() so its specificity is 0. Any
 *      theme rule (even a single class or element selector) wins automatically.
 *
 * Colors derive from the active theme's color presets (--wp--preset--color--*)
 * with sensible fallbacks, so the block adapts to any palette (navy, wine-red,
 * etc.) out of the box.
 *
 * @package hamelp
 */

:where(.hamelp-ai-overview) {
	// Fill the available width in every layout context. WordPress flex Group
	// blocks default their children to size-to-content (align-items is not
	// `stretch`), which otherwise collapses the block to its intrinsic width when
	// placed alongside e.g. a disclaimer paragraph. width:100% keeps it full-width
	// in flex/grid parents while remaining a no-op in normal block flow.
	width: 100%;
	box-sizing: border-box;
	// Theme-aware tokens (override these from your theme to re-skin the block).
	--hamelp-accent: var(--wp--preset--color--primary, #1571da);
	--hamelp-on-accent: var(--wp--preset--color--base, #fff);
	--hamelp-surface: var(--wp--preset--color--base, #fff);
	--hamelp-border: var(--wp--preset--color--contrast, rgba(0, 0, 0, 0.2));
	--hamelp-error: var(--wp--preset--color--vivid-red, #d63638);
	// Shared control tokens (kept in sync with the search box block so the
	// input + button look identical across both blocks).
	--hamelp-radius: 3px;
	--hamelp-font-weight: 600;
	// Send button size, fully fluid with NO @media breakpoint (avoids colliding
	// with the theme's breakpoints). Inverse clamp (negative vw coefficient) so
	// the touch target GROWS as the viewport shrinks: 44px on phones (≤360px)
	// easing down to 40px on wide screens (≥640px). Everything else (textarea
	// min-height, right padding, bottom padding) derives from this token so the
	// ChatGPT-style inset and single-line text position stay consistent at every
	// width without special-casing.
	--hamelp-btn-size: clamp(40px, calc(49.14px - 1.43vw), 44px);
	--hamelp-button-bg: var(--hamelp-accent);
	// Hover shade derived from the button color; the plain background
	// declaration below wins on engines without color-mix() support.
	--hamelp-accent-hover: #005a87;
	@supports (background: color-mix(in srgb, red, blue)) {
		--hamelp-accent-hover: color-mix(in srgb, var(--hamelp-button-bg, #1571da), #000 18%);
	}
}

:where(.hamelp-ai-overview__form) {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

// Layout-critical, so scoped (0,2,0) for theme-override resistance: the absolute
// send button depends on this positioning context, and a theme `.wp-block-*`/
// element rule at 0,0,0 could otherwise drop it, un-inset the button.
.hamelp-ai-overview .hamelp-ai-overview__input-row {
	// Positioning context for the send button, which is taken out of flow and
	// floated inside the field's bottom-right corner (ChatGPT-style inset). The
	// field's own border/background/radius stay driven by the textarea's theme
	// variables — this container adds no matte of its own.
	position: relative;
	// Still a flex row so the textarea fills the full width.
	display: flex;
}

// "Continue the previous conversation" toggle (conversation mode only).
// Scoped to :not([hidden]) so the `hidden` attribute (set until there is at
// least one exchange) is honored instead of overridden by display:flex.
:where(.hamelp-ai-overview__continue:not([hidden])) {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9em;
}

:where(.hamelp-ai-overview__input) {
	flex: 1;
	border: 1px solid var(--hamelp-border);
	border-radius: var(--hamelp-radius, 3px);
	background: var(--hamelp-surface);
	color: inherit;
	font-size: 1rem;
	// ChatGPT-style auto-growing textarea: start at one line and expand with the
	// content (field-sizing) up to a cap so long input stays fully visible.
	font-family: inherit;
	line-height: 1.5;
	max-height: 8lh;
}

// Box/layout props the inset depends on, scoped (0,2,0) for theme-override
// resistance: a theme's `textarea`/`.wp-block-*` rule at 0,0,0 must not collapse
// the reserved button space, the inflated min-height, or the centered line.
.hamelp-ai-overview .hamelp-ai-overview__input {
	box-sizing: border-box;
	// Reserve room on the right so typed text never runs under the inset send
	// button (right = btn size + 1rem to clear the button plus a small gap). The
	// vertical padding is SYMMETRIC (top/bottom both 0.75rem) so that, combined
	// with align-content: center below, the single line centers cleanly in the
	// content box regardless of the button size or the theme's line-height.
	padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem;
	field-sizing: content;
	// Minimum height sized so the inset send button clears equal ~8px gaps on
	// every side in the single-line state: button height + 2 × the button's
	// corner inset (0.5rem each). field-sizing still grows the field past this
	// as text wraps, at which point the top gap widens.
	min-height: calc(var(--hamelp-btn-size) + 1rem);
	resize: none;
	// Vertically CENTER the single line of text within the inflated min-height.
	// With symmetric vertical padding above, centering is metric-robust: the line
	// stays visually centered independent of the theme's font/line-height (a
	// bottom-aligned approach drifts too low under some themes). Once the content
	// exceeds min-height (multi-line), align-content has no effect, so wrapped
	// text still grows top-anchored as expected (no text under the inset button).
	align-content: center;
}

// Focus ring matches the button and the search box input (outline, 2px offset).
:where(.hamelp-ai-overview__input:focus-visible) {
	outline: 2px solid var(--hamelp-accent);
	outline-offset: 2px;
}

// Small muted helper text directly under the input (e.g. "Shift + Enter で改行").
// Muted via opacity so it inherits and adapts to any theme's text color.
:where(.hamelp-ai-overview__hint) {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
	opacity: 0.6;
}

// Hide the hint on touch devices, where Shift+Enter is meaningless without a
// physical keyboard. Device-CAPABILITY query (coarse pointer + no hover),
// deliberately NOT a width breakpoint, to avoid colliding with theme breakpoints.
@media (hover: none) and (pointer: coarse) {
	:where(.hamelp-ai-overview__hint) {
		display: none;
	}
}

// Structural/box/layout props scoped (0,2,0) for theme-override resistance.
// Theme button rules (`.wp-block-button__link`, `form button[type=submit]`, bare
// `button`) at 0,0,0–0,1,1 otherwise win and inflate the button into a big
// rectangle (and can push the arrow out). min-height:0 + padding:0 NEUTRALIZE
// theme-injected values; max-height:none guards against theme height caps.
// Cosmetics (background/gradient, color, transition, :hover, focus color) stay
// low-specificity in :where() below so themes can still re-skin them.
// BOTH axes are neutralized: min-height:0/max-height:none guard the height, and
// min-width:0/max-width:none guard the width. Without the width guards a theme
// rule like `button { min-width: <N>px }` sets a floor that beats the applied
// `width` (min-width overrides width regardless of specificity), stretching the
// circle into a horizontal ellipse while the height stays fixed.
.hamelp-ai-overview .hamelp-ai-overview__button {
	// Fixed-size circular icon button (ChatGPT-style), floated inside the field's
	// bottom-right corner. The constant bottom offset keeps it pinned to the
	// bottom as the textarea grows, instead of riding up with the content.
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--hamelp-btn-size);
	height: var(--hamelp-btn-size);
	min-width: 0;
	max-width: none;
	min-height: 0;
	max-height: none;
	padding: 0;
	border-radius: 50%;
	line-height: 1;
}

// Keep the icon size enforced at the same specificity so a theme `button svg`
// rule can't resize the arrow or push it out of the circle.
.hamelp-ai-overview .hamelp-ai-overview__button-icon {
	width: 20px;
	height: 20px;
}

:where(.hamelp-ai-overview__button) {
	border: 1px solid transparent;
	background: var(--hamelp-button-bg, #1571da);
	background: linear-gradient(135deg, var(--hamelp-button-bg, #1571da), var(--hamelp-accent-hover));
	color: var(--hamelp-on-accent);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

:where(.hamelp-ai-overview__button:hover) {
	opacity: 0.9;
}

:where(.hamelp-ai-overview__button:focus-visible) {
	outline: 2px solid var(--hamelp-accent);
	outline-offset: 2px;
}

:where(.hamelp-ai-overview__button:disabled) {
	opacity: 0.5;
	cursor: wait;
}

// WordPress-standard visually-hidden label: the button shows only the ↑ icon,
// while the configurable button text stays available to screen readers.
:where(.hamelp-ai-overview .screen-reader-text) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

// Conversation thread: question/answer turns stack from top to bottom,
// with the form (added in the markup after the thread) staying below.
:where(.hamelp-ai-overview__thread) {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

// Give the form breathing room only once there is at least one turn above it.
:where(.hamelp-ai-overview__thread:not(:empty)) {
	margin-bottom: 1rem;
}

:where(.hamelp-ai-overview__turn) {
	padding: 1.5rem 2rem;
	border-radius: var(--hamelp-radius, 3px);
}

// The user's question, shown as a heading above its answer.
:where(.hamelp-ai-overview__question) {
	margin-bottom: 0.75rem;
	font-weight: var(--hamelp-font-weight, 600);
	color: var(--hamelp-accent);
}

:where(.hamelp-ai-overview__turn.is-loading) {
	display: flex;
	flex-direction: column;
	background: #f5f5f5;
	background: color-mix(in srgb, var(--hamelp-accent), transparent 94%);
}

:where(.hamelp-ai-overview__turn.is-loading .hamelp-ai-overview__answer) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

:where(.hamelp-ai-overview__turn.has-result) {
	background: #f0f7fc;
	background: color-mix(in srgb, var(--hamelp-accent), transparent 94%);
	border: 1px solid var(--hamelp-accent);
}

:where(.hamelp-ai-overview__turn.has-error) {
	background: #fef7f1;
	background: color-mix(in srgb, var(--hamelp-error), transparent 94%);
	border: 1px solid var(--hamelp-error);
}

:where(.hamelp-ai-overview__answer) {
	line-height: 1.6;
}

:where(.hamelp-ai-overview__answer p) {
	margin: 0 0 1em;
}

:where(.hamelp-ai-overview__answer p:last-child) {
	margin-bottom: 0;
}

:where(.hamelp-ai-overview__error) {
	color: var(--hamelp-error);
}

:where(.hamelp-ai-overview__sources) {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(0, 115, 170, 0.2);
	border-top: 1px solid color-mix(in srgb, var(--hamelp-accent), transparent 80%);
	font-size: 0.9em;
}

:where(.hamelp-ai-overview__sources p) {
	margin: 0 0 0.5rem;
	font-weight: var(--hamelp-font-weight, 600);
}

:where(.hamelp-ai-overview__sources ol) {
	margin: 0;
	padding-left: 1.5rem;
	// Numbered so the list index matches the inline "Ref. N" citations.
	list-style: decimal;
}

:where(.hamelp-ai-overview__sources li) {
	margin-bottom: 0.25rem;
}

:where(.hamelp-ai-overview__sources a) {
	color: var(--hamelp-accent);
	text-decoration: none;
}

:where(.hamelp-ai-overview__sources a:hover) {
	text-decoration: underline;
}

// Editor preview styles. Mirrors the front-end inset so the block preview shows
// the send button floated inside the field's bottom-right corner.
:where(.hamelp-ai-overview__preview) {
	position: relative;
	display: flex;
}

:where(.hamelp-ai-overview__preview textarea),
:where(.hamelp-ai-overview__preview button) {
	opacity: 0.7;
}

// Keep the editor preview textarea a single line (non-interactive preview) and
// reserve the same right padding so the inset button never overlaps text.
:where(.hamelp-ai-overview__preview textarea) {
	flex: 1;
	box-sizing: border-box;
	// Mirror the front-end textarea padding (symmetric vertical padding) so the
	// inset button and the centered single line stay in the same place (see that
	// rule).
	padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem;
	resize: none;
	field-sizing: content;
	// Match the front-end min-height so the inset send button clears equal gaps
	// on every side in the single-line state (see the front-end textarea rule).
	min-height: calc(var(--hamelp-btn-size) + 1rem);
	// Match the front-end vertically-centered single line of text.
	align-content: center;
}

:where(.hamelp-ai-overview__note) {
	margin-top: 0.5rem;
	font-size: 0.85em;
	color: var(--wp--preset--color--contrast-2, #666);
	font-style: italic;
}

// Spinner.
:where(.hamelp-ai-overview .spinner) {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid #ccc;
	border-top-color: var(--hamelp-accent);
	border-radius: 50%;
	animation: hamelp-spin 0.8s linear infinite;
}

@keyframes hamelp-spin {
	to {
		transform: rotate(360deg);
	}
}

// Respect users who prefer reduced motion.
@media (prefers-reduced-motion: reduce) {
	:where(.hamelp-ai-overview .spinner) {
		animation-duration: 0s;
	}

	:where(.hamelp-ai-overview__button) {
		transition: none;
	}
}