body { margin: 0; }

/* Layout navbar */
.app-nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 1rem;
	background: var(--pico-card-background-color);
	border-bottom: 1px solid var(--pico-muted-border-color);
}
.app-nav .brand {
	font-weight: 700;
	text-decoration: none;
	margin-right: auto;
}
.nav-links {
	display: flex;
	gap: 1rem;
}
.nav-links a {
	text-decoration: none;
	font-size: 0.875rem;
}

/* Chat page */
.chat-page {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 53px);
}
nav[role="tab-control"] ul li a[aria-current="page"] {
	background-color: var(--pico-primary-background);
	color: var(--pico-primary-inverse);
	border-bottom: 2px solid var(--pico-primary);
}
.chat-message { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
.avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--pico-muted-border-color);
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}
.avatar-lg {
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
}
.bubble { flex: 1; }
.bubble p { margin: 0; }
.chat-history {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
.chat-input {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--pico-background-color);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--pico-muted-border-color);
}
.chat-input fieldset {
	flex: 1;
	margin: 0;
}

/* NATS badge with status dot */
.nats-badge {
	background: #27AAE1;
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Profile page */
.profile-page {
	max-width: 480px;
	margin: 0 auto;
	padding: 2rem 1rem;
}
.profile-preview {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--pico-card-background-color);
	border-radius: 8px;
}
.preview-name {
	font-size: 1.125rem;
	font-weight: 600;
}
.profile-form label {
	display: block;
	margin-bottom: 0.5rem;
}
.emoji-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 0.25rem;
	margin-bottom: 1.5rem;
}
.emoji-option {
	padding: 0.375rem;
	font-size: 1.25rem;
	border: 2px solid transparent;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	text-align: center;
}
.emoji-option:hover {
	background: var(--pico-muted-border-color);
}
.emoji-selected {
	border-color: var(--pico-primary);
	background: var(--pico-primary-focus);
}
.profile-actions {
	display: flex;
	gap: 0.75rem;
}
.field-error {
	color: var(--pico-del-color);
}