/**
 * Chat surface stylesheet — a manifest, not a monolith.
 * Each component's styles live beside its module in public/chat/. Import order
 * is the cascade: base first, responsive overrides last.
 */
@import "./theme.css";

@import "./chat/base.css";
@import "./chat/sidebar.css";
@import "./chat/docs-rail.css";
@import "./chat/brand.css";
@import "./chat/thread-rail.css";
@import "./chat/stage.css";
@import "./chat/scope-chip.css";
@import "./chat/header-undo.css";
@import "./chat/transcript.css";
@import "./chat/markdown.css";
@import "./chat/agent-trace-strip.css";
@import "./chat/composer.css";
@import "./chat/dictation.css";
@import "./chat/responsive.css";

/* ---------- Splash: the signed-out view of `/` ---------- */

/*
 * One question, one answer: what do I do here. Centred single column, one
 * primary action, no marketing furniture. Purpose copy is in the HTML (not
 * hidden behind boot) so OAuth reviewers can read the app name and job.
 */
/* Document-scrolling pages. chat/base.css pins html+body to the viewport with
   overflow:hidden for the app shell; every page that is a document rather than
   a shell has to opt back out, or its content below the fold is unreachable. */
html:has(#splash:not([hidden])),
html:has(#anonymous-funnel:not([hidden])),
html:has(body.anon-read-page),
body:has(#splash:not([hidden])),
body:has(#anonymous-funnel:not([hidden])),
body.anon-read-page,
body.is-signed-out {
	overflow: auto;
	height: auto;
	min-height: 100dvh;
}

.splash {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 1.5rem 1.5rem 2rem;
	background: var(--bg);
	color: var(--fg);
	text-align: center;
}

/* Marketing handoff: never flash splash while redeeming into the free lane.
   Id + class (+ attribute) beats .splash { display: grid } without !important. */
html[data-handoff-opening] #splash.splash,
#splash.splash[hidden] {
	display: none;
}

.splash[hidden] {
	/* biome-ignore lint/complexity/noImportantStyles: [hidden] must beat splash display:grid */
	display: none !important;
}

.splash__inner {
	width: 100%;
	max-width: 28rem;
}

/* Large enough for OAuth brand review and the consent-screen logo check. */
.splash__mark {
	display: block;
	width: min(12rem, 42vw);
	height: auto;
	margin: 0 auto 1.5rem;
	line-height: 0;
}

.splash__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.splash__title {
	margin: 0;
	font-size: clamp(2.1rem, 6vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.splash__spine {
	margin: 0.85rem 0 0;
	font-family: var(--read);
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--fg);
}

/* OAuth scope disclosure. It has to be present and readable, not prominent:
   at 0.92rem it competed with the product line above it. This is the size the
   same disclosure already uses on /login/. */
.splash__google {
	margin: 1.15rem auto 0;
	max-width: 30rem;
	color: var(--fg-muted);
	font-size: var(--t-xs);
	line-height: 1.5;
}

.splash__google a {
	color: var(--accent);
	word-break: break-all;
}

.splash__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.95rem;
	margin: 1.5rem 0 0;
	padding: 0 1.6rem;
	background: var(--accent);
	/* This class started on the splash's <a> CTAs, where a UA border and font
	   do not exist. It is now also on real <button>s in the anonymous funnel,
	   and without these four lines Chrome draws its default button border
	   around the pill and sets the label in 13px Arial. Every other control in
	   the funnel already resets itself; this one was the exception. */
	appearance: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	border-radius: 999px;
	color: var(--on-accent);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s var(--ease);
}

.splash__btn[hidden] {
	/* biome-ignore lint/complexity/noImportantStyles: [hidden] must beat splash__btn display:inline-flex */
	display: none !important;
}

/* One focus ring for the whole app. Without this, keyboard focus fell back to
   whatever the browser drew, which on a pill button is a mismatched rectangle. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.splash__btn:hover {
	background: var(--accent-strong);
}

.splash__arrow {
	transition: transform 0.2s var(--ease-out);
}

.splash__btn:hover .splash__arrow {
	transform: translateX(3px);
}

.splash__signin {
	margin: 1.1rem 0 0;
	color: var(--fg-muted);
	font-size: 0.9rem;
}

.splash__signin a {
	color: var(--accent);
}

/* Legal has to be reachable from the front door; kept quiet so it does not
   compete with the single primary action. */
.splash__legal {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	color: var(--fg-muted);
	font-size: 0.78rem;
}

.splash__legal a {
	color: inherit;
	text-decoration: none;
}

.splash__legal a:hover {
	color: var(--fg);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.splash__arrow {
		transition: none;
	}

	.splash__btn:hover .splash__arrow {
		transform: none;
	}
}

/* ---------- Anonymous funnel: full-screen stages (not under splash) ---------- */

.anon-funnel {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 1.5rem 1.5rem 2rem;
	background: var(--bg);
	color: var(--fg);
	text-align: left;
	animation: anon-funnel-in 0.55s var(--ease-out) both;
}

.anon-funnel[hidden] {
	/* biome-ignore lint/complexity/noImportantStyles: [hidden] must beat display:grid */
	display: none !important;
}

.anon-funnel__inner {
	width: 100%;
	max-width: 28rem;
}

.anon-funnel__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--fg-muted);
	font-size: var(--t-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.anon-funnel__headline {
	margin: 0 0 0.65rem;
	font-family: var(--display);
	font-size: clamp(1.45rem, 4vw, 1.85rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--fg);
}

.anon-funnel__body {
	margin: 0 0 1.1rem;
	color: var(--fg-muted);
	font-size: var(--t-sm);
	line-height: 1.45;
}

/*
  Two registers share this panel. The eyebrow, headline and body are standing
  frame — identical on every question. The prompt, help and options are the
  live ask. They were set the wrong way round: the instruction you read once
  was twice the size of the question you answer each time.

  The frame recedes, a hairline separates it, and the question becomes the
  largest thing on the screen. A rule rather than a card: the same hairline
  device the rest of the brand uses, and one less box.
*/
[data-panel="assessment"] .anon-funnel__headline {
	font-size: var(--t-base);
	font-weight: 500;
	color: var(--fg-muted);
	margin-bottom: 0.4rem;
}

[data-panel="assessment"] .anon-funnel__body {
	font-size: var(--t-xs);
	line-height: 1.5;
	margin-bottom: 1.4rem;
}

.anon-funnel__prompt {
	margin: 0 0 0.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--border);
	font-family: var(--display);
	font-size: clamp(1.2rem, 3.4vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--fg);
	line-height: 1.3;
	text-wrap: balance;
}

/* An accent tick on the rule: the question is where the page wants you, and
   this is the one place on the panel that carries colour. */
.anon-funnel__prompt::before {
	content: "";
	display: block;
	width: 1.6rem;
	height: 2px;
	background: var(--accent);
	margin: -1.4rem 0 1.4rem;
}

.anon-funnel__help {
	margin: 0 0 1.35rem;
	color: var(--fg-muted);
	font-size: var(--t-sm);
	line-height: 1.5;
}

.anon-funnel__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.anon-funnel__option {
	appearance: none;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	background: var(--bg-raised);
	color: var(--fg);
	font: inherit;
	font-size: var(--t-base);
	min-width: 5.5rem;
	min-height: 2.75rem;
	padding: 0.6rem 1.15rem;
	cursor: pointer;
	transition:
		border-color 0.18s var(--ease),
		color 0.18s var(--ease),
		background 0.18s var(--ease);
}

.anon-funnel__option:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-ring);
}

.anon-funnel__option:disabled {
	opacity: 0.55;
	cursor: default;
}

/*
  The free lane's chat.

  Embedded on the page rather than edge to edge: this is one panel of a funnel,
  not the signed-in stage. No thread rail either — an anonymous journey has a
  single conversation and nothing to pin. What it does share is the transcript
  itself, so a bubble here is the same object as a bubble in the real chat.
*/
.anon-chat {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	height: min(56vh, 26rem);
	margin-top: 0.35rem;
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	background: var(--bg-raised);
	overflow: hidden;
}

.anon-chat__transcript {
	overflow-y: auto;
	padding: 1rem 1rem 0.5rem;
	scrollbar-width: thin;
}

.anon-chat__empty {
	margin: 0;
	padding: 0 1rem 0.75rem;
	color: var(--fg-muted);
	font-size: var(--t-sm);
}

.anon-chat__composer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 0.6rem;
	align-items: end;
	padding: 0.75rem;
	border-top: 1px solid var(--border);
	background: var(--bg);
}

.anon-chat__composer .mic {
	margin-bottom: 0.15rem;
}

.anon-chat__dictation {
	margin: 0.35rem 0 0;
	min-height: 1.2em;
	color: var(--fg-muted);
	font-size: var(--t-sm);
}

.anon-chat__dictation.is-error {
	color: var(--danger, #b42318);
}

.anon-chat__input {
	width: 100%;
	resize: none;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	background: var(--bg-raised);
	color: var(--fg);
	font: inherit;
	font-size: var(--t-sm);
	line-height: 1.45;
	field-sizing: content;
	max-height: 8rem;
}

.anon-chat__input:focus {
	border-color: var(--accent);
	outline: none;
}

.anon-chat__send {
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	min-height: 2.5rem;
	padding: 0 1.15rem;
	cursor: pointer;
	transition: background 0.2s var(--ease);
}

.anon-chat__send:hover:not(:disabled) {
	background: var(--accent-strong);
}

.anon-chat__send:disabled {
	opacity: 0.55;
	cursor: default;
}

.anon-chat__leave {
	display: inline-flex;
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fg-muted);
	font: inherit;
	font-size: var(--t-xs);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.anon-chat__leave:hover {
	color: var(--fg);
}

.anon-chat__handoff {
	margin: 0.85rem 0 0;
	display: flex;
	justify-content: flex-end;
}

.anon-chat__handoff-btn {
	appearance: none;
	border: 0;
	border-radius: var(--radius-sm, 6px);
	background: var(--accent);
	color: var(--accent-fg, #fff);
	font: inherit;
	font-weight: 600;
	padding: 0.65rem 1rem;
	cursor: pointer;
}

.anon-chat__handoff-btn:hover {
	filter: brightness(1.05);
}

/* ---- Navigator Read capture (/read) — editorial layout ---- */

.anon-read-page {
	min-height: 100vh;
	margin: 0;
	background: var(--bg, #fafaf7);
	color: var(--fg, #111);
	font-family: var(--display);
	display: flex;
	flex-direction: column;
	/* A single warm bloom behind the masthead, so the page opens rather than
	   starting on a flat field. Fixed so it never scrolls into the footer. */
	background-image: radial-gradient(
		62rem 34rem at 8% -8%,
		var(--accent-soft),
		transparent 70%
	);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.read-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 68rem;
	width: 100%;
	margin: 0 auto;
	padding: 1.5rem 1.75rem 1.1rem;
	border-bottom: 1px solid var(--border);
}

.read-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
}

.read-brand__mark {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	display: block;
	box-shadow: var(--shadow-sm);
}

.read-brand__words {
	display: grid;
	line-height: 1.15;
}

.read-brand__name {
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.read-brand__by {
	font-size: var(--t-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.read-brand:hover .read-brand__name {
	color: var(--accent-strong);
}

.read-masthead__kicker {
	margin: 0;
	font-family: var(--mono);
	font-size: var(--t-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.anon-read {
	flex: 1;
	max-width: 68rem;
	width: 100%;
	margin: 0 auto;
	padding: 2.75rem 1.75rem 3.5rem;
}

.anon-read__status {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	line-height: 1.5;
	color: var(--fg-muted);
	font-size: var(--t-sm);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: 0 10px 10px 0;
}

.anon-read__status.is-error {
	color: var(--fg);
	border-left-color: var(--danger);
}

.anon-read__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 3rem;
	align-items: start;
}

/* read.js gates both panels with [hidden]; an author `display` would otherwise
   beat the UA rule and paint the capture form over a page that has no Read. */
.anon-read__grid[hidden],
.anon-read__empty[hidden],
.anon-read__form[hidden] {
	/* biome-ignore lint/complexity/noImportantStyles: [hidden] must beat display:grid */
	display: none !important;
}

@media (max-width: 860px) {
	.read-masthead,
	.anon-read {
		padding-inline: 1.25rem;
	}

	.anon-read {
		padding-top: 2rem;
	}

	.anon-read__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.anon-read__col--preview {
		order: -1;
	}
}

/* ---- Editorial headline block ---- */

.anon-read__eyebrow,
.anon-read__preview-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	color: var(--accent-strong);
	font-family: var(--mono);
	font-size: var(--t-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.anon-read__eyebrow::after,
.anon-read__preview-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

.anon-read__title {
	margin: 0 0 1rem;
	font-family: var(--read);
	font-weight: 400;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.anon-read__lead {
	margin: 0 0 1rem;
	max-width: 34em;
	line-height: 1.6;
	color: var(--fg-muted);
	font-size: var(--t-base);
}

.anon-read__lead--meta {
	font-size: var(--t-sm);
}

.anon-read__footnote {
	margin: 1.1rem 0 0;
	line-height: 1.5;
	color: var(--fg-muted);
	font-size: var(--t-xs);
}

.anon-read__click-consent {
	margin: 0;
	max-width: 36em;
	line-height: 1.45;
	color: var(--fg-muted);
	font-size: 7pt;
}

.anon-read__click-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* ---- Form card ---- */

.anon-read__form {
	display: grid;
	gap: 1.15rem;
	margin-top: 1.75rem;
	padding: 1.6rem;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
}

.anon-read__fields {
	display: grid;
	gap: 0.9rem;
}

.anon-read__label {
	display: grid;
	gap: 0.4rem;
	font-family: var(--mono);
	font-size: var(--t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.anon-read__label input {
	font-family: var(--display);
	font-size: var(--t-base);
	padding: 0.72rem 0.8rem;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--bg);
	color: var(--fg);
	transition:
		border-color 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.anon-read__label input::placeholder {
	color: var(--fg-placeholder);
}

/* The app's one focus ring (:focus-visible above) still draws; this only warms
   the border underneath it rather than replacing it with a second convention. */
.anon-read__label input:focus-visible {
	border-color: var(--accent);
}

.anon-read__options {
	display: grid;
	gap: 0.7rem;
	padding-top: 0.15rem;
}

.anon-read__consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: var(--t-sm);
	color: var(--fg-muted);
	line-height: 1.45;
	cursor: pointer;
}

.anon-read__consent input {
	margin-top: 0.2rem;
	accent-color: var(--accent);
	width: 1rem;
	height: 1rem;
	flex: none;
}

.anon-read__consent:hover {
	color: var(--fg);
}

.anon-read__turnstile:not([hidden]) {
	min-height: 1.5rem;
}

.anon-read__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
}

.anon-read__submit,
.anon-read__skip {
	appearance: none;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.anon-read__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.25rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	text-decoration: none;
	transition:
		transform 0.18s var(--ease-out),
		background 0.18s var(--ease),
		box-shadow 0.18s var(--ease);
}

.anon-read__submit:hover {
	background: var(--accent-strong);
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
}

.anon-read__submit:disabled {
	opacity: 0.55;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

.anon-read__arrow {
	transition: transform 0.18s var(--ease-out);
}

.anon-read__submit:hover .anon-read__arrow {
	transform: translateX(3px);
}

.anon-read__submit--link {
	margin-top: 0.6rem;
}

.anon-read__skip {
	background: transparent;
	color: var(--fg-muted);
	font-size: var(--t-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.anon-read__skip:hover {
	color: var(--fg);
}

/* ---- Preview: a table of contents, not a teaser ---- */

/* The empty state is the whole page when there is no Read, so it sits in the
   optical centre rather than clinging to the masthead above a field of nothing. */
/* Direct visit: there is no Read behind the page. One centred column — the
   house shape for a single-message state (cf. .anon-funnel) — with the text
   left-aligned so the lead paragraph still reads. No eyebrow: the masthead
   directly above it already says Navigator. */
.anon-read__empty {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: 1rem 2rem;
}

/* Centre the message in whatever height is left between masthead and footer,
   so a short panel reads as composed rather than stranded at the top. */
.anon-read:has(.anon-read__empty:not([hidden])) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Only the unreadable-Read error still pairs a status with the panel; keep it
   on the same column so it reads as one composition. */
.anon-read:has(.anon-read__empty:not([hidden])) .anon-read__status {
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
}

.anon-read__preview-card {
	position: sticky;
	top: 2rem;
	padding: 1.5rem;
	background: var(--bg-quiet);
	border: 1px solid var(--border);
	border-radius: 14px;
}

.anon-read__preview-eyebrow {
	color: var(--fg-muted);
}

.anon-read__preview-hint {
	margin: 0 0 1.1rem;
	line-height: 1.55;
	color: var(--fg-muted);
	font-size: var(--t-sm);
}

.anon-read__preview-frame {
	border: 1px solid var(--border);
	border-radius: 11px;
	padding: 0.35rem 1.1rem;
	background: var(--bg-raised);
	overflow: hidden;
}

.anon-read__preview {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: read-section;
	user-select: none;
	pointer-events: none;
}

.anon-read__skeleton-item {
	counter-increment: read-section;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--border);
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0.15rem 0.75rem;
}

.anon-read__skeleton-item::before {
	content: counter(read-section, decimal-leading-zero);
	grid-row: span 2;
	font-family: var(--mono);
	font-size: var(--t-label);
	color: var(--accent);
}

.anon-read__skeleton-item:last-child {
	border-bottom: 0;
}

.anon-read__skeleton-title {
	font-family: var(--read);
	font-size: var(--t-md);
	line-height: 1.3;
	color: var(--fg);
}

/* The blur is the product decision: structure is shown, prose is not. */
.anon-read__skeleton-bar {
	display: block;
	height: 0.5rem;
	width: 88%;
	border-radius: 999px;
	background: var(--border);
	opacity: 0.8;
	filter: blur(2px);
}

.anon-read__skeleton-item:nth-child(2n) .anon-read__skeleton-bar {
	width: 72%;
}

.anon-read__skeleton-item:nth-child(3n) .anon-read__skeleton-bar {
	width: 80%;
}

/* ---- Footer ---- */

.read-foot {
	max-width: 68rem;
	width: 100%;
	margin: 0 auto;
	padding: 1.25rem 1.75rem 2rem;
	border-top: 1px solid var(--border);
}

.read-foot__legal {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--t-xs);
	color: var(--fg-muted);
}

.read-foot__legal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

.read-foot__legal a:hover {
	color: var(--fg);
	border-bottom-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.anon-read__submit,
	.anon-read__arrow,
	.anon-read__label input {
		transition: none;
	}

	.anon-read__submit:hover {
		transform: none;
	}

	.anon-read__submit:hover .anon-read__arrow {
		transform: none;
	}
}

.anon-funnel__footnote {
	margin: 1.5rem 0 0;
	color: var(--fg-muted);
	font-size: var(--t-xs);
	line-height: 1.4;
}

.anon-funnel__form {
	display: grid;
	gap: 0.75rem;
}

.anon-funnel__label {
	display: grid;
	gap: 0.35rem;
	font-size: var(--t-xs);
	color: var(--fg-muted);
}

.anon-funnel__label input[type="email"] {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.35rem;
	background: var(--bg-raised);
	color: var(--fg);
	font: inherit;
}

.anon-funnel__consent {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	font-size: var(--t-xs);
	color: var(--fg-muted);
	line-height: 1.4;
}

.anon-funnel__consent input {
	margin-top: 0.2rem;
}

.anon-funnel__skip {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--fg-muted);
	font: inherit;
	font-size: var(--t-sm);
	text-align: left;
	padding: 0.35rem 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.anon-funnel__skip:hover {
	color: var(--fg);
}

@keyframes anon-funnel-in {
	from {
		opacity: 0;
		transform: translateY(0.4rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.anon-funnel {
		animation: none;
	}
}

/* Early-exit leave control styles live with .anon-chat__leave above.
   Capture is `/read` — no in-chat exit modal. */