/*
 * The manual's assistant (SupportAssistant module, IRES-14579): a column on the right that
 * pushes the page aside on wide screens, and covers it on small ones. The widget itself is
 * <teqa-admin-agent docked>; here only its place and its colours.
 */

:root {
	--assistant-width: 420px;
}

.assistant-dock {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--assistant-width);
	max-width: 100vw;
	z-index: 1040;
	background: var(--c-surface, #fff);
	border-left: 1px solid var(--c-line, #dbe4ec);
	box-shadow: -8px 0 24px rgb(15 35 55 / 8%);
	display: flex;
	flex-direction: column;
}
.assistant-dock[hidden] { display: none; }

.assistant-dock teqa-admin-agent {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	/* i-Reserve: the colour of the section you read in (blue, green, orange; ink on other pages). */
	--taa-accent: var(--role-ink, #115290);
	--taa-font: var(--font-body, "DM Sans", system-ui, sans-serif);
	--taa-header-font: var(--font-display, var(--font-body, system-ui, sans-serif));
	--taa-header-bg: var(--role-soft, #e7f0f9);
	--taa-header-text: var(--c-ink-strong, #0f2337);
	--taa-border: var(--c-line, #dbe4ec);
	--taa-radius: 10px;
	/* Links in answers; rights as links get the manual's house style (blue monospace). */
	--taa-link: #0b6bcb;
	--taa-code-bg: #eef5fc;
}
.assistant-dock teqa-admin-agent::part(header) {
	border-bottom: 3px solid var(--role, #1667b5);
}

/* Gasto skin */
.g-body .assistant-dock {
	background: var(--gasto-surface, #fff);
	border-left-color: var(--gasto-border, #e5e5e5);
}
.g-body .assistant-dock teqa-admin-agent {
	--taa-accent: var(--gasto-primary, #c2410c);
	--taa-accent-text: var(--gasto-on-primary, #fff);
	--taa-font: var(--gasto-font-body, system-ui, sans-serif);
	--taa-header-font: var(--gasto-font-display, var(--gasto-font-body, system-ui, sans-serif));
	--taa-header-bg: var(--gasto-surface-2, #f6f6f4);
	--taa-header-text: var(--gasto-text, #1c1917);
	--taa-border: var(--gasto-border, #e5e5e5);
	--taa-radius: var(--gasto-radius-md, 10px);
	--taa-link: var(--gasto-primary, #c2410c);
	--taa-code-bg: var(--gasto-code-bg, #f6f6f4);
}
.g-body .assistant-dock teqa-admin-agent::part(header) {
	border-bottom: 3px solid var(--gasto-primary, #c2410c);
}
/* Gasto follows its own light/dark tokens, so the column matches the page in both modes. */
.g-body .assistant-dock teqa-admin-agent {
	--taa-bg: var(--gasto-bg, #fff);
	--taa-surface: var(--gasto-surface, #fff);
	--taa-text: var(--gasto-text, #1c1917);
	--taa-muted: var(--gasto-muted, #78716c);
}
.assistant-logo-g {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--gasto-primary, #c2410c);
	color: var(--gasto-on-primary, #fff);
	font: 800 13px/1 var(--gasto-font-display, system-ui, sans-serif);
}

/* Wide screens: the column pushes the page aside instead of covering it. */
@media (min-width: 992px) {
	html.assistant-open body { padding-right: var(--assistant-width); }
	html.assistant-open .scrollToTop { right: calc(var(--assistant-width) + 16px); }
}

/* The topbar button, in both skins. */
.assistant-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--role-ink, inherit);
	font: inherit;
	font-size: 15px;
	line-height: 1;
	padding: 7px 14px;
	margin: 0 12px;
	cursor: pointer;
	white-space: nowrap;
}
.assistant-toggle:hover,
.assistant-toggle[aria-expanded="true"] {
	background: var(--role-soft, #e7f0f9);
}
.g-body .assistant-toggle {
	color: var(--gasto-text, inherit);
	border-color: var(--gasto-border, currentColor);
	font-size: 13px;
	padding: 6px 12px;
	margin: 0 6px;
}
.g-body .assistant-toggle:hover,
.g-body .assistant-toggle[aria-expanded="true"] {
	background: var(--gasto-surface-2, #f6f6f4);
}

/* "Ask the assistant about this page" under an article. */
.assistant-ask { margin-top: 2.4rem; }
.assistant-ask-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 0;
	background: none;
	padding: 0;
	color: var(--role-ink, var(--gasto-primary, inherit));
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}