refactor: split nats-chatroom into modules with profile, layout, and auth

Extract chat, profile, types, and user data into separate files.
Embed CSS via go:embed. Add a layout with nav, session-based profile
persistence, and a middleware guard that redirects to /profile when
no identity is set.

internal/examples/nats-chatroom/chat.css

@@ -0,0 +1,153 @@
+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);
+}