:root {
	color: #15120f;
	background: #f4efe7;
	font-family:
		Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-width: 320px;
	min-height: 100vh;
	background:
		radial-gradient(
			circle at 15% 10%,
			rgba(122, 79, 56, 0.18),
			transparent 24rem
		),
		linear-gradient(135deg, #f7f1e8 0%, #ece4da 100%);
}

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

button {
	border: 0;
	cursor: pointer;
}

button:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(122, 79, 56, 0.35);
	outline-offset: 2px;
}

#app {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.modal-shell {
	width: min(100%, 680px);
	display: grid;
	gap: 1rem;
	padding: 1.1rem;
	border: 1px solid rgba(21, 18, 15, 0.12);
	border-radius: 1.25rem;
	background: rgba(255, 252, 247, 0.9);
	box-shadow: 0 24px 80px rgba(54, 38, 26, 0.16);
}

.topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.title-group {
	display: grid;
	gap: 0.35rem;
}

.eyebrow,
h1,
h2,
p {
	margin: 0;
}

.eyebrow {
	color: #7a4f38;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

h1 {
	color: #15120f;
	font-size: clamp(1.9rem, 8vw, 3.4rem);
	line-height: 0.95;
	letter-spacing: -0.06em;
}

.subtitle,
.message,
.model-panel p {
	color: #665e55;
	line-height: 1.5;
}

.status-pill {
	flex: 0 0 auto;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	color: #145a3c;
	background: rgba(31, 143, 95, 0.13);
	font-size: 0.82rem;
	font-weight: 700;
}

.status-pill[data-state="recording"] {
	color: #8a241d;
	background: rgba(201, 62, 48, 0.14);
}

.editor-label {
	color: #312923;
	font-size: 0.86rem;
	font-weight: 700;
}

.transcript-editor {
	width: 100%;
	resize: vertical;
	min-height: 14rem;
	padding: 0.95rem;
	border: 1px solid rgba(21, 18, 15, 0.14);
	border-radius: 0.9rem;
	color: #15120f;
	background: #fffdfa;
	line-height: 1.55;
}

.message {
	min-height: 1.5rem;
	font-size: 0.92rem;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.primary-button,
.secondary-button,
.ghost-button {
	min-height: 2.5rem;
	padding: 0.65rem 0.9rem;
	border-radius: 0.8rem;
	font-weight: 750;
}

.primary-button {
	color: #fffaf5;
	background: #15120f;
}

.secondary-button {
	color: #15120f;
	background: #eadfd2;
}

.ghost-button {
	color: #6a4a36;
	background: transparent;
	border: 1px solid rgba(106, 74, 54, 0.22);
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

.model-panel {
	display: grid;
	gap: 0.55rem;
	padding: 0.85rem;
	border-radius: 0.9rem;
	background: rgba(234, 223, 210, 0.46);
}

.model-panel h2 {
	font-size: 0.95rem;
}

.model-status {
	font-weight: 700;
}

@media (max-width: 520px) {
	#app {
		padding: 0.5rem;
	}

	.modal-shell {
		border-radius: 1rem;
	}

	.topbar {
		display: grid;
	}

	.actions > button {
		flex: 1 1 100%;
	}
}