/**
 * AI Chat Bubble — front-end widget.
 *
 * Implements documentations/design.md §2–§7 and §12.
 *
 * House rules enforced in this file:
 *   - Every selector starts with .knowhalim-acb. Nothing leaks out.
 *   - Every size is in px. A host theme running `html { font-size: 62.5% }`
 *     would shrink a rem-based widget by 37% (§12.3).
 *   - Shadows are tinted rgba(16, 24, 40, a). Pure black is banned in light
 *     mode; it is permitted only inside the dark-mode stacks, where a navy
 *     tint reads purple (§5.2).
 *   - Disabled controls are recoloured, never faded with opacity (§13.17).
 *   - !important appears only on the §12.2 allowlist:
 *     box-sizing, font-family, line-height, letter-spacing, text-transform,
 *     float, visibility, background-image (buttons), max-width (mobile sheet),
 *     display (print), and the reduced-motion block.
 */

/* ==========================================================================
   1. Tokens — light mode (§2)
   ========================================================================== */

.knowhalim-acb {
	/* Neutral ramp — cool undertone, so white surfaces do not read as paper. */
	--kacb-n-0: #ffffff;
	--kacb-n-25: #fcfcfd;
	--kacb-n-50: #f7f8fa;
	--kacb-n-100: #eef0f4;
	--kacb-n-150: #e6e9ee;
	--kacb-n-200: #dde1e7;
	--kacb-n-300: #c8ced7;
	--kacb-n-400: #9aa3b0;
	--kacb-n-500: #67707c;
	--kacb-n-600: #545d69;
	--kacb-n-700: #3c444f;
	--kacb-n-800: #272d35;
	--kacb-n-900: #171b21;
	--kacb-n-950: #0b0e12;

	/* Surfaces, lowest elevation first. */
	--kacb-surface-sunken: #f7f8fa;
	--kacb-surface-subtle: #fcfcfd;
	--kacb-surface: #ffffff;
	--kacb-surface-raised: #ffffff;
	--kacb-surface-inset: #f7f8fa;
	--kacb-surface-hover: #f2f4f7;
	--kacb-surface-active: #e6e9ee;

	/* Hairlines — alpha based, so they survive on any host background. */
	--kacb-line: rgba(16, 24, 40, 0.08);
	--kacb-line-strong: rgba(16, 24, 40, 0.14);
	--kacb-line-solid: #e6e9ee;

	/* Text. */
	--kacb-text: #171b21;
	--kacb-text-secondary: #3c444f;
	--kacb-text-tertiary: #545d69;
	--kacb-text-quaternary: #67707c;
	--kacb-text-disabled: #9aa3b0;
	--kacb-text-inverse: #ffffff;

	/* Icon colours. */
	--kacb-icon: #545d69;
	--kacb-icon-strong: #272d35;
	--kacb-icon-muted: #9aa3b0;

	/* Status — fixed, never derived from the owner's accent. */
	--kacb-success: #0e9f6e;
	--kacb-success-strong: #05704d;
	--kacb-success-soft: #e8f7f1;
	--kacb-success-border: #a9e3cd;

	--kacb-warning: #d97706;
	--kacb-warning-strong: #92400e;
	--kacb-warning-soft: #fef6e7;
	--kacb-warning-border: #f6d9a8;

	--kacb-danger: #dc2626;
	--kacb-danger-strong: #b42318;
	--kacb-danger-soft: #fef3f2;
	--kacb-danger-border: #fecdca;

	--kacb-info: #2563eb;
	--kacb-info-strong: #1849a9;
	--kacb-info-soft: #eff6ff;
	--kacb-info-border: #b9d3fd;

	/* Accent — static default-blue fallback. PHP overrides these with the
	   owner's derived values via wp_add_inline_style(), so a stripped inline
	   block degrades to a correct-looking widget rather than a colourless one. */
	--kacb-accent: #2563eb;
	--kacb-accent-rgb: 37, 99, 235;
	--kacb-accent-hover: #1454df;
	--kacb-accent-active: #134cca;
	--kacb-accent-contrast: #ffffff;
	--kacb-accent-text: #2563eb;

	/* Derived in pure CSS. Comma-separated rgb on purpose: the newer
	   rgb(var(--x) / .1) space syntax fails silently on older engines and
	   would turn every soft accent surface transparent. */
	--kacb-accent-softer: rgba(var(--kacb-accent-rgb), 0.06);
	--kacb-accent-soft: rgba(var(--kacb-accent-rgb), 0.1);
	--kacb-accent-muted: rgba(var(--kacb-accent-rgb), 0.16);
	--kacb-accent-border: rgba(var(--kacb-accent-rgb), 0.28);
	--kacb-accent-ring: rgba(var(--kacb-accent-rgb), 0.32);
	--kacb-accent-glow: rgba(var(--kacb-accent-rgb), 0.3);

	/* 1.0 alias. Removed in 1.2 — kept so CSS overrides written against the
	   first release do not break on upgrade. */
	--knowhalim-acb-accent: var(--kacb-accent);

	/* Type. */
	--kacb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable Text", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--kacb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

	--kacb-type-title-size: 17px;
	--kacb-type-title-lh: 24px;
	--kacb-type-title-track: -0.011em;

	--kacb-type-subtitle-size: 15px;
	--kacb-type-subtitle-lh: 22px;
	--kacb-type-subtitle-track: -0.006em;

	--kacb-type-body-size: 15px;
	--kacb-type-body-lh: 23px;
	--kacb-type-body-track: -0.003em;

	--kacb-type-body-sm-size: 13px;
	--kacb-type-body-sm-lh: 20px;

	--kacb-type-label-size: 13px;
	--kacb-type-label-lh: 18px;
	--kacb-type-label-track: -0.005em;

	--kacb-type-caption-size: 12px;
	--kacb-type-caption-lh: 16px;

	--kacb-type-micro-size: 11px;
	--kacb-type-micro-lh: 14px;
	--kacb-type-micro-track: 0.045em;

	/* Space — value-named, 4px base. */
	--kacb-space-2: 2px;
	--kacb-space-4: 4px;
	--kacb-space-6: 6px;
	--kacb-space-8: 8px;
	--kacb-space-10: 10px;
	--kacb-space-12: 12px;
	--kacb-space-14: 14px;
	--kacb-space-16: 16px;
	--kacb-space-20: 20px;
	--kacb-space-24: 24px;
	--kacb-space-28: 28px;
	--kacb-space-32: 32px;
	--kacb-space-40: 40px;
	--kacb-space-48: 48px;

	/* Size. */
	--kacb-launcher-size: 56px;
	--kacb-panel-width: 400px;
	--kacb-panel-height: 640px;
	--kacb-panel-offset: 20px;
	--kacb-panel-gap: 16px;
	--kacb-header-height: 60px;
	--kacb-avatar-size: 32px;
	--kacb-avatar-size-lg: 40px;
	--kacb-icon-btn-size: 32px;
	--kacb-send-size: 34px;
	--kacb-msg-max-width: 82%;
	--kacb-composer-max-height: 132px;

	/* Radius — nested, never uniform (§4.3). */
	--kacb-radius-2: 2px;
	--kacb-radius-4: 4px;
	--kacb-radius-6: 6px;
	--kacb-radius-8: 8px;
	--kacb-radius-10: 10px;
	--kacb-radius-12: 12px;
	--kacb-radius-14: 14px;
	--kacb-radius-16: 16px;
	--kacb-radius-18: 18px;
	--kacb-radius-20: 20px;
	--kacb-radius-full: 9999px;

	/* Elevation (§5.1). Five layers on the hero surfaces — one layer is a
	   smudge, and that is what cheap widgets ship. */
	--kacb-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
	--kacb-shadow-sm:
		0 1px 2px rgba(16, 24, 40, 0.06),
		0 1px 3px rgba(16, 24, 40, 0.1);
	--kacb-shadow-md:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 2px 4px -1px rgba(16, 24, 40, 0.06),
		0 4px 8px -2px rgba(16, 24, 40, 0.08);
	--kacb-shadow-lg:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 4px 6px -2px rgba(16, 24, 40, 0.05),
		0 12px 16px -4px rgba(16, 24, 40, 0.1);
	--kacb-shadow-xl:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 8px 8px -4px rgba(16, 24, 40, 0.04),
		0 20px 24px -4px rgba(16, 24, 40, 0.1);
	--kacb-shadow-panel:
		0 0 0 1px rgba(16, 24, 40, 0.05),
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 8px 16px -6px rgba(16, 24, 40, 0.1),
		0 24px 48px -12px rgba(16, 24, 40, 0.18),
		0 48px 96px -24px rgba(16, 24, 40, 0.14);
	--kacb-shadow-launcher:
		0 0 0 1px rgba(16, 24, 40, 0.04),
		0 2px 4px rgba(16, 24, 40, 0.1),
		0 8px 16px -4px rgba(16, 24, 40, 0.16),
		0 16px 32px -8px rgba(16, 24, 40, 0.2);
	--kacb-shadow-launcher-hover:
		0 0 0 1px rgba(16, 24, 40, 0.04),
		0 4px 8px rgba(16, 24, 40, 0.1),
		0 12px 24px -6px rgba(16, 24, 40, 0.18),
		0 24px 44px -10px rgba(16, 24, 40, 0.22),
		0 8px 28px -6px var(--kacb-accent-glow);
	--kacb-shadow-bubble:
		0 0 0 1px rgba(16, 24, 40, 0.05),
		0 1px 2px rgba(16, 24, 40, 0.05);
	--kacb-shadow-bubble-user:
		0 1px 2px rgba(16, 24, 40, 0.08),
		0 2px 6px -2px var(--kacb-accent-glow);

	/* Motion (§6.1). One spring curve exists and it is only allowed on
	   elements under 48px — overshoot on a 640px panel reads as a toy. */
	--kacb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--kacb-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--kacb-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kacb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--kacb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--kacb-dur-instant: 90ms;
	--kacb-dur-fast: 140ms;
	--kacb-dur-base: 200ms;
	--kacb-dur-slow: 280ms;
	--kacb-dur-panel: 320ms;
	--kacb-dur-exit: 180ms;

	/* Scrollbar thumb, flipped in dark mode. */
	--kacb-scroll-thumb: #c8ced7;
	--kacb-scroll-thumb-hover: #9aa3b0;
}

/* ==========================================================================
   2. Tokens — dark mode (§2.3, §5.2)
   ========================================================================== */

@media (prefers-color-scheme: dark) {

	.knowhalim-acb {
		--kacb-surface-sunken: #121419;
		--kacb-surface-subtle: #16181d;
		--kacb-surface: #16181d;
		--kacb-surface-raised: #212429;
		--kacb-surface-inset: #1b1e24;
		--kacb-surface-hover: #23262c;
		--kacb-surface-active: #2b2f36;

		--kacb-line: rgba(255, 255, 255, 0.09);
		--kacb-line-strong: rgba(255, 255, 255, 0.16);
		--kacb-line-solid: #2b2f36;

		--kacb-text: #f2f4f7;
		--kacb-text-secondary: #c3c9d2;
		--kacb-text-tertiary: #9099a5;
		--kacb-text-quaternary: #7d8794;
		--kacb-text-disabled: #5b636e;
		--kacb-text-inverse: #0b0e12;

		--kacb-icon: #9099a5;
		--kacb-icon-strong: #e4e8ee;
		--kacb-icon-muted: #6b737f;

		--kacb-success-soft: rgba(14, 159, 110, 0.14);
		--kacb-success-border: rgba(14, 159, 110, 0.32);
		--kacb-success-strong: #5ee0b0;

		--kacb-warning-soft: rgba(217, 119, 6, 0.14);
		--kacb-warning-border: rgba(217, 119, 6, 0.34);
		--kacb-warning-strong: #f4c169;

		--kacb-danger-soft: rgba(220, 38, 38, 0.15);
		--kacb-danger-border: rgba(220, 38, 38, 0.36);
		--kacb-danger-strong: #fca5a1;

		--kacb-accent-text: #4d80ef;

		--kacb-scroll-thumb: #3a3f47;
		--kacb-scroll-thumb-hover: #4c525b;

		/* Shadows do almost nothing on dark. Depth comes from the surface
		   lightness step plus an inset top highlight — that one inset line is
		   the difference between dark mode and expensive dark mode. */
		--kacb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
		--kacb-shadow-sm:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
			0 1px 3px rgba(0, 0, 0, 0.4);
		--kacb-shadow-md:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
			0 4px 10px -2px rgba(0, 0, 0, 0.45);
		--kacb-shadow-lg:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
			0 12px 20px -6px rgba(0, 0, 0, 0.55);
		--kacb-shadow-xl:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
			0 20px 32px -8px rgba(0, 0, 0, 0.6);
		--kacb-shadow-panel:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
			0 0 0 1px rgba(255, 255, 255, 0.08),
			0 8px 16px -6px rgba(0, 0, 0, 0.5),
			0 24px 48px -12px rgba(0, 0, 0, 0.65),
			0 48px 96px -24px rgba(0, 0, 0, 0.5);
		--kacb-shadow-launcher:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
			0 2px 4px rgba(0, 0, 0, 0.4),
			0 12px 28px -6px rgba(0, 0, 0, 0.6);
		--kacb-shadow-launcher-hover:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
			0 4px 8px rgba(0, 0, 0, 0.4),
			0 20px 40px -8px rgba(0, 0, 0, 0.65),
			0 8px 30px -6px var(--kacb-accent-glow);
		--kacb-shadow-bubble:
			inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
			0 1px 2px rgba(0, 0, 0, 0.3);
		--kacb-shadow-bubble-user:
			0 1px 2px rgba(0, 0, 0, 0.35),
			0 2px 8px -2px var(--kacb-accent-glow);
	}
}

@media (prefers-contrast: more) {

	.knowhalim-acb {
		--kacb-line: rgba(16, 24, 40, 0.45);
		--kacb-line-strong: rgba(16, 24, 40, 0.7);
		--kacb-shadow-panel: 0 0 0 2px var(--kacb-text);
		--kacb-shadow-bubble: 0 0 0 1px var(--kacb-text-tertiary);
	}
}

/* ==========================================================================
   3. Scoped reset (§12.1) — the widget is a guest in a hostile house
   ========================================================================== */

.knowhalim-acb,
.knowhalim-acb *,
.knowhalim-acb *::before,
.knowhalim-acb *::after {
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
	border: 0 solid transparent;
	background: none;
	font: inherit;
	font-family: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
	text-decoration: none;
	text-shadow: none;
	text-align: start;
	list-style: none;
	vertical-align: baseline;
	min-width: 0;
	float: none !important;
	clear: none;
	visibility: visible !important;
	animation: none;
	/* Deliberate: every transition in the widget is declared explicitly on the
	   component that needs it, so a theme's `* { transition: all .3s }` cannot
	   make our UI feel sluggish. */
	transition: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Themes maul buttons harder than anything else. */
.knowhalim-acb button {
	background-image: none !important;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	text-transform: none !important;
	width: auto;
	height: auto;
}

/* Hostile-theme hardening, verified in a browser against a theme running
   `button { border-radius: 3px !important }`.
   The scoped reset cannot win that: an author !important declaration beats any
   non-important one no matter how specific the selector. These two controls
   are round by identity — a squared-off launcher is the most visible break a
   host theme can inflict — so border-radius is added to the §12.2 allowlist
   for exactly these two rules and nothing else.
   Known and accepted limitation: a theme that also !important's border-style,
   border-color or transition on bare element selectors will still reach the
   widget's other controls. Fighting that everywhere would mean spraying
   !important across forty declarations, which §12.2 correctly forbids. */
.knowhalim-acb .knowhalim-acb__launcher,
.knowhalim-acb .knowhalim-acb__send {
	border-style: none !important;
}

.knowhalim-acb [hidden],
.knowhalim-acb[hidden] {
	display: none;
}

.knowhalim-acb svg {
	display: block;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
}

/* The only filled glyphs in the system are the send plane, the status dot and
   the selected check — and each is filled everywhere it appears (§10). */
.knowhalim-acb .knowhalim-acb__icon-solid {
	fill: currentColor;
	stroke: none;
}

.knowhalim-acb .knowhalim-acb__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Root (§7.1)
   ========================================================================== */

.knowhalim-acb {
	position: fixed;
	inset-block-end: calc(var(--kacb-panel-offset) + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	/* A stacking context of our own, so host z-index wars cannot punch through. */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	color-scheme: light dark;
	font-family: var(--kacb-font) !important;
	font-size: var(--kacb-type-body-size);
	line-height: var(--kacb-type-body-lh) !important;
	letter-spacing: var(--kacb-type-body-track) !important;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--kacb-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
}

.knowhalim-acb--right {
	right: calc(var(--kacb-panel-offset) + env(safe-area-inset-right, 0px));
	align-items: flex-end;
}

.knowhalim-acb--left {
	left: calc(var(--kacb-panel-offset) + env(safe-area-inset-left, 0px));
	align-items: flex-start;
}

/* ==========================================================================
   5. Focus ring (§11.1) — one spec, everywhere
   ========================================================================== */

.knowhalim-acb :focus-visible {
	/* The transparent outline is not decorative: Windows High Contrast Mode
	   discards box-shadow, and this is the only thing that survives. */
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow:
		0 0 0 2px var(--kacb-surface),
		0 0 0 4px var(--kacb-accent-ring);
}

.knowhalim-acb__messages :focus-visible,
.knowhalim-acb__empty :focus-visible {
	box-shadow:
		0 0 0 2px var(--kacb-surface-sunken),
		0 0 0 4px var(--kacb-accent-ring);
}

/* ==========================================================================
   6. Launcher (§7.2)
   ========================================================================== */

.knowhalim-acb__launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kacb-launcher-size);
	height: var(--kacb-launcher-size);
	flex: 0 0 auto;
	/* Allowlisted: see the hardening note in the reset. */
	border-radius: var(--kacb-radius-full) !important;
	background-color: var(--kacb-accent);
	color: var(--kacb-accent-contrast);
	box-shadow: var(--kacb-shadow-launcher);
	cursor: pointer;
	transition:
		transform var(--kacb-dur-base) var(--kacb-ease-standard),
		box-shadow var(--kacb-dur-base) var(--kacb-ease-standard),
		background-color var(--kacb-dur-fast) var(--kacb-ease-standard);
}

@media (hover: hover) {

	.knowhalim-acb__launcher:hover {
		/* Cap at 1.03 — past that the SVG resamples and goes visibly soft. */
		transform: translateY(-2px) scale(1.03);
		background-color: var(--kacb-accent-hover);
		box-shadow: var(--kacb-shadow-launcher-hover);
	}
}

.knowhalim-acb__launcher:active {
	transform: scale(0.96);
	background-color: var(--kacb-accent-active);
	transition-duration: var(--kacb-dur-instant);
	transition-timing-function: var(--kacb-ease-spring);
}

.knowhalim-acb__icon-open,
.knowhalim-acb__icon-close {
	position: absolute;
	top: 50%;
	left: 50%;
	transition:
		transform 240ms var(--kacb-ease-spring),
		opacity 240ms var(--kacb-ease-standard);
}

.knowhalim-acb__icon-open {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.knowhalim-acb__icon-close {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg) scale(0.7);
}

.knowhalim-acb.is-open .knowhalim-acb__icon-open {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(-90deg) scale(0.7);
}

.knowhalim-acb.is-open .knowhalim-acb__icon-close {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.knowhalim-acb__badge {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	width: 10px;
	height: 10px;
	border-radius: var(--kacb-radius-full);
	background-color: var(--kacb-danger);
	box-shadow: 0 0 0 2px var(--kacb-surface);
	animation: knowhalim-acb-badge 240ms var(--kacb-ease-spring) both;
}

@keyframes knowhalim-acb-badge {

	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

/* ==========================================================================
   7. Panel (§7.3)
   ========================================================================== */

.knowhalim-acb__panel {
	display: flex;
	flex-direction: column;
	width: var(--kacb-panel-width);
	max-width: calc(100vw - 32px);
	height: var(--kacb-panel-height);
	max-height: calc(100vh - 140px);
	margin-block-end: var(--kacb-panel-gap);
	border-radius: var(--kacb-radius-20);
	background-color: var(--kacb-surface);
	/* No border: the 0 0 0 1px layer in the shadow stack is the border. */
	box-shadow: var(--kacb-shadow-panel);
	overflow: hidden;
	/* layout + style only. `contain: layout` on the fixed root would make it a
	   containing block for fixed descendants and break positioning (§12.3). */
	contain: layout style;
	opacity: 0;
	transition:
		opacity var(--kacb-dur-exit) var(--kacb-ease-in),
		transform var(--kacb-dur-exit) var(--kacb-ease-in);
	/* Pinned against a host theme running `* { transition: all 3s !important }`.
	   Panel timing is functional, not decorative: JS unmounts the panel on
	   transitionend, and a three-second fade makes opening feel broken. Adds
	   transition-property and transition-duration to the §12.2 allowlist for
	   this element only. Verified in a browser against exactly that theme. */
	transition-property: opacity, transform !important;
	transition-duration: var(--kacb-dur-exit), var(--kacb-dur-exit) !important;
}

@supports (height: 100dvh) {

	.knowhalim-acb__panel {
		max-height: calc(100dvh - 140px);
	}
}

.knowhalim-acb--right .knowhalim-acb__panel {
	transform-origin: bottom right;
	transform: translateY(8px) scale(0.98);
}

.knowhalim-acb--left .knowhalim-acb__panel {
	transform-origin: bottom left;
	transform: translateY(8px) scale(0.98);
}

.knowhalim-acb.is-open .knowhalim-acb__panel {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--kacb-dur-fast) var(--kacb-ease-out),
		transform var(--kacb-dur-panel) var(--kacb-ease-out);
	transition-property: opacity, transform !important;
	transition-duration: var(--kacb-dur-fast), var(--kacb-dur-panel) !important;
}

/* Content stagger on open only, never on close. */
.knowhalim-acb.is-open .knowhalim-acb__header,
.knowhalim-acb.is-open .knowhalim-acb__composer {
	animation: knowhalim-acb-rise 220ms var(--kacb-ease-out) 60ms both;
}

@keyframes knowhalim-acb-rise {

	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   8. Header (§7.4) — neutral. The accent is punctuation, not chrome.
   ========================================================================== */

.knowhalim-acb__header {
	display: flex;
	align-items: center;
	gap: var(--kacb-space-10);
	flex: 0 0 auto;
	height: var(--kacb-header-height);
	padding: 0 var(--kacb-space-12) 0 var(--kacb-space-16);
	background-color: var(--kacb-surface);
	border-block-end: 1px solid transparent;
	transition: border-color 160ms var(--kacb-ease-standard);
}

.knowhalim-acb__header.is-scrolled {
	border-block-end-color: var(--kacb-line);
}

@supports (backdrop-filter: blur(1px)) {

	@supports (background: color-mix(in srgb, #fff 82%, transparent)) {

		.knowhalim-acb__header.is-scrolled {
			background: color-mix(in srgb, var(--kacb-surface) 82%, transparent);
			backdrop-filter: saturate(180%) blur(20px);
			-webkit-backdrop-filter: saturate(180%) blur(20px);
		}
	}
}

.knowhalim-acb__identity {
	display: flex;
	align-items: center;
	gap: var(--kacb-space-10);
	min-width: 0;
	flex: 1 1 auto;
}

.knowhalim-acb__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kacb-avatar-size);
	height: var(--kacb-avatar-size);
	flex: 0 0 auto;
	border-radius: var(--kacb-radius-full);
	background-color: var(--kacb-accent-soft);
	color: var(--kacb-accent-text);
	box-shadow: inset 0 0 0 1px var(--kacb-accent-border);
	overflow: hidden;
}

.knowhalim-acb__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.knowhalim-acb__identity-text {
	min-width: 0;
}

.knowhalim-acb__title {
	display: block;
	font-size: var(--kacb-type-subtitle-size);
	line-height: var(--kacb-type-subtitle-lh) !important;
	letter-spacing: var(--kacb-type-subtitle-track) !important;
	font-weight: 600;
	color: var(--kacb-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knowhalim-acb__status {
	display: flex;
	align-items: center;
	gap: var(--kacb-space-6);
	font-size: var(--kacb-type-caption-size);
	line-height: var(--kacb-type-caption-lh) !important;
	letter-spacing: 0 !important;
	font-weight: 500;
	color: var(--kacb-text-tertiary);
}

/* Decorative — the word beside it carries the meaning. */
.knowhalim-acb__status-dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: var(--kacb-radius-full);
	background-color: var(--kacb-success);
	box-shadow: 0 0 0 2px rgba(14, 159, 110, 0.18);
}

.knowhalim-acb__header-actions {
	display: flex;
	align-items: center;
	gap: var(--kacb-space-2);
	flex: 0 0 auto;
}

.knowhalim-acb__icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kacb-icon-btn-size);
	height: var(--kacb-icon-btn-size);
	border-radius: var(--kacb-radius-8);
	background-color: transparent;
	color: var(--kacb-icon);
	transition:
		background-color var(--kacb-dur-fast) var(--kacb-ease-standard),
		color var(--kacb-dur-fast) var(--kacb-ease-standard);
}

/* Expands a 32px control to a 44px hit target without moving any pixels. */
.knowhalim-acb__icon-btn::after {
	content: "";
	position: absolute;
	inset: -6px;
}

@media (hover: hover) {

	.knowhalim-acb__icon-btn:hover {
		background-color: var(--kacb-surface-hover);
		color: var(--kacb-icon-strong);
	}
}

.knowhalim-acb__icon-btn:active {
	background-color: var(--kacb-surface-active);
}

/* ==========================================================================
   9. Banner (§7.11)
   ========================================================================== */

.knowhalim-acb__banner {
	display: flex;
	align-items: center;
	gap: var(--kacb-space-8);
	flex: 0 0 auto;
	padding: 10px var(--kacb-space-16);
	font-size: var(--kacb-type-caption-size);
	line-height: var(--kacb-type-caption-lh) !important;
	letter-spacing: 0 !important;
	font-weight: 500;
	border-block-end: 1px solid var(--kacb-line);
	animation: knowhalim-acb-banner 240ms var(--kacb-ease-out) both;
}

@keyframes knowhalim-acb-banner {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.knowhalim-acb__banner--warning {
	background-color: var(--kacb-warning-soft);
	border-block-end-color: var(--kacb-warning-border);
	color: var(--kacb-warning-strong);
}

.knowhalim-acb__banner--danger {
	background-color: var(--kacb-danger-soft);
	border-block-end-color: var(--kacb-danger-border);
	color: var(--kacb-danger-strong);
}

.knowhalim-acb__banner--info {
	background-color: var(--kacb-info-soft);
	border-block-end-color: var(--kacb-info-border);
	color: var(--kacb-info-strong);
}

/* ==========================================================================
   10. Transcript (§7.5)
   ========================================================================== */

.knowhalim-acb__messages {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--kacb-space-16);
	padding: var(--kacb-space-20) var(--kacb-space-20) var(--kacb-space-12);
	background-color: var(--kacb-surface-sunken);
	overflow-y: auto;
	/* Without this, reaching the end of the transcript scrolls the host page
	   behind it, which feels broken. */
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--kacb-scroll-thumb) transparent;
}

.knowhalim-acb__messages::-webkit-scrollbar {
	width: 6px;
}

.knowhalim-acb__messages::-webkit-scrollbar-track {
	background: transparent;
}

.knowhalim-acb__messages::-webkit-scrollbar-thumb {
	background: var(--kacb-scroll-thumb);
	border-radius: var(--kacb-radius-full);
}

.knowhalim-acb__messages:hover::-webkit-scrollbar-thumb {
	background: var(--kacb-scroll-thumb-hover);
}

/* Content dissolves under the chrome instead of being guillotined. */
@supports (mask-image: linear-gradient(#000, #000)) {

	.knowhalim-acb__messages {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 16px), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 16px), transparent 100%);
	}
}

/* ==========================================================================
   11. Message groups and bubbles (§7.6)
   ========================================================================== */

.knowhalim-acb__group {
	display: flex;
	flex-direction: column;
	gap: var(--kacb-space-4);
}

.knowhalim-acb__group--user {
	align-items: flex-end;
}

.knowhalim-acb__group--bot {
	align-items: flex-start;
}

.knowhalim-acb__msg {
	max-width: var(--kacb-msg-max-width);
	width: fit-content;
	padding: 10px 14px;
	font-size: var(--kacb-type-body-size);
	line-height: var(--kacb-type-body-lh) !important;
	letter-spacing: var(--kacb-type-body-track) !important;
	white-space: pre-wrap;
	/* `anywhere` handles long URLs; break-all would shred normal prose. */
	overflow-wrap: anywhere;
	word-break: normal;
	border-radius: var(--kacb-radius-18);
	animation: knowhalim-acb-msg 260ms var(--kacb-ease-out) both;
}

@keyframes knowhalim-acb-msg {

	from {
		opacity: 0;
		transform: translateY(8px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.knowhalim-acb__msg--bot {
	align-self: flex-start;
	background-color: var(--kacb-surface-raised);
	color: var(--kacb-text);
	box-shadow: var(--kacb-shadow-bubble);
	border-end-start-radius: var(--kacb-radius-6);
	/* Lands after the typing indicator clears. */
	animation-delay: 40ms;
}

.knowhalim-acb__msg--user {
	align-self: flex-end;
	background-color: var(--kacb-accent);
	color: var(--kacb-accent-contrast);
	box-shadow: var(--kacb-shadow-bubble-user);
	border-end-end-radius: var(--kacb-radius-6);
}

.knowhalim-acb__msg--error {
	align-self: flex-start;
	display: flex;
	align-items: flex-start;
	gap: var(--kacb-space-8);
	max-width: 100%;
	background-color: var(--kacb-danger-soft);
	color: var(--kacb-danger-strong);
	border: 1px solid var(--kacb-danger-border);
	font-size: var(--kacb-type-body-sm-size);
	line-height: var(--kacb-type-body-sm-lh) !important;
	letter-spacing: 0 !important;
	border-end-start-radius: var(--kacb-radius-6);
}

.knowhalim-acb__msg--error svg {
	color: var(--kacb-danger);
	margin-block-start: 2px; /* optical */
}

.knowhalim-acb__retry {
	display: inline-block;
	margin-block-start: var(--kacb-space-6);
	font-size: var(--kacb-type-label-size);
	line-height: var(--kacb-type-label-lh) !important;
	letter-spacing: var(--kacb-type-label-track) !important;
	font-weight: 600;
	color: var(--kacb-danger-strong);
	background: none;
	text-underline-offset: 2px;
}

.knowhalim-acb__retry:hover {
	text-decoration: underline;
}

/* Grouping (§7.6). Outer edges stay round, the seam between stacked bubbles
   goes tight. Twenty lines of CSS, and most of the difference between
   "chat plugin" and "Intercom". */
.knowhalim-acb__msg--bot.is-grouped-top {
	border-end-start-radius: var(--kacb-radius-6);
}

.knowhalim-acb__msg--bot.is-grouped-mid {
	border-start-start-radius: var(--kacb-radius-6);
	border-end-start-radius: var(--kacb-radius-6);
}

.knowhalim-acb__msg--bot.is-grouped-bottom {
	border-start-start-radius: var(--kacb-radius-6);
	border-end-start-radius: var(--kacb-radius-18);
}

.knowhalim-acb__msg--user.is-grouped-top {
	border-end-end-radius: var(--kacb-radius-6);
}

.knowhalim-acb__msg--user.is-grouped-mid {
	border-start-end-radius: var(--kacb-radius-6);
	border-end-end-radius: var(--kacb-radius-6);
}

.knowhalim-acb__msg--user.is-grouped-bottom {
	border-start-end-radius: var(--kacb-radius-6);
	border-end-end-radius: var(--kacb-radius-18);
}

/* Meta — never a timestamp under every message. That is clutter. */
.knowhalim-acb__msg-meta {
	font-size: var(--kacb-type-caption-size);
	line-height: var(--kacb-type-caption-lh) !important;
	letter-spacing: 0 !important;
	font-weight: 500;
	color: var(--kacb-text-quaternary);
	padding-inline: var(--kacb-space-4);
	opacity: 0;
	transition: opacity 160ms var(--kacb-ease-standard);
}

@media (hover: hover) {

	.knowhalim-acb__group:hover .knowhalim-acb__msg-meta {
		opacity: 1;
	}
}

.knowhalim-acb__group:last-child .knowhalim-acb__msg-meta,
.knowhalim-acb__group:focus-within .knowhalim-acb__msg-meta {
	opacity: 1;
}

/* ==========================================================================
   12. Typing indicator (§7.7)
   ========================================================================== */

.knowhalim-acb__typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kacb-space-4);
	width: 52px;
	height: 34px;
	background-color: var(--kacb-surface-raised);
	box-shadow: var(--kacb-shadow-bubble);
	border-radius: var(--kacb-radius-18);
	border-end-start-radius: var(--kacb-radius-6);
	animation: knowhalim-acb-msg 260ms var(--kacb-ease-out) both;
}

.knowhalim-acb__typing span {
	width: 6px;
	height: 6px;
	border-radius: var(--kacb-radius-full);
	background-color: var(--kacb-n-400);
	animation: knowhalim-acb-typing 1400ms var(--kacb-ease-in-out) infinite;
}

.knowhalim-acb__typing span:nth-child(2) {
	animation-delay: 160ms;
}

.knowhalim-acb__typing span:nth-child(3) {
	animation-delay: 320ms;
}

@media (prefers-color-scheme: dark) {

	.knowhalim-acb__typing span {
		background-color: var(--kacb-icon-muted);
	}
}

@keyframes knowhalim-acb-typing {

	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.35;
	}

	30% {
		transform: translateY(-3px);
		opacity: 1;
	}
}

/* ==========================================================================
   13. Source citations (§7.9)
   ========================================================================== */

.knowhalim-acb__sources {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kacb-space-6);
	margin-block-start: var(--kacb-space-8);
	padding-inline-start: var(--kacb-space-4);
}

.knowhalim-acb__sources-label {
	font-size: var(--kacb-type-micro-size);
	line-height: var(--kacb-type-micro-lh) !important;
	letter-spacing: var(--kacb-type-micro-track) !important;
	font-weight: 600;
	/* Allowlisted: the scoped reset kills text-transform on every child, so an
	   intentional uppercase has to win it back. */
	text-transform: uppercase !important;
	color: var(--kacb-text-quaternary);
	margin-inline-end: var(--kacb-space-2);
}

.knowhalim-acb__source-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--kacb-space-6);
	height: 26px;
	max-width: 200px;
	padding-inline: 8px 10px;
	background-color: var(--kacb-surface-raised);
	border: 1px solid var(--kacb-line-strong);
	border-radius: var(--kacb-radius-full);
	font-size: var(--kacb-type-caption-size);
	line-height: var(--kacb-type-caption-lh) !important;
	letter-spacing: 0 !important;
	font-weight: 500;
	color: var(--kacb-text-secondary);
	box-shadow: var(--kacb-shadow-xs);
	transition:
		transform var(--kacb-dur-base) var(--kacb-ease-standard),
		box-shadow var(--kacb-dur-base) var(--kacb-ease-standard),
		border-color var(--kacb-dur-base) var(--kacb-ease-standard),
		color var(--kacb-dur-base) var(--kacb-ease-standard);
}

.knowhalim-acb__source-chip::before {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

.knowhalim-acb__source-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: var(--kacb-radius-full);
	background-color: var(--kacb-accent-soft);
	color: var(--kacb-accent-text);
	font-size: var(--kacb-type-micro-size);
	line-height: 16px !important;
	letter-spacing: 0 !important;
	font-weight: 700;
}

.knowhalim-acb__source-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

@media (hover: hover) {

	.knowhalim-acb__source-chip:hover {
		transform: translateY(-2px);
		border-color: var(--kacb-accent-border);
		color: var(--kacb-accent-text);
		box-shadow:
			0 4px 12px -4px var(--kacb-accent-glow),
			var(--kacb-shadow-xs);
	}
}

.knowhalim-acb__source-detail {
	width: 100%;
	margin-block-start: var(--kacb-space-4);
	padding: var(--kacb-space-12);
	background-color: var(--kacb-surface-inset);
	border-radius: var(--kacb-radius-10);
	font-size: var(--kacb-type-body-sm-size);
	line-height: var(--kacb-type-body-sm-lh) !important;
	letter-spacing: 0 !important;
	color: var(--kacb-text-secondary);
}

.knowhalim-acb__source-detail-name {
	display: block;
	margin-block-end: var(--kacb-space-4);
	font-size: var(--kacb-type-caption-size);
	line-height: var(--kacb-type-caption-lh) !important;
	font-weight: 500;
	color: var(--kacb-text-tertiary);
}

/* The quoted passage the answer drew on. Set apart with a rule rather than a
   box so the disclosure does not become a panel inside a panel. */
.knowhalim-acb__source-excerpt {
	margin: var(--kacb-space-8) 0 0;
	padding-inline-start: var(--kacb-space-10);
	border-inline-start: 2px solid var(--kacb-line-strong);
	font-size: var(--kacb-type-caption-size);
	line-height: var(--kacb-type-body-sm-lh) !important;
	letter-spacing: 0 !important;
	color: var(--kacb-text-tertiary);
	overflow-wrap: anywhere;
}

.knowhalim-acb__source-link {
	color: var(--kacb-accent-text);
	text-underline-offset: 2px;
	font-weight: 500;
}

.knowhalim-acb__source-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   14. Empty state (§7.10) — the first thing a visitor sees
   ========================================================================== */

.knowhalim-acb__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kacb-space-8);
	padding: var(--kacb-space-24) var(--kacb-space-4) var(--kacb-space-12);
}

.knowhalim-acb__empty-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kacb-avatar-size-lg);
	height: var(--kacb-avatar-size-lg);
	border-radius: var(--kacb-radius-full);
	background-color: var(--kacb-accent-soft);
	color: var(--kacb-accent-text);
	box-shadow: inset 0 0 0 1px var(--kacb-accent-border);
}

.knowhalim-acb__empty-title {
	font-size: var(--kacb-type-title-size);
	line-height: var(--kacb-type-title-lh) !important;
	letter-spacing: var(--kacb-type-title-track) !important;
	font-weight: 600;
	color: var(--kacb-text);
}

.knowhalim-acb__empty-sub {
	font-size: var(--kacb-type-body-sm-size);
	line-height: var(--kacb-type-body-sm-lh) !important;
	letter-spacing: 0 !important;
	color: var(--kacb-text-tertiary);
}

.knowhalim-acb__suggestions {
	display: flex;
	flex-direction: column;
	gap: var(--kacb-space-8);
	width: 100%;
	margin-block-start: var(--kacb-space-8);
}

.knowhalim-acb__suggestion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kacb-space-8);
	width: 100%;
	padding: 10px 12px;
	background-color: var(--kacb-surface-raised);
	border: 1px solid var(--kacb-line-strong);
	border-radius: var(--kacb-radius-12);
	font-size: var(--kacb-type-body-sm-size);
	line-height: var(--kacb-type-body-sm-lh) !important;
	letter-spacing: 0 !important;
	color: var(--kacb-text-secondary);
	box-shadow: var(--kacb-shadow-xs);
	animation: knowhalim-acb-msg 240ms var(--kacb-ease-out) both;
	transition:
		transform var(--kacb-dur-base) var(--kacb-ease-standard),
		box-shadow var(--kacb-dur-base) var(--kacb-ease-standard),
		border-color var(--kacb-dur-base) var(--kacb-ease-standard),
		color var(--kacb-dur-base) var(--kacb-ease-standard);
}

.knowhalim-acb__suggestion:nth-child(2) {
	animation-delay: 40ms;
}

.knowhalim-acb__suggestion:nth-child(3) {
	animation-delay: 80ms;
}

.knowhalim-acb__suggestion svg {
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity var(--kacb-dur-base) var(--kacb-ease-standard),
		transform var(--kacb-dur-base) var(--kacb-ease-standard);
}

@media (hover: hover) {

	.knowhalim-acb__suggestion:hover {
		transform: translateY(-2px);
		border-color: var(--kacb-accent-border);
		color: var(--kacb-text);
		box-shadow:
			0 6px 16px -6px var(--kacb-accent-glow),
			var(--kacb-shadow-xs);
	}

	.knowhalim-acb__suggestion:hover svg {
		opacity: 1;
		transform: none;
	}
}

.knowhalim-acb__suggestion:focus-visible svg {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   15. Composer (§7.8)
   ========================================================================== */

.knowhalim-acb__composer {
	flex: 0 0 auto;
	padding: var(--kacb-space-12);
	padding-block-end: calc(var(--kacb-space-8) + env(safe-area-inset-bottom, 0px));
	background-color: var(--kacb-surface);
	border-block-start: 1px solid var(--kacb-line);
}

/* One bordered container holding both the field and the send button. Two
   bordered boxes side by side is the cheap version. */
.knowhalim-acb__shell {
	display: flex;
	align-items: flex-end;
	gap: var(--kacb-space-8);
	padding: var(--kacb-space-6);
	background-color: var(--kacb-surface);
	border: 1px solid var(--kacb-line-strong);
	/* Panel radius 20 minus the 12px inset = 8. The nesting law (§4.3) says
	   12 here because the shell sits 12 from the panel edge on three sides. */
	border-radius: var(--kacb-radius-12);
	transition:
		border-color var(--kacb-dur-fast) var(--kacb-ease-standard),
		box-shadow var(--kacb-dur-fast) var(--kacb-ease-standard);
}

.knowhalim-acb__shell:focus-within {
	border-color: var(--kacb-accent);
	box-shadow: 0 0 0 3px var(--kacb-accent-ring);
}

.knowhalim-acb__shell.has-error {
	border-color: var(--kacb-danger);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

.knowhalim-acb__input {
	flex: 1 1 auto;
	min-height: 24px;
	max-height: var(--kacb-composer-max-height);
	padding: 8px 6px;
	border: 0;
	background: transparent;
	outline: none;
	resize: none;
	box-shadow: none;
	color: var(--kacb-text);
	font-family: var(--kacb-font) !important;
	font-size: var(--kacb-type-body-size);
	line-height: var(--kacb-type-body-lh) !important;
	letter-spacing: var(--kacb-type-body-track) !important;
	overflow-y: hidden;
}

.knowhalim-acb__input.is-capped {
	overflow-y: auto;
}

.knowhalim-acb__input::placeholder {
	color: var(--kacb-text-quaternary);
	opacity: 1;
}

/* The composer never takes the ring — the shell does, via :focus-within. */
.knowhalim-acb__input:focus-visible {
	outline: none;
	box-shadow: none;
}

.knowhalim-acb__send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kacb-send-size);
	height: var(--kacb-send-size);
	flex: 0 0 auto;
	/* Allowlisted: see the hardening note in the reset. */
	border-radius: var(--kacb-radius-10) !important;
	background-color: var(--kacb-accent);
	color: var(--kacb-accent-contrast);
	transition:
		background-color var(--kacb-dur-fast) var(--kacb-ease-standard),
		transform var(--kacb-dur-instant) var(--kacb-ease-spring);
}

.knowhalim-acb__send svg {
	/* Paper-plane shapes are visually right-heavy. */
	transform: translateX(-1px); /* optical */
}

@media (hover: hover) {

	.knowhalim-acb__send:hover:not(:disabled) {
		background-color: var(--kacb-accent-hover);
	}
}

.knowhalim-acb__send:active:not(:disabled) {
	transform: scale(0.94);
}

/* Recoloured, not faded. A half-transparent button reads as a rendering
   failure; a recoloured one reads as intentional (§13.17). */
.knowhalim-acb__send:disabled {
	background-color: var(--kacb-surface-inset);
	color: var(--kacb-icon-muted);
	box-shadow: none;
	cursor: not-allowed;
}

.knowhalim-acb__credit {
	padding-block-start: var(--kacb-space-8);
	text-align: center;
	font-size: var(--kacb-type-micro-size);
	line-height: var(--kacb-type-micro-lh) !important;
	/* The one micro exception: no uppercase, no tracking. */
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 500;
	color: var(--kacb-text-quaternary);
}

.knowhalim-acb__credit a {
	color: var(--kacb-text-tertiary);
	text-underline-offset: 2px;
}

.knowhalim-acb__credit a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   16. Breakpoints (§7.13)
   ========================================================================== */

@media (max-width: 1023px) {

	.knowhalim-acb {
		--kacb-panel-width: 380px;
		--kacb-panel-offset: 16px;
	}

	.knowhalim-acb__panel {
		max-height: calc(100vh - 120px);
	}

	@supports (height: 100dvh) {

		.knowhalim-acb__panel {
			max-height: calc(100dvh - 120px);
		}
	}
}

@media (max-width: 639px) {

	.knowhalim-acb__panel {
		width: min(380px, calc(100vw - 32px));
	}
}

/* Mobile sheet (§7.12) */
@media (max-width: 520px) {

	.knowhalim-acb {
		--kacb-launcher-size: 52px;
		--kacb-panel-offset: 16px;
		--kacb-header-height: 56px;
	}

	.knowhalim-acb__panel {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		width: 100%;
		max-width: none !important;
		height: 92vh;
		max-height: 92vh;
		margin: 0;
		border-radius: var(--kacb-radius-20) var(--kacb-radius-20) 0 0;
		transform-origin: bottom center;
		/* Room for the grabber above the header. The bottom safe-area inset is
		   handled by the composer, not here — applying it in both places
		   double-counts it and leaves a dead band under the send button. */
		padding-block-start: 14px;
	}

	@supports (height: 100dvh) {

		.knowhalim-acb__panel {
			height: 92dvh;
			max-height: 92dvh;
		}
	}

	/* No scale on the sheet — it slides. */
	.knowhalim-acb--right .knowhalim-acb__panel,
	.knowhalim-acb--left .knowhalim-acb__panel {
		transform: translateY(100%);
	}

	.knowhalim-acb.is-open .knowhalim-acb__panel {
		transform: none;
		transition:
			opacity var(--kacb-dur-fast) var(--kacb-ease-out),
			transform var(--kacb-dur-panel) var(--kacb-ease-out);
	}

	.knowhalim-acb.is-open .knowhalim-acb__launcher {
		opacity: 0;
		pointer-events: none;
		transform: scale(0.8);
	}

	.knowhalim-acb__grabber {
		position: absolute;
		top: 8px;
		left: 50%;
		width: 36px;
		height: 4px;
		margin-inline-start: -18px;
		border-radius: var(--kacb-radius-full);
		background-color: var(--kacb-n-300);
	}

	.knowhalim-acb__messages {
		padding: var(--kacb-space-16) var(--kacb-space-16) var(--kacb-space-12);
	}

	.knowhalim-acb__composer {
		padding: var(--kacb-space-12);
	}

	/* iOS Safari zooms the viewport for any input under 16px, and that zoom is
	   unrecoverable inside a fixed-position widget (§3.3). */
	.knowhalim-acb__input {
		font-size: 16px;
	}
}

@media (min-width: 521px) {

	.knowhalim-acb__grabber {
		display: none;
	}
}

@media (max-height: 560px) {

	.knowhalim-acb {
		--kacb-header-height: 52px;
	}

	.knowhalim-acb__panel {
		max-height: calc(100vh - 88px);
	}

	@supports (height: 100dvh) {

		.knowhalim-acb__panel {
			max-height: calc(100dvh - 88px);
		}
	}

	.knowhalim-acb__suggestion:nth-child(3) {
		display: none;
	}
}

/* ==========================================================================
   17. Reduced motion (§6.3)
   ========================================================================== */

/* 0.01ms, never `none`. JS waits for transitionend before unmounting the
   panel; with `transition: none` that event never fires and the panel sticks
   open permanently. This is a real bug, not a theoretical one. */
@media (prefers-reduced-motion: reduce) {

	.knowhalim-acb,
	.knowhalim-acb * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* The panel pins its own transition-duration with !important to survive a
	   host theme's `* { transition: all 3s !important }`. That pin outranks the
	   blanket rule above, so reduced motion has to be restated at matching
	   specificity or the panel keeps animating for 320ms. Verified with
	   Chrome's --force-prefers-reduced-motion. */
	.knowhalim-acb .knowhalim-acb__panel,
	.knowhalim-acb.is-open .knowhalim-acb__panel {
		transition-duration: 0.01ms !important;
	}

	.knowhalim-acb__launcher:hover,
	.knowhalim-acb__msg,
	.knowhalim-acb__source-chip:hover,
	.knowhalim-acb__suggestion:hover {
		transform: none !important;
	}

	.knowhalim-acb__typing span {
		opacity: 0.6;
	}
}

/* ==========================================================================
   18. Forced colours and print (§11.5, §7.1)
   ========================================================================== */

@media (forced-colors: active) {

	.knowhalim-acb__panel,
	.knowhalim-acb__msg {
		border: 1px solid CanvasText;
	}

	.knowhalim-acb__launcher {
		border: 1px solid ButtonText;
	}

	.knowhalim-acb :focus-visible {
		outline: 2px solid Highlight;
	}
}

@media print {

	.knowhalim-acb {
		display: none !important;
	}
}