/* AI Summary Buttons – style "bar". Loaded after the base stylesheet
 * (ai-summary-buttons.css) only where a box uses this style. */

/* ---- Style "bar": one strip, cells divided by a line. From 15em the
 * cells sit in one row (mark above a small name), from 27em mark and
 * name on one line. Below 15em the mini tiles above. */
@container asb (min-width: 15em) {
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:nth-child(n) {
		display: flex;
		gap: 0;
		border: var(--asb-button-border-width, 1px) solid var(--asb-strip-rule);
		border-radius: var(--asb-radius-button);
	}

	/* The link fills its cell: every cell is as high as the row (no strip
	 * of page colour under a one-line name next to a two-line one). */
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li {
		display: flex;
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li > a.ai-summary-buttons__button {
		flex: 1 1 auto;
	}

	/* Up to four cells: all the same width. */
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:not(:has(> li:nth-child(5))) > li {
		flex: 1 1 0;
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li + li {
		border-inline-start: var(--asb-button-border-width, 1px) solid var(--asb-strip-rule);
	}

	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		flex-direction: column;
		gap: calc(0.1875 * var(--asb-u));
		min-block-size: var(--asb-mark);
		padding: calc(0.4375 * var(--asb-u)) calc(0.25 * var(--asb-u)) calc(0.375 * var(--asb-u));
		border: 0;
		border-radius: 0;
		font-size: 0.6875em;
		line-height: 1.15;
		white-space: nowrap;
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar.ai-summary-buttons .ai-summary-buttons__list > li:first-child > a.ai-summary-buttons__button.ai-summary-buttons__button {
		border-start-start-radius: calc(var(--asb-radius-button) - 1px);
		border-end-start-radius: calc(var(--asb-radius-button) - 1px);
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar.ai-summary-buttons .ai-summary-buttons__list > li:last-child > a.ai-summary-buttons__button.ai-summary-buttons__button {
		border-start-end-radius: calc(var(--asb-radius-button) - 1px);
		border-end-end-radius: calc(var(--asb-radius-button) - 1px);
	}

	/* Cells touch, so the focus ring sits inside the cell. */
	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button:focus-visible {
		outline-offset: -4px;
		border-radius: calc(var(--asb-radius-button) - 1px);
	}

	/* Copied: a green inner edge instead of a border. */
	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button.is-copied {
		box-shadow: inset 0 0 0 2px var(--asb-success);
	}

	/* One assistant: an ordinary bordered button. */
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:has(> li:only-child) {
		display: grid;
		border: 0;
	}

	.ai-summary-buttons.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;
		border: var(--asb-button-border-width, 1px) solid var(--asb-button-border);
		border-radius: var(--asb-radius-button);
		font-size: 0.875em;
	}
}

/* >= 27em: mark and name on one line. */
@container asb (min-width: 27em) {
	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		flex-direction: row;
		gap: 0.375em;
		padding: 0.25em 0.75em;
		font-size: 0.75em;
		line-height: 1.2;
	}

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

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__button .ai-summary-buttons__badge {
		inset-block-start: calc(0.1875 * var(--asb-u));
		inset-inline-end: calc(0.25 * var(--asb-u));
	}
}

/* 7 or more (the optional assistants) from 15em: the strip turns into a
 * framed grid of even rows (--asb-cols, three in a narrow column; the last
 * four 2 + 2 instead of a lone cell), mark above the name, a shorter last
 * row stretched. Each cell draws its start and top rule; the -1px margins
 * hide those of the first column and row under the frame. */
@container asb (min-width: 15em) {
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:nth-child(n):has(> li:nth-child(7)) {
		flex-wrap: wrap;
		overflow: hidden;
		--asb-bar-cols: 3;
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:has(> li:nth-child(7)) > li:nth-child(n) {
		flex: 1 0 calc(100% / var(--asb-bar-cols));
		margin-block-start: calc(-1 * var(--asb-button-border-width, 1px));
		margin-inline-start: calc(-1 * var(--asb-button-border-width, 1px));
		border-block-start: var(--asb-button-border-width, 1px) solid var(--asb-strip-rule);
		border-inline-start: var(--asb-button-border-width, 1px) solid var(--asb-strip-rule);
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:has(> li:first-child:nth-last-child(3n+7)) > li:nth-last-child(-n+4):nth-child(n) {
		flex-basis: 50%;
	}

	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar.ai-summary-buttons .ai-summary-buttons__list:has(> li:nth-child(7)) > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		flex-direction: column;
		gap: calc(0.1875 * var(--asb-u));
		padding: calc(0.4375 * var(--asb-u)) calc(0.25 * var(--asb-u)) calc(0.375 * var(--asb-u));
		border-radius: 0;
		font-size: 0.6875em;
		line-height: 1.15;
		white-space: normal;
		overflow-wrap: normal;
	}
}

/* Five or six in a narrow strip (15em to 27em) would squeeze the names
 * together: the same framed grid, three per row. */
@container asb (15em <= width < 27em) {
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:nth-child(n):has(> li:nth-child(5)) {
		flex-wrap: wrap;
		overflow: hidden;
		--asb-bar-cols: 3;
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:has(> li:nth-child(5)) > li:nth-child(n) {
		flex: 1 0 calc(100% / var(--asb-bar-cols));
		margin-block-start: calc(-1 * var(--asb-button-border-width, 1px));
		margin-inline-start: calc(-1 * var(--asb-button-border-width, 1px));
		border-block-start: var(--asb-button-border-width, 1px) solid var(--asb-strip-rule);
		border-inline-start: var(--asb-button-border-width, 1px) solid var(--asb-strip-rule);
	}

	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar.ai-summary-buttons .ai-summary-buttons__list:has(> li:nth-child(5)) > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		border-radius: 0;
	}
}

@container asb (min-width: 27em) {
	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:nth-child(n):has(> li:nth-child(7)) {
		--asb-bar-cols: var(--asb-cols);
	}

	.ai-summary-buttons.ai-summary-buttons--style-bar .ai-summary-buttons__list:has(> li:first-child:nth-last-child(3n+7)) > li:nth-last-child(-n+4):nth-child(n) {
		flex-basis: calc(100% / var(--asb-bar-cols));
	}

	.ai-summary-buttons.ai-summary-buttons.ai-summary-buttons--style-bar.ai-summary-buttons .ai-summary-buttons__list:has(> li:nth-child(7)) > li > a.ai-summary-buttons__button.ai-summary-buttons__button {
		font-size: 0.75em;
	}
}