/*
 * Agent Circuits — chat-UI mockup kit.  Prefix: ck-
 * ==================================================
 *
 * The component library every marketing scene rebuilds the product's chat
 * surface from. One class vocabulary, extracted stroke-for-stroke from
 * agentcircuits.ui so a mockup reads as the real app with more air around it.
 *
 * CONTRACT
 *   - Tokens only. Every colour, radius, and motion value reaches through
 *     tokens.css (product `--*` + marketing `--mkt-*`). No raw hex/oklch here
 *     except where a token genuinely doesn't exist (there are none).
 *   - Both themes. Nothing is styled for light alone; `.dark` flows through
 *     the tokens, so a kit block is correct in dark for free.
 *   - Sizes in rem so a whole mockup scales with the page's root clamp.
 *     Smallest type is 0.6875rem (≈11px) — the old scenes' 6–9px text was a
 *     known legibility defect and is banned.
 *   - Motion-inert by default. `.ck-spinner`, `.ck-ring`, and `.ck-glow` hold
 *     a rest state; kit/motion.js drives them from a GSAP timeline so scenes
 *     stay deterministic/seekable (DESIGN §8). Opt-in `--spin` / `--breathe`
 *     helpers exist only for static contexts (kit/preview.html).
 *   - Icons come from kit/glyphs.js. Drop a GLYPHS string inside a `.ck-i`.
 *
 * FIDELITY NOTES (deviations from DESIGN.md prose, faithful to the source)
 *   - Tool cards/reasoning/approval/question use radius-xl (14px) and carry a
 *     `--muted` hairline border — that is the real shadcn `Card` (`border-muted
 *     bg-muted/30`). DESIGN §4.2's "no border" was a simplification.
 *   - A running tool GROUP tints with the running-blue (`--mkt-status-running`),
 *     the site's one chromatic accent. The current product source tints with
 *     `primary/40`; the brief chose blue for marketing coherence.
 *
 * LAYOUT
 *   .ck-app is the frame. It grids topbar + columns via grid-areas. Add a
 *   column modifier to opt into sidebar/surface:
 *     .ck-app            → chat only
 *     .ck-app--rail      → sidebar + chat
 *     .ck-app--surface   → chat + surface
 *     .ck-app--full      → sidebar + chat + surface
 *   Regions claim their area by class (.ck-topbar/.ck-sidebar/.ck-chat/
 *   .ck-surface). Give .ck-app an explicit height in the scene.
 */

/* ============================================================ Primitives */

/* Icon slot. --ck-i sizes it; the glyph fills. Default 0.875rem = 14px, the
   product's h-3.5 w-3.5 status/tool icon size. */
.ck-i {
	display: inline-flex;
	flex-shrink: 0;
	width: var(--ck-i, 0.875rem);
	height: var(--ck-i, 0.875rem);
	color: currentColor;
}
.ck-i svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ck-i--sm {
	--ck-i: 0.75rem;
}
.ck-i--md {
	--ck-i: 1rem;
}
.ck-i--lg {
	--ck-i: 1.25rem;
}

/* Identity-hue utilities. Set --ck-hue; author chips and sub-agent accents
   read it. One palette shared with the product (app.css author hues). */
.ck-hue-0 {
	--ck-hue: var(--ac-author-hue-0);
}
.ck-hue-1 {
	--ck-hue: var(--ac-author-hue-1);
}
.ck-hue-2 {
	--ck-hue: var(--ac-author-hue-2);
}
.ck-hue-3 {
	--ck-hue: var(--ac-author-hue-3);
}
.ck-hue-4 {
	--ck-hue: var(--ac-author-hue-4);
}
.ck-hue-5 {
	--ck-hue: var(--ac-author-hue-5);
}
.ck-hue-6 {
	--ck-hue: var(--ac-author-hue-6);
}
.ck-hue-7 {
	--ck-hue: var(--ac-author-hue-7);
}

/* Running spinner (270° arc). motion.js spins it; --spin is the static-context
   fallback so kit/preview.html reads as alive. */
.ck-spinner {
	display: inline-flex;
	flex-shrink: 0;
	width: var(--ck-i, 0.875rem);
	height: var(--ck-i, 0.875rem);
	color: var(--mkt-status-running);
}
.ck-spinner svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ck-spinner--spin {
	animation: ck-spin 0.9s linear infinite;
}
@keyframes ck-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Settle ring: absolute overlay a parent grows+fades once per outcome. Rest
   state invisible; settleRing() in motion.js (or --pulse for static) drives it.
   Colour comes from --ck-ring-colour, set per tone by the helper. */
.ck-ring {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 2px var(--ck-ring-colour, var(--mkt-status-running));
	opacity: 0;
}

/* Busy cyan glow overlay. Rest invisible; breathe() oscillates opacity.
   --breathe is the static-context fallback. */
.ck-glow {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px var(--ac-activity-soft);
	background: radial-gradient(
		120% 80% at 50% 0%,
		color-mix(in oklch, var(--ac-activity) 12%, transparent),
		transparent 70%
	);
	opacity: 0;
}
.ck-glow--breathe {
	animation: ck-breathe 2.5s ease-in-out infinite;
}
@keyframes ck-breathe {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 0.85;
	}
}

/* ================================================================= Frame */

.ck-app {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas:
		'topbar'
		'chat';
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--background);
	color: var(--foreground);
	overflow: hidden;
	box-shadow: var(--mkt-shadow-md);
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}
.ck-app--rail {
	grid-template-columns: 13.5rem minmax(0, 1fr);
	grid-template-areas:
		'topbar topbar'
		'sidebar chat';
}
.ck-app--surface {
	grid-template-columns: minmax(0, 1fr) 17rem;
	grid-template-areas:
		'topbar topbar'
		'chat surface';
}
.ck-app--full {
	grid-template-columns: 13.5rem minmax(0, 1fr) 17rem;
	grid-template-areas:
		'topbar topbar topbar'
		'sidebar chat surface';
}

/* ---- Top bar -------------------------------------------------------- */
.ck-topbar {
	grid-area: topbar;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border-bottom: 1px solid var(--border);
	background: var(--background);
}
.ck-topbar__title {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	color: var(--foreground);
	min-width: 0;
}
.ck-topbar__title .ck-i {
	color: var(--muted-foreground);
}
/* Lock appears while an approval is pending (DESIGN §10.3). */
.ck-topbar__lock {
	color: var(--mkt-status-warning);
}
.ck-topbar__spacer {
	margin-left: auto;
}
.ck-topbar__chip {
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: var(--mkt-radius-pill);
}

/* =============================================================== Sidebar */

.ck-sidebar {
	grid-area: sidebar;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--sidebar);
	color: var(--sidebar-foreground);
	border-right: 1px solid var(--sidebar-border);
	overflow: hidden;
}
.ck-sidebar-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ck-sidebar-header .ck-i {
	color: var(--muted-foreground);
}
/* Search field mock in the header. */
.ck-sidebar-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--sidebar-border);
	border-radius: var(--radius-md);
	background: var(--background);
	color: var(--muted-foreground);
	font-size: var(--text-xs);
	min-width: 0;
}
.ck-sidebar-group {
	padding: 0.75rem 0.75rem 0.25rem;
	font-size: 0.6875rem;
	font-weight: var(--mkt-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--mkt-tracking-caps);
	color: var(--muted-foreground);
}
.ck-sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	padding: 0.25rem;
	overflow-y: auto;
	min-height: 0;
}

/* ---- Session row ---------------------------------------------------- */
.ck-session {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-lg);
	border-left: 2px solid transparent;
	text-align: left;
	color: var(--sidebar-foreground);
	cursor: default;
	transition: background var(--motion-fast) var(--ease-out-soft);
}
.ck-session:hover {
	background: color-mix(in oklch, var(--foreground) 8%, transparent);
}
/* Left cluster (grid column 1): holds the optional lineage tick + the title
   block, so the lineage never displaces the title into the actions column. */
.ck-session__lead {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}
.ck-session__main {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.ck-session__titlerow {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}
.ck-session__spinner {
	color: var(--mkt-status-running);
}
.ck-session__title {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
}
.ck-session__meta {
	font-size: 0.6875rem;
	color: var(--muted-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Unread (primary) / attention (amber) dots — 8px, right of title. */
.ck-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	flex-shrink: 0;
}
.ck-dot--unread {
	background: var(--primary);
}
.ck-dot--attention {
	background: var(--mkt-status-warning);
}
.ck-dot--running {
	background: var(--mkt-status-running);
}
.ck-session__actions {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	color: var(--muted-foreground);
	opacity: 0;
	transition: opacity var(--motion-fast) var(--ease-out-soft);
}
.ck-session:hover .ck-session__actions,
.ck-session--busy .ck-session__actions {
	opacity: 1;
}
.ck-session__stop {
	color: var(--mkt-status-error);
}

/* Selected: cool grey fill + primary left accent (product is
   color-mix(foreground 20%, sidebar) + sidebar-primary border). */
.ck-session--selected {
	background: color-mix(in oklch, var(--foreground) 18%, var(--sidebar));
	border-left-color: var(--sidebar-primary);
}
.ck-session--selected .ck-session__title {
	font-weight: var(--mkt-weight-semibold);
}
/* Busy: cyan inset ring (static read of the product's breathe); pair with a
   .ck-glow child for the animated version. */
.ck-session--busy {
	box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ac-activity) 30%, transparent);
}
/* Attention: amber left accent as well as the dot. */
.ck-session--attention {
	border-left-color: var(--mkt-status-warning);
}
/* Sub-agent / child: hue-tinted left accent, indented under a parent. */
.ck-session--sub {
	border-left-color: color-mix(in oklch, var(--ck-hue, var(--mkt-status-running)) 65%, transparent);
}
.ck-session--sub.ck-session--selected {
	border-left-color: var(--ck-hue, var(--sidebar-primary));
}
/* Lineage rail: thin vertical tick left of a nested child's title. */
.ck-lineage {
	display: inline-flex;
	justify-content: center;
	flex-shrink: 0;
	width: 0.5rem;
	height: 1.4rem;
}
.ck-lineage::before {
	content: '';
	width: 1px;
	height: 100%;
	background: color-mix(in oklch, var(--foreground) 22%, transparent);
}

/* ================================================================== Chat */

.ck-chat {
	grid-area: chat;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-height: 0;
	padding: 1.5rem;
	overflow-y: auto;
	background: var(--background);
}
/* Tighter rhythm variant for dense threads. */
.ck-chat--dense {
	gap: 1rem;
}

/* ---- User message --------------------------------------------------- */
.ck-msg-user {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	align-self: flex-end;
	max-width: 80%;
}
.ck-msg-user__bubble {
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: 1.125rem;
	padding: 0.375rem 0.9375rem;
	font-size: var(--text-sm);
	line-height: var(--mkt-line-normal);
	overflow-wrap: break-word;
}
.ck-msg-user__bubble code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	padding: 0.05em 0.35em;
	border-radius: var(--radius-sm);
	background: color-mix(in oklch, currentColor 18%, transparent);
}

/* Author attribution row (group chats). Name + initials, hue-tinted. */
.ck-author {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.6875rem;
	font-weight: var(--mkt-weight-medium);
	color: var(--muted-foreground);
}
.ck-author__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: var(--mkt-weight-semibold);
	background: color-mix(in oklch, var(--ck-hue, var(--muted-foreground)) 18%, transparent);
	color: var(--ck-hue, var(--muted-foreground));
}
.ck-author__name {
	color: var(--ck-hue, var(--muted-foreground));
}

/* ---- Assistant message (no bubble, plain prose) --------------------- */
.ck-msg-assistant {
	align-self: stretch;
	max-width: 100%;
	color: var(--foreground);
	font-size: var(--text-sm);
	line-height: 1.6;
}
.ck-msg-assistant p {
	margin: 0 0 0.6em;
}
.ck-msg-assistant p:last-child {
	margin-bottom: 0;
}
.ck-msg-assistant strong {
	font-weight: var(--mkt-weight-semibold);
}
.ck-msg-assistant code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 0.05em 0.35em;
	border-radius: var(--radius-sm);
	background: var(--code-background);
}

/* ---- Reasoning collapsible ------------------------------------------ */
.ck-reasoning {
	border: 1px solid var(--muted);
	border-radius: var(--radius-xl);
	background: color-mix(in oklch, var(--muted) 30%, transparent);
}
.ck-reasoning__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	color: var(--muted-foreground);
}
.ck-reasoning__label {
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
}
.ck-reasoning__chev {
	margin-left: auto;
	--ck-i: 1rem;
	color: var(--muted-foreground);
}
.ck-reasoning__body {
	border-top: 1px solid var(--muted);
	padding: 0.75rem;
	font-size: var(--text-xs);
	line-height: var(--mkt-line-relaxed);
	color: var(--muted-foreground);
	white-space: pre-wrap;
	word-break: break-word;
}

/* =========================================================== Tool calls */

.ck-tool {
	position: relative;
	border: 1px solid var(--muted);
	border-radius: var(--radius-xl);
	background: color-mix(in oklch, var(--muted) 30%, transparent);
	font-size: var(--text-sm);
}
.ck-tool-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
}
.ck-tool-head__wrench {
	color: var(--muted-foreground);
}
/* While running, the product pulses the wrench and darkens it to foreground. */
.ck-tool--running .ck-tool-head__wrench {
	color: var(--foreground);
}
.ck-tool-name {
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	color: var(--foreground);
	white-space: nowrap;
	overflow: hidden;
}
.ck-tool-args {
	display: inline-block;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	/* clip-reveal target for streamed args (motion.js typeOn). */
	clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
}
.ck-tool-paren {
	color: var(--muted-foreground);
}
.ck-tool-head__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--muted-foreground);
}
.ck-tool-head__chev {
	--ck-i: 1rem;
	opacity: 0.5;
}

/* Status slots — the icon right of the tool name. Colour by outcome. */
.ck-status {
	display: inline-flex;
	flex-shrink: 0;
}
.ck-status--running {
	color: var(--mkt-status-running);
}
.ck-status--success {
	color: var(--mkt-status-success);
}
.ck-status--warning {
	color: var(--mkt-status-warning);
}
.ck-status--error {
	color: var(--mkt-status-error);
}
.ck-status--cancelled {
	color: var(--muted-foreground);
}

/* Approval badges. Glyph badges sit at icon size; the auto-approved "A" is a
   text badge in a slightly larger ring so it never drops below 0.75rem. */
.ck-shield {
	display: inline-flex;
	flex-shrink: 0;
}
.ck-shield--pending {
	color: var(--mkt-status-warning);
}
.ck-shield--approved {
	color: var(--mkt-status-success);
}
.ck-shield--denied {
	color: var(--mkt-status-attention);
}
.ck-shield--expired {
	color: var(--muted-foreground);
}
.ck-shield--auto {
	display: inline-grid;
	place-items: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 999px;
	border: 1px solid var(--mkt-status-success);
	color: var(--mkt-status-success);
	font-size: 0.75rem;
	font-weight: var(--mkt-weight-semibold);
	line-height: 1;
}

/* Error escalation — the only non-neutral card border (DESIGN §4.2). */
.ck-tool--error {
	border-color: color-mix(in oklch, var(--mkt-status-error) 30%, transparent);
}

/* ---- Tool body (per-tool renderer host) ----------------------------- */
.ck-tool-body {
	border-top: 1px solid var(--muted);
	padding: 0.75rem;
	display: grid;
	row-gap: 0.5rem;
}
/* "Tool" name row above the renderer, with a mono code chip. */
.ck-tool-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ck-tool-meta code {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--foreground);
	padding: 0.1rem 0.35rem;
	border-radius: var(--radius-sm);
	background: var(--muted);
}
/* Command block: prompt token in success-green, then the command text. */
.ck-tool-cmd {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	background: var(--code-background);
	color: var(--code-foreground);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.55;
}
.ck-tool-cmd__prompt {
	flex-shrink: 0;
	color: var(--mkt-status-success);
}
.ck-tool-cmd__text {
	display: inline-block;
	white-space: pre;
	clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
}
.ck-tool-outlabel {
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-medium);
	color: var(--muted-foreground);
}
.ck-tool-output {
	margin: 0;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	background: var(--code-background);
	color: var(--code-foreground);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
}
.ck-tool-output em {
	font-style: normal;
	color: var(--mkt-status-warning);
}
.ck-tool-exit {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
/* Error pre-block for a failed tool. */
.ck-tool-error {
	margin: 0;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	background: var(--mkt-status-error-soft);
	color: var(--mkt-status-error);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	white-space: pre-wrap;
}

/* ---- Tool group ----------------------------------------------------- */
.ck-tool-group {
	position: relative;
	border: 1px solid color-mix(in oklch, var(--muted) 80%, transparent);
	border-radius: var(--radius-xl);
	background: color-mix(in oklch, var(--muted) 20%, transparent);
}
/* Running: product fidelity — ToolCallGroup.svelte tints the running
 * group with primary (border-primary/40, bg-primary/5, shadow-primary/10);
 * blue stays reserved for status icons, activity rings and spinners. */
.ck-tool-group--running {
	border-color: color-mix(in oklch, var(--primary) 40%, transparent);
	background: color-mix(in oklch, var(--primary) 5%, transparent);
	box-shadow: 0 1px 3px 0 color-mix(in oklch, var(--primary) 10%, transparent);
}
.ck-tool-group-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
}
.ck-tool-group-head__wrench {
	color: var(--foreground);
}
.ck-tool-group-count {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
/* The running tally colours with the group's status. */
.ck-tool-group-count__status {
	color: var(--foreground);
}
.ck-tool-group-count__status--success {
	color: var(--mkt-status-success);
}
.ck-tool-group-count__status--error {
	color: var(--mkt-status-error);
}
.ck-tool-group-body {
	border-top: 1px solid color-mix(in oklch, var(--muted) 80%, transparent);
	padding: 0.75rem;
	display: grid;
	row-gap: 0.5rem;
}

/* ======================================================= Approval modal */

.ck-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in oklch, var(--background) 60%, transparent);
	z-index: 20;
}
.ck-modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 21;
	width: min(30rem, calc(100% - 2rem));
	display: grid;
	row-gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	color: var(--card-foreground);
	box-shadow: var(--mkt-shadow-md);
}
.ck-modal__head {
	display: grid;
	row-gap: 0.35rem;
}
.ck-modal__title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--mkt-text-lg);
	font-weight: var(--mkt-weight-semibold);
}
.ck-modal__title .ck-i {
	--ck-i: 1.25rem;
	color: var(--mkt-status-warning);
}
.ck-modal__desc {
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}
/* Origin line (sub-agent / cross-chat attribution) with a hue dot. */
.ck-modal__origin {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}
.ck-modal__origin-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--ck-hue, var(--mkt-status-running));
}
.ck-modal__section {
	display: grid;
	row-gap: 0.35rem;
}
.ck-modal__label {
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	color: var(--muted-foreground);
}
.ck-modal__value {
	padding: 0.5rem;
	border-radius: var(--radius-md);
	background: var(--muted);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--foreground);
	word-break: break-all;
}
.ck-modal__args {
	margin: 0;
	max-height: 12rem;
	overflow: auto;
	padding: 0.5rem;
	border-radius: var(--radius-md);
	background: var(--muted);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--foreground);
	white-space: pre-wrap;
}
.ck-modal__foot {
	display: grid;
	row-gap: 0.75rem;
}
.ck-modal__hintrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.ck-modal__hint {
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ck-modal__pending {
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ck-modal__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* kbd chip — shared by modal + composer helper row. */
.ck-kbd {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	line-height: 1;
	padding: 0.15rem 0.35rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--muted);
	color: var(--foreground);
}

/* Buttons — one base, four variants. */
.ck-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	white-space: nowrap;
}
.ck-btn--primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.ck-btn--secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
	border-color: var(--secondary);
}
.ck-btn--destructive {
	background: var(--destructive);
	color: var(--primary-foreground);
	border-color: var(--destructive);
}
.ck-btn--sm {
	padding: 0.3rem 0.6rem;
	font-size: var(--text-xs);
}

/* ======================================================= Question form */

.ck-question {
	border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
	border-radius: var(--radius-xl);
	background: color-mix(in oklch, var(--primary) 5%, transparent);
	padding: 0.75rem;
	display: flex;
	gap: 0.75rem;
	/* Root the text colour so option labels/descriptions (which inherit) stay
	   correct even when the form sits in a locally forced-dark subtree. */
	color: var(--foreground);
}
.ck-question__icon {
	--ck-i: 1rem;
	margin-top: 0.15rem;
	color: var(--primary);
}
.ck-question__body {
	flex: 1;
	min-width: 0;
	display: grid;
	row-gap: 1rem;
}
.ck-question__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.ck-question__title {
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
}
.ck-question__count {
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ck-question__q {
	display: grid;
	row-gap: 0.5rem;
}
.ck-question__qlabel {
	justify-self: start;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--background);
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-medium);
}
.ck-question__qtext {
	font-size: var(--text-sm);
}
.ck-question__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}
.ck-option {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 3.75rem;
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--background);
	text-align: left;
}
.ck-option--other {
	border-style: dashed;
}
.ck-option--selected {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--primary-foreground);
}
.ck-option__label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
}
.ck-option__desc {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--text-xs);
	opacity: 0.8;
}
.ck-option__check {
	flex-shrink: 0;
	--ck-i: 1rem;
}
.ck-question__foot {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* ============================================================= Composer */

.ck-composer {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	min-height: 3rem;
	border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
	border-radius: 1.5rem;
	background: color-mix(in oklch, var(--muted) 70%, transparent);
	font-size: var(--text-sm);
}
/* Optional hue-tinted border (e.g. addressing a specific specialist). */
.ck-composer--accent {
	border-color: color-mix(in oklch, var(--ck-hue, var(--mkt-status-running)) 45%, var(--border));
}
.ck-composer-input {
	display: grid;
	grid-template-areas: 'stack';
	min-height: 1.4em;
	color: var(--muted-foreground);
}
.ck-composer-input > * {
	grid-area: stack;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Typed text sits at foreground; clip-reveal target for the typing beat. */
.ck-typed {
	color: var(--foreground);
}
/* Unconditional: a standalone .ck-reveal outside .ck-typed must clip too
 * (the --reveal:100% fallback keeps un-driven elements fully visible, so
 * static uses are unaffected; scoping this under .ck-typed silently
 * no-opped typeOn on standalone reveals). */
.ck-reveal {
	display: inline-block;
	clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
}
.ck-composer-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}
.ck-attach {
	--ck-i: 1rem;
	color: var(--muted-foreground);
}
.ck-composer-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
/* Working-state cluster: status ring, active-tool wrench+count, elapsed. */
.ck-composer-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.ck-composer-status__tools {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
}
/* Send: 2rem primary circle, up-arrow. */
.ck-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-foreground);
	flex-shrink: 0;
}
.ck-send .ck-i {
	--ck-i: 0.875rem;
}
/* Stop: 2rem transparent, 0.75rem destructive filled square. */
.ck-stop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: transparent;
	color: var(--mkt-status-error);
	flex-shrink: 0;
}
.ck-stop .ck-i {
	--ck-i: 0.75rem;
}
/* Helper line under the composer. */
.ck-composer-help {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}

/* ================================================================ Tasks */

.ck-tasks {
	overflow: hidden;
	border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
	border-radius: 1rem;
	background: color-mix(in oklch, var(--muted) 65%, transparent);
	box-shadow: var(--mkt-shadow-sm);
	backdrop-filter: blur(6px);
}
.ck-tasks-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	color: var(--muted-foreground);
}
.ck-tasks-head__chev {
	margin-left: auto;
	--ck-i: 1rem;
}
.ck-tasks-list {
	max-height: 14rem;
	overflow-y: auto;
	padding: 0.375rem 0.5rem;
	border-top: 1px solid color-mix(in oklch, var(--border) 35%, transparent);
	display: grid;
	row-gap: 0.1rem;
}
.ck-task {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 2rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--radius-lg);
}
.ck-task__icon {
	margin-top: 0.15rem;
	flex-shrink: 0;
}
.ck-task__icon--pending {
	color: var(--muted-foreground);
}
.ck-task__icon--running {
	color: var(--mkt-status-running);
}
.ck-task__icon--done {
	color: var(--mkt-status-success);
}
.ck-task__title {
	flex: 1;
	min-width: 0;
	font-size: var(--text-sm);
	line-height: 1.35;
	color: var(--foreground);
}
.ck-task--done .ck-task__title {
	color: var(--muted-foreground);
	text-decoration: line-through;
}
.ck-task__lock {
	--ck-i: 0.875rem;
	margin-top: 0.1rem;
	flex-shrink: 0;
	color: var(--mkt-status-warning);
}
.ck-owner {
	flex-shrink: 0;
	max-width: 6rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0.1rem 0.4rem;
	border-radius: var(--radius-md);
	background: color-mix(in oklch, var(--background) 60%, transparent);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}

/* ============================================================= Surface */

.ck-surface {
	grid-area: surface;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-left: 1px solid var(--border);
	background: var(--background);
}
.ck-surface-tabs {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem;
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
}
.ck-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-lg);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	white-space: nowrap;
}
.ck-tab .ck-i {
	--ck-i: 0.875rem;
}
.ck-tab--active {
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--mkt-shadow-sm);
	border: 1px solid var(--border);
}
.ck-surface-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0.75rem;
}
.ck-surface-card {
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	background: var(--card);
	padding: 0.75rem;
	font-size: var(--text-sm);
}

/* ---- Reduced motion: still the opt-in helpers off ------------------- */
@media (prefers-reduced-motion: reduce) {
	.ck-spinner--spin,
	.ck-glow--breathe {
		animation: none;
	}
	.ck-session,
	.ck-session__actions {
		transition: none;
	}
}