:root {
	--bg: #f6f4ef;
	--surface: #ffffff;
	--text: #1d1f23;
	--muted: #6b6f76;
	--line: #e3e0d8;
	--accent: #2f6b5a;
	--accent-text: #ffffff;
	--mine: #2f6b5a;
	--mine-text: #ffffff;
	--theirs: #ffffff;
	--chip: #ebe7dd;
	--error: #b3261e;
	--radius: 16px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14161a;
		--surface: #1d2025;
		--text: #e9e7e2;
		--muted: #9a9ea6;
		--line: #2c3036;
		--accent: #6fbf9f;
		--accent-text: #0f1512;
		--mine: #2f6b5a;
		--mine-text: #f2f5f3;
		--theirs: #1d2025;
		--chip: #2a2e34;
		--error: #f2b8b5;
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
	-webkit-text-size-adjust: 100%;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pad { padding: 0 16px; }
.error { color: var(--error); min-height: 1.2em; }

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

button {
	background: var(--accent);
	color: var(--accent-text);
	border: 0;
	border-radius: 12px;
	padding: 10px 16px;
	cursor: pointer;
}

button.ghost {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
}

button:disabled { opacity: 0.5; cursor: default; }

input, select, textarea {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 10px 12px;
	width: 100%;
}

.screen {
	min-height: 100%;
	display: grid;
	place-items: center;
	padding: 16px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin: 12px 16px;
}

.card h2 { margin: 0 0 8px; font-size: 16px; }

.login-card { width: min(380px, 100%); display: grid; gap: 12px; margin: 0; }
.login-card h1 { margin: 0; }

#app {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	max-width: 760px;
	margin: 0 auto;
}

.topbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
	border-bottom: 1px solid var(--line);
}

.topbar .title { font-weight: 650; letter-spacing: 0.2px; }

main { overflow: hidden; position: relative; }

.tab { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

#tab-talk { display: grid; grid-template-rows: 1fr auto; }
#tab-talk.hidden { display: none; }

.messages {
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.msg {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: var(--radius);
	white-space: pre-wrap;
	word-wrap: break-word;
}

.msg.user {
	align-self: flex-end;
	background: var(--mine);
	color: var(--mine-text);
	border-bottom-right-radius: 6px;
}

.msg.mentor {
	align-self: flex-start;
	background: var(--theirs);
	border: 1px solid var(--line);
	border-bottom-left-radius: 6px;
}

.msg.proactive { border-left: 3px solid var(--accent); }
.msg.highlight { outline: 2px solid var(--accent); }

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--muted);
	white-space: normal;
}

.chip {
	background: var(--chip);
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 12px;
}

.feedback { display: flex; gap: 6px; margin-top: 8px; white-space: normal; }
.feedback button { padding: 4px 10px; font-size: 12px; }
.feedback button.on { background: var(--accent); color: var(--accent-text); border-color: transparent; }

.remembered { align-self: flex-start; font-size: 12px; color: var(--muted); }

.typing { align-self: flex-start; color: var(--muted); font-size: 14px; }

.composer-wrap {
	border-top: 1px solid var(--line);
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
	display: grid;
	gap: 6px;
	background: var(--bg);
}

.small-btn { justify-self: start; padding: 6px 12px; font-size: 14px; }

.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { resize: none; max-height: 160px; line-height: 1.4; }
.composer button { border-radius: 50%; width: 44px; height: 44px; padding: 0; font-size: 20px; flex: none; }

.memory-form { display: grid; gap: 8px; grid-template-columns: 1fr; }

.memory-group h3 {
	margin: 18px 16px 6px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--muted);
}

.memory-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 6px 16px;
	padding: 10px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.memory-item .text { flex: 1; white-space: pre-wrap; }
.memory-item.done .text { text-decoration: line-through; color: var(--muted); }
.memory-item .actions { display: flex; gap: 4px; flex: none; }
.memory-item .actions button { padding: 4px 8px; font-size: 12px; }

.settings { display: grid; gap: 10px; }
.settings label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.settings label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.settings label.check input { width: auto; }

.row { display: flex; gap: 8px; }
.row.wrap { flex-wrap: wrap; }

code { background: var(--chip); border-radius: 6px; padding: 1px 5px; word-break: break-all; }

.tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--bg);
}

.tabs button {
	background: transparent;
	color: var(--muted);
	border-radius: 0;
	padding: 12px 0;
}

.tabs button.active { color: var(--accent); font-weight: 600; }

.grow { flex: 1; }
.pill { padding: 4px 10px; font-size: 13px; border-radius: 999px; }
.today { display: grid; gap: 6px; }
.today-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mic { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none; }
.mic.on { background: var(--accent); color: var(--accent-text); }

.indicator { display: grid; gap: 6px; margin: 12px 0 16px; }
.indicator-head { display: flex; gap: 8px; align-items: baseline; }
.indicator-head .behind { color: var(--error); }
.indicator-head .ok { color: var(--accent); }
.bar { position: relative; height: 8px; border-radius: 999px; background: var(--chip); overflow: visible; }
.bar .fill { height: 100%; border-radius: 999px; background: var(--accent); }
.bar .pace { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--muted); }
.indicator-form { display: grid; gap: 8px; margin-top: 10px; grid-template-columns: 1fr; }

@media (min-width: 900px) {
	.indicator-form { grid-template-columns: 1fr 120px 110px auto; }
	#app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
	.memory-form { grid-template-columns: 160px 1fr auto auto; }
}

.stack { display: grid; gap: 8px; }
.stack p, .stack ol { margin: 0; }
.stack ol { padding-left: 20px; display: grid; gap: 6px; }
.nudge { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--chip); border-radius: 12px; padding: 8px 10px; font-size: 14px; }
.nudge.hidden { display: none; }
.copy { display: flex; gap: 6px; align-items: center; }
.copy code { flex: 1; min-width: 0; }