:root {
	color-scheme: light dark;
	--bg: #f6f5f1;
	--panel: #ffffff;
	--ink: #161615;
	--quiet: #6b6a65;
	--line: #e3e1da;
	--soft: #efede7;
	--accent: #2456c9;
	--accent-ink: #ffffff;
	--user: #e8edf9;
	--danger: #b3261e;
	--radius: 14px;
	--font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #161615;
		--panel: #1f1f1d;
		--ink: #efeee9;
		--quiet: #a3a29b;
		--line: #33322f;
		--soft: #2a2927;
		--accent: #6f97ff;
		--accent-ink: #0d1530;
		--user: #24304f;
		--danger: #ff8a80;
	}
}

* {
	box-sizing: border-box;
}

/* Component display rules must not beat the hidden attribute. */
[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.5 var(--font);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.app {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	height: 100dvh;
}

/* Key gate */
.gate {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--bg);
}

.gate-card {
	display: grid;
	gap: 12px;
	justify-items: center;
	width: min(360px, 100%);
	text-align: center;
}

.gate-card h1 {
	margin: 4px 0 0;
	font-size: 22px;
}

.gate-card p {
	margin: 0;
	color: var(--quiet);
}

.gate-card input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--panel);
}

.gate-card button {
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 12px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
}

.gate-error {
	color: var(--danger) !important;
}

/* Sidebar */
.sidebar {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-right: 1px solid var(--line);
	background: var(--panel);
	padding-top: env(safe-area-inset-top);
}

.sidebar-head,
.chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 12px 0 16px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	font-weight: 650;
}

.icon-button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: transparent;
}

.icon-button:hover {
	background: var(--soft);
}

.threads {
	flex: 1;
	overflow-y: auto;
	padding: 4px 8px calc(12px + env(safe-area-inset-bottom));
}

.thread {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	text-align: left;
}

.thread:hover {
	background: var(--soft);
}

.thread[aria-current='true'] {
	background: var(--soft);
}

.thread-title {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.thread-meta {
	display: flex;
	gap: 6px;
	align-items: center;
	color: var(--quiet);
	font-size: 12.5px;
}

.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 1.2s ease-in-out infinite;
}

.threads-empty {
	padding: 16px 12px;
	color: var(--quiet);
}

/* Chat */
.chat {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding-top: env(safe-area-inset-top);
}

.chat-head {
	border-bottom: 1px solid var(--line);
}

.chat-head h2 {
	flex: 1;
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.back {
	display: none;
}

.status {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--quiet);
	font-size: 13px;
}

.status::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 1.2s ease-in-out infinite;
}

.messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px max(16px, calc((100% - 760px) / 2)) 24px;
	overscroll-behavior: contain;
}

.empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-top: 12vh;
	color: var(--quiet);
	text-align: center;
}

.empty p {
	margin: 0;
}

.suggestions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
}

.suggestions button {
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
	color: var(--ink);
	font-size: 13.5px;
}

.msg {
	margin: 0 0 18px;
}

.msg.user {
	display: flex;
	justify-content: flex-end;
}

.msg.user .bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: var(--radius) var(--radius) 4px var(--radius);
	background: var(--user);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.msg.assistant .text {
	overflow-wrap: anywhere;
}

.text > :first-child {
	margin-top: 0;
}

.text > :last-child {
	margin-bottom: 0;
}

.text p,
.text ul,
.text ol {
	margin: 0 0 10px;
}

.text table {
	display: block;
	overflow-x: auto;
	margin: 8px 0 12px;
	border-collapse: collapse;
	font-size: 13.5px;
}

.text th,
.text td {
	padding: 6px 10px;
	border: 1px solid var(--line);
	text-align: left;
	white-space: nowrap;
}

.text code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--soft);
	font: 13px var(--mono);
}

.text pre {
	overflow-x: auto;
	padding: 12px;
	border-radius: 10px;
	background: var(--soft);
}

.text pre code {
	padding: 0;
	background: none;
}

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

.tool {
	margin: 0 0 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	font-size: 13.5px;
}

.tool summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	list-style: none;
	cursor: pointer;
}

.tool summary::-webkit-details-marker {
	display: none;
}

.tool-name {
	flex: 1;
	font-family: var(--mono);
	font-size: 12.5px;
}

.tool-status {
	color: var(--quiet);
	font-size: 12px;
}

.tool-status.error {
	color: var(--danger);
}

.tool pre {
	max-height: 320px;
	margin: 0;
	padding: 10px 12px;
	overflow: auto;
	border-top: 1px solid var(--line);
	font: 12px/1.45 var(--mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.thinking {
	display: flex;
	gap: 5px;
	padding: 6px 0;
}

.thinking span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--quiet);
	animation: pulse 1.2s ease-in-out infinite;
}

.thinking span:nth-child(2) {
	animation-delay: 0.2s;
}

.thinking span:nth-child(3) {
	animation-delay: 0.4s;
}

.error-line {
	color: var(--danger);
	font-size: 13.5px;
}

/* Composer */
.composer {
	margin: 0 max(12px, calc((100% - 784px) / 2)) calc(12px + env(safe-area-inset-bottom));
	padding: 10px 10px 8px 14px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--panel);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.composer textarea {
	display: block;
	width: 100%;
	max-height: 40dvh;
	padding: 4px 0;
	border: 0;
	outline: 0;
	background: transparent;
	resize: none;
	font-size: 16px;
}

.composer-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.composer select {
	flex: 1;
	min-width: 0;
	max-width: 200px;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background: var(--soft);
	font-size: 13px;
}

.send {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
}

.send:disabled {
	opacity: 0.4;
}

.stop {
	margin-left: auto;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	font-size: 13px;
}

.stop:not([hidden]) + .send {
	margin-left: 0;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
}

/* Phone: one pane at a time */
@media (max-width: 760px) {
	.app {
		grid-template-columns: minmax(0, 1fr);
	}

	.app[data-view='list'] .chat,
	.app[data-view='chat'] .sidebar {
		display: none;
	}

	.back {
		display: grid;
		margin-left: -8px;
	}

	.chat-head {
		padding-left: 8px;
	}

	.thread {
		padding: 12px;
	}
}