/* =============================================================
   AI CHATBOT — Unified Stylesheet (Full-Page + Popup)
   =============================================================
   - Shared rules are unscoped (sections 1–9)
   - Full-page rules use Affino column / .ai-chat__sidebar sidebar
     selectors (section 10)
   - Popup rules are scoped under #popUpWrapper (section 11)
   ============================================================= */


/* =============================================================
   1. VARIABLES & UTILITIES
   ============================================================= */
:root {
	--bg-color: #0F3B53;
	--border-color: #667F89;
	--text-color: #CCD4D8;
	--hl-bg-color: #0B2C3E;
	--hl-color: #E5E9EB;
	--system-bg-color: #FFF;
	--color-green: #22A573;
	--secondary-color: #7192A4;
	--tertiary-bg-color: #E7EDF0;
	--secondary-bg-color: #426E86;
}


.w-12{width: 0.75rem;}
.h-12{height: 0.75rem;}
.w-16{width: 1rem;}
.h-16{height: 1rem;}
.w-20{width: 1.25rem;}
.h-20{height: 1.25rem;}
.w-24{width: 1.5rem;}
.h-24{height: 1.5rem;}


/* =============================================================
   2. BOTWRAPPER & DISPLAY OVERRIDES
   ============================================================= */
#ai-chat {
	--_header-h: calc(var(--ai-spacing-4) * 2 + 32px + 1px);
	font-family: var(--ai-font-body);
	display: flex;
	height: 100dvh;
	position: relative;
	overflow: hidden;
	background-color: var(--ai-surface-primary);

	::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 7px;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: var(--hl-bg-color);
		box-shadow: 0 0 1px var(--hl-bg-color);
	}
}


/* =============================================================
   3. CHAT SIDEBAR
   ============================================================= */

/* ── Computed overlay variables (set by data-sidebar-theme) ── */

[data-sidebar-theme="light"] {
	--ai-chat-sidebar-text: rgb(31 42 55);
	--ai-chat-sidebar-selected-text: color-mix(in srgb, var(--ai-chat-sidebar-text) 85%, black);
	--ai-chat-sidebar-hover-bg: color-mix(in srgb, var(--ai-chat-sidebar-bg) 92%, rgb(38 55 88));
	--ai-chat-sidebar-active-bg: color-mix(in srgb, var(--ai-chat-sidebar-bg) 88%, rgb(38 55 88));
}

[data-sidebar-theme="dark"] {
	--ai-chat-sidebar-text: rgb(229 231 235);
	--ai-chat-sidebar-selected-text: color-mix(in srgb, var(--ai-chat-sidebar-text) 85%, white);
	--ai-chat-sidebar-hover-bg: color-mix(in srgb, var(--ai-chat-sidebar-bg) 92%, white);
	--ai-chat-sidebar-active-bg: color-mix(in srgb, var(--ai-chat-sidebar-bg) 88%, white);
}

/* ── Sidebar shell ───────────────────────────────────── */

.chat-sidebar {
	display: flex;
	flex-direction: column;
	width: var(--ai-size-5);
	height: 100%;
	padding: var(--ai-spacing-4);
	gap: var(--ai-spacing-4);
	background-color: var(--ai-chat-sidebar-bg);
	border-right: 1px solid var(--ai-border-secondary);
}

/* ── Logo ────────────────────────────────────────────── */

.chat-sidebar__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--ai-spacing-5) 0;
	flex-shrink: 0;
}

.chat-sidebar__logo img {
	display: block;
	max-width: 100%;
	max-height: var(--ai-spacing-13);
	width: auto;
	height: auto;
	object-fit: contain;
	transition: filter var(--ai-transition-default);
}

/* Tint silhouette logo to current Styling > Accent Color
   (--ai-chat-brand-filter is written by JS/CFC alongside --ai-chat-brand) */
.chat-sidebar__logo img.chat-logo {
	filter: var(--ai-chat-brand-filter);
}

/* ── Actions (New Chat, Search) ──────────────────────── */

.chat-sidebar__actions {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

/* ── Sidebar Search ───────────────────────────────────── */

.chat-sidebar__search {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	width: 100%;
	min-height: var(--ai-spacing-7);
	padding: 0 var(--ai-spacing-4);
	border-radius: var(--ai-radius-md);
	background: transparent;
	transition: background-color var(--ai-transition-default);
	margin-top: 4px;
}

/* Hide search when the conversation list is empty (no rendered items) */
.chat-sidebar:not(:has(#conversations .chat-sidebar-item)) .chat-sidebar__search {
	display: none;
}

.chat-sidebar__search:hover {
	background: var(--ai-chat-sidebar-hover-bg);
}

.chat-sidebar__search:focus-within {
	background: var(--ai-chat-sidebar-hover-bg);
	outline: none;
	box-shadow: 0 0 0 1px var(--ai-chat-sidebar-bg), 0 0 0 3px var(--ai-surface-brand-contrast);
}

.chat-sidebar__search-icon {
	flex-shrink: 0;
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-chat-sidebar-text);
	pointer-events: none;
}

.chat-sidebar__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--ai-chat-sidebar-text);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fluid-xxs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.chat-sidebar__search-input::placeholder {
	color: var(--ai-chat-sidebar-text);
}

.chat-sidebar__search-input::-webkit-search-cancel-button {
	display: none;
}

.chat-sidebar__search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--ai-chat-sidebar-text);
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--ai-transition-default);
}

.chat-sidebar__search-clear.visible {
	display: flex;
}

.chat-sidebar__search-clear:hover {
	opacity: 1;
}

.chat-sidebar__search-clear svg {
	width: 14px;
	height: 14px;
}

/* ── Sections container (scrollable) ─────────────────── */

.chat-sidebar__sections {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-5);
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-color: var(--ai-chat-sidebar-active-bg) transparent;
	scrollbar-width: thin;
}

.chat-sidebar__sections::-webkit-scrollbar {
	width: 6px;
}

.chat-sidebar__sections::-webkit-scrollbar-track {
	background: transparent;
}

.chat-sidebar__sections::-webkit-scrollbar-thumb {
	background-color: var(--ai-chat-sidebar-active-bg);
	border-radius: var(--ai-radius-full);
}

/* ── Section ──────────────────────────────────────────── */

.chat-sidebar__section {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.chat-sidebar__section-label {
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-xs);
	color: var(--ai-chat-sidebar-text);
	opacity: 0.6;
	padding: var(--ai-spacing-2) var(--ai-spacing-3);
}

/* ── Guest Message (logged-out sidebar notice) ────────── */

.chat-sidebar__guest-message {
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-sm);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-md);
	color: var(--ai-chat-sidebar-text);
	padding: var(--ai-spacing-2) var(--ai-spacing-3);
}

/* ── Sidebar Item ─────────────────────────────────────── */

.chat-sidebar-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-2);
	width: 100%;
	min-height: var(--ai-spacing-7);
	padding: 0 var(--ai-spacing-3);
	border: none;
	border-radius: var(--ai-radius-md);
	background: transparent;
	color: var(--ai-chat-sidebar-text);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-md);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ai-transition-default);
}

/* ── Pin icon ─────────────────────────────────────────── */

.chat-sidebar-item__pin {
	display: none;
	flex-shrink: 0;
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-chat-sidebar-text);
	opacity: 0.6;
}

.chat-sidebar-item--pinned .chat-sidebar-item__pin {
	display: block;
}

/* ── Text label ───────────────────────────────────────── */

.chat-sidebar-item__text {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Actions (fade + ellipsis button) ────────────────── */

.chat-sidebar-item__actions {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ai-transition-default);
}

.chat-sidebar-item:hover .chat-sidebar-item__actions,
.chat-sidebar-item--menu-open .chat-sidebar-item__actions {
	opacity: 1;
	pointer-events: auto;
}

.chat-sidebar-item__fade {
	width: var(--ai-spacing-10);
	height: 100%;
	pointer-events: none;
}

.chat-sidebar-item:hover .chat-sidebar-item__fade {
	background: linear-gradient(to right, transparent, var(--ai-chat-sidebar-hover-bg));
}

.chat-sidebar-item--selected .chat-sidebar-item__fade,
.chat-sidebar-item--selected:hover .chat-sidebar-item__fade {
	background: linear-gradient(to right, transparent, var(--ai-chat-sidebar-active-bg));
}

.chat-sidebar-item--menu-open:not(.chat-sidebar-item--selected) .chat-sidebar-item__fade {
	background: linear-gradient(to right, transparent, var(--ai-chat-sidebar-hover-bg));
}

.chat-sidebar-item__menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-7);
	height: var(--ai-spacing-7);
	border: none;
	border-radius: var(--ai-radius-md);
	background: var(--ai-chat-sidebar-hover-bg);
	color: var(--ai-chat-sidebar-text);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--ai-transition-default);
}

.chat-sidebar-item__menu-btn:hover {
	background: var(--ai-chat-sidebar-active-bg);
}

.chat-sidebar-item--selected .chat-sidebar-item__menu-btn {
	background: var(--ai-chat-sidebar-hover-bg);
}

.chat-sidebar-item__menu-btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
}

/* ── States ───────────────────────────────────────────── */

.chat-sidebar-item:hover {
	background: var(--ai-chat-sidebar-hover-bg);
}

.chat-sidebar-item--selected {
	background: var(--ai-chat-sidebar-active-bg);
	color: var(--ai-chat-sidebar-selected-text);
}

.chat-sidebar-item--selected:hover {
	background: var(--ai-chat-sidebar-active-bg);
}

.chat-sidebar-item--menu-open {
	background: var(--ai-chat-sidebar-hover-bg);
}

.chat-sidebar-item--selected.chat-sidebar-item--menu-open {
	background: var(--ai-chat-sidebar-active-bg);
}

/* ── Focus ────────────────────────────────────────────── */

.chat-sidebar-item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ai-chat-sidebar-bg), 0 0 0 3px var(--ai-surface-brand-contrast);
}

.chat-sidebar-item__menu-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ai-chat-sidebar-bg), 0 0 0 3px var(--ai-surface-brand-contrast);
}

/* ── Sidebar Item Context Menu ────────────────────────── */

.chat-sidebar-menu {
	position: fixed;
	z-index: 10;
	display: none;
	flex-direction: column;
	min-width: max-content;
	padding: var(--ai-spacing-3);
	border-radius: var(--ai-radius-lg);
	background: var(--ai-chat-sidebar-hover-bg);
	box-shadow: var(--ai-shadow-sm);
}

.chat-sidebar-menu--open {
	display: flex;
}

.chat-sidebar-menu__item {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	width: 100%;
	min-height: var(--ai-spacing-7);
	padding: 0 var(--ai-spacing-3);
	border: none;
	border-radius: var(--ai-radius-md);
	background: transparent;
	color: var(--ai-chat-sidebar-text);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fluid-xxs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
	cursor: pointer;
	white-space: nowrap;
	text-align: left;
	transition: background-color var(--ai-transition-default);
}

.chat-sidebar-menu__item:hover {
	background: var(--ai-chat-sidebar-active-bg);
}

.chat-sidebar-menu__item svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	flex-shrink: 0;
}

.chat-sidebar-menu__item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ai-chat-sidebar-bg), 0 0 0 3px var(--ai-surface-brand-contrast);
}

/* ── Action variant (New Chat, Search) ────────────────── */

.chat-sidebar-item--action {
	gap: var(--ai-spacing-3);
	padding: 0 var(--ai-spacing-4);
	font-size: var(--ai-font-fluid-xxs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
}

.chat-sidebar-item--action .chat-sidebar-item__icon {
	flex-shrink: 0;
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-chat-sidebar-text);
}


/* =============================================================
   4. CHAT CONTAINER
   ============================================================= */
.chat-main__container:empty {
	display: none;
}
.chat-main__container .qa-group {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-7);
}

.chat-main__container div .debug span {
	width: 100%;
	height: auto;
}

.chat-main__error {
	padding: var(--ai-spacing-5);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	color: var(--ai-text-primary);
}


/* =============================================================
   5. QUESTION & ANSWER GRID
   ============================================================= */

/* Brand luminance adaptation — msg-bubble tokens derive from --ai-chat-brand.
   JS sets data-brand-theme via luminance; these blocks redefine the tokens.
   Spec: docs/chat-brand-system.md in figmaTest repo. */
[data-brand-theme="dark"] {
	--ai-chat-msg-bg: color-mix(in srgb, var(--ai-chat-brand) 8%, var(--ai-surface-primary));
	--ai-chat-msg-text: color-mix(in srgb, var(--ai-chat-brand) 50%, black);
}
[data-brand-theme="light"] {
	--ai-chat-msg-bg: color-mix(in srgb, var(--ai-chat-brand) 15%, var(--ai-surface-primary));
	--ai-chat-msg-text: color-mix(in srgb, var(--ai-chat-brand) 35%, black);
}
[data-theme="dark"] [data-brand-theme="dark"] {
	--ai-chat-msg-bg: color-mix(in srgb, var(--ai-chat-brand) 50%, var(--ai-surface-primary));
	--ai-chat-msg-text: var(--ai-text-primary);
}

/* Question row: right-aligned bubble + avatar (Affino adds .msg-bubble__avatar sibling not in spec — gap spaces avatar from bubble) */
.msg-bubble {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--ai-spacing-3);
	padding-left: var(--ai-spacing-8);
	position: relative;
}

@media (min-width: 640px) {
	.msg-bubble {
		padding-left: var(--ai-spacing-11);
	}
}

.msg-bubble__question {
	display: flex;
	align-items: center;
	padding: var(--ai-spacing-4);
	background-color: var(--ai-chat-msg-bg);
	border-radius: var(--ai-radius-md);
	position: relative;
}

.msg-bubble__text {
	margin: 0;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-medium);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-chat-msg-text);
	font-feature-settings: 'case' 1;
}

@media (min-width: 640px) {
	.msg-bubble__text {
		font-size: var(--ai-font-fixed-sm);
	}
}

.msg-bubble__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--ai-radius-md);
	background-size: contain;
	background-repeat: no-repeat;
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* ── Hover action buttons ─────────────────────────────── */

.msg-bubble__actions {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	align-items: center;
	padding-top: var(--ai-spacing-2);
}

.msg-bubble:hover .msg-bubble__actions {
	display: flex;
}

/* Answer row: full width */
.chat-main__container .answer > div {
	width: 100%;
}


/* =============================================================
   6. NAV ICONS & FEEDBACK
   ============================================================= */
/* Response actions (copy + feedback buttons) */
.chat-main__response-actions {
	display: flex;
	align-items: center;
	padding-top: var(--ai-spacing-2);
}

.chat-main__response-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-7);
	min-height: var(--ai-spacing-7);
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ai-radius-md);
	background: transparent;
	color: var(--ai-icon-primary);
	cursor: pointer;
	transition: background-color var(--ai-transition-default);
}

.chat-main__response-action-btn:hover {
	background-color: var(--ai-btn-tertiary-bg-hover);
}

.chat-main__response-action-btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
}

.chat-main__response-action-btn--sent {
	cursor: default;
	opacity: 1;
}

.chat-main__response-action-btn--sent[data-action="positive"] {
	color: var(--ai-surface-success);
}

.chat-main__response-action-btn--sent[data-action="negative"] {
	color: var(--ai-surface-error);
}

/* Conversation-level feedback banner (CheckFeedBackPanel) */
.chat-main__feedback-panel {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	margin-top: var(--ai-spacing-5);
	padding: var(--ai-spacing-4) var(--ai-spacing-5);
	background-color: var(--ai-surface-contrast);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	color: var(--ai-text-primary);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
}

.chat-main__feedback-panel__label {
	flex: 1;
}

.chat-main__feedback-panel__icon {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.chat-main__feedback-panel__icon--positive {
	background-image: url("data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M7%2010v11M7%2010V7a3%203%200%20013-3l4%209v11h-4.5a2%202%200%2001-2-1.7L7%2010z'/%3e%3c/svg%3e");
	color: var(--ai-surface-success);
}

.chat-main__feedback-panel__icon--negative {
	background-image: url("data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M17%2014V3M17%2014v3a3%203%200%2001-3%203l-4-9V0h4.5a2%202%200%20012%201.7L17%2014z'/%3e%3c/svg%3e");
	color: var(--ai-surface-error);
}

.chat-main__feedback-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-6);
	height: var(--ai-spacing-6);
	padding: 0;
	margin-left: var(--ai-spacing-2);
	border: none;
	border-left: 1px solid var(--ai-border-secondary);
	padding-left: var(--ai-spacing-3);
	background: transparent;
	color: var(--ai-icon-primary);
	font-size: var(--ai-font-fixed-md);
	line-height: 1;
	cursor: pointer;
	transition: color var(--ai-transition-default);
}

.chat-main__feedback-panel__close:hover {
	color: var(--ai-text-primary);
}




/* =============================================================
   6a. BUTTON COMPONENT (from Figma design system)
   ============================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ai-spacing-3);
	padding: 0 var(--ai-spacing-5);
	min-height: var(--ai-spacing-8);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
	border-radius: var(--ai-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--ai-transition-default), border-color var(--ai-transition-default), color var(--ai-transition-default);
	white-space: nowrap;
	user-select: none;
}

.btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	flex-shrink: 0;
}

.btn--primary {
	background-color: var(--ai-btn-primary-bg);
	color: var(--ai-btn-primary-text);
	border-color: var(--ai-btn-primary-border);
}
.btn--primary:hover {
	background-color: var(--ai-btn-primary-bg-hover);
}
.btn--primary:active {
	background-color: var(--ai-btn-primary-bg-pressed);
}

.btn--secondary {
	background-color: var(--ai-btn-secondary-bg);
	color: var(--ai-btn-secondary-text);
	border-color: var(--ai-btn-secondary-border);
}
.btn--secondary:hover {
	background-color: var(--ai-btn-secondary-bg-hover);
}
.btn--secondary:active {
	background-color: var(--ai-btn-secondary-bg-pressed);
}

.btn--tertiary {
	background-color: var(--ai-btn-tertiary-bg);
	color: var(--ai-btn-tertiary-text);
	border-color: var(--ai-btn-tertiary-border);
}
.btn--tertiary:hover {
	background-color: var(--ai-btn-tertiary-bg-hover);
	border-color: var(--ai-btn-tertiary-border-hover);
	color: var(--ai-btn-tertiary-text-hover);
}
.btn--tertiary:active {
	background-color: var(--ai-btn-tertiary-bg-pressed);
}

.btn:disabled,
.btn--disabled {
	background-color: var(--ai-btn-bg-disabled);
	border-color: var(--ai-btn-bg-disabled);
	color: var(--ai-btn-text-disabled);
	opacity: 0.8;
	cursor: not-allowed;
}

.btn--sm {
	padding: 0 var(--ai-spacing-4);
	min-height: var(--ai-spacing-7);
	font-size: var(--ai-font-fixed-xxs);
	border-radius: var(--ai-radius-md);
}

.btn--icon {
	padding: 0;
	width: var(--ai-spacing-8);
	min-height: var(--ai-spacing-8);
}

.btn--icon.btn--sm {
	width: var(--ai-spacing-7);
	min-height: var(--ai-spacing-7);
	padding: 0;
}


.ai-chat__main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}


/* =============================================================
   6b. CHAT HEADER
   ============================================================= */

.chat-header {
	display: flex;
	align-items: center;
	padding: var(--ai-spacing-4);
	border-bottom: 1px solid var(--ai-border-secondary);
	position: relative;
}

.chat-header__container {
	display: flex;
	flex: 1;
	gap: var(--ai-spacing-3);
	align-items: center;
	min-width: 0;
}

/* ── Admin pressed state ──────────────────────────────── */

/* ── Mobile gear button + dropdown ────────────────────── */

.chat-header__gear-wrap {
	display: none;
	position: absolute;
	right: var(--ai-spacing-4);
	top: 0;
	bottom: 0;
	align-items: center;
}

.chat-header:has(.chat-header__admin--visible) .chat-header__gear-wrap {
	display: flex;
}

.chat-header__admin-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: calc(-1 * var(--ai-spacing-2));
	z-index: 10;
}

.chat-header__admin-menu--open {
	display: flex;
}

.chat-header__admin-menu-inner {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: var(--ai-spacing-3);
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
}

.chat-header__admin-menu-inner .btn {
	justify-content: flex-start;
	font-feature-settings: 'case' 1;
	white-space: nowrap;
}

/* ── Admin pressed state ─────────────────────────────── */

.chat-header__admin .btn[aria-pressed="true"],
.chat-header__admin-menu-inner .btn[aria-pressed="true"] {
	background-color: var(--ai-btn-secondary-bg-pressed);
}

.chat-header__admin .btn {
	font-feature-settings: 'case' 1;
}

/* At xl: show inline admin, hide gear */
@media (min-width: 1280px) {
	.chat-header:has(.chat-header__admin--visible) .chat-header__gear-wrap {
		display: none;
	}
}

/* ── Window buttons (Minimised / Mobile) ─────────────── */

.chat-header__window-buttons {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	align-items: center;
	padding: 0 var(--ai-spacing-4);
}

.chat-header--minimised .chat-header__window-buttons,
.chat-header--mobile .chat-header__window-buttons {
	display: flex;
}

.chat-header--mobile .chat-header__maximize {
	display: none;
}

.chat-header__btn-tooltip {
	position: relative;
}

.chat-header__btn-tooltip .ai-tooltip {
	position: absolute;
	top: calc(100% + var(--ai-spacing-1));
	right: 0;
	width: auto;
	white-space: nowrap;
	padding: var(--ai-spacing-2) var(--ai-spacing-3);
	pointer-events: none;
	z-index: 20;
}

.chat-header__btn-tooltip:hover .ai-tooltip,
.chat-header__btn-tooltip:has(:focus-visible) .ai-tooltip {
	visibility: visible;
	opacity: 1;
}

/* ── AI Profile selector ──────────────────────────────── */

.chat-header__selector-wrap {
	display: flex;
	flex: 1;
	height: var(--ai-spacing-7);
	align-items: center;
	justify-content: center;
	gap: var(--ai-spacing-2);
	padding-right: var(--ai-spacing-8);
	min-width: 0;
}

.chat-header__selector-group {
	position: relative;
	height: 100%;
	width: var(--ai-size-3);
}

.chat-header__selector {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--ai-surface-secondary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color var(--ai-transition-default);
}

.chat-header__selector:hover {
	border-color: var(--ai-border-brand);
}

.chat-header__selector .chat-header__selector-text { flex: 1; }

.chat-header__selector-text {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 var(--ai-spacing-4);
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-medium);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	letter-spacing: var(--ai-tracking-5);
	color: var(--ai-text-primary);
	font-feature-settings: 'case' 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-header__selector-chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-7);
	height: 100%;
	border-left: 1px solid var(--ai-border-secondary);
	color: var(--ai-icon-primary);
	flex-shrink: 0;
}

.chat-header__selector-chevron svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
}

/* ── Dropdown menu ────────────────────────────────────── */

.chat-header__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + var(--ai-spacing-3));
	left: 0;
	flex-direction: column;
	min-width: 100%;
	background-color: var(--ai-surface-secondary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	z-index: 10;
	overflow: hidden;
}

.chat-header__dropdown--open {
	display: flex;
}

.chat-header__dropdown-item {
	padding: var(--ai-spacing-4);
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-medium);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	letter-spacing: var(--ai-tracking-5);
	color: var(--ai-text-primary);
	font-feature-settings: 'case' 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ai-transition-default);
}

.chat-header__dropdown-item:hover {
	background-color: var(--ai-surface-contrast);
}

.chat-header__dropdown-item--selected {
	background-color: var(--ai-surface-contrast);
}

/* ── Admin actions ────────────────────────────────────── */

.chat-header__admin {
	display: none;
	position: absolute;
	right: var(--ai-spacing-4);
	top: 0;
	bottom: 0;
	align-items: center;
	gap: var(--ai-spacing-3);
}

@media (min-width: 1280px) {
	.chat-header__admin--visible {
		display: flex;
	}
}


/* =============================================================
   7. CHAT MAIN LAYOUT
   ============================================================= */

.chat-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	background-color: var(--ai-surface-primary);
	opacity: 0;
	width: 100%;
	gap: var(--ai-spacing-6)
}

/* Sticky footer wrapper — per ChatMain spec (.chat-main__footer + .chat-main__fade + .chat-main__input) */
.chat-main__footer {
	position: sticky;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	z-index: 5;
}

.chat-main__fade {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--ai-size-11);
	height: calc(100% + var(--ai-spacing-8));
	background: var(--ai-gradient-surface-primary);
	pointer-events: none;
}

.chat-main__input {
	width: 100%;
	max-width: var(--ai-size-11);
	padding: 0 var(--ai-spacing-2);
	background-color: var(--ai-surface-primary);
	pointer-events: auto;
}

@media (min-width: 768px) {
	.chat-main__input {
		padding: 0;
	}
}

/* Conversation active — align to top so Q&A groups start at the top */
.chat-main:has(.chat-main__container:not(:empty)) {
	justify-content: flex-start;
}

@media (min-width: 640px) {
	.chat-main {
		gap: var(--ai-spacing-5);
	}
}

/* ── Welcome intro (title + subtitle) ─────────────────── */

.chat-main__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: var(--ai-size-11);
	padding: var(--ai-spacing-8) var(--ai-spacing-5) 0;
}

@media (min-width: 640px) {
	.chat-main__intro {
		gap: var(--ai-spacing-5);
		padding: var(--ai-spacing-8) var(--ai-spacing-6) 0;
	}
}

.chat-main__intro-image {
	display: block;
	max-width: 100%;
	height: auto;
}

.chat-main__title {
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-bold);
	font-size: var(--ai-font-fluid-2xl);
	line-height: var(--ai-leading-lg);
	color: var(--ai-text-primary);
	margin: 0;
}

@media (min-width: 640px) {
	.chat-main__title {
		font-size: var(--ai-font-fluid-4xl);
		line-height: var(--ai-leading-xl);
	}
}

.chat-main__subtitle {
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: 1.5;
	color: var(--ai-text-contrast);
	margin: 0;
}

.chat-main__subtitle p {
	margin: 0;
}

@media (min-width: 640px) {
	.chat-main__subtitle {
		font-size: var(--ai-font-fixed-sm);
	}
}

@media (min-width: 768px) {
	.chat-main__subtitle {
		font-size: var(--ai-font-fixed-md);
	}
}

/* ── Conversation container ───────────────────────────── */

.chat-main__container {
	width: 100%;
	max-width: var(--ai-size-11);
	margin: 0 auto;
	padding: var(--ai-spacing-6);
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-8);
	flex: 1 0 auto;
	min-height: min-content;
}

/* ── Suggestions grid ─────────────────────────────────── */

.chat-main__suggestions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ai-spacing-4);
	width: 100%;
	max-width: var(--ai-size-11);
	padding: 0 var(--ai-spacing-5);
}

@media (min-width: 640px) {
	.chat-main__suggestions {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ai-spacing-5);
		padding: 0 var(--ai-spacing-6);
	}
}

.chat-main__suggestions .suggested-question:nth-child(3) {
	display: none;
}

@media (min-width: 640px) {
	.chat-main__suggestions .suggested-question:nth-child(3) {
		display: flex;
	}
}

.chat-main__feedback {
	grid-column: 1 / -1;
	text-align: center;
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	letter-spacing: 0.12px;
	color: var(--ai-text-contrast);
	margin: 0;
	font-feature-settings: 'case' 1;
}

.chat-main__feedback p {
	margin: 0;
}


/* =============================================================
   8. CHAT FORM & TEXTAREA
   ============================================================= */

/* ── Message Input component ──────────────────────────── */

.msg-input {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	position: relative;
}

.msg-input__box {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-5);
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: var(--ai-size-11);
	padding: var(--ai-spacing-6);
	background-color: var(--ai-surface-secondary);
	border: 1px solid rgb(from var(--ai-border-secondary) r g b / 0.6);
	border-radius: var(--ai-radius-lg);
	box-shadow: var(--ai-shadow-md, 0 2px 10px rgba(0,0,0,0.1));
	position: relative;
	transition: border-color var(--ai-transition-default);
}

.msg-input__box:focus-within {
	border-color: var(--ai-border-secondary);
}

.msg-input__textarea {
	width: 100%;
	border: none;
	outline: none;
	resize: none;
	padding: 0;
	margin: 0;
	background: transparent;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: normal;
	color: var(--ai-text-primary);
	font-feature-settings: 'ss04' 1, 'cv01' 1, 'calt' 0, 'kern' 0;
}

@media (min-width: 640px) {
	.msg-input__textarea {
		font-size: var(--ai-font-fixed-sm);
	}
}

.msg-input__textarea::placeholder {
	color: var(--ai-text-contrast);
}

.msg-input__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

/* ── Filter button ────────────────────────────────────── */

.msg-input__filter-container {
	display: flex;
	align-items: center;
	margin-right: auto;
	border-radius: var(--ai-radius-md);
	position: relative;
}

.msg-input__filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ai-radius-md);
	background: transparent;
	color: var(--ai-icon-primary);
	cursor: pointer;
	transition: background-color var(--ai-transition-default);
}

.msg-input__filter-btn:hover {
	background-color: var(--ai-btn-tertiary-bg-hover);
}

.msg-input__filter-btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
}

/* Filter label — visible only when .msg-input--filtered is set on the wrapper */

.msg-input__filter-label {
	display: none;
	font-feature-settings: 'case' 1;
	white-space: nowrap;
}

.msg-input--filtered .msg-input__filter-label {
	display: inline;
}

/* Override .btn--icon.btn--sm square sizing so label can render */
.msg-input--filtered .msg-input__filter-btn.btn--icon {
	width: auto;
	padding: 0 var(--ai-spacing-4);
	background-color: var(--ai-btn-tertiary-bg-hover);
}

/* ── Send / Stop buttons ──────────────────────────────── */

.msg-input__send-btn,
.msg-input__stop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: var(--ai-radius-md);
	cursor: pointer;
	color: #fff;
}

/* Send button defaults to the chat accent (Styling panel writes --ai-chat-brand). */
#ai-chat, .ai-chat-min, body > .modal-overlay {
	--ai-btn-send-bg:       var(--ai-chat-brand);
	--ai-btn-send-bg-hover: color-mix(in srgb, var(--ai-chat-brand) 88%, black);
}

.msg-input__send-btn {
	background-color: var(--ai-btn-send-bg);
}

.msg-input__send-btn:hover {
	background-color: var(--ai-btn-send-bg-hover);
}

.msg-input__send-btn svg,
.msg-input__stop-btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
}

.msg-input__send-btn[disabled] {
	background-color: var(--ai-btn-bg-disabled);
	border-color: transparent;
	opacity: 0.8;
	cursor: not-allowed;
}

.msg-input--active .msg-input__send-btn[disabled] {
	background-color: var(--ai-chat-brand);
	border-color: transparent;
	color: var(--ai-btn-primary-text);
	opacity: 1;
	cursor: pointer;
}

.msg-input__stop-btn {
	background-color: var(--ai-surface-error);
	color: #fff;
}

/* ── Disclaimer ───────────────────────────────────────── */

.msg-input__disclaimer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--ai-size-11);
	padding: var(--ai-spacing-3) var(--ai-spacing-6);
	position: relative;
}

.msg-input__disclaimer-text {
	margin: 0;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	letter-spacing: 0.0125em;
	color: var(--ai-text-contrast);
	font-feature-settings: 'case' 1;
	white-space: nowrap;
	cursor: pointer;
}

/* ── Filter popover ───────────────────────────────────── */

.msg-input__filter-popover {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 0;
	flex-direction: column;
	align-items: flex-start;
	width: var(--ai-size-1, 8rem);
	padding: 1px;
	margin-bottom: var(--ai-spacing-3);
	background-color: var(--ai-surface-secondary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	box-shadow: var(--ai-shadow-lg, 0 4px 20px rgba(0,0,0,0.12));
	z-index: 30;
	overflow: hidden;
}

.msg-input__filter-popover--open {
	display: flex;
}

.msg-input__filter-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--ai-spacing-7);
	padding: 0 var(--ai-spacing-4);
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
	cursor: pointer;
	background: none;
	border: none;
	transition: background-color var(--ai-transition-default);
}

.msg-input__filter-item:hover {
	background-color: var(--ai-surface-minimal);
}

.msg-input__filter-item--selected {
	font-weight: var(--ai-font-medium);
}

.msg-input__filter-item svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	visibility: hidden;
}

.msg-input__filter-item--selected svg {
	visibility: visible;
}

/* ── Tooltip positioning ──────────────────────────────── */

.msg-input__tooltip {
	display: none;
	position: absolute;
	z-index: 20;
}

.msg-input__tooltip .ai-tooltip {
	visibility: visible;
	opacity: 1;
}

.msg-input__tooltip--data {
	bottom: calc(100% + var(--ai-spacing-3));
	left: 50%;
	transform: translateX(-50%);
}

.msg-input__disclaimer-text:hover + .msg-input__tooltip--data,
.msg-input__tooltip--data:hover {
	display: block;
}

.msg-input__tooltip--filter {
	bottom: calc(100% + var(--ai-spacing-3));
	left: 0;
}

.msg-input__tooltip--filter .ai-tooltip {
	width: auto;
	white-space: nowrap;
}

.msg-input:not(:has(.msg-input__filter-popover--open)) .msg-input__filter-btn:hover ~ .msg-input__tooltip--filter,
.msg-input:not(:has(.msg-input__filter-popover--open)) .msg-input__tooltip--filter:hover {
	display: block;
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 767px) {
	.msg-input__box {
		padding: var(--ai-spacing-5);
	}
	.msg-input__send-btn {
		display: none;
	}
	.msg-input--active .msg-input__send-btn {
		display: inline-flex;
	}
}


/* =============================================================
   8b. ANSWER PROSE
   ============================================================= */

.chat-main__response {
	width: 100%;
	margin-top: var(--ai-spacing-6);
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fluid-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	font-feature-settings: 'case' 1;
	overflow-wrap: anywhere;
}

.chat-main__response:first-child {
	margin-top: 0;
}

@media (min-width: 640px) {
	.chat-main__response {
		margin-top: var(--ai-spacing-7);
		font-size: var(--ai-font-fluid-sm);
	}
}

.chat-main__response p,
.chat-main__response ul,
.chat-main__response ol,
.chat-main__response li,
.chat-main__response strong,
.chat-main__response b,
.chat-main__response span {
	color: var(--ai-text-primary);
}

.chat-main__response p {
	margin: 0 0 var(--ai-leading-md);
}

.chat-main__response p:last-child {
	margin-bottom: 0;
}

.chat-main__response strong,
.chat-main__response b {
	font-weight: var(--ai-font-medium);
}

.chat-main__response ul {
	list-style: disc;
	margin: 0 0 var(--ai-leading-md);
	padding-left: var(--ai-spacing-6);
}

.chat-main__response ul:last-child {
	margin-bottom: 0;
}

.chat-main__response ol {
	margin: 0 0 var(--ai-leading-md);
	padding-left: var(--ai-spacing-6);
}

.chat-main__response ol:last-child {
	margin-bottom: 0;
}

.chat-main__response li {
	margin-bottom: var(--ai-spacing-4);
}

.chat-main__response li:last-child {
	margin-bottom: 0;
}

.chat-main__response h3 {
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-semibold);
	font-size: inherit;
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	margin: 0;
	font-feature-settings: 'case' 1;
}

.chat-main__response code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px var(--ai-spacing-1);
	background: var(--ai-surface-contrast);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-sm);
	font-family: 'Dank Mono', monospace;
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-sm);
	color: var(--ai-text-primary);
	letter-spacing: var(--ai-tracking-3);
	white-space: nowrap;
	vertical-align: baseline;
}

@media (min-width: 640px) {
	.chat-main__response code {
		font-size: var(--ai-font-fixed-sm);
	}
}

.chat-main__response .quick-links {
	margin-bottom: var(--ai-spacing-6);
}

.chat-main__response .chat-response-table-scroll {
	margin-bottom: var(--ai-spacing-6);
}

/* ── Inline link annotations ─────────────────────────── */

.chat-main__response a:not(.sources-link):not(.sources-card):not(.chat-debug__expand) {
	color: var(--ai-text-primary);
	font-weight: var(--ai-font-medium);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
}

.chat-main__response a:not(.sources-link):not(.sources-card):not(.chat-debug__expand):hover {
	color: var(--ai-text-secondary);
}


/* =============================================================
   8c. SUGGESTED QUESTIONS
   Figma: Affino AI - Design System > SuggestedQuestion
   ============================================================= */

#suggested-questions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ai-spacing-4);
	width: 100%;
}

@media (min-width: 640px) {
	#suggested-questions {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ai-spacing-5);
	}
}

.suggested-question {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ai-spacing-3);
	padding: var(--ai-spacing-5);
	background-color: var(--ai-surface-contrast);
	border: none;
	border-radius: var(--ai-radius-lg);
	cursor: pointer;
	text-align: left;
	color: var(--ai-text-primary);
	transition: background-color var(--ai-transition-default);
}

.suggested-question:hover {
	background-color: var(--ai-surface-minimal);
}

.suggested-question:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ai-surface-primary), 0 0 0 3px var(--ai-surface-brand-contrast);
}

.suggested-question svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	flex-shrink: 0;
	color: var(--ai-icon-primary);
}

@media (min-width: 640px) {
	.suggested-question svg {
		width: var(--ai-icon-size-md);
		height: var(--ai-icon-size-md);
	}
}

.suggested-question__body {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-1);
	width: 100%;
}

.suggested-question__text {
	margin: 0;
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-semibold);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
	font-feature-settings: 'dlig' 1;
}

@media (min-width: 640px) {
	.suggested-question__text {
		font-size: var(--ai-font-fixed-xs);
		line-height: var(--ai-leading-sm);
	}
}

.suggested-question__subtext {
	display: none;
	margin: 0;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xxs);
	line-height: 1.5;
	color: var(--ai-text-contrast);
	font-feature-settings: 'dlig' 1;
}

@media (min-width: 640px) {
	.suggested-question__subtext {
		display: block;
	}
}


/* Quick Links + Sources Link — moved to ai_theatre.css (shared across chatbot + CC) */


/* =============================================================
   9. MISC SHARED
   ============================================================= */
#chat-regenerate {
	display: flex;
	gap: 10px;
}

#chat-info > span > p {
	line-height: 130%;
}

#ai-chat .disabled {
	opacity: .3;
	cursor: not-allowed;
}


/* Notification Toast */
.chat-notification {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-1);
	padding: var(--ai-spacing-2);
	width: fit-content;
	color: #ffffff;
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-medium);
	box-shadow: var(--ai-shadow-md);
	border-radius: var(--ai-radius-sm);
	background-color: var(--ai-surface-success);
	opacity: 0;
	transform: translateX(150%);
	position: absolute;
	top: 70px;
	z-index: 1;
	right: var(--ai-spacing-5);
	transition: all .5s ease-in-out;

	&.open {
		opacity: 1;
		transform: translateX(0);
	}
}


/* =============================================================
   10. FULL-PAGE OVERRIDES
   ============================================================= */

/* 10a. Affino Column/Row Resets */
.aor:has(.chat-main) {
	position: relative;
	padding: 0 !important;
}
.aori:has(.chat-main) {
	max-width: none !important;
}
.aoc:has(.chat-main) {
	margin: 0 !important;
}
.aoci:has(.chat-main) {
	padding: 0 !important;
}

/* 10b. Sidebar */
.ai-chat__sidebar {
	flex-shrink: 0;
	position: absolute;
	top: var(--_header-h);
	left: 0;
	bottom: 0;
	z-index: 20;
	max-width: calc(100vw - var(--ai-spacing-9));
	transform: translateX(-100%);
	transition: transform var(--ai-transition-slow), box-shadow var(--ai-transition-slow);
	box-shadow: none;
}

.ai-chat__sidebar .chat-sidebar {
	max-width: 100%;
}

/* Overlay */
.ai-chat__overlay {
	position: absolute;
	inset: var(--_header-h) 0 0 0;
	z-index: 15;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ai-transition-slow);
}

/* Resize handle (hidden on mobile) */
.ai-chat__resize-handle {
	display: none;
}

/* Mobile sidebar open */
#ai-chat.ai-chat--sidebar-open .ai-chat__sidebar {
	transform: translateX(0);
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
}

#ai-chat.ai-chat--sidebar-open .ai-chat__overlay {
	opacity: 1;
	pointer-events: auto;
}

@media (min-width: 1024px) {
	.ai-chat__sidebar {
		position: static;
		transform: none;
		width: var(--_sidebar-width, var(--ai-size-5));
		min-width: var(--ai-size-4);
		max-width: var(--ai-size-8);
		margin-left: 0;
		transition: margin-left var(--ai-transition-slow), width var(--ai-transition-slow);
	}

	#ai-chat .chat-sidebar {
		width: 100%;
	}

	#ai-chat.ai-chat--resizing .ai-chat__sidebar {
		transition: none;
	}

	#ai-chat.ai-chat--sidebar-closed .ai-chat__sidebar {
		margin-left: calc(-1 * var(--_sidebar-width, var(--ai-size-5)));
	}

	.ai-chat__overlay {
		display: none;
	}

	.ai-chat__resize-handle {
		display: block;
		width: 4px;
		flex-shrink: 0;
		cursor: col-resize;
		background: transparent;
		transition: background-color var(--ai-transition-default);
		position: relative;
		z-index: 5;
		margin-left: -2px;
		margin-right: -2px;
	}

	.ai-chat__resize-handle::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -4px;
		right: -4px;
	}

	.ai-chat__resize-handle:hover,
	#ai-chat.ai-chat--resizing .ai-chat__resize-handle {
		background-color: var(--ai-border-secondary);
	}

	#ai-chat.ai-chat--sidebar-closed .ai-chat__resize-handle {
		display: none;
	}
}

/* END 10b */

/* 10d. Chat Debug */
#chat-debug.superuser {
	align-self: flex-end;
	width: calc(100% - 40px);
}
#chat-debug label {
	margin-top: 0;
}

/* Admin debug panel rendered by chatbot.cfc#getAnswer — appears below the answer
   when the admin "debug" toggle is on. Token-only; no Design Style dependency. */
.chat-debug {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-6);
	margin-top: var(--ai-spacing-6);
	font-size: var(--ai-font-fixed-xs);
	color: var(--ai-text-primary);
}
.chat-debug__section {
	width: 100%;
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	background-color: var(--ai-surface-primary);
	overflow: hidden;
}
.chat-debug__heading {
	margin: 0;
	padding: var(--ai-spacing-4) var(--ai-spacing-5);
	background-color: var(--ai-surface-secondary);
	border-bottom: 1px solid var(--ai-border-secondary);
	font-size: var(--ai-font-fixed-sm);
	font-weight: var(--ai-font-bold);
	color: var(--ai-text-primary);
}
/* Cells share width equally and never wrap — text wraps inside each cell when narrow. */
.chat-debug__row {
	width: 100%;
	display: flex;
	margin: 0;
}
.chat-debug__row--bordered-top {
	border-top: 1px solid var(--ai-border-secondary);
}
.chat-debug__cell {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: var(--ai-spacing-4) var(--ai-spacing-5);
	word-break: break-word;
	border-left: 1px solid var(--ai-border-secondary);
}
.chat-debug__cell:first-child {
	border-left: 0;
}
.chat-debug__label {
	width: 100%;
	font-weight: var(--ai-font-bold);
	color: var(--ai-text-primary);
	margin-bottom: var(--ai-spacing-2);
}
.chat-debug__expand {
	color: var(--ai-chat-brand);
	text-decoration: none;
	margin-left: var(--ai-spacing-2);
	font-weight: var(--ai-font-regular);
}
.chat-debug__expand:hover {
	text-decoration: none;
}
/* Toggle wrapper: pure show/hide — padding lives in inner __item. */
.chat-debug__hidden {
	display: none;
	width: 100%;
	border-top: 1px solid var(--ai-border-secondary);
}
/* Drop the redundant top border when the hidden wrapper sits directly under
   the section heading (the heading already provides a bottom border). */
.chat-debug__heading + .chat-debug__hidden {
	border-top: 0;
}
.chat-debug__intro {
	margin: 0;
	padding: var(--ai-spacing-4) var(--ai-spacing-5);
}
.chat-debug__item {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-3);
	padding: var(--ai-spacing-4) var(--ai-spacing-5);
}
.chat-debug__divider {
	width: 100%;
	border: none;
	border-top: 1px solid var(--ai-border-secondary);
	margin: 0;
}
.chat-debug__field {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	gap: var(--ai-spacing-2);
}
.chat-debug__field-label {
	width: 100%;
	font-weight: var(--ai-font-bold);
	color: var(--ai-text-primary);
}

/* 10e. Sidebar offset — removed; sidebar is a flex child so no offset needed */

/* 10g. Message Input (Sticky Bottom) */
/* flex-shrink:0 + align-self:stretch are the Safari fix — without them, the sticky child
   collapses inside .chat-main (flex column, align-items:center, min-height:0) and the input
   disappears for Mac/Safari users while rendering fine in Chrome/Firefox.
   The bar spans full width so its background covers anything behind it (carousel arrows etc.);
   the inner box + disclaimer carry the design max-width and self-center. */
.chat-main .msg-input {
	position: sticky;
	bottom: 0;
	z-index: 1;
	background-color: var(--ai-surface-primary);
	padding-inline: var(--ai-spacing-5);
	flex-shrink: 0;
	align-self: stretch;
}
@media (min-width: 640px) {
	.chat-main .msg-input {
		padding-inline: var(--ai-spacing-6);
	}
}

/* 10g-b. System Role Modal */

/* ── Extra button variants (ghost, default, alert-outline) ── */

.btn--ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--ai-icon-secondary);
}
.btn--ghost:hover {
	background-color: var(--ai-btn-tertiary-bg-hover);
	color: var(--ai-icon-primary);
}
.btn--alert-outline {
	background-color: transparent;
	border-color: var(--ai-surface-error);
	color: var(--ai-surface-error);
}
.btn--alert-outline:hover {
	background-color: var(--ai-surface-error-contrast);
}

/* ── Header component ── */

.header {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-5);
	width: 100%;
}
.header__title-group {
	display: contents;
}
.header__title {
	margin: 0;
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fluid-xl);
	font-weight: var(--ai-font-bold);
	line-height: var(--ai-leading-lg);
	color: var(--ai-text-primary);
	flex-shrink: 0;
}
.header__info {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}
.header__actions {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	flex-shrink: 0;
}
.header__discard-short { display: none; }

@media (max-width: 767px) {
	.header__discard-full { display: none; }
	.header__discard-short { display: inline; }
	.header {
		align-items: flex-end;
		gap: var(--ai-spacing-3);
	}
	.header__title-group {
		display: flex;
		flex-direction: column;
		gap: var(--ai-spacing-1);
		flex: 1;
		min-width: 0;
	}
	.header__info { flex: initial; }
	.header__actions {
		align-self: stretch;
		align-items: flex-end;
	}
	.header__actions .btn {
		min-height: var(--ai-spacing-7);
		padding: 0 var(--ai-spacing-4);
		font-size: var(--ai-font-fluid-xxs);
	}
}

/* ── Avatar component ── */

.avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-6);
	height: var(--ai-spacing-6);
	border-radius: var(--ai-radius-full);
	flex-shrink: 0;
	background-color: var(--ai-surface-secondary);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-semibold);
	color: var(--ai-text-contrast);
	overflow: hidden;
}
.avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.avatar .portrait {
	clip-path: circle(50%);
}
.avatar--checked {
	background-color: var(--ai-surface-success);
	border: 1px solid var(--ai-surface-primary);
	overflow: visible;
}
.avatar--checked svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-btn-primary-text);
	flex-shrink: 0;
}

/* ── Pill component ── */

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ai-spacing-6);
	padding: 0 var(--ai-spacing-3);
	background-color: var(--ai-surface-success);
	border-radius: var(--ai-radius-full);
	white-space: nowrap;
	flex-shrink: 0;
}
.pill__label {
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-medium);
	line-height: var(--ai-leading-xs);
	color: var(--ai-btn-primary-text);
	letter-spacing: 0.12px;
}
.pill--contrast {
	background-color: var(--ai-surface-contrast);
}
.pill--contrast .pill__label {
	color: var(--ai-text-primary);
}

/* ── Version History Row ── */

.version-history-row {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-4);
	padding: var(--ai-spacing-3) var(--ai-spacing-5);
	border-radius: var(--ai-radius-lg);
	border: 1px solid transparent;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.version-history-row--live {
	background-color: var(--ai-surface-elevated-2);
}
.version-history-row--selected {
	background-color: var(--ai-surface-elevated-1);
	border: 1px solid var(--ai-border-invert);
}
.version-history-row--selected.version-history-row--live {
	background-color: var(--ai-surface-elevated-2);
	border: none;
	gap: var(--ai-spacing-5);
}
.version-history-row:not(.version-history-row--live):not(.version-history-row--selected) {
	transition: border-color var(--ai-transition-default), background-color var(--ai-transition-default);
}
.version-history-row:not(.version-history-row--live):not(.version-history-row--selected):hover {
	border-color: var(--ai-border-invert);
	background-color: var(--ai-surface-elevated-1);
}
.version-history-row:not(.version-history-row--live):not(.version-history-row--selected) .avatar {
	box-shadow: 0 0 0 2px var(--ai-surface-elevated-1);
}
.version-history-row__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-1);
}
.version-history-row__name {
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.version-history-row__date {
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-contrast);
	letter-spacing: 0.12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Version History panel ── */

.version-history {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-1);
	border-radius: var(--ai-radius-lg);
	position: relative;
}
.version-history__heading {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-2);
	padding-bottom: var(--ai-spacing-2);
}
.version-history__heading-title {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
}
.version-history__icon-history {
	width: var(--ai-icon-size-md);
	height: var(--ai-icon-size-md);
	color: var(--ai-icon-primary);
	flex-shrink: 0;
}
.version-history__heading-title-text {
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fixed-sm);
	font-weight: var(--ai-font-bold);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
}
.version-history__heading-subtitle {
	display: flex;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}
.version-history__heading-subtitle-text {
	flex: 1;
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-contrast);
}
.version-history__chevron {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-icon-contrast);
	flex-shrink: 0;
}
.version-history--expanded .version-history__chevron {
	transform: rotate(90deg);
}
.version-history:not(.version-history--expanded) .version-history__row-extra {
	display: none;
}
.version-history--expanded .version-history__row-extra {
	display: flex;
}
.version-history__rows .version-history-row {
	position: relative;
	z-index: 1;
}
.version-history__rows {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-1);
	position: relative;
}
.version-history__timeline {
	position: absolute;
	left: calc(var(--ai-spacing-5) + var(--ai-spacing-6) / 2);
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: var(--ai-border-secondary);
	pointer-events: none;
	z-index: 0;
}
.version-history__footer {
	display: flex;
	align-items: center;
	padding: var(--ai-spacing-3) var(--ai-spacing-5);
	background: none;
	border: none;
	cursor: pointer;
	width: 100%;
	text-align: left;
}
.version-history__footer-label {
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
	letter-spacing: 0.12px;
}


/* ── System Role overlay ── */

.system-role-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(27, 27, 31, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ai-transition-default);
}
[data-theme="dark"] .system-role-overlay {
	background-color: rgba(0, 0, 0, 0.6);
}
.system-role-overlay--open {
	opacity: 1;
	pointer-events: auto;
}

/* ── System Role modal ── */

.system-role {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10001;
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-5);
	width: calc(100vw - var(--ai-spacing-7) * 2);
	max-width: 1512px;
	height: calc(100vh - var(--ai-spacing-7) * 2);
	max-height: 973px;
	padding: var(--ai-spacing-8);
	background-color: var(--ai-surface-elevated-1);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-xl);
	box-shadow: var(--ai-shadow-lg);
	overflow: hidden;
	container-type: inline-size;
	container-name: system-role;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ai-transition-default);
}
.system-role--open {
	opacity: 1;
	pointer-events: auto;
}
.system-role--no-transition {
	transition: none !important;
}

/* Top bar */
.system-role__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--ai-spacing-7);
	flex-shrink: 0;
}
.system-role__top .header {
	order: 0;
	flex: 9999 1 0;
	max-width: 960px;
	min-width: 0;
}
.system-role__controls {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	flex: 1 1 368px;
	min-width: 0;
}
.system-role__maximize-btn { display: none; }

/* Button state — Make Live enable/disable logic
 * Default (live row, clean): btn-default (disabled) visible only
 * Non-live row selected (clean): btn-save (enabled) visible, no Discard
 * Dirty (any row): btn-save + btn-discard visible
 */
.system-role__btn-discard,
.system-role__btn-save {
	display: none;
}
/* Make-live button follows Style Settings accent, not the primary token */
.system-role__btn-save {
	background-color: var(--ai-chat-brand);
	border-color: var(--ai-chat-brand);
}
.system-role__btn-save:hover {
	background-color: color-mix(in srgb, var(--ai-chat-brand) 85%, black);
	border-color: color-mix(in srgb, var(--ai-chat-brand) 85%, black);
}
/* Non-live row selected + clean */
.system-role--nonlive:not(.system-role--dirty) .system-role__btn-default {
	display: none;
}
.system-role--nonlive:not(.system-role--dirty) .system-role__btn-save {
	display: inline-flex;
}
/* Dirty (any selection) */
.system-role--dirty .system-role__btn-default {
	display: none;
}
.system-role--dirty .system-role__btn-discard,
.system-role--dirty .system-role__btn-save {
	display: inline-flex;
}

/* Body */
.system-role__body {
	display: flex;
	flex-direction: row;
	gap: var(--ai-spacing-7);
	flex: 1;
	min-height: 0;
	overflow: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--ai-surface-secondary) transparent;
}
.system-role__body::-webkit-scrollbar { width: 6px; }
.system-role__body::-webkit-scrollbar-track { background: transparent; }
.system-role__body::-webkit-scrollbar-thumb {
	background-color: var(--ai-surface-secondary);
	border-radius: var(--ai-radius-full);
}

/* Prompt area */
.system-role__prompt {
	flex: 9999 1 540px;
	max-width: 960px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--ai-surface-primary);
	border-radius: var(--ai-radius-lg);
	box-shadow: inset 0 0 0 1px var(--ai-border-secondary);
	overflow: hidden;
}
.system-role__prompt:focus-within {
	box-shadow: inset 0 0 0 1px var(--ai-border-primary);
}
.system-role__textarea {
	flex: 1;
	width: 100%;
	min-height: 0;
	border: none;
	outline: none;
	padding: var(--ai-spacing-6);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	background-color: transparent;
	resize: none;
	scrollbar-width: thin;
	scrollbar-color: var(--ai-surface-secondary) transparent;
}
.system-role__textarea:focus-visible { outline: none; }
.system-role__textarea::-webkit-scrollbar { width: 6px; }
.system-role__textarea::-webkit-scrollbar-track { background: transparent; }
.system-role__textarea::-webkit-scrollbar-thumb {
	background-color: var(--ai-surface-secondary);
	border-radius: var(--ai-radius-full);
}
.system-role__textarea-resize-handle {
	display: none;
	height: 6px;
	cursor: ns-resize;
	flex-shrink: 0;
	background: transparent;
}

/* Sidebar */
.system-role__sidebar {
	flex: 1 1 368px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-7);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ai-surface-secondary) transparent;
}
.system-role__sidebar::-webkit-scrollbar { width: 6px; }
.system-role__sidebar::-webkit-scrollbar-track { background: transparent; }
.system-role__sidebar::-webkit-scrollbar-thumb {
	background-color: var(--ai-surface-secondary);
	border-radius: var(--ai-radius-full);
}

/* Resize handles (Minimised only) */
.system-role__resize-handle {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	cursor: ew-resize;
	border-radius: var(--ai-radius-xl) 0 0 var(--ai-radius-xl);
	z-index: 2;
}
.system-role__resize-handle-bottom {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6px;
	cursor: ns-resize;
	border-radius: 0 0 var(--ai-radius-xl) var(--ai-radius-xl);
	z-index: 2;
}

/* ─── PromptTemplates pattern (sits below .version-history in the sidebar) ─── */

.prompt-templates {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-5);
	width: 100%;
}
.prompt-templates__heading {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-3);
}
.prompt-templates__title {
	margin: 0;
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-bold);
	font-size: var(--ai-font-fixed-sm);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
}
.prompt-templates__description {
	margin: 0;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-contrast);
}
.prompt-templates__list {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── PromptTemplateItem component ─── */

.prompt-template-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-lg);
	cursor: pointer;
	transition: border-color var(--ai-transition-default);
}
.prompt-template-item:focus-visible {
	outline: 2px solid var(--ai-surface-brand);
	outline-offset: 2px;
}
.prompt-template-item:hover {
	border-color: var(--ai-border-invert);
}
.prompt-template-item--selected {
	border-color: var(--ai-border-invert);
}
.prompt-template-item__header {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-5);
	padding: var(--ai-spacing-5);
}
.prompt-template-item__icon {
	flex-shrink: 0;
	width: var(--ai-icon-size-lg);
	height: var(--ai-icon-size-lg);
	color: var(--ai-icon-primary);
	object-fit: contain;
}
.prompt-template-item__title {
	flex: 1;
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-semibold);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
}
.prompt-template-item__chevron-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-6);
	height: var(--ai-spacing-6);
	padding: 0;
	border: none;
	border-radius: var(--ai-radius-md);
	background: none;
	cursor: pointer;
	color: var(--ai-icon-contrast);
	transition: background-color var(--ai-transition-default);
}
.prompt-template-item__chevron-btn:hover {
	background-color: var(--ai-surface-secondary);
}
.prompt-template-item__chevron-btn:focus-visible {
	outline: 2px solid var(--ai-surface-brand);
	outline-offset: 2px;
}
.prompt-template-item__chevron-btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	transition: transform var(--ai-transition-default);
}
.prompt-template-item--expanded .prompt-template-item__chevron-btn svg {
	transform: rotate(90deg);
}
.prompt-template-item__details {
	display: none;
	border-top: 1px solid var(--ai-surface-contrast);
	padding: var(--ai-spacing-5);
}
.prompt-template-item--expanded .prompt-template-item__details {
	display: block;
}
.prompt-template-item__description {
	margin: 0;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-secondary);
}

/* Minimised mode — position is set via JS inline styles on minimise */
.system-role--minimised {
	width: 368px;
	max-width: calc(100vw - var(--ai-spacing-5) * 2);
	height: calc(100vh - var(--ai-spacing-5) * 2);
	max-height: calc(100vh - var(--ai-spacing-10) * 2);
	padding: var(--ai-spacing-5) var(--ai-spacing-6) var(--ai-spacing-6);
	overflow: hidden;
}
.system-role--minimised .system-role__top {
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	cursor: move;
}
.system-role--minimised .system-role__controls {
	order: -1;
	justify-content: flex-end;
	flex: none;
	width: 100%;
	gap: var(--ai-spacing-2);
}
.system-role--minimised .system-role__controls .btn--icon {
	width: var(--ai-spacing-7);
	min-height: var(--ai-spacing-7);
}
.system-role--minimised .system-role__minimize-btn { display: none; }
.system-role--minimised .system-role__maximize-btn { display: inline-flex; }
.system-role--minimised .system-role__top .header {
	order: 0;
	flex: none;
	align-items: flex-end;
	gap: var(--ai-spacing-3);
	width: 100%;
}
.system-role--minimised .header__title-group {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-1);
	flex: 1;
	min-width: 0;
}
.system-role--minimised .header__info { flex: initial; }
.system-role--minimised .header__actions {
	align-self: stretch;
	align-items: flex-end;
}
.system-role--minimised .header__discard-full { display: none; }
.system-role--minimised .header__discard-short { display: inline; }
.system-role--minimised .header__actions .btn {
	min-height: var(--ai-spacing-7);
	padding: 0 var(--ai-spacing-4);
	font-size: var(--ai-font-fluid-xxs);
}
.system-role--minimised .system-role__body {
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}
.system-role--minimised .system-role__prompt {
	height: auto;
	overflow: hidden;
	flex: none;
}
.system-role--minimised .system-role__textarea {
	min-height: var(--ai-spacing-13);
	flex: none;
	padding: var(--ai-spacing-5);
}
.system-role--minimised .system-role__textarea-resize-handle { display: block; }
.system-role--minimised .system-role__sidebar {
	width: 100%;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
.system-role--minimised .system-role__resize-handle { display: block; }
.system-role--minimised .system-role__resize-handle-bottom { display: block; }

/* Mobile */
@media (max-width: 767px) {
	.system-role-overlay { display: none; }
	.system-role {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		padding: var(--ai-spacing-5) var(--ai-spacing-6) var(--ai-spacing-6);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.system-role .system-role__resize-handle,
	.system-role .system-role__resize-handle-bottom,
	.system-role .system-role__textarea-resize-handle { display: none; }
}

/* Container query — stacked layout when narrow */
@container system-role (max-width: 940px) {
	.system-role:not(.system-role--minimised) .system-role__top {
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
	}
	.system-role:not(.system-role--minimised) .system-role__controls {
		order: -1;
		justify-content: flex-end;
		flex: none;
		width: 100%;
		gap: 0;
	}
	.system-role:not(.system-role--minimised) .system-role__controls .btn--icon {
		width: var(--ai-spacing-7);
		min-height: var(--ai-spacing-7);
	}
	.system-role:not(.system-role--minimised) .system-role__top .header {
		order: 0;
		flex: none;
		align-items: flex-end;
		gap: var(--ai-spacing-3);
		width: 100%;
	}
	.system-role:not(.system-role--minimised) .system-role__top .header__title-group {
		display: flex;
		flex-direction: column;
		gap: var(--ai-spacing-1);
		flex: 1;
		min-width: 0;
	}
	.system-role:not(.system-role--minimised) .system-role__top .header__info { flex: initial; }
	.system-role:not(.system-role--minimised) .system-role__top .header__actions {
		align-self: stretch;
		align-items: flex-end;
	}
	.system-role:not(.system-role--minimised) .system-role__top .header__actions .btn {
		min-height: var(--ai-spacing-7);
		padding: 0 var(--ai-spacing-4);
		font-size: var(--ai-font-fluid-xxs);
	}
	.system-role:not(.system-role--minimised) .system-role__top .header__discard-full { display: none; }
	.system-role:not(.system-role--minimised) .system-role__top .header__discard-short { display: inline; }
	.system-role:not(.system-role--minimised) .system-role__body {
		flex-direction: column;
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.system-role:not(.system-role--minimised) .system-role__prompt {
		flex: none;
		height: auto;
	}
	.system-role:not(.system-role--minimised) .system-role__textarea {
		padding: var(--ai-spacing-5);
		min-height: 12rem;
		flex: none;
		height: auto;
	}
	.system-role:not(.system-role--minimised) .system-role__sidebar {
		width: 100%;
		max-width: none;
		overflow: visible;
	}
}

/* ── header__info — tooltip trigger positioning ── */

.header__info {
	position: relative;
}
.header__info .ai-tooltip {
	position: absolute;
	top: calc(100% + var(--ai-spacing-2));
	left: 0;
	z-index: 20;
	pointer-events: none;
}
.header__info:hover .ai-tooltip,
.header__info:focus-within .ai-tooltip {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* ── InfoLabel component ── */

.info-label {
	display: inline-flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.info-label__text {
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fixed-xxs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-secondary);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.info-label__icon {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-icon-primary);
	flex-shrink: 0;
}

/* 10h. Tooltips */

.ai-tooltip {
	background-color: #0b0b0c;
	border-radius: var(--ai-radius-lg);
	padding: var(--ai-spacing-5);
	box-shadow: var(--ai-shadow-md, 0 2px 10px rgba(0,0,0,0.1));
	width: 100%;
	max-width: 21.9375rem;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--ai-transition-default);
}

.ai-tooltip__text {
	color: #ffffff;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	margin: 0;
}


/* 10i. Textarea */

.textarea {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-3);
}
.textarea__label {
	display: block;
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
}
.textarea__control {
	width: 100%;
	min-height: 120px;
	padding: var(--ai-spacing-4) var(--ai-spacing-5);
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	resize: vertical;
	box-sizing: border-box;
	transition: border-color var(--ai-transition-default), box-shadow var(--ai-transition-default);
}
.textarea__control::placeholder { color: var(--ai-text-contrast); }
.textarea__control:hover { border-color: var(--ai-border-brand); }
.textarea__control:focus {
	border-color: var(--ai-border-brand);
	box-shadow: 0 0 0 1px var(--ai-surface-primary), 0 0 0 3px var(--ai-surface-brand-contrast);
	outline: none;
}
.textarea__control:disabled {
	background-color: var(--ai-surface-minimal);
	color: var(--ai-text-contrast);
	cursor: not-allowed;
	resize: none;
}
.textarea:has(.textarea__control:disabled) .textarea__label { opacity: 0.5; }
.textarea--error .textarea__control { border-color: var(--ai-border-error); }
.textarea--error .textarea__control:focus {
	border-color: var(--ai-border-error);
	box-shadow: 0 0 0 1px var(--ai-surface-primary), 0 0 0 3px var(--ai-surface-error-contrast);
}
.textarea--sm .textarea__control {
	min-height: 80px;
	padding: var(--ai-spacing-3) var(--ai-spacing-4);
	font-size: var(--ai-font-fixed-xxs);
}


/* 10j. Checkbox */

.checkbox {
	display: flex;
	gap: var(--ai-spacing-3);
	align-items: flex-start;
	cursor: pointer;
}
.checkbox__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.checkbox__indicator {
	width: 16px;
	height: 16px;
	border-radius: var(--ai-radius-sm);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	transition: border-color var(--ai-transition-default), background var(--ai-transition-default);
}
.checkbox__indicator svg {
	width: 14px;
	height: 14px;
	color: var(--ai-text-invert);
	display: none;
}
.checkbox__input:checked + .checkbox__indicator {
	background: var(--ai-surface-brand);
	border-color: var(--ai-border-brand);
}
.checkbox__input:checked + .checkbox__indicator svg { display: block; }
.checkbox__input:disabled { cursor: not-allowed; }
.checkbox__input:disabled ~ * { opacity: 0.5; cursor: not-allowed; }
.checkbox:has(.checkbox__input:disabled) { cursor: not-allowed; }
.checkbox__input:focus-visible + .checkbox__indicator {
	box-shadow: 0 0 0 1px var(--ai-surface-primary), 0 0 0 3px var(--ai-surface-brand-contrast);
	outline: none;
}
.checkbox__label {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-1);
}
.checkbox__label-text {
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-medium);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
	margin: 0;
}
.checkbox__helper {
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-contrast);
	margin: 0;
}


/* 10k. Modal */

.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10050;
	align-items: center;
	justify-content: center;
	padding: var(--ai-spacing-6);
}
.modal-overlay .modal {
	position: relative;
	background: var(--ai-surface-elevated-1);
	border-radius: var(--ai-radius-lg);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.1);
	width: var(--ai-size-9);
	max-width: 100%;
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	z-index: auto;
}
.modal-overlay .modal--sm { width: var(--ai-size-7); }
.modal-overlay .modal--lg { width: var(--ai-size-11); }
.modal-overlay .modal--confirm {
	width: var(--ai-size-8);
	text-align: center;
}
.modal-overlay .modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ai-spacing-5) var(--ai-spacing-6);
	border-bottom: 1px solid var(--ai-border-secondary);
	flex-shrink: 0;
}
.modal-overlay .modal__title {
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fixed-md);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	margin: 0;
}
.modal-overlay .modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-7);
	height: var(--ai-spacing-7);
	border: none;
	border-radius: var(--ai-radius-md);
	background: transparent;
	color: var(--ai-icon-secondary);
	cursor: pointer;
	flex-shrink: 0;
	padding: var(--ai-spacing-2);
	transition: background-color var(--ai-transition-default), color var(--ai-transition-default);
}
.modal-overlay .modal__close:hover {
	background: var(--ai-surface-minimal);
	color: var(--ai-icon-primary);
}
.modal-overlay .modal__close:focus-visible {
	outline: 2px solid var(--ai-surface-brand);
	outline-offset: 2px;
}
.modal-overlay .modal__close svg {
	width: var(--ai-icon-size-md);
	height: var(--ai-icon-size-md);
}
.modal-overlay .modal__body {
	padding: var(--ai-spacing-6);
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-5);
}
.modal-overlay .modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ai-spacing-3);
	padding: var(--ai-spacing-5) var(--ai-spacing-6);
	border-top: 1px solid var(--ai-border-secondary);
	flex-shrink: 0;
}
.modal-overlay .modal--feedback .modal__header {
	gap: var(--ai-spacing-4);
	justify-content: flex-start;
}
.modal-overlay .modal--feedback .modal__title { flex: 1; }

/* Confirmation variant */
.modal-overlay .modal--confirm .modal__body {
	align-items: center;
	padding: var(--ai-spacing-6);
	gap: var(--ai-spacing-3);
}
.modal-overlay .modal--confirm .modal__footer {
	justify-content: center;
	border-top: none;
	padding: 0 var(--ai-spacing-6) var(--ai-spacing-6);
}
.modal-overlay .modal__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ai-radius-full);
	background: var(--ai-surface-minimal);
	padding: var(--ai-spacing-5);
}
.modal-overlay .modal__icon-wrap svg {
	width: var(--ai-icon-size-lg);
	height: var(--ai-icon-size-lg);
	color: var(--ai-text-error);
}
.modal-overlay .modal__confirm-title {
	font-family: var(--ai-font-title);
	font-size: var(--ai-font-fixed-md);
	font-weight: var(--ai-font-semibold);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	margin: 0;
}
.modal-overlay .modal__confirm-desc {
	font-family: var(--ai-font-body);
	font-size: var(--ai-font-fixed-xs);
	font-weight: var(--ai-font-regular);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-secondary);
	margin: 0;
	text-align: center;
}

.modal__header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ai-spacing-8);
	height: var(--ai-spacing-8);
	border-radius: var(--ai-radius-full);
	flex-shrink: 0;
}
.modal__header-icon svg {
	width: var(--ai-icon-size-md);
	height: var(--ai-icon-size-md);
}
.modal__header-icon--positive { background: rgba(48, 203, 144, 0.15); }
.modal__header-icon--positive svg { color: var(--ai-surface-success); }
.modal__header-icon--negative { background: rgba(239, 68, 68, 0.15); }
.modal__header-icon--negative svg { color: var(--ai-text-error); }

.modal__check-list {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-4);
}

/* Feedback modals use --ai-chat-brand (accent adapts to Style Settings) */
.modal--feedback .btn--primary {
	background-color: var(--ai-chat-brand);
	border-color: var(--ai-chat-brand);
}
.modal--feedback .btn--primary:hover {
	background-color: color-mix(in srgb, var(--ai-chat-brand) 85%, black);
}
.modal--feedback .checkbox__input:checked + .checkbox__indicator {
	background: var(--ai-chat-brand);
	border-color: var(--ai-chat-brand);
}

/* Destructive button variant (for confirm-delete actions) */
.btn--destructive {
	background: var(--ai-text-error);
	color: #ffffff;
	border-color: var(--ai-text-error);
}
.btn--destructive:hover {
	background: rgba(239, 68, 68, 0.85);
	border-color: rgba(239, 68, 68, 0.85);
}


/* =============================================================
   11. Popup launcher
   ============================================================= */

#popUpOpener {
	cursor: pointer;
	display: flex;
	padding: 1rem;
	border-radius: 50%;
	background-color: var(--ai-chat-brand);
	color: var(--ai-btn-primary-text);
	position: fixed;
	right: 15px;
	bottom: 15px;
}

/* Custom button image: circle-clip it (object-fit:cover) so an opaque or rounded-corner canvas reads as
   a clean circle, never a square box (TASK-227250). The image keeps the button's 1rem padding (as before
   the 9.0.11.23 upgrade), so it sits inset on the ButtonBackgroundColour / accent fill — that colour frames
   the icon and shows through any transparent areas; the pulse rings share the colour, so unaffected.
   (The clip is a safety net the pre-upgrade design lacked — it relied on the client matching
   ButtonBackgroundColour to the image's canvas; the clip turns any mismatch into a clean circle, not a box.) */
#popUpOpener.popUpOpener--image > img {
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

#popUpWrapper {
	z-index: 9999;
}

#popUpWrapper:has(.ai-chat-min:not(.ai-chat-min--hidden)) #popUpOpener,
#popUpBigOpener + #popUpOpener {
	display: none;
}

#popUpBigOpener {
	cursor: pointer;
	position: fixed;
	right: 15px;
	bottom: 0px;
	max-width: 300px;
}

#popUpWrapper #popUpOpener,
#popUpWrapper #popUpBigOpener{
	z-index: 1101;
}

#popUpOpener.pulse:before,
#popUpOpener.pulse:after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--ai-chat-brand);
	border-radius: inherit;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: scale(1);
	animation: ping2 5s cubic-bezier(0,0,.2,1) infinite;
	pointer-events: none;
}
#popUpOpener.pulse:after {
	transform: scale(.95);
	opacity: .6;
	animation: ping 5s cubic-bezier(0,0,.2,1) infinite;
}

@keyframes ping {
	15%,
	to {
		transform: scale(2);
		opacity: 0;
	}
}
@keyframes ping2 {
	15%,
	to {
		transform: scale(1);
	}
}


/* =============================================================
   15. Popup (ai-chat-min)
   ============================================================= */

/* AiChatMinimised — floating popup chat widget
 * Figma node: 2160:4810
 * Tier: Template
 * Composes: ChatHeader (--minimised), ChatMain
 *
 * The popup is 384px wide — always mobile-width — but lives on a desktop
 * viewport where min-width media queries fire. Every desktop escalation
 * from child components is pinned back to the mobile base value here.
 */

/* ── Popup container ────────────────────────────────── */

.ai-chat-min {
	position: fixed;
	bottom: var(--ai-spacing-6);
	right: var(--ai-spacing-6);
	z-index: 9999;
	width: var(--ai-size-7);
	max-width: calc(100vw - var(--ai-spacing-5) * 2);
	height: var(--_panel-height, 668px);
	max-height: calc(100vh - var(--ai-spacing-6) * 2);
	min-height: 320px;
	display: flex;
	flex-direction: column;
	background-color: var(--ai-surface-primary);
	border-radius: var(--ai-radius-xl);
	overflow: clip;
	box-shadow: var(--ai-shadow-lg);
}

/* ── Resize handles (4 edges + 4 corners, full perimeter) ──────────── */

.ai-chat-min__resize-handle,
.ai-chat-min__resize-handle-bottom {
	position: absolute;
	left: var(--ai-spacing-6);
	right: var(--ai-spacing-6);
	height: 6px;
	cursor: ns-resize;
	z-index: 5;
	border-radius: var(--ai-radius-full);
}
.ai-chat-min__resize-handle        { top:    -3px; }
.ai-chat-min__resize-handle-bottom { bottom: -3px; }

.ai-chat-min__resize-handle-left,
.ai-chat-min__resize-handle-right {
	position: absolute;
	top: var(--ai-spacing-6);
	bottom: var(--ai-spacing-6);
	width: 6px;
	cursor: ew-resize;
	z-index: 5;
	border-radius: var(--ai-radius-full);
}
.ai-chat-min__resize-handle-left  { left:  -3px; }
.ai-chat-min__resize-handle-right { right: -3px; }

.ai-chat-min__resize-handle-corner,
.ai-chat-min__resize-handle-corner-tr,
.ai-chat-min__resize-handle-corner-bl,
.ai-chat-min__resize-handle-corner-br {
	position: absolute;
	width: var(--ai-spacing-6);
	height: var(--ai-spacing-6);
	z-index: 6;
}
.ai-chat-min__resize-handle-corner    { top:    -3px; left:  -3px; cursor: nwse-resize; }
.ai-chat-min__resize-handle-corner-tr { top:    -3px; right: -3px; cursor: nesw-resize; }
.ai-chat-min__resize-handle-corner-bl { bottom: -3px; left:  -3px; cursor: nesw-resize; }
.ai-chat-min__resize-handle-corner-br { bottom: -3px; right: -3px; cursor: nwse-resize; }

.ai-chat-min__resize-handle:hover,
.ai-chat-min__resize-handle-bottom:hover,
.ai-chat-min__resize-handle-left:hover,
.ai-chat-min__resize-handle-right:hover,
.ai-chat-min--resizing .ai-chat-min__resize-handle,
.ai-chat-min--resizing .ai-chat-min__resize-handle-bottom,
.ai-chat-min--resizing .ai-chat-min__resize-handle-left,
.ai-chat-min--resizing .ai-chat-min__resize-handle-right {
	background-color: var(--ai-border-secondary);
}

/* ── Sidebar overlay ─────────────────────────────────── */

.ai-chat-min__overlay {
	position: absolute;
	inset: 0;
	z-index: 15;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ai-transition-slow);
}

.ai-chat-min--sidebar-open .ai-chat-min__overlay {
	opacity: 1;
	pointer-events: auto;
}

/* ── Sidebar (slide-in from left) ────────────────────── */

.ai-chat-min__sidebar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 20;
	width: var(--ai-size-5);
	max-width: calc(100% - var(--ai-spacing-9));
	border-radius: 0 0 0 var(--ai-radius-xl);
	transform: translateX(-100%);
	transition: transform var(--ai-transition-slow), box-shadow var(--ai-transition-slow);
	box-shadow: none;
	overflow: hidden;
}

.ai-chat-min__sidebar .chat-sidebar {
	width: 100%;
	height: 100%;
	border-right: none;
}

.ai-chat-min__sidebar .chat-sidebar__logo {
	display: none;
}

.ai-chat-min__sidebar .chat-sidebar__search {
	display: none;
}

.ai-chat-min--sidebar-open .ai-chat-min__sidebar {
	transform: translateX(0);
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
}

/* ── Hidden state (close button) ────────────────────── */

.ai-chat-min--hidden {
	display: none;
}

/* ── Suppress transitions during drag ───────────────── */

.ai-chat-min--no-transition,
.ai-chat-min--no-transition * {
	transition: none !important;
}

/* ── Drag handle: header acts as drag surface ───────── */

.ai-chat-min .chat-header {
	cursor: move;
}

.ai-chat-min .chat-header button {
	cursor: pointer;
}

/* ── Main content fills remaining space ─────────────── */

.ai-chat-min__main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

/* ── Chat main: always visible inside popup (opacity starts at 0 for full-page) ── */

.ai-chat-min .chat-main {
	opacity: 1;
}

/* ── Dark mode: tertiary button hover on chat surface ── */

[data-theme="dark"] #ai-chat .btn--tertiary:hover,
[data-theme="dark"] .ai-chat-min .btn--tertiary:hover,
[data-theme="dark"] #ai-chat .chat-header__admin .btn:hover,
[data-theme="dark"] #ai-chat .chat-main__response-action-btn:hover,
[data-theme="dark"] .ai-chat-min .chat-main__response-action-btn:hover {
	background-color: var(--ai-surface-minimal);
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDES — pin child components to base (mobile)
   values so desktop min-width breakpoints have no effect.
   ══════════════════════════════════════════════════════════ */

/* ── ChatMain: initial-inner ──────────────────────────── */

.ai-chat-min .chat-main__initial-inner {
	gap: var(--ai-spacing-6);
	padding: var(--ai-spacing-8) 0;
}

/* ── ChatMain: intro ──────────────────────────────────── */

.ai-chat-min .chat-main__intro {
	gap: var(--ai-spacing-3);
	padding: 0 var(--ai-spacing-5) 0;
}

/* ── ChatMain: title — pinned to base ─────────────────── */

.ai-chat-min .chat-main__title {
	font-size: var(--ai-font-fixed-xl);
	line-height: var(--ai-leading-lg);
}

/* ── ChatMain: subtitle — pinned to base ──────────────── */

.ai-chat-min .chat-main__subtitle {
	font-size: var(--ai-font-fixed-xs);
}

/* ── ChatMain: no-access (secured channel) ────────────── */

.ai-chat-min .chat-main__no-access {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ai-spacing-6);
	padding: var(--ai-spacing-6);
	text-align: center;
}

.ai-chat-min .chat-main__no-access .chat-main__subtitle {
	text-align: center;
}

.ai-chat-min .chat-main__no-access-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ai-spacing-3);
}

/* ── ChatMain: input wrap — mobile padding ────────────── */

.ai-chat-min .chat-main__input-wrap {
	padding: 0 var(--ai-spacing-5);
}

/* ── ChatMain: suggestions — 2-column, mobile gaps ────── */

.ai-chat-min .chat-main__suggestions {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ai-spacing-4);
	padding: 0 var(--ai-spacing-5);	
}

.chat-main__initial-suggestions {
	display:flex;
	width: 100%;
	justify-content: center;
}

/* ── ChatMain: container — mobile padding ─────────────── */

.ai-chat-min .chat-main__container {
	padding: var(--ai-spacing-6);
}

/* ── SourcesCarousel: pin to mobile layout ────────────── */

.ai-chat-min .sources-card {
	flex: 0 0 calc((100% / 1.5) - (var(--ai-spacing-3) * (0.5 / 1.5)));
}

.ai-chat-min .sources-card__inner {
	flex-direction: column;
	gap: var(--ai-spacing-3);
	align-items: stretch;
}

.ai-chat-min .sources-card__thumb {
	order: 0;
}

.ai-chat-min .sources-carousel {
	padding: 0;
}

.ai-chat-min .sources-carousel__nav {
	display: none;
}

/* ── SourcesLink: pin to mobile (full width, no cap) ──── */

.ai-chat-min .sources-link {
	max-width: 100%;
}

/* ── ChatResponseTable: pin to mobile font sizes ─────── */

.ai-chat-min .chat-response-table {
	font-size: var(--ai-font-fixed-xs);
}

.ai-chat-min .chat-response-table th {
	font-size: var(--ai-font-fixed-xxs);
}

/* ── ChatMain: code block — pinned to mobile ──────────── */

.ai-chat-min .chat-main__response code {
	font-size: var(--ai-font-fixed-xxs);
}

/* ── ChatMain: response — fixed font ──────────────────── */

.ai-chat-min .chat-main__response {
	font-size: var(--ai-font-fixed-xs);
}

/* ── ChatMain: processing answer — mobile spacing ─────── */

.ai-chat-min .chat-main__processing .chat-main__theatre-skeletons {
	margin-top: var(--ai-spacing-6);
}

.ai-chat-min .chat-main__processing .chat-main__response {
	margin-top: var(--ai-spacing-6);
}

.ai-chat-min .chat-main__processing .chat-main__response p {
	font-size: var(--ai-font-fixed-xs);
}

/* ── ChatMain: scrollbar — transparent track, sidebar-active thumb ── */

.ai-chat-min .chat-main__initial,
.ai-chat-min .chat-main__scroll {
	--_min-scroll-track: color-mix(in srgb, var(--ai-surface-primary) 94%, rgb(38 55 88));
	--_min-scroll-thumb: color-mix(in srgb, var(--ai-surface-primary) 82%, rgb(38 55 88));
	scrollbar-color: var(--_min-scroll-thumb) var(--_min-scroll-track);
	scrollbar-width: thin;
}

[data-theme="dark"] .ai-chat-min .chat-main__initial,
[data-theme="dark"] .ai-chat-min .chat-main__scroll {
	--_min-scroll-track: color-mix(in srgb, var(--ai-surface-primary) 95%, white);
	--_min-scroll-thumb: color-mix(in srgb, var(--ai-surface-primary) 80%, white);
}

.ai-chat-min .chat-main__initial::-webkit-scrollbar,
.ai-chat-min .chat-main__scroll::-webkit-scrollbar {
	width: 10px;
}

.ai-chat-min .chat-main__initial::-webkit-scrollbar-track,
.ai-chat-min .chat-main__scroll::-webkit-scrollbar-track {
	background: var(--_min-scroll-track);
}

.ai-chat-min .chat-main__initial::-webkit-scrollbar-thumb,
.ai-chat-min .chat-main__scroll::-webkit-scrollbar-thumb {
	background-color: var(--_min-scroll-thumb);
	border-radius: var(--ai-radius-full);
	border: 2px solid transparent;
	background-clip: padding-box;
}

/* ── ChatMain: footer input — mobile padding ──────────── */

.ai-chat-min .chat-main__input {
	padding: 0 var(--ai-spacing-2);
}

/* ── SuggestedQuestion: full width in grid cell ──────── */

.ai-chat-min .suggested-question {
	width: 100%;
}

/* ── Notification toast: above message bubbles ─────────── */

.ai-chat-min .chat-notification {
	z-index: 100;
	top: var(--ai-spacing-3);
	font-family: var(--ai-font-body);
}

/* ── SuggestedQuestion: icon — mobile size ────────────── */

.ai-chat-min .suggested-question [data-lucide] {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
}

/* ── SuggestedQuestion: text — mobile font ────────────── */

.ai-chat-min .suggested-question__text {
	font-size: var(--ai-font-fixed-xxs);
	line-height: var(--ai-leading-xs);
}

/* ── SuggestedQuestion: subtext hidden (mobile) ───────── */

.ai-chat-min .suggested-question__subtext {
	display: none;
}

/* ── WorkingIntro: gap — mobile ───────────────────────── */

.ai-chat-min .working-intro {
	gap: var(--ai-spacing-1);
}

/* ── WorkingIntro: title row — stacked (mobile) ───────── */

.ai-chat-min .working-intro__title-row {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ai-spacing-3);
}

/* ── WorkingIntro: title — mobile font ────────────────── */

.ai-chat-min .working-intro__title {
	font-size: var(--ai-font-fixed-sm);
}

/* ── WorkingIntro: subtitle — mobile font ─────────────── */

.ai-chat-min .working-intro__subtitle {
	font-size: var(--ai-font-fixed-xs);
}

/* ── MessageBubble: padding — mobile ──────────────────── */

.ai-chat-min .msg-bubble {
	padding-left: var(--ai-spacing-8);
}

/* ── MessageBubble: text — mobile font ────────────────── */

.ai-chat-min .msg-bubble__text {
	font-size: var(--ai-font-fixed-xs);
}

/* ── MessageInput: wrap padding — mobile ─────────────── */

.ai-chat-min .msg-input {
	padding: 0 var(--ai-spacing-5);
}

/* ── MessageInput: box padding — mobile ───────────────── */

.ai-chat-min .msg-input__box {
	padding: var(--ai-spacing-5);
}

/* ── MessageInput: textarea — pinned to base ──────────── */

.ai-chat-min .msg-input__textarea {
	font-size: var(--ai-font-fixed-xs);
}

/* ─────────────────────────────────────────────────────── */
/* 10a. Toggle                                             */
/* ─────────────────────────────────────────────────────── */

/* Toggle — on/off switch control */

.toggle {
	display: flex;
	align-items: flex-start;
	gap: var(--ai-spacing-3);
	padding: 1px 0;
	background: none;
	border: none;
	cursor: pointer;
}

.toggle__track {
	position: relative;
	width: 40px;
	height: 20px;
	flex-shrink: 0;
	background-color: var(--ai-border-secondary);
	border-radius: var(--ai-radius-full);
	transition: background-color var(--ai-transition-default);
}

.toggle__knob {
	position: absolute;
	top: 2px;
	left: 2.5px;
	width: 16px;
	height: 16px;
	background-color: var(--ai-surface-primary);
	border-radius: var(--ai-radius-full);
	transition: left var(--ai-transition-default);
}

.toggle--active .toggle__track {
	background-color: var(--ai-chat-brand);
}

.toggle--active .toggle__knob {
	left: calc(100% - 16px - 2.5px);
}

.toggle--disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.toggle--disabled .toggle__track {
	background-color: var(--ai-border-secondary);
}

.toggle__label {
	display: flex;
	flex-direction: column;
}

.toggle__label-text {
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-medium);
	font-size: var(--ai-font-fixed-xs);
	line-height: 1.25;
	color: var(--ai-text-primary);
	margin: 0;
}

.toggle--disabled .toggle__label-text {
	color: var(--ai-icon-contrast);
}

.toggle__helper {
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xxs);
	line-height: 1.5;
	color: var(--ai-text-contrast);
	margin: 0;
}

.toggle--disabled .toggle__helper {
	color: var(--ai-icon-contrast);
}

.toggle:focus-visible {
	outline: none;
}

.toggle:focus-visible .toggle__track {
	box-shadow: 0 0 0 1px var(--ai-surface-primary),
	            0 0 0 3px var(--ai-surface-brand-contrast);
}

/* ─────────────────────────────────────────────────────── */
/* 10b. SegmentedControl                                   */
/* ─────────────────────────────────────────────────────── */

/* SegmentedControl — segmented toggle (radio-style, single select) */

.seg-control {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-0);
	height: var(--ai-spacing-8);
	padding: 0 var(--ai-spacing-1);
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
}

.seg-control__btn {
	display: flex;
	flex: 1 0 0;
	align-items: center;
	justify-content: center;
	gap: var(--ai-spacing-3);
	height: 32px;
	min-width: 0;
	padding: 0 var(--ai-spacing-4);
	background: transparent;
	border: none;
	border-radius: var(--ai-radius-md);
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-semibold);
	font-size: var(--ai-font-fluid-xxs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-btn-tertiary-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--ai-transition-default);
	font-feature-settings: 'case' 1;
}

.seg-control__btn--active {
	background-color: var(--ai-surface-minimal);
	border-radius: var(--ai-radius-sm);
	cursor: default;
}

.seg-control__btn svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	flex-shrink: 0;
}

.seg-control__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ai-surface-primary),
	            0 0 0 3px var(--ai-surface-brand-contrast);
}

/* ─────────────────────────────────────────────────────── */
/* 10c. ColorPickerInput                                   */
/* ─────────────────────────────────────────────────────── */

/* ColorPickerInput — color swatch + hex value display with native picker */

.color-picker-input {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	height: 40px;
	padding: 0 var(--ai-spacing-5);
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	cursor: pointer;
	transition: border-color var(--ai-transition-default);
	position: relative;
}

.color-picker-input:hover {
	border-color: var(--ai-border-brand);
}

.color-picker-input__swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: var(--ai-spacing-1);
	border-radius: var(--ai-radius-full);
	flex-shrink: 0;
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	box-sizing: border-box;
}

.color-picker-input__swatch-inner {
	width: 100%;
	height: 100%;
	border-radius: var(--ai-radius-full);
}

.color-picker-input__value {
	flex: 1 0 0;
	min-width: 0;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	font-feature-settings: 'case' 1;
	margin: 0;
}

.color-picker-input__native {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border: none;
	padding: 0;
}

.color-picker-input:has(.color-picker-input__native:focus-visible) {
	border-color: var(--ai-border-brand);
	box-shadow: 0 0 0 1px var(--ai-surface-primary),
	            0 0 0 3px var(--ai-surface-brand-contrast);
}

/* ─────────────────────────────────────────────────────── */
/* 10d. StyleSettings                                      */
/* ─────────────────────────────────────────────────────── */

/* StyleSettings — modal settings panel for chat UI customisation */

.style-settings {
	position: fixed;
	top: var(--ai-spacing-12);
	right: var(--ai-spacing-6);
	display: none;
	flex-direction: column;
	gap: var(--ai-spacing-5);
	width: 400px;
	max-width: calc(100vw - var(--ai-spacing-5) * 2);
	padding: var(--ai-spacing-5) var(--ai-spacing-6);
	background-color: var(--ai-surface-elevated-1);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-xl);
	box-shadow: var(--ai-shadow-lg);
	overflow: visible;
	z-index: 10000;
}

.style-settings--open {
	display: flex;
}

.style-settings--no-transition,
.style-settings--no-transition * {
	transition: none !important;
}

.style-settings__header {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
	cursor: move;
}

.style-settings__header button {
	cursor: pointer;
}

.style-settings__title {
	flex: 1;
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-bold);
	font-size: var(--ai-font-fluid-xl);
	line-height: var(--ai-leading-lg);
	color: var(--ai-text-primary);
	margin: 0;
	font-feature-settings: 'case' 1;
}

.style-settings__subtitle-row {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
}

.style-settings__subtitle {
	flex: 1;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-contrast);
	margin: 0;
	font-feature-settings: 'case' 1;
}

.style-settings__body {
	display: flex;
	flex-direction: column;
	gap: var(--ai-spacing-5);
	padding-bottom: var(--ai-spacing-5);
}

.style-settings__row {
	display: flex;
	align-items: center;
	gap: var(--ai-spacing-3);
}

.style-settings__row--toggle {
	min-height: 40px;
}

.style-settings__label {
	flex: 1;
	font-family: var(--ai-font-title);
	font-weight: var(--ai-font-semibold);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-xs);
	color: var(--ai-text-primary);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
	font-feature-settings: 'case' 1;
	cursor: default;
}

.style-settings__control {
	flex-shrink: 0;
	width: 172px;
}

.style-settings__divider {
	border: none;
	border-top: 1px solid var(--ai-border-secondary);
	margin: 0;
}

.style-settings__select-wrap {
	position: relative;
	width: 172px;
	flex-shrink: 0;
}

.style-settings__select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	padding: 0 var(--ai-spacing-5);
	text-align: left;
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	cursor: pointer;
	transition: border-color var(--ai-transition-default);
	font-feature-settings: 'case' 1;
}

.style-settings__select:hover {
	border-color: var(--ai-border-brand);
}

.style-settings__select:focus-visible {
	outline: none;
	border-color: var(--ai-border-brand);
	box-shadow: 0 0 0 1px var(--ai-surface-primary),
	            0 0 0 3px var(--ai-surface-brand-contrast);
}

.style-settings__select svg {
	width: var(--ai-icon-size-sm);
	height: var(--ai-icon-size-sm);
	color: var(--ai-icon-secondary);
	flex-shrink: 0;
}

.style-settings__select-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.style-settings__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + var(--ai-spacing-2));
	left: 0;
	right: 0;
	flex-direction: column;
	background-color: var(--ai-surface-primary);
	border: 1px solid var(--ai-border-secondary);
	border-radius: var(--ai-radius-md);
	box-shadow: var(--ai-shadow-md);
	z-index: 20;
	overflow: hidden;
}

.style-settings__dropdown--open {
	display: flex;
}

.style-settings__option {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--ai-spacing-3) var(--ai-spacing-5);
	background: none;
	border: none;
	font-family: var(--ai-font-body);
	font-weight: var(--ai-font-regular);
	font-size: var(--ai-font-fixed-xs);
	line-height: var(--ai-leading-md);
	color: var(--ai-text-primary);
	cursor: pointer;
	text-align: left;
	transition: background-color var(--ai-transition-default);
	font-feature-settings: 'case' 1;
}

.style-settings__option:hover {
	background-color: var(--ai-surface-minimal);
}

.style-settings__option--selected {
	background-color: var(--ai-surface-minimal);
	font-weight: var(--ai-font-medium);
}

/* ── Overlay ────────────────────────────────────────────── */

.style-settings-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99;
}

.style-settings-overlay--open {
	display: block;
}

/* ── CSS variable hooks ──────────────────────────────────── */

#ai-chat .chat-header__selector-wrap,
.ai-chat-min .chat-header__selector-wrap { 
	justify-content: var(--ai-header-justify, center); 
}
#ai-chat .chat-header,
.ai-chat-min .chat-header { 
	border-bottom-width: var(--ai-chat-border-width, 1px); 
}
#ai-chat .chat-sidebar,
.ai-chat-min .chat-sidebar {
	border-right-width: var(--ai-chat-border-width, 1px);
}
#ai-chat .chat-main__initial-suggestions,
.ai-chat-min .chat-main__initial-suggestions { 
	display: var(--ai-suggestions-display, flex);
}