/* AI Summary Buttons v2 – inherits the theme font; every colour derives from
 * the theme text colour (currentColor), so it works on light and dark themes
 * without configuration. Themes override the --asb-* tokens.
 * This base file holds the box, the shared parts and the default "tiles"
 * layout; every other style has a small file in styles/ that loads only
 * where a box uses it. */

/* Tokens and fallback spacing: zero specificity, so any theme rule wins. */
:where(.ai-summary-buttons) {
	/* Size unit: 1rem, but never below 16px. Themes that shrink the root
	 * (OceanWP: html { font-size: 62.5% }) would otherwise shrink every
	 * size and push the buttons below the 44 px target; a larger root
	 * (the visitor's browser setting) still scales the box. */
	--asb-u: max(1rem, 16px);
	--asb-radius: calc(0.875 * var(--asb-u));
	--asb-radius-button: calc(0.625 * var(--asb-u));
	/* --asb-gap differs per style: each rule has its own fallback. */
	--asb-pad: calc(1.25 * var(--asb-u));
	--asb-border: color-mix(in srgb, currentColor 16%, transparent);
	--asb-surface: transparent;
	/* Button tint: --asb-accent (default the text colour) at --asb-button-fill. */
	--asb-button: color-mix(in srgb, var(--asb-accent, currentColor) var(--asb-button-fill, 6%), transparent);
	--asb-button-hover: color-mix(in srgb, var(--asb-accent, currentColor) calc(var(--asb-button-fill, 6%) + 4%), transparent);
	--asb-button-active: color-mix(in srgb, var(--asb-accent, currentColor) calc(var(--asb-button-fill, 6%) + 9%), transparent);
	/* Resting tile edge: about 3:1 against the page on light and dark. */
	--asb-button-border: color-mix(in srgb, currentColor 45%, transparent);
	--asb-button-border-hover: color-mix(in srgb, currentColor 70%, transparent);
	--asb-focus: currentColor;
	/* Green shifted towards the text colour: dark on light pages, light on dark. */
	--asb-success: color-mix(in srgb, #1f8f4e 70%, currentColor);
	--asb-success-bg: color-mix(in srgb, #1f8f4e 10%, transparent);
	/* Brand colours, >= 3:1 on the tile over #fff and over #121212. Claude:
	 * the official #d97757 is 2.8:1 on the light tile, #cc7052 is the closest
	 * value that reaches 3:1. Gemini #3186ff and DeepSeek #4d6bfe are official. */
	--asb-brand-chatgpt: currentColor;
	--asb-brand-gemini: #3186ff;
	--asb-brand-claude: #cc7052;
	--asb-brand-grok: currentColor;
	--asb-brand-deepseek: #4d6bfe;
	/* Compact styles: mark size, open-layer timing and look. */
	--asb-mark: calc(2.75 * var(--asb-u));
	--asb-page: Canvas; /* JS sets the real page colour */
	--asb-expand: 160ms;
	--asb-collapse: 110ms;
	--asb-hover-delay: 150ms;
	--asb-tip-in: 120ms;
	--asb-tip-out: 80ms;
	--asb-name-pad: calc(0.875 * var(--asb-u));
	/* Frame and dividers of the bar style. */
	--asb-strip-rule: color-mix(in srgb, currentColor 24%, transparent);
	--asb-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
	--asb-lift: 0 calc(0.375 * var(--asb-u)) calc(1 * var(--asb-u)) calc(-0.375 * var(--asb-u)) color-mix(in srgb, currentColor 40%, transparent);
	--asb-mask-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='5.25' y='1.75' width='9' height='10' rx='1.75'/%3E%3Cpath d='M2.25 5.5v7a1.75 1.75 0 0 0 1.75 1.75h6.5'/%3E%3C/svg%3E");
	--asb-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 8.5l3.5 3.25 7-7.5'/%3E%3C/svg%3E");
	margin-block: 1.5em;

	/* Inline-size containment gives the box no intrinsic width, so in a
	 * shrink-to-fit parent (flex row, align-items/justify-items: center) it
	 * would collapse. "stretch" fills the available width like a block in
	 * normal flow; there it is identical to "auto". */
	inline-size: -webkit-fill-available;
	inline-size: -moz-available;
	inline-size: stretch;
}

/* Element resets (OceanWP: div { margin: 0 }) would glue the box to the
 * text; (0,0,2) beats them, any theme class rule (block gap) still wins. */
body div:where(.ai-summary-buttons, .wp-block-ai-summary-buttons-box) {
	margin-block: 1.5em;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:where(.ai-summary-buttons) {
		--asb-border: rgba(128, 128, 128, 0.35);
		--asb-button: rgba(128, 128, 128, 0.12);
		--asb-button-hover: rgba(128, 128, 128, 0.2);
		--asb-button-active: rgba(128, 128, 128, 0.28);
		--asb-button-border: rgba(128, 128, 128, 0.75);
		--asb-button-border-hover: rgba(128, 128, 128, 1);
		--asb-success: #1f8f4e;
		--asb-success-bg: rgba(31, 143, 78, 0.12);
		--asb-strip-rule: rgba(128, 128, 128, 0.5);
		--asb-lift: 0 calc(0.375 * var(--asb-u)) calc(1 * var(--asb-u)) calc(-0.375 * var(--asb-u)) rgba(0, 0, 0, 0.3);
	}
}

.ai-summary-buttons {
	container: asb / inline-size;
	box-sizing: border-box;
	/* A compact frame around the buttons: no extra air (the buttons keep
	 * their size, the field around them shrinks). */
	padding: calc(var(--asb-pad) * 0.75) var(--asb-pad) calc(var(--asb-pad) * 0.6);
	border: 1px solid var(--asb-border);
	border-radius: var(--asb-radius);
	background: var(--asb-surface);
	box-shadow: var(--asb-shadow, none);
	font: inherit;
	color: var(--asb-text, inherit);
}

.ai-summary-buttons .ai-summary-buttons__heading {
	margin: 0 0 calc(0.5 * var(--asb-u));
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

/* Grid: 6 tracks, 3 buttons per row; the last row is balanced
 * (1 → full, 2 → halves, 4 → 2 + 2, 5 → 3 + 2). */
.ai-summary-buttons .ai-summary-buttons__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--asb-gap, calc(0.5 * var(--asb-u)));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-summary-buttons .ai-summary-buttons__list > li {
	margin: 0;
	padding: 0;
}

/* Wide columns: tiles stop at about 7.5em each instead of stretching to
 * 200 px and more (the phone style never sees a column this wide). */
.ai-summary-buttons.ai-summary-buttons--style-tiles .ai-summary-buttons__list {
	max-inline-size: calc(40 * var(--asb-u));
}

.ai-summary-buttons__list > :where(li) {
	grid-column: span 2;
}

.ai-summary-buttons__list > :where(li:nth-child(3n+1):last-child) {
	grid-column: 1 / -1;
}

.ai-summary-buttons__list > :where(li:nth-child(3n+1):nth-last-child(2), li:nth-child(3n+2):last-child, li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li) {
	grid-column: span 3;
}

/* Button: a tile with the mark above the name. */
.ai-summary-buttons a.ai-summary-buttons__button,
.ai-summary-buttons a.ai-summary-buttons__button:visited {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(0.375 * var(--asb-u));
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: calc(var(--asb-mark) + calc(1.5 * var(--asb-u)));
	min-inline-size: 44px;
	padding: calc(0.625 * var(--asb-u)) calc(0.25 * var(--asb-u));
	border: var(--asb-button-border-width, 1px) solid var(--asb-button-border);
	border-radius: var(--asb-radius-button);
	background: var(--asb-button);
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* Hover only where a pointer can hover, so a tap leaves no sticky state.
 * The "Hover effect" setting moves or rings the button through tokens. */
@media (hover: hover) {
	.ai-summary-buttons a.ai-summary-buttons__button:hover {
		border-color: var(--asb-button-border-hover);
		background: var(--asb-button-hover);
		box-shadow: var(--asb-hover-shadow, none);
		color: inherit;
		text-decoration: none;
		transform: var(--asb-hover-move, none);
	}
}

.ai-summary-buttons a.ai-summary-buttons__button:active {
	background: var(--asb-button-active);
	transform: translateY(1px);
}

.ai-summary-buttons a.ai-summary-buttons__button.is-copied {
	border-color: var(--asb-success);
	background: var(--asb-success-bg);
}

/* No underline in any state. Themes underline content links with heavier
 * selectors, e.g. Storefront ".entry-content a:not(.button):not(...)" and
 * OceanWP; this rule weighs as much as the focus rules below (0,6,2). */
.ai-summary-buttons.ai-summary-buttons .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
	text-decoration: none;
}

/* Focus. Themes style every focused link, e.g. Twenty Twenty-One with
 * ".is-dark-theme .site a:focus:not(...):not(...)" (0,5,1). These rules are
 * 0,6,2, so they win in any load order without !important. Themes restyle
 * the ring through --asb-focus. */
.ai-summary-buttons.ai-summary-buttons .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button:focus {
	background: var(--asb-button);
	color: inherit;
	text-decoration: none;
	outline: none;
}

.ai-summary-buttons.ai-summary-buttons .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button.is-copied:focus {
	background: var(--asb-success-bg);
}

@media (hover: hover) {
	.ai-summary-buttons.ai-summary-buttons .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button:focus:hover {
		background: var(--asb-button-hover);
	}
}

.ai-summary-buttons.ai-summary-buttons .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button:focus-visible {
	outline: 2px solid var(--asb-focus);
	outline-offset: 2px;
}

.ai-summary-buttons .ai-summary-buttons__icon {
	flex: none;
	inline-size: calc(1.625em * var(--asb-scale, 1));
	block-size: calc(1.625em * var(--asb-scale, 1));
	color: inherit;
}

.ai-summary-buttons__button--chatgpt .ai-summary-buttons__icon { color: var(--asb-brand-chatgpt); }
.ai-summary-buttons__button--gemini .ai-summary-buttons__icon { color: var(--asb-brand-gemini); }
.ai-summary-buttons__button--claude .ai-summary-buttons__icon { color: var(--asb-brand-claude); }
.ai-summary-buttons__button--grok .ai-summary-buttons__icon { color: var(--asb-brand-grok); }
.ai-summary-buttons__button--deepseek .ai-summary-buttons__icon { color: var(--asb-brand-deepseek); }

/* Copy marker: "copy" icon, turns into a check after copying. */
.ai-summary-buttons .ai-summary-buttons__badge {
	flex: none;
	display: inline-block;
	inline-size: calc(0.875 * var(--asb-u));
	block-size: calc(0.875 * var(--asb-u));
	background: currentColor;
	-webkit-mask: var(--asb-mask-copy) center / contain no-repeat;
	mask: var(--asb-mask-copy) center / contain no-repeat;
}

.ai-summary-buttons__button .ai-summary-buttons__badge {
	position: absolute;
	inset-block-start: calc(0.375 * var(--asb-u));
	inset-inline-end: calc(0.375 * var(--asb-u));
	inline-size: calc(0.75 * var(--asb-u));
	block-size: calc(0.75 * var(--asb-u));
	opacity: 0.75;
}

.ai-summary-buttons__button.is-copied .ai-summary-buttons__badge {
	background: var(--asb-success);
	opacity: 1;
	-webkit-mask-image: var(--asb-mask-check);
	mask-image: var(--asb-mask-check);
}

/* Footer: the hint (before the click) and the status (after) share one cell. */
.ai-summary-buttons .ai-summary-buttons__footer {
	display: grid;
	font-size: 0.8125em;
	line-height: 1.35;
	text-wrap: pretty;
}

.ai-summary-buttons .ai-summary-buttons__footer > * {
	grid-area: 1 / 1;
	margin: 0;
}

.ai-summary-buttons .ai-summary-buttons__hint,
.ai-summary-buttons .ai-summary-buttons__status:not(:empty) {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-block-start: calc(0.5 * var(--asb-u));
}

.ai-summary-buttons__hint .ai-summary-buttons__badge {
	inline-size: 1.1em;
	block-size: 1.1em;
	margin-block-start: 0.18em;
}

.ai-summary-buttons__status:not(:empty) {
	font-weight: 600;
}

.ai-summary-buttons__status:not(:empty)::before {
	content: "";
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
	margin-block-start: 0.15em;
	background: var(--asb-success);
	-webkit-mask: var(--asb-mask-check) center / contain no-repeat;
	mask: var(--asb-mask-check) center / contain no-repeat;
}

.ai-summary-buttons__status.is-error::before {
	content: none;
}

.ai-summary-buttons__status:not(:empty) + .ai-summary-buttons__hint {
	visibility: hidden;
}

/* Own visually-hidden rule: not every theme defines .screen-reader-text. */
.ai-summary-buttons .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	overflow-wrap: normal;
}

/* Row button: a single assistant, or a very narrow column. */
.ai-summary-buttons__list > li:only-child .ai-summary-buttons__button {
	flex-direction: row;
	gap: calc(0.5 * var(--asb-u));
	min-block-size: calc(2.75 * var(--asb-u));
	padding: calc(0.5 * var(--asb-u)) calc(1.125 * var(--asb-u));
	font-size: 0.9375em;
}

.ai-summary-buttons__list > li:only-child .ai-summary-buttons__icon {
	inline-size: 1.375em;
	block-size: 1.375em;
}

.ai-summary-buttons__list > li:only-child .ai-summary-buttons__badge {
	position: static;
}

/* em = the theme font size, so a large theme font switches earlier. */
@container asb (max-width: 14.5em) {
	.ai-summary-buttons .ai-summary-buttons__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ai-summary-buttons__list > li {
		grid-column: auto;
	}

	.ai-summary-buttons a.ai-summary-buttons__button {
		flex-direction: row;
		justify-content: flex-start;
		gap: calc(0.625 * var(--asb-u));
		min-block-size: calc(2.75 * var(--asb-u));
		padding: calc(0.5 * var(--asb-u)) calc(0.875 * var(--asb-u));
		text-align: start;
	}

	.ai-summary-buttons .ai-summary-buttons__icon {
		inline-size: calc(1.375em * var(--asb-scale, 1));
		block-size: calc(1.375em * var(--asb-scale, 1));
	}

	.ai-summary-buttons__button .ai-summary-buttons__badge {
		position: static;
		margin-inline-start: auto;
	}
}

/* 27em of the box font: five tiles fit with "DeepSeek" and its badge on one line. */
@container asb (min-width: 27em) {
	.ai-summary-buttons .ai-summary-buttons__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ai-summary-buttons .ai-summary-buttons__list:has(> li:nth-child(6)) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/* Two to four tiles share the whole row: no empty columns on the right. */
	.ai-summary-buttons .ai-summary-buttons__list:has(> li:nth-child(2)):not(:has(> li:nth-child(5))) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.ai-summary-buttons__list > li {
		grid-column: auto;
	}

	.ai-summary-buttons__list > li:only-child {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

@media (max-width: 30em) {
	.ai-summary-buttons {
		padding: calc(var(--asb-pad) * 0.6) calc(var(--asb-pad) * 0.7) calc(var(--asb-pad) * 0.5);
	}
}

/* Reduced motion: layers and tooltips appear at once. Zeroing the timing
 * tokens reaches the style rules without !important. */
@media (prefers-reduced-motion: reduce) {
	.ai-summary-buttons {
		--asb-expand: 0s;
		--asb-collapse: 0s;
		--asb-hover-delay: 0s;
		--asb-tip-in: 0s;
		--asb-tip-out: 0s;
	}

	.ai-summary-buttons a.ai-summary-buttons__button {
		transition: none;
	}

	.ai-summary-buttons a.ai-summary-buttons__button:active,
	.ai-summary-buttons a.ai-summary-buttons__button:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.ai-summary-buttons a.ai-summary-buttons__button {
		border-color: ButtonText;
	}

	.ai-summary-buttons a.ai-summary-buttons__button.is-copied {
		border-color: Highlight;
	}

	.ai-summary-buttons .ai-summary-buttons__badge,
	.ai-summary-buttons__status:not(:empty)::before {
		background: CanvasText;
		forced-color-adjust: none;
	}

	.ai-summary-buttons .ai-summary-buttons__button .ai-summary-buttons__icon {
		color: CanvasText;
	}
}

@media print {
	.ai-summary-buttons {
		display: none;
	}
}

/* Elementor pages: the automatic box sits next to the Elementor content,
 * which in full-width theme wrappers (Hello Elementor) would make it run
 * from edge to edge. It takes the width of Elementor's boxed content
 * instead (1140 px less the 10 px column padding on each side).
 * Zero specificity: themes and --asb-max-width override it. */
:where(.elementor + .ai-summary-buttons, .ai-summary-buttons:has(+ .elementor)) {
	max-inline-size: var(--asb-max-width, min(1120px, 100% - 20px));
	margin-inline: auto;
}

/* Block wrapper: carries the margin (block support or this fallback), so
 * the box inside has none. Zero specificity: theme block gaps win. */
:where(.wp-block-ai-summary-buttons-box) {
	margin-block: 1.5em;
}

.wp-block-ai-summary-buttons-box > .ai-summary-buttons {
	margin-block: 0;
}