/* AI Summary Buttons – layout shared by the "icons", "expand" and "bar"
 * styles (names visible: touch, no hover, narrow columns). Loaded as a
 * dependency of those styles only. */

/* Names-visible layout, shared by "icons", "expand" and "bar": on touch,
 * without hover and in narrow columns. Vertical list below 12.5em, mini
 * tiles (mark above the name) from 12.5em, one row from 24em (a narrower
 * row would break the longest name, "DeepSeek"). Names never break inside
 * a word. */
/* < 12.5em: a vertical list. */
.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--asb-gap, calc(0.375 * var(--asb-u)));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li {
	grid-column: auto;
	margin: 0;
	padding: 0;
}

.ai-summary-buttons.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
	flex-direction: row;
	justify-content: flex-start;
	gap: calc(0.625 * var(--asb-u));
	inline-size: 100%;
	min-block-size: var(--asb-mark);
	padding: calc(0.5 * var(--asb-u)) calc(0.875 * var(--asb-u));
	font-size: 0.875em;
	line-height: 1.2;
	text-align: start;
}

.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__name {
	overflow-wrap: normal;
}

.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__icon {
	inline-size: calc(calc(1.25 * var(--asb-u)) * var(--asb-scale, 1));
	block-size: calc(calc(1.25 * var(--asb-u)) * var(--asb-scale, 1));
}

.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__button .ai-summary-buttons__badge {
	position: static;
	margin-inline-start: auto;
	inline-size: calc(0.75 * var(--asb-u));
	block-size: calc(0.75 * var(--asb-u));
}

/* 12.5em to 24em: mini tiles, 3 per row, last row balanced (5 → 3 + 2). */
@container asb (min-width: 12.5em) {
	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li {
		grid-column: span 2;
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li:nth-child(3n+1):last-child {
		grid-column: 1 / -1;
	}

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

	/* 7, 10, 13…: the last four are 2 + 2, not a lone tile at the end. */
	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:has(> li:first-child:nth-last-child(3n+7)) > li:nth-last-child(-n+4) {
		grid-column: span 3;
	}

	/* Mini tile: mark above a small name. */
	.ai-summary-buttons.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		flex-direction: column;
		justify-content: center;
		gap: calc(0.1875 * var(--asb-u));
		padding: calc(0.4375 * var(--asb-u)) calc(0.125 * var(--asb-u)) calc(0.375 * var(--asb-u));
		font-size: 0.8125em;
		line-height: 1.15;
		text-align: center;
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__button .ai-summary-buttons__badge {
		position: absolute;
		inset-block-start: calc(0.3125 * var(--asb-u));
		inset-inline-end: calc(0.3125 * var(--asb-u));
		margin: 0;
		inline-size: calc(0.625 * var(--asb-u));
		block-size: calc(0.625 * var(--asb-u));
	}
}

/* >= 24em: one row; 6 from 28em; 7 or more in even rows (--asb-cols in
 * the base stylesheet), a shorter last row centred. */
@container asb (min-width: 24em) {
	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:not(:has(> li:nth-child(6))) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:not(:has(> li:nth-child(6))) > li:nth-child(n):nth-child(n) {
		grid-column: auto;
	}
}

@container asb (min-width: 28em) {
	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:has(> li:nth-child(6)):not(:has(> li:nth-child(7))) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:has(> li:nth-child(6)) > li:nth-child(n):nth-child(n) {
		grid-column: auto;
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:has(> li:nth-child(7)) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:has(> li:nth-child(7)) > li {
		flex: 0 0 calc((100% - (var(--asb-cols) - 1) * var(--asb-gap, calc(0.375 * var(--asb-u)))) / var(--asb-cols));
		min-inline-size: 0;
	}

	.ai-summary-buttons.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list:has(> li:nth-child(7)) > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		block-size: 100%;
	}
}

/* One assistant: a normal button with the name, at its natural width. */
.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li:only-child {
	grid-column: 1 / -1;
	justify-self: start;
}

.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar).ai-summary-buttons .ai-summary-buttons__list > li:only-child > a.ai-summary-buttons__button.ai-summary-buttons__button {
	flex-direction: row;
	gap: calc(0.5 * var(--asb-u));
	padding: calc(0.5 * var(--asb-u)) calc(1 * var(--asb-u));
	font-size: 0.875em;
}

.ai-summary-buttons:is(.ai-summary-buttons--style-icons, .ai-summary-buttons--style-expand, .ai-summary-buttons--style-bar) .ai-summary-buttons__list > li:only-child .ai-summary-buttons__badge {
	position: static;
	inline-size: calc(0.75 * var(--asb-u));
	block-size: calc(0.75 * var(--asb-u));
}