@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');
:root { --page: color-mix(in oklch, var(--assistant-bg, black) 84%, var(--status-highlight, white)); --text: var(--status-highlight, white); --muted: var(--status-fg, gray); --focus: var(--status-highlight, white); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The demo's monospace and scale; the input stays at least 16px to prevent iOS zoom. */
body { margin: 0; font: 15px/1.5 'IBM Plex Mono', ui-monospace, Menlo, monospace; background: var(--page); color: var(--text); overscroll-behavior-y: none; }
/* #app is the element main.tsx renders into, so the rows (tab strip, transcript,
   composer) are its direct flex children. The flex column must live here and not
   on body: a wrapper between the column and the rows makes them ordinary blocks,
   and then the transcript's flex/min-height/overflow rules do nothing and nothing
   scrolls at all. The app fills the viewport exactly and never scrolls as a whole:
   the tab bar and composer are fixed rows and only the transcript scrolls between. */
/* Height and offset come from utils/viewport.ts, which mirrors window.visualViewport
   because iOS Safari ignores interactive-widget=resizes-content and keeps the layout
   viewport (so 100dvh) at full height when the keyboard opens. 100dvh is the fallback
   before the first sync and where visualViewport is missing. position:fixed with an
   explicit top keeps the box glued to the visible area instead of the scrolled page. */
#app { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-height, 100dvh); overflow: hidden; display: flex; flex-direction: column; }
button { touch-action: manipulation; }

.SessionTabs > button, .PromptComposer-controls > button, .PromptComposer-input > textarea { font: inherit; padding: 8px; background: var(--info-bg, var(--page)); color: inherit; border: 1px solid var(--status-fg, var(--muted)); }
.SessionTabs > button, .PromptComposer-controls > button { cursor: pointer; }

.AuthGate {
	max-width: 36rem;
	margin: 15vh auto;
}
.AuthGate > form {
	display: flex;
	gap: .5rem;
}
.AuthGate > form > input {
	flex: 1;
}
.AuthGate > form > input, .AuthGate > form > button {
	background: var(--info-bg, var(--page));
	border: 1px solid var(--status-fg, var(--muted));
	border-radius: .25rem;
	color: inherit;
	padding: .6rem;
	font-size: 15px;
}
.AuthGate > form > button { cursor: pointer; }

/* Numbered shortcuts get the full width above the smaller current-session name.
   Only buttons that fit are mounted, so hidden sessions cannot steal focus. */
.SessionTabs {
	flex: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 8px;
	padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));
	background: var(--page);
}
.SessionTabs > .SessionTabs-title { grid-row: 2; min-width: 0; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tab-activeFg, var(--text)); font-size: 15px; }
.SessionTabs > .SessionTabs-rail { grid-row: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 32px; overflow: hidden; }
.SessionTabs-rail > button { flex: none; width: 44px; height: 28px; padding: 0; font: inherit; background: transparent; border: 0; color: var(--tab-activeFg, var(--text)); cursor: pointer; }
.SessionTabs-rail > a { flex: none; display: inline-flex; justify-content: center; align-items: center; gap: 2px; width: 56px; height: 28px; padding: 3px 2px; line-height: 1; text-align: center; text-decoration: none; background: transparent; border: 0; color: var(--tab-inactiveFg, var(--muted)); }
.SessionTabs-rail > a.selected { color: var(--tab-activeFg, var(--text)); font-weight: 600; }
.SessionTabs-rail > a.selected > .SessionTabs-number::before { content: '['; }
.SessionTabs-rail > a.selected > .SessionTabs-number::after { content: ']'; }
.SessionTabs-rail > :is(button, a):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.SessionTabs-activity { display: inline-flex; align-items: center; gap: 2px; }
.SessionTabs-activity:empty { display: none; }
.SessionTabs-marker { line-height: 1; }
.SessionTabs-marker.running { color: var(--assistant-cursor, var(--assistant-fg, var(--text))); }
.SessionTabs-marker.background { color: var(--tab-activeFg, var(--text)); }
.SessionTabs-marker.attention { color: var(--tab-warningFg, var(--text)); }
.SessionTabs-marker.error { color: var(--tab-errorFg, var(--text)); }
.SessionTabs-marker.animated { animation: SessionTabs-pulse 1.2s ease-in-out infinite; }
@keyframes SessionTabs-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .SessionTabs-marker.animated { animation: none; } }
.SessionTabs-close { color: var(--muted); padding: 0 2px; }
.SessionTabs-number { font-variant-numeric: tabular-nums; }

/* Phones only: the on-screen keyboard steals most of the viewport. A narrow
   desktop window keeps the normal row layout when the prompt gains focus. */
@media (max-width: 48em) and (pointer: coarse) {
	/* Short drafts leave room to read; long drafts shrink the transcript first.
	   Keep the existing scroll regions, not a duplicate conversation preview. */
	#app:has(> .PromptComposer .PromptComposer-input > textarea:focus) > .Transcript { min-height: min(64px, 15%); }
	#app:has(> .PromptComposer .PromptComposer-input > textarea:focus) > .PromptComposer {
		flex: 0 1 auto;
		min-height: 0;
		width: 100%;
		flex-direction: column;
		flex-wrap: nowrap;
		/* visualViewport already ends above the keyboard/accessory bar. The home
		   indicator inset must not reserve another empty strip inside that box. */
		padding-bottom: 8px;
	}
	#app:has(> .PromptComposer .PromptComposer-input > textarea:focus) > .PromptComposer > .PromptComposer-status { flex: none; }
	#app:has(> .PromptComposer .PromptComposer-input > textarea:focus) > .PromptComposer > .PromptComposer-input {
		flex: 1 1 auto;
		width: 100%;
		min-height: 44px;
		max-height: none;
	}
	#app:has(> .PromptComposer .PromptComposer-input > textarea:focus) > .PromptComposer > .PromptComposer-input > textarea { min-height: 44px; max-height: none; }
	#app:has(> .PromptComposer .PromptComposer-input > textarea:focus) > .PromptComposer > .PromptComposer-controls { flex: none; justify-content: flex-end; }
}
/* Sessions scroll independently so occasional actions remain within reach. */
.SessionTabs-sheet {
	position: fixed;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border: 0;
	color: inherit;
	background: transparent;
	padding: calc(24px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
}
.SessionTabs-sheet[open] { display: flex; align-items: flex-start; justify-content: center; }
.SessionTabs-sheet::backdrop { background: rgb(0 0 0 / .6); }
.SessionTabs-sheet > .SessionTabs-panel {
	width: min(100%, 32rem);
	max-height: min(100%, 80dvh);
	display: flex;
	flex-direction: column;
	padding: 8px;
	background: var(--info-bg, var(--page));
	border: 1px solid var(--status-fg, var(--muted));
	border-radius: 12px;
}
.SessionTabs-panelHeading { flex: none; display: flex; align-items: center; justify-content: space-between; padding-left: 8px; }
.SessionTabs-panelHeading > button { min-width: 44px; min-height: 44px; }
.SessionTabs-filters { flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.SessionTabs-search { flex: 1 1 150px; min-height: 44px; padding: 8px; font: inherit; color: var(--text); background: var(--page); border: 1px solid var(--status-fg, var(--muted)); border-radius: 6px; }
.SessionTabs-sort { flex: none; display: flex; gap: 6px; align-items: center; color: var(--muted); }
.SessionTabs-sort > select { min-height: 44px; padding: 8px; font: inherit; color: var(--text); background: var(--page); border: 1px solid var(--status-fg, var(--muted)); border-radius: 6px; }
.SessionTabs-search:focus-visible, .SessionTabs-sort > select:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.SessionTabs-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.SessionTabs-list > div {
	display: flex;
	min-height: 48px;
	margin-bottom: 6px;
	background: var(--page);
	border: 1px solid var(--status-fg, var(--muted));
	border-radius: 8px;
	overflow: hidden;
}
.SessionTabs-list > div[hidden] { display: none; }
.SessionTabs-list > div.selected { background: var(--user-bg, var(--page)); border-color: var(--user-fg, var(--text)); }
.SessionTabs-panel button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
.SessionTabs-list > div > .SessionTabs-open { flex: 1; min-width: 0; padding: 8px 12px; text-align: left; overflow-wrap: anywhere; text-decoration: none; color: inherit; }
.SessionTabs-open > .SessionTabs-number { color: var(--tab-activeFg, var(--text)); margin-right: 6px; }
.SessionTabs-open > small { display: block; color: var(--muted); font-size: inherit; margin-top: 4px; }
/* Show the project for a useful session list; truncate deep paths rather than shrinking the close target. */
.SessionTabs-open > .SessionTabs-cwd { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.SessionTabs-list > div > .SessionTabs-close { flex: none; width: 48px; color: var(--error-fg, var(--text)); border-left: 1px solid var(--status-fg, var(--muted)); }
.SessionTabs-list > div.selected > .SessionTabs-close { border-color: var(--user-fg, var(--text)); }
.SessionTabs-actions { flex: none; border-top: 1px solid var(--status-fg, var(--muted)); padding: 12px 8px 4px; }
.SessionTabs-actions > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.SessionTabs-actions button { min-height: 44px; padding: 8px 12px; background: var(--page); border: 1px solid var(--status-fg, var(--muted)); border-radius: 8px; }
.SessionTabs-panel button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The only scrolling region. min-height:0 lets a flex child shrink below its
   content height, which is what allows it to scroll instead of pushing the
   composer off-screen. */
.Transcript {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	width: 100%;
	padding: 16px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.Transcript small { font-size: inherit; }
/* The transcript owns Hal's cursor; the composer keeps its native editing caret. */
.Transcript-cursor { min-height: 2lh; padding: 6px 0; color: var(--assistant-cursorIdle, var(--assistant-fg, var(--text))); }
.Transcript-cursor.thinking { color: var(--thinking-fg, var(--muted)); }
.Transcript-cursor > span { display: block; width: 1ch; height: 1lh; background: currentColor; animation: Transcript-blink 1s steps(1, end) infinite; }
.Transcript-cursor.inline { display: inline-flex; vertical-align: -.12em; min-height: 0; padding: 0; margin-left: .2ch; }
.Transcript-cursor.inline:not(.thinking) { color: var(--assistant-cursor, var(--assistant-fg, var(--text))); }
/* The markdown renderer emits prose as text in its wrapper, so collapse that wrapper
   while streaming. Block markdown keeps its own row and leaves the cursor below it. */
.TranscriptItem.streaming .TranscriptItem-content > div:not(:has(> :is(pre, table))) { display: contents; }
@keyframes Transcript-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .Transcript-cursor > span { animation: none; } }
/* Colored rails are the demo's visual identity; history remains fully readable by default. */
.TranscriptItem { margin: 0 0 10px; padding: 13px; background: var(--assistant-bg, black); color: var(--assistant-fg, var(--text)); border-left: 3px solid var(--assistant-fg, var(--text)); }
.TranscriptItem.user { background: var(--user-bg, var(--page)); color: var(--user-fg, var(--text)); border-left-color: var(--user-fg, var(--text)); }
.TranscriptItem.thinking { background: var(--thinking-bg, var(--assistant-bg, black)); color: var(--thinking-fg, var(--muted)); border-left-color: var(--thinking-fg, var(--muted)); }
.TranscriptItem.log { background: var(--page); color: var(--log-fg, var(--muted)); border-left-color: var(--log-fg, var(--muted)); }
.TranscriptItem.info { background: var(--info-bg, var(--page)); color: var(--info-fg, var(--text)); border-left-color: var(--info-fg, var(--text)); }
.TranscriptItem.warning { background: var(--warning-bg, var(--page)); color: var(--warning-fg, var(--text)); border-left-color: var(--warning-fg, var(--text)); }
.TranscriptItem.error { background: var(--error-bg, var(--page)); color: var(--error-fg, var(--text)); border-left-color: var(--error-fg, var(--text)); }
.TranscriptItem.fork { background: var(--fork-bg, var(--page)); color: var(--fork-fg, var(--text)); border-left-color: var(--fork-fg, var(--text)); }
.TranscriptItem.target, .QuestionBlock.target { outline: 1px solid var(--focus); outline-offset: 2px; }
.TranscriptItem > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.TranscriptItem > header > strong { min-width: 0; font-weight: 600; }
.TranscriptItem > header > .Transcript-blockLink { margin-left: auto; color: var(--muted); font-weight: 400; }
.Transcript-blockLink:hover { color: var(--focus); }
.Transcript-blockLink:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
.TranscriptItem .TranscriptItem-content, .TranscriptItem .TranscriptItem-part { display: contents; }
.TranscriptItem .TranscriptItem-interruption { color: var(--muted); }
.TranscriptItem-paste { margin-top: 9px; padding: 8px; background: var(--user-bg, var(--page)); border: 1px solid var(--user-fg, var(--text)); border-left: 3px solid var(--user-fg, var(--text)); color: var(--user-fg, var(--text)); }
.TranscriptItem-paste.target { outline: 2px solid var(--focus); outline-offset: 2px; }
.TranscriptItem-paste > summary { cursor: pointer; }
.TranscriptItem-paste > button { float: right; margin: 8px 0; color: inherit; background: var(--page); border: 1px solid var(--user-fg, var(--text)); cursor: pointer; }
.TranscriptItem-paste > pre { width: 100%; margin: 0; padding: 8px; clear: both; color: var(--user-fg, var(--text)); background: var(--page); border: 1px solid var(--user-fg, var(--text)); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.TranscriptItem-paste :is(summary, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Tool details stay inspectable; colors.ason supplies each tool's live palette. */
.ToolCard {
	--tool-fg: var(--info-fg, var(--text));
	--tool-bg: var(--info-bg, var(--page));
	position: relative;
	margin: 0 0 10px;
	padding: 13px;
	background: var(--tool-bg);
	border-left: 3px solid var(--tool-fg);
	color: var(--tool-fg);
	white-space: normal;
	cursor: pointer;
}
.ToolCard :is(pre, p) { cursor: text; }
.ToolCard.target { outline: 1px solid var(--focus); outline-offset: 2px; }
.ToolCard > details > summary { cursor: pointer; list-style: none; }
.ToolCard > details > summary::-webkit-details-marker { display: none; }
.ToolCard > details > summary > header { display: flex; align-items: baseline; gap: 8px; padding-right: 12ch; }
.ToolCard > details > summary > header::before { content: '▸'; }
.ToolCard > details[open] > summary > header::before { content: '▾'; }
.ToolCard > details > summary > header > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ToolCard > details > summary > header > span { flex: none; margin-left: auto; color: var(--muted); }
.ToolCard.running > details > summary > header > span { color: var(--tool-fg); }
.ToolCard > details > summary > p, .ToolCard > details > summary > small { display: block; margin: 8px 0 0; color: var(--text); }
.ToolCard > details pre { margin: 8px 0 0; color: inherit; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.ToolCard > details > summary > pre { max-height: 8.4em; overflow: hidden; }
.ToolCard > details[open] > summary > pre, .ToolCard > details[open] > summary > small { display: none; }
.ToolCard > details > summary > small { color: var(--muted); }
.ToolCard > details > summary:focus-visible, .ToolCard button:focus-visible, .ToolCard a:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
.ToolCard > .ToolCard-link { position: absolute; top: 13px; right: 13px; color: var(--muted); }
.ToolCard-section { margin-top: 10px; color: var(--text); }
.ToolCard-section > button { float: right; color: var(--text); background: transparent; border: 1px solid var(--muted); cursor: pointer; }
.ToolCard-section > pre { clear: both; }

/* Markdown is renderer-owned HTML from utils/markdown.ts; source text is
   escaped before these fixed tags are inserted. */
.Markdown { white-space: pre-wrap; }
.Markdown :is(b, i) { color: inherit; }
.Markdown code { padding: .1em .3em; background: var(--assistant-linkBg, var(--info-bg, var(--page))); border-radius: 3px; color: var(--assistant-code, var(--text)); }
.Markdown pre { margin: 7px 0; padding: 8px; background: var(--page); border: 1px solid var(--status-fg, var(--muted)); white-space: pre-wrap; overflow-wrap: anywhere; }
.Markdown pre > code { padding: 0; background: transparent; }
.Markdown a { color: var(--assistant-linkFg, var(--user-fg, var(--text))); text-decoration-color: currentColor; text-underline-offset: .18em; }
.TranscriptItem.user .Markdown :is(code, a) { color: var(--user-fg, var(--text)); }
.TranscriptItem.thinking .Markdown :is(code, a) { color: var(--thinking-code, var(--thinking-fg, var(--text))); }
.Markdown a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.Markdown table { width: 100%; margin: 7px 0; table-layout: fixed; border-collapse: collapse; white-space: normal; }
.Markdown th, .Markdown td { padding: 4px 6px; border: 1px solid var(--status-fg, var(--muted)); text-align: left; overflow-wrap: anywhere; }
.Markdown th { color: var(--text); background: var(--info-bg, var(--page)); }

/* A waiting question is an inline gate in the transcript, not a modal. The blue
   left rail is the one deliberate signature: it keeps approval in the timeline
   while making the single actionable row unmistakable. */
.QuestionBlock { margin: 10px 0; padding: 13px; background: var(--info-bg, var(--page)); border-left: 3px solid var(--info-fg, var(--text)); white-space: normal; }
.QuestionBlock.active { background: var(--user-bg, var(--page)); border-left-color: var(--user-fg, var(--text)); }
.QuestionBlock > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.QuestionBlock > header > span { flex: none; color: var(--user-fg, var(--text)); }
.QuestionBlock > details { margin-top: 8px; color: var(--muted); }
.QuestionBlock > details > summary { cursor: pointer; color: var(--user-fg, var(--text)); }
.QuestionBlock > details > pre { margin: 7px 0 0; padding: 8px; background: var(--page); border: 1px solid var(--status-fg, var(--muted)); white-space: pre-wrap; overflow-wrap: anywhere; }
.QuestionBlock > fieldset { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
.QuestionBlock > fieldset > legend { margin-bottom: 8px; color: var(--muted); }
.QuestionBlock > fieldset > button { min-height: 44px; padding: 8px 10px; font: inherit; text-align: left; color: inherit; background: var(--page); border: 1px solid var(--status-fg, var(--muted)); cursor: pointer; }
.QuestionBlock > fieldset > button:first-of-type { border-color: var(--user-fg, var(--text)); }
.QuestionBlock > fieldset > button > span { display: block; margin-top: 3px; color: var(--muted); }
.QuestionBlock > form { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 12px; }
.QuestionBlock > form > label { grid-column: 1 / -1; color: var(--muted); }
.QuestionBlock > form > textarea, .QuestionBlock > form > input { min-width: 0; padding: 9px; font: inherit; line-height: 1.4; color: inherit; background: var(--page); border: 1px solid var(--status-fg, var(--muted)); }
.QuestionBlock > form > textarea { grid-column: 1 / -1; resize: vertical; }
.QuestionBlock > form > button { min-width: 7rem; padding: 9px; font: inherit; color: var(--user-fg, var(--text)); background: var(--user-bg, var(--page)); border: 1px solid var(--user-fg, var(--text)); cursor: pointer; }
.QuestionBlock > form > small { align-self: center; color: var(--muted); }
.QuestionBlock > form > small.exceeded, .QuestionBlock-error { color: var(--error-fg, var(--text)); }
.QuestionBlock-answer { margin: 6px 0 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.QuestionBlock-error { margin: 8px 0 0; }
.QuestionBlock button:focus-visible, .QuestionBlock input:focus-visible, .QuestionBlock textarea:focus-visible, .QuestionBlock summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.QuestionBlock button:disabled, .QuestionBlock input:disabled, .QuestionBlock textarea:disabled { cursor: default; opacity: .55; }

.PromptComposer {
	flex: none;
	flex-wrap: wrap;
	width: 100%;
	display: flex;
	align-items: stretch;
	padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
	background: var(--page);
}
/* Execution context still truncates rather than pushing the action off a narrow screen. */
.PromptComposer > .PromptComposer-status { display: flex; flex: 1 0 100%; align-items: baseline; gap: 8px; min-width: 0; padding-bottom: 8px; color: var(--status-fg, var(--muted)); font-size: 12px; }
.PromptComposer-activity { flex: none; color: var(--assistant-cursorIdle, var(--status-fg, var(--muted))); }
.PromptComposer-activity.busy { color: var(--assistant-cursor, var(--assistant-fg, var(--text))); }
.PromptComposer-activity.warning { color: var(--warning-fg, var(--text)); }
.PromptComposer-status > .PromptComposer-location { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.PromptComposer-status > .PromptComposer-context { flex: none; color: var(--status-highlight, var(--text)); white-space: nowrap; }
.PromptComposer-status > .PromptComposer-draft-warning { flex: none; color: var(--error-fg, var(--text)); font-weight: 600; }
/* Native textarea scroll paint can escape its own border; the shell clips it
   before it reaches the status row without interfering with the text caret. */
.PromptComposer-input { flex: 1 1 420px; display: flex; flex-direction: column; min-width: 0; min-height: 44px; max-height: 168px; overflow: hidden; }
.PromptComposer-input > textarea {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	max-height: 168px;
	resize: none;
	line-height: 24px;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--user-fg, var(--text));
	background: var(--input-bg, var(--user-bg, var(--page)));
	border: 0;
	border-left: 3px solid var(--user-fg, var(--text));
	outline: none;
	caret-color: var(--input-cursor, var(--user-fg, var(--text)));
}
.PromptComposer-input > textarea::placeholder { color: var(--user-fg, var(--text)); opacity: .65; }
/* The same inset cyan edge marks typing and keyboard-focused actions. */
.PromptComposer-input > textarea:focus-visible, .PromptComposer-controls > button:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--user-fg, var(--text)); }
/* Native iOS decoration and the emoji line box must not enlarge the input row. */
.PromptComposer-input > textarea, .PromptComposer-controls > button { appearance: none; margin: 0; border-radius: 0; box-shadow: none; }
.PromptComposer > .PromptComposer-controls { display: flex; align-items: stretch; background: var(--input-bg, var(--user-bg, var(--page))); }
.PromptComposer-controls > button { min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-left: 1px solid var(--user-fg, var(--text)); background: transparent; color: var(--user-fg, var(--text)); line-height: 24px; font-weight: 600; }
.PromptComposer > .PromptComposer-help { flex: 1 0 100%; padding-top: 7px; color: var(--help-description, var(--muted)); font-size: 15px; }
.PromptComposer-help > b { color: var(--help-key, var(--text)); font-weight: 600; }
.PromptComposer.disabled { opacity: .55; }
.PromptComposer.disabled .PromptComposer-input > textarea { color: var(--muted); }

/* Status accounts stack instead of forcing a wide terminal table onto a phone.
   Reuse transcript colors/type; slim quota meters are the only visual accent. */
.UsageAccounts { white-space: normal; margin: 8px 0; color: var(--text); }
.UsageAccounts > article { padding: 10px 0; border-top: 1px solid var(--status-fg, var(--muted)); }
.UsageAccounts header { display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.UsageAccounts header > small { color: var(--muted); font-size: inherit; }
.UsageAccounts header > strong { color: var(--text); }
.UsageAccounts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 10px 0 0; }
.UsageAccounts dl > div { min-width: 0; }
.UsageAccounts dt { margin-bottom: 4px; font-weight: bold; }
.UsageAccounts dd { margin: 0; overflow-wrap: anywhere; line-height: 1.5; color: var(--muted); }
.UsageAccounts meter { display: block; width: 100%; height: 6px; margin: 5px 0; background: var(--info-bg, var(--page)); border: 0; border-radius: 2px; appearance: none; }
.UsageAccounts meter + br { display: none; }
.UsageAccounts meter::-webkit-meter-bar { background: var(--info-bg, var(--page)); border: 0; border-radius: 2px; }
.UsageAccounts meter::-webkit-meter-optimum-value { background: var(--user-fg, var(--text)); }
.UsageAccounts meter::-moz-meter-bar { background: var(--user-fg, var(--text)); }

.UsageAccounts dd > strong { display: block; color: var(--text); font-weight: 600; }
.UsageAccounts dd > small { display: block; font-size: inherit; }
@media (min-width: 700px) {
	.UsageAccounts > article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
	.UsageAccounts dl { margin: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Touch fields need 16px to avoid Safari's automatic input zoom. */
@media (pointer: coarse) {
	.SessionTabs > .SessionTabs-rail { height: 48px; }
	.SessionTabs-rail > a { height: 44px; }
	.SessionTabs-rail > button { height: 44px; }
	.PromptComposer-input > textarea { font-size: 16px; }
	.SessionTabs-search, .SessionTabs-sort > select, .AuthGate > form > input, .QuestionBlock > form > textarea, .QuestionBlock > form > input { font-size: 16px; }
	.PromptComposer-help { display: none; }
}