/* =================================================================
 * themes/nexus-lux/nexus-lux-canon.css
 * nexus-lux — the canon anatomy layer  (v1.3.0, 2026-10-20)
 *
 * HAND-WRITTEN, AND STAYS HAND-WRITTEN. The token file is generated
 * from DESIGN.md and may not carry hand additions (#503 law) — so the
 * component-level canon lives here: the chat anatomy, the floating
 * composer, the pastel veil class, and the mobile verse's non-token
 * parts. The token half of the canon (ground, translucent surfaces,
 * alpha outlines, radius scale, soft shadow ladder, sage) is in
 * DESIGN.md v1.3.0 and regenerates into nexus-lux.css.
 *
 * Every STRUCTURE rule is scoped under both registers — the structure
 * is theme-neutral, the tokens carry the color. The lux-only dress (the
 * pastel veil, the warm mobile hairline) stays lux-scoped; the umbra
 * dress is its own section (the night register's depth is by stroke:
 * dim outlines, never shadows — PRIME, 2026-10-22, sample board B+E).
 * Component selectors are specificity-doubled where they must beat the
 * components' own scoped styles (the #197/#203 lesson).
 *
 * Citations: the five-delta trial /ui-lab/lux-refinement (#178–#212),
 * ruled by PRIME 2026-10-20. Veil spectrum: the 2026-10-16 ruling as
 * re-voiced pastel blue-led in the same walk.
 *
 * THE LOGOMARK IS FIXED — NxLogoMark / NxHaloMark and the orb carry
 * no veil and no geometry change. Do not apply .nx-veil to them.
 * ================================================================= */

/* ── the chat anatomy ───────────────────────────────────────────────
   The person's turn: a compact translucent cream pill, right-aligned,
   no header bar — the pill IS the identity. The field's turn: ONE big
   translucent answer card with the identity chip inside, activity
   before it, follow-ups after (they render outside the bubble). */
[data-theme="nexus-lux"] .nx-bubble--user.nx-bubble--user,
[data-theme="nexus-umbra"] .nx-bubble--user.nx-bubble--user {
	margin-left: auto;
	width: fit-content;
	max-width: 78%;
	background: color-mix(in srgb, var(--nx-color-surface-person) 72%, transparent);
	border: 1px solid var(--nx-color-surface-person-border);
	border-radius: var(--nx-radius-xl);
	padding: var(--nx-space-3) var(--nx-space-6);
}
/* the user's header returned (PRIME, 2026-10-21): the trial hid it —
   "the pill IS the identity" — but the hairline-card verse gives every
   turn an outline, and the heading is what names the speaker. The
   shared identity-chip rule below draws the chip; the nameplate rule
   after it steps the user's to the person material. */
[data-theme="nexus-lux"] .nx-bubble--user .nx-bubble__content.nx-bubble__content,
[data-theme="nexus-umbra"] .nx-bubble--user .nx-bubble__content.nx-bubble__content {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

[data-theme="nexus-lux"] .nx-bubble--assistant.nx-bubble--assistant,
[data-theme="nexus-umbra"] .nx-bubble--assistant.nx-bubble--assistant {
	background: var(--nx-color-surface-1);
	border: 1px solid var(--nx-color-surface-border);
	border-radius: var(--nx-radius-xl);
	padding: var(--nx-space-4) var(--nx-space-6) var(--nx-space-6);
	box-shadow: var(--nx-shadow-sm);
	width: 100%;
}
[data-theme="nexus-lux"] .nx-bubble--assistant .nx-bubble__content.nx-bubble__content,
[data-theme="nexus-umbra"] .nx-bubble--assistant .nx-bubble__content.nx-bubble__content {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}
/* ── the wide-diagram containment (PRIME ruling, 2026-10-21) ────────
   The #693 breakout (.md-wide takes the thread width past the text
   column) was designed when assistant turns were invisible containers;
   the canon card gives every turn a visible edge, so the breakout reads
   as the drawing escaping the card — and the window edge beyond it.
   The card IS the drawing's room, in both registers (umbra's breakout
   retired 2026-10-22: its turns are visible cards now, and the spill
   reads wrong there too). The scoped selector (0,4,0) beats the
   vendored breakout (0,3,0) without doubling. */
[data-theme="nexus-lux"] .nx-diagram.md-diagram.md-wide,
[data-theme="nexus-umbra"] .nx-diagram.md-diagram.md-wide {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}
/* the identity header: a fully rounded translucent chip inside the card */
[data-theme="nexus-lux"] .nx-bubble-header.nx-bubble-header,
[data-theme="nexus-umbra"] .nx-bubble-header.nx-bubble-header {
	background: var(--nx-color-surface-2);
	border: none;
	border-radius: var(--nx-radius-md);
	padding: 6px 12px;
	margin-bottom: var(--nx-space-3);
}

/* the user's nameplate wears its card's material — at every width (PRIME,
   2026-10-21, ruled universal after landing mobile-only): one step of the
   person surface — sample 2, the first noticeable step, a whisper of depth
   under the name, subtle but visible; no border, the shade separates.
   Tone-on-tone with the warm card, never the amber (the stream's gold
   belongs to the field). The assistant's chip stays the neutral step. */
[data-theme="nexus-lux"] .nx-bubble--user .nx-bubble-header.nx-bubble-header,
[data-theme="nexus-umbra"] .nx-bubble--user .nx-bubble-header.nx-bubble-header {
	background: color-mix(in srgb, var(--nx-color-surface-person) 94%, var(--nx-color-text-muted));
}

/* ── the floating composer ──────────────────────────────────────────
   ONE card, the composer's own. The component has three layers: the
   sticky stage (.nx-input-bar — invisible, carries sticky + safe-area
   padding; it keeps its ground color so scrolled bubbles never show
   through the stage), the 880px column (invisible, the bubbles' own
   slot), and the composer card (.nx-input-bar__composer — already the
   translucent surface + alpha outline + amber focus ring). The canon
   card treatment lives HERE, on the card, never on the stage (the
   2026-10-20 correction: the first port dressed the stage and produced
   a card-around-a-card with a dead band beside it). The card spans the
   full column so its edges coincide with the answer cards' — the #178
   alignment intent, re-pointed at the card that now defines the column. */
[data-theme="nexus-lux"] .nx-input-bar__composer.nx-input-bar__composer,
[data-theme="nexus-umbra"] .nx-input-bar__composer.nx-input-bar__composer {
	max-width: none;
	width: 100%;
	border-radius: var(--nx-radius-xl);
	box-shadow: var(--nx-shadow-md);
}
/* focus keeps the amber ring AND the soft shadow (the component's own
   focus rule would otherwise replace the shadow with the ring alone) */
[data-theme="nexus-lux"] .nx-input-bar__composer.nx-input-bar__composer:focus-within,
[data-theme="nexus-umbra"] .nx-input-bar__composer.nx-input-bar__composer:focus-within {
	box-shadow: 0 0 0 3px var(--nx-color-primary-subtle), var(--nx-shadow-md);
}

/* ── the umbra dress (PRIME, 2026-10-22 — sample board B+E) ─────────
   Depth by stroke, never by shadow: shadows vanish on navy. The card's
   edge is a dim outline drawn from the border family; the person pill
   is a clearly lighter shade (surface-person #1e3355, via the token —
   DESIGN.md ruling). Gold stays out of the person container here
   exactly as on lux. */
[data-theme="nexus-umbra"] .nx-bubble--assistant.nx-bubble--assistant {
	border: 1px solid color-mix(in srgb, var(--nx-color-surface-border) 90%, transparent);
	box-shadow: none;
}
[data-theme="nexus-umbra"] .nx-input-bar__composer.nx-input-bar__composer {
	box-shadow: none;
	border-color: color-mix(in srgb, var(--nx-color-surface-border) 90%, transparent);
}
[data-theme="nexus-umbra"] .nx-input-bar__composer.nx-input-bar__composer:focus-within {
	box-shadow: 0 0 0 3px var(--nx-color-primary-subtle);
}

/* ── the pastel veil — an additive class for named surfaces ─────────
   Blue led and subtle, then pink, then green; every stop under 20%.
   Gold keeps none of the veil (it keeps every primary meaning — the
   orb, the buttons, the signals). THE LOGOMARK NEVER CARRIES IT. */
[data-theme="nexus-lux"] .nx-veil {
	position: relative;
	overflow: hidden;
}
[data-theme="nexus-lux"] .nx-veil::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(130% 150% at 18% 15%, rgba(127, 169, 222, 0.20) 0%, transparent 64%),
		radial-gradient(110% 130% at 82% 10%, rgba(232, 152, 191, 0.16) 0%, transparent 60%),
		radial-gradient(100% 120% at 55% 115%, rgba(130, 197, 160, 0.14) 0%, transparent 62%);
}
[data-theme="nexus-lux"] .nx-veil > * {
	position: relative;
}

/* ── the mobile verse — the same canon at phone width ───────────────
   Borders and shadows are paint and never took layout width; the
   width-eaters are paddings and margins, so those step down, while the
   paint quiets. The radius crown's phone step is the fluid token
   (DESIGN.md radius.xl, 20→24) — not repeated here. */
@media (max-width: 640px) {
	/* the hairline card verse (PRIME ruling, 2026-10-21 — option B):
	   every turn is an outlined object — 1px surface-border at 14% alpha,
	   rounded, no shadow — stacked 12px from the glass; the tint carries
	   identity; the InputBox stays drawn-not-filled. Desktop untouched. */
	[data-theme="nexus-lux"] .nx-message-list.nx-message-list,
[data-theme="nexus-umbra"] .nx-message-list.nx-message-list {
		padding-left: 12px;
		padding-right: 12px;
	}
	[data-theme="nexus-lux"] .nx-bubble--user.nx-bubble--user,
	[data-theme="nexus-lux"] .nx-bubble--assistant.nx-bubble--assistant,
	[data-theme="nexus-umbra"] .nx-bubble--user.nx-bubble--user,
	[data-theme="nexus-umbra"] .nx-bubble--assistant.nx-bubble--assistant {
		margin-left: 0;
		width: 100%;
		max-width: 100%;
		border: 1px solid rgba(148, 132, 100, 0.14);
		border-radius: var(--nx-radius-xl);
		box-shadow: none;
		padding: var(--nx-space-3);
	}
	[data-theme="nexus-lux"] .nx-input-bar.nx-input-bar,
[data-theme="nexus-umbra"] .nx-input-bar.nx-input-bar {
		padding-left: 12px;
		padding-right: 12px;
	}
	[data-theme="nexus-lux"] .nx-input-bar__composer.nx-input-bar__composer,
[data-theme="nexus-umbra"] .nx-input-bar__composer.nx-input-bar__composer {
		background-color: transparent;
		border-color: rgba(148, 132, 100, 0.14);
	}
	/* the composer card fills the column at phone width; the stage's own
	   padding (16px sides, env() safe-area below) is the edge contract —
	   no margins on the stage (2026-10-20 correction) */
	/* the paint quiets: shadows to their softest rungs, veil at half */
		[data-theme="nexus-lux"],
	[data-theme="nexus-umbra"] {
		--nx-shadow-md: 0 4px 14px oklch(0.15 0.012 80 / 0.05);
		--nx-shadow-lg: 0 8px 24px oklch(0.15 0.012 80 / 0.07);
	}
	[data-theme="nexus-lux"] .nx-veil::before {
		opacity: 0.55;
	}
	/* the hairline: lux's warm line is cream-tuned — umbra's is the dim
	   outline of its own border family (the cascade sits after the shared
	   rule, so border-color lands last) */
	[data-theme="nexus-umbra"] .nx-bubble--user.nx-bubble--user,
	[data-theme="nexus-umbra"] .nx-bubble--assistant.nx-bubble--assistant,
	[data-theme="nexus-umbra"] .nx-input-bar__composer.nx-input-bar__composer {
		border-color: color-mix(in srgb, var(--nx-color-surface-border) 90%, transparent);
	}
}