feat(web): overhaul SPA to look like a proper IRC client

Major UI overhaul of the embedded web SPA to match traditional IRC client
look and feel:

Layout changes:
- Input bar now spans full width at bottom of window (below user list)
- Removed inline join dialog from tab bar (use /join command instead)
- Nick prefix shown in input bar (e.g. 'alice>')
- Topic bar shows 'Topic:' label with accent color

IRC command support:
- Added /me command (action messages via meta.action flag)
- Added /mode command for channel/user mode changes
- Added /quit command for clean disconnect
- Added /help command listing all available commands
- /part now accepts optional reason message

User list improvements:
- Parse 353 RPL_NAMREPLY to extract user mode prefixes
- Display @nick for ops, +nick for voiced, plain for regular users
- Sort users by mode rank: ops first, then voiced, then regular
- Ops shown in orange, voiced in green, regular in default color
- Extracted UserList into dedicated component

Message display:
- Messages displayed inline with nick on same line (IRC style)
- Action messages (/me) shown as '* nick does something' in purple
- System messages prefixed with '***'
- Uses IRC vocabulary: 'has parted' instead of 'has left'
- Parse 332 RPL_TOPIC for channel topic on join

UX improvements:
- Command history with up/down arrow keys (100 entries)
- Input always visible including on Server tab
- Dark theme with monospace font (JetBrains Mono/Fira Code)
- Hover highlight on messages
- Custom scrollbar styling
- Tab type-based styling (server tab bold)

closes #50

internal/handlers/api.go

@@ -28,18 +28,6 @@ const (
 	defaultHistLimit   = 50
 	maxHistLimit       = 500
 	cmdPrivmsg         = "PRIVMSG"
-
-	// IRC numeric reply codes per RFC 1459/2812.
-	ircErrNoSuchNick       = "401"
-	ircErrNoSuchChannel    = "403"
-	ircErrNoRecipient      = "411"
-	ircErrNoTextToSend     = "412"
-	ircErrUnknownCommand   = "421"
-	ircErrNoNicknameGiven  = "431"
-	ircErrErroneusNickname = "432"
-	ircErrNicknameInUse    = "433"
-	ircErrNotOnChannel     = "442"
-	ircErrNeedMoreParams   = "461"
 )
 
 func (hdlr *Handlers) maxBodySize() int64 {
@@ -75,43 +63,6 @@ func (hdlr *Handlers) authSession(
 	return sessionID, clientID, nick, nil
 }
 
-// serverName returns the configured server name or the
-// default "neoirc".
-func (hdlr *Handlers) serverName() string {
-	if hdlr.params.Config.ServerName != "" {
-		return hdlr.params.Config.ServerName
-	}
-
-	return "neoirc"
-}
-
-// respondIRCError sends an IRC numeric error reply as a
-// JSON response with HTTP 200 OK. This is used for errors
-// in IRC command processing (as opposed to HTTP transport
-// errors). The params slice contains IRC-style positional
-// parameters (e.g. the target nick or channel).
-func (hdlr *Handlers) respondIRCError(
-	writer http.ResponseWriter,
-	request *http.Request,
-	nick, numeric, msg string,
-	params ...string,
-) {
-	resp := map[string]any{
-		"command": numeric,
-		"from":    hdlr.serverName(),
-		"to":      nick,
-		"body":    []string{msg},
-	}
-
-	if len(params) > 0 {
-		resp["params"] = params
-	}
-
-	hdlr.respondJSON(
-		writer, request, resp, http.StatusOK,
-	)
-}
-
 func (hdlr *Handlers) requireAuth(
 	writer http.ResponseWriter,
 	request *http.Request,
@@ -275,7 +226,11 @@ func (hdlr *Handlers) deliverMOTD(
 	clientID, sessionID int64,
 ) {
 	motd := hdlr.params.Config.MOTD
-	serverName := hdlr.serverName()
+	serverName := hdlr.params.Config.ServerName
+
+	if serverName == "" {
+		serverName = "neoirc"
+	}
 
 	if motd == "" {
 		return
@@ -602,10 +557,10 @@ func (hdlr *Handlers) HandleSendCommand() http.HandlerFunc {
 		payload.To = strings.TrimSpace(payload.To)
 
 		if payload.Command == "" {
-			hdlr.respondIRCError(
+			hdlr.respondError(
 				writer, request,
-				nick, ircErrUnknownCommand,
+				"command required",
-				"No command given",
+				http.StatusBadRequest,
 			)
 
 			return
@@ -676,11 +631,10 @@ func (hdlr *Handlers) dispatchCommand(
 			},
 			http.StatusOK)
 	default:
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrUnknownCommand,
+			"unknown command: "+command,
-			command+" :Unknown command",
+			http.StatusBadRequest,
-			command,
 		)
 	}
 }
@@ -694,10 +648,10 @@ func (hdlr *Handlers) handlePrivmsg(
 	bodyLines func() []string,
 ) {
 	if target == "" {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoRecipient,
+			"to field required",
-			"No recipient given ("+command+")",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -705,10 +659,10 @@ func (hdlr *Handlers) handlePrivmsg(
 
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoTextToSend,
+			"body required",
-			"No text to send",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -740,11 +694,10 @@ func (hdlr *Handlers) handleChannelMsg(
 		request.Context(), target,
 	)
 	if err != nil {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoSuchChannel,
+			"channel not found",
-			"No such channel",
+			http.StatusNotFound,
-			target,
 		)
 
 		return
@@ -767,11 +720,10 @@ func (hdlr *Handlers) handleChannelMsg(
 	}
 
 	if !isMember {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNotOnChannel,
+			"not a member of this channel",
-			"You're not on that channel",
+			http.StatusForbidden,
-			target,
 		)
 
 		return
@@ -809,7 +761,7 @@ func (hdlr *Handlers) handleChannelMsg(
 
 	hdlr.respondJSON(writer, request,
 		map[string]string{"id": msgUUID, "status": "sent"},
-		http.StatusOK)
+		http.StatusCreated)
 }
 
 func (hdlr *Handlers) handleDirectMsg(
@@ -823,11 +775,10 @@ func (hdlr *Handlers) handleDirectMsg(
 		request.Context(), target,
 	)
 	if err != nil {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoSuchNick,
+			"user not found",
-			"No such nick/channel",
+			http.StatusNotFound,
-			target,
 		)
 
 		return
@@ -854,7 +805,7 @@ func (hdlr *Handlers) handleDirectMsg(
 
 	hdlr.respondJSON(writer, request,
 		map[string]string{"id": msgUUID, "status": "sent"},
-		http.StatusOK)
+		http.StatusCreated)
 }
 
 func (hdlr *Handlers) handleJoin(
@@ -864,11 +815,10 @@ func (hdlr *Handlers) handleJoin(
 	nick, target string,
 ) {
 	if target == "" {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNeedMoreParams,
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
-			"JOIN",
 		)
 
 		return
@@ -880,11 +830,10 @@ func (hdlr *Handlers) handleJoin(
 	}
 
 	if !validChannelRe.MatchString(channel) {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoSuchChannel,
+			"invalid channel name",
-			"No such channel",
+			http.StatusBadRequest,
-			channel,
 		)
 
 		return
@@ -946,11 +895,10 @@ func (hdlr *Handlers) handlePart(
 	body json.RawMessage,
 ) {
 	if target == "" {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNeedMoreParams,
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
-			"PART",
 		)
 
 		return
@@ -965,11 +913,10 @@ func (hdlr *Handlers) handlePart(
 		request.Context(), channel,
 	)
 	if err != nil {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoSuchChannel,
+			"channel not found",
-			"No such channel",
+			http.StatusNotFound,
-			channel,
 		)
 
 		return
@@ -1020,10 +967,10 @@ func (hdlr *Handlers) handleNick(
 ) {
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoNicknameGiven,
+			"body required (new nick)",
-			"No nickname given",
+			http.StatusBadRequest,
 		)
 
 		return
@@ -1032,11 +979,10 @@ func (hdlr *Handlers) handleNick(
 	newNick := strings.TrimSpace(lines[0])
 
 	if !validNickRe.MatchString(newNick) {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrErroneusNickname,
+			"invalid nick",
-			"Erroneous nickname",
+			http.StatusBadRequest,
-			newNick,
 		)
 
 		return
@@ -1057,11 +1003,10 @@ func (hdlr *Handlers) handleNick(
 	)
 	if err != nil {
 		if strings.Contains(err.Error(), "UNIQUE") {
-			hdlr.respondIRCError(
+			hdlr.respondError(
 				writer, request,
-				nick, ircErrNicknameInUse,
+				"nick already in use",
-				"Nickname is already in use",
+				http.StatusConflict,
-				newNick,
 			)
 
 			return
@@ -1148,11 +1093,10 @@ func (hdlr *Handlers) handleTopic(
 	bodyLines func() []string,
 ) {
 	if target == "" {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNeedMoreParams,
+			"to field required",
-			"Not enough parameters",
+			http.StatusBadRequest,
-			"TOPIC",
 		)
 
 		return
@@ -1160,11 +1104,10 @@ func (hdlr *Handlers) handleTopic(
 
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNeedMoreParams,
+			"body required (topic text)",
-			"Not enough parameters",
+			http.StatusBadRequest,
-			"TOPIC",
 		)
 
 		return
@@ -1197,11 +1140,10 @@ func (hdlr *Handlers) handleTopic(
 		request.Context(), channel,
 	)
 	if err != nil {
-		hdlr.respondIRCError(
+		hdlr.respondError(
 			writer, request,
-			nick, ircErrNoSuchChannel,
+			"channel not found",
-			"No such channel",
+			http.StatusNotFound,
-			channel,
 		)
 
 		return

internal/handlers/api_test.go

@@ -668,18 +668,11 @@ func TestJoinMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("joiner3")
 
-	status, result := tserver.sendCommand(
+	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: joinCmd},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "461" {
-		t.Fatalf(
-			"expected IRC 461, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -706,9 +699,9 @@ func TestChannelMessage(t *testing.T) {
 			bodyKey:    []string{"hello world"},
 		},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusCreated {
 		t.Fatalf(
-			"expected 200, got %d: %v", status, result,
+			"expected 201, got %d: %v", status, result,
 		)
 	}
 
@@ -735,18 +728,11 @@ func TestMessageMissingBody(t *testing.T) {
 		commandKey: joinCmd, toKey: "#test",
 	})
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd, toKey: "#test",
 	})
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "412" {
-		t.Fatalf(
-			"expected IRC 412, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -754,19 +740,12 @@ func TestMessageMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("noto")
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd,
 		bodyKey:    []string{"hello"},
 	})
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "411" {
-		t.Fatalf(
-			"expected IRC 411, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -781,7 +760,7 @@ func TestNonMemberCannotSend(t *testing.T) {
 	})
 
 	// Alice tries to send without joining.
-	status, result := tserver.sendCommand(
+	status, _ := tserver.sendCommand(
 		aliceToken,
 		map[string]any{
 			commandKey: privmsgCmd,
@@ -789,15 +768,8 @@ func TestNonMemberCannotSend(t *testing.T) {
 			bodyKey:    []string{"sneaky"},
 		},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusForbidden {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 403, got %d", status)
-	}
-
-	if result[commandKey] != "442" {
-		t.Fatalf(
-			"expected IRC 442, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -814,9 +786,9 @@ func TestDirectMessage(t *testing.T) {
 			bodyKey:    []string{"hey bob"},
 		},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusCreated {
 		t.Fatalf(
-			"expected 200, got %d: %v", status, result,
+			"expected 201, got %d: %v", status, result,
 		)
 	}
 
@@ -846,20 +818,13 @@ func TestDMToNonexistentUser(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("dmsender")
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd,
 		toKey:      "nobody",
 		bodyKey:    []string{"hello?"},
 	})
-	if status != http.StatusOK {
+	if status != http.StatusNotFound {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 404, got %d", status)
-	}
-
-	if result[commandKey] != "401" {
-		t.Fatalf(
-			"expected IRC 401, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -906,19 +871,12 @@ func TestNickCollision(t *testing.T) {
 
 	tserver.createSession("taken_nick")
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "NICK",
 		bodyKey:    []string{"taken_nick"},
 	})
-	if status != http.StatusOK {
+	if status != http.StatusConflict {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 409, got %d", status)
-	}
-
-	if result[commandKey] != "433" {
-		t.Fatalf(
-			"expected IRC 433, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -926,19 +884,12 @@ func TestNickInvalid(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("nickval")
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "NICK",
 		bodyKey:    []string{"bad nick!"},
 	})
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "432" {
-		t.Fatalf(
-			"expected IRC 432, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -946,18 +897,11 @@ func TestNickEmptyBody(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("nicknobody")
 
-	status, result := tserver.sendCommand(
+	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: "NICK"},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "431" {
-		t.Fatalf(
-			"expected IRC 431, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -994,19 +938,12 @@ func TestTopicMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("topicnoto")
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "TOPIC",
 		bodyKey:    []string{"topic"},
 	})
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "461" {
-		t.Fatalf(
-			"expected IRC 461, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -1018,18 +955,11 @@ func TestTopicMissingBody(t *testing.T) {
 		commandKey: joinCmd, toKey: "#topictest",
 	})
 
-	status, result := tserver.sendCommand(token, map[string]any{
+	status, _ := tserver.sendCommand(token, map[string]any{
 		commandKey: "TOPIC", toKey: "#topictest",
 	})
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "461" {
-		t.Fatalf(
-			"expected IRC 461, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -1097,18 +1027,11 @@ func TestUnknownCommand(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("cmdtest")
 
-	status, result := tserver.sendCommand(
+	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: "BOGUS"},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "421" {
-		t.Fatalf(
-			"expected IRC 421, got %v",
-			result[commandKey],
-		)
 	}
 }
 
@@ -1116,18 +1039,11 @@ func TestEmptyCommand(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("emptycmd")
 
-	status, result := tserver.sendCommand(
+	status, _ := tserver.sendCommand(
 		token, map[string]any{commandKey: ""},
 	)
-	if status != http.StatusOK {
+	if status != http.StatusBadRequest {
-		t.Fatalf("expected 200, got %d", status)
+		t.Fatalf("expected 400, got %d", status)
-	}
-
-	if result[commandKey] != "421" {
-		t.Fatalf(
-			"expected IRC 421, got %v",
-			result[commandKey],
-		)
 	}
 }
 

web/dist/style.css

@@ -6,282 +6,218 @@
 
 :root {
   --bg: #0a0e14;
-  --bg-panel: #0d1117;
+  --bg-secondary: #0d1117;
-  --bg-input: #0d1117;
+  --bg-input: #161b22;
-  --bg-tab: #161b22;
+  --bg-highlight: #1a2030;
-  --bg-tab-active: #0d1117;
-  --bg-topic: #0d1117;
   --text: #c9d1d9;
-  --text-dim: #6e7681;
+  --text-muted: #6e7681;
-  --text-bright: #e6edf3;
   --accent: #58a6ff;
   --accent-dim: #1f6feb;
   --border: #21262d;
-  --system: #7d8590;
+  --nick: #79c0ff;
-  --action: #d2a8ff;
-  --warn: #d29922;
-  --error: #f85149;
-  --unread: #f0883e;
-  --nick-brackets: #6e7681;
   --timestamp: #484f58;
-  --input-bg: #161b22;
+  --tab-active: #58a6ff;
-  --prompt: #3fb950;
+  --tab-bg: #0d1117;
-  --tab-indicator: #58a6ff;
+  --tab-hover: #161b22;
-  --user-list-bg: #0d1117;
+  --topic-bg: #0d1117;
-  --user-list-header: #484f58;
+  --unread-bg: #da3633;
+  --warn: #d29922;
+  --op-color: #f0883e;
+  --voice-color: #3fb950;
+  --action-color: #bc8cff;
+  --system-color: #484f58;
 }
 
 html,
 body,
 #root {
   height: 100%;
-  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono",
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
-    "Consolas", "Liberation Mono", "Courier New", monospace;
+    Courier, monospace;
   font-size: 13px;
   background: var(--bg);
   color: var(--text);
-  overflow: hidden;
 }
 
-/* ============================================
+/* Login screen */
-   Login Screen
-   ============================================ */
-
 .login-screen {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
-  background: var(--bg);
+  gap: 16px;
 }
 
-.login-box {
+.login-screen h1 {
-  text-align: center;
-  max-width: 360px;
-  width: 100%;
-  padding: 32px;
-}
-
-.login-box h1 {
   color: var(--accent);
-  font-size: 1.8em;
+  font-size: 2em;
-  margin-bottom: 16px;
-  font-weight: 400;
 }
 
-.login-box .motd {
+.login-screen input {
-  color: var(--text-dim);
+  padding: 10px 16px;
-  font-size: 12px;
+  font-size: 16px;
-  margin-bottom: 20px;
-  text-align: left;
-  white-space: pre-wrap;
   font-family: inherit;
-  border-left: 2px solid var(--border);
+  background: var(--bg-input);
-  padding-left: 12px;
-}
-
-.login-box form {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: stretch;
-}
-
-.login-box label {
-  color: var(--text-dim);
-  text-align: left;
-  font-size: 12px;
-}
-
-.login-box input {
-  padding: 8px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--input-bg);
   border: 1px solid var(--border);
-  color: var(--text-bright);
+  color: var(--text);
-  border-radius: 3px;
+  border-radius: 4px;
-  outline: none;
+  width: 280px;
 }
 
-.login-box input:focus {
+.login-screen button {
-  border-color: var(--accent-dim);
+  padding: 10px 24px;
-}
+  font-size: 16px;
-
-.login-box button {
-  padding: 8px 16px;
   font-family: inherit;
-  font-size: 14px;
   background: var(--accent-dim);
   border: none;
-  color: var(--text-bright);
+  color: white;
-  border-radius: 3px;
+  border-radius: 4px;
   cursor: pointer;
-  margin-top: 4px;
 }
 
-.login-box button:hover {
+.login-screen button:hover {
   background: var(--accent);
 }
 
-.login-box .error {
+.login-screen .error {
-  color: var(--error);
+  color: var(--unread-bg);
-  font-size: 12px;
-  margin-top: 8px;
 }
 
-/* ============================================
+.login-screen .motd {
-   IRC App Layout
+  color: var(--text-muted);
-   ============================================ */
+  max-width: 400px;
+  text-align: center;
+  white-space: pre-wrap;
+}
 
-.irc-app {
+/* Main layout */
+.app {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
 }
 
-/* ============================================
+/* Tab bar */
-   Tab Bar
-   ============================================ */
-
 .tab-bar {
   display: flex;
-  background: var(--bg-tab);
+  background: var(--bg-secondary);
   border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 32px;
-  align-items: stretch;
-}
-
-.tabs {
-  display: flex;
   overflow-x: auto;
-  flex: 1;
+  flex-shrink: 0;
-  scrollbar-width: none;
+  align-items: stretch;
+  min-height: 32px;
 }
 
-.tabs::-webkit-scrollbar {
+.tab-bar::-webkit-scrollbar {
-  display: none;
+  height: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--border);
 }
 
 .tab {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 6px 12px;
   cursor: pointer;
-  color: var(--text-dim);
+  border-bottom: 2px solid transparent;
   white-space: nowrap;
+  color: var(--text-muted);
   user-select: none;
-  border-right: 1px solid var(--border);
   font-size: 12px;
-  gap: 4px;
+  gap: 6px;
-  position: relative;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .tab:hover {
+  background: var(--tab-hover);
   color: var(--text);
-  background: rgba(255, 255, 255, 0.03);
 }
 
 .tab.active {
-  color: var(--text-bright);
+  color: var(--text);
-  background: var(--bg-tab-active);
+  border-bottom-color: var(--tab-active);
-  border-bottom: 2px solid var(--tab-indicator);
+  background: var(--bg-highlight);
-  margin-bottom: -1px;
 }
 
-.tab.has-unread .tab-label {
+.tab.server {
-  color: var(--unread);
   font-weight: bold;
 }
 
-.tab .unread-count {
+.tab .tab-name {
-  color: var(--unread);
+  overflow: hidden;
-  font-size: 11px;
+  text-overflow: ellipsis;
-  font-weight: bold;
 }
 
-.tab-close {
+.tab .close-btn {
-  color: var(--text-dim);
+  color: var(--text-muted);
   font-size: 14px;
   line-height: 1;
-  margin-left: 2px;
+  flex-shrink: 0;
 }
 
-.tab-close:hover {
+.tab .close-btn:hover {
-  color: var(--error);
+  color: var(--unread-bg);
 }
 
-.status-area {
+.tab .unread-badge {
+  display: inline-block;
+  background: var(--unread-bg);
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 0 5px;
+  border-radius: 8px;
+  min-width: 16px;
+  text-align: center;
+  line-height: 16px;
+  flex-shrink: 0;
+}
+
+/* Connection status */
+.connection-status {
   display: flex;
   align-items: center;
-  gap: 10px;
   padding: 0 12px;
-  flex-shrink: 0;
+  background: var(--warn);
-  font-size: 12px;
+  color: var(--bg);
-}
+  font-size: 11px;
-
-.status-nick {
-  color: var(--accent);
   font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.status-warn {
+/* Topic bar */
-  color: var(--warn);
-  animation: blink 1.5s ease-in-out infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* ============================================
-   Topic Bar
-   ============================================ */
-
 .topic-bar {
   padding: 4px 12px;
-  background: var(--bg-topic);
+  background: var(--topic-bg);
   border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 0;
-  line-height: 1.5;
 }
 
-.topic-label {
+.topic-bar .topic-label {
-  color: var(--text-dim);
+  color: var(--accent);
+  font-weight: bold;
 }
 
-.topic-text {
+/* Content area */
-  color: var(--text);
+.content {
-}
-
-/* ============================================
-   Main Content Area
-   ============================================ */
-
-.main-area {
   display: flex;
   flex: 1;
   overflow: hidden;
-  min-height: 0;
 }
 
-/* ============================================
+/* Messages */
-   Messages Panel
+.messages-pane {
-   ============================================ */
-
-.messages-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -289,178 +225,207 @@ body,
   min-width: 0;
 }
 
-.messages-scroll {
+.messages {
   flex: 1;
   overflow-y: auto;
-  padding: 4px 8px;
+  padding: 4px 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
 }
 
-.messages-scroll::-webkit-scrollbar {
+.messages::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
-.messages-scroll::-webkit-scrollbar-track {
+.messages::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-
-.messages-scroll::-webkit-scrollbar-thumb {
   background: var(--border);
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
-/* ============================================
-   Message Lines
-   ============================================ */
-
 .message {
-  padding: 1px 0;
+  padding: 1px 12px;
-  line-height: 1.4;
+  line-height: 1.5;
-  white-space: pre-wrap;
   word-wrap: break-word;
-  font-size: 13px;
+}
+
+.message:hover {
+  background: var(--bg-highlight);
 }
 
 .message .timestamp {
   color: var(--timestamp);
-  font-size: 12px;
+  font-size: 11px;
+  margin-right: 6px;
 }
 
 .message .nick {
   font-weight: bold;
+  margin-right: 6px;
 }
 
-.message .content {
+.message .nick::before {
+  content: '<';
+  color: var(--text-muted);
+}
+
+.message .nick::after {
+  content: '>';
+  color: var(--text-muted);
+}
+
+.message.system {
+  color: var(--system-color);
+  font-style: italic;
+}
+
+.message.system .timestamp {
+  color: var(--timestamp);
+}
+
+.message.system .content::before {
+  content: '*** ';
+}
+
+.message.action {
+  color: var(--action-color);
+}
+
+.message.action .timestamp {
+  color: var(--timestamp);
+}
+
+.message.action .action-nick {
+  font-weight: bold;
+}
+
+/* Input bar — full width at bottom */
+.input-bar {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.input-bar .input-nick {
+  padding: 0 8px 0 12px;
+  color: var(--accent);
+  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-size: 13px;
+}
+
+.input-bar .input-nick::after {
+  content: '>';
+  color: var(--text-muted);
+  margin-left: 1px;
+}
+
+.input-bar input {
+  flex: 1;
+  padding: 8px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  background: transparent;
+  border: none;
   color: var(--text);
+  outline: none;
 }
 
-/* System messages (joins, parts, quits, etc.) */
+.input-bar input::placeholder {
-.system-message {
+  color: var(--text-muted);
-  color: var(--system);
 }
 
-.system-message .system-text {
+/* User list */
-  color: var(--system);
-}
-
-/* /me action messages */
-.action-message .action-text {
-  color: var(--action);
-}
-
-/* ============================================
-   User List (Right Panel)
-   ============================================ */
-
 .user-list {
-  width: 160px;
+  width: 170px;
-  background: var(--user-list-bg);
+  background: var(--bg-secondary);
   border-left: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  overflow: hidden;
 }
 
 .user-list-header {
   padding: 6px 10px;
-  color: var(--user-list-header);
+  color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border-bottom: 1px solid var(--border);
+  font-weight: bold;
   flex-shrink: 0;
 }
 
 .user-list-entries {
   overflow-y: auto;
-  padding: 4px 0;
   flex: 1;
-  scrollbar-width: thin;
+  padding: 4px 0;
-  scrollbar-color: var(--border) transparent;
 }
 
-.nick-entry {
+.user-list-entries::-webkit-scrollbar {
+  width: 4px;
+}
+
+.user-list-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
+}
+
+.user-list .user {
   padding: 2px 10px;
   font-size: 12px;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.5;
+  color: var(--text);
 }
 
-.nick-entry:hover {
+.user-list .user:hover {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--tab-hover);
 }
 
-.nick-prefix {
+.user-list .user.op {
-  color: var(--text-dim);
+  color: var(--op-color);
-  display: inline-block;
-  width: 1ch;
-  text-align: right;
-  margin-right: 1px;
 }
 
-.nick-name {
+.user-list .user.voice {
-  font-weight: normal;
+  color: var(--voice-color);
 }
 
-/* ============================================
+/* Server tab messages */
-   Input Line (Bottom)
+.server-messages {
-   ============================================ */
+  color: var(--text-muted);
-
+  padding: 8px 12px;
-.input-line {
+  white-space: pre-wrap;
-  display: flex;
+  overflow-y: auto;
-  align-items: center;
-  background: var(--input-bg);
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 36px;
-  padding: 0 8px;
-  gap: 6px;
-}
-
-.input-prompt {
-  color: var(--prompt);
-  font-size: 13px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.input-line input {
   flex: 1;
-  padding: 4px 0;
-  font-family: inherit;
-  font-size: 13px;
-  background: transparent;
-  border: none;
-  color: var(--text-bright);
-  outline: none;
-  caret-color: var(--accent);
 }
 
-.input-line input::placeholder {
+.server-messages .message {
-  color: var(--text-dim);
+  padding: 1px 0;
-  font-style: italic;
 }
 
-/* ============================================
+.server-messages .message:hover {
-   Responsive
+  background: var(--bg-highlight);
-   ============================================ */
+}
 
+/* Responsive */
 @media (max-width: 600px) {
   .user-list {
     display: none;
   }
 
   .tab {
-    padding: 0 8px;
+    padding: 5px 8px;
     font-size: 11px;
   }
 
-  .input-prompt {
+  .input-bar .input-nick {
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .input-bar input {
     font-size: 12px;
   }
 }

web/src/style.css

@@ -6,282 +6,218 @@
 
 :root {
   --bg: #0a0e14;
-  --bg-panel: #0d1117;
+  --bg-secondary: #0d1117;
-  --bg-input: #0d1117;
+  --bg-input: #161b22;
-  --bg-tab: #161b22;
+  --bg-highlight: #1a2030;
-  --bg-tab-active: #0d1117;
-  --bg-topic: #0d1117;
   --text: #c9d1d9;
-  --text-dim: #6e7681;
+  --text-muted: #6e7681;
-  --text-bright: #e6edf3;
   --accent: #58a6ff;
   --accent-dim: #1f6feb;
   --border: #21262d;
-  --system: #7d8590;
+  --nick: #79c0ff;
-  --action: #d2a8ff;
-  --warn: #d29922;
-  --error: #f85149;
-  --unread: #f0883e;
-  --nick-brackets: #6e7681;
   --timestamp: #484f58;
-  --input-bg: #161b22;
+  --tab-active: #58a6ff;
-  --prompt: #3fb950;
+  --tab-bg: #0d1117;
-  --tab-indicator: #58a6ff;
+  --tab-hover: #161b22;
-  --user-list-bg: #0d1117;
+  --topic-bg: #0d1117;
-  --user-list-header: #484f58;
+  --unread-bg: #da3633;
+  --warn: #d29922;
+  --op-color: #f0883e;
+  --voice-color: #3fb950;
+  --action-color: #bc8cff;
+  --system-color: #484f58;
 }
 
 html,
 body,
 #root {
   height: 100%;
-  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono",
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
-    "Consolas", "Liberation Mono", "Courier New", monospace;
+    Courier, monospace;
   font-size: 13px;
   background: var(--bg);
   color: var(--text);
-  overflow: hidden;
 }
 
-/* ============================================
+/* Login screen */
-   Login Screen
-   ============================================ */
-
 .login-screen {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
-  background: var(--bg);
+  gap: 16px;
 }
 
-.login-box {
+.login-screen h1 {
-  text-align: center;
-  max-width: 360px;
-  width: 100%;
-  padding: 32px;
-}
-
-.login-box h1 {
   color: var(--accent);
-  font-size: 1.8em;
+  font-size: 2em;
-  margin-bottom: 16px;
-  font-weight: 400;
 }
 
-.login-box .motd {
+.login-screen input {
-  color: var(--text-dim);
+  padding: 10px 16px;
-  font-size: 12px;
+  font-size: 16px;
-  margin-bottom: 20px;
-  text-align: left;
-  white-space: pre-wrap;
   font-family: inherit;
-  border-left: 2px solid var(--border);
+  background: var(--bg-input);
-  padding-left: 12px;
-}
-
-.login-box form {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: stretch;
-}
-
-.login-box label {
-  color: var(--text-dim);
-  text-align: left;
-  font-size: 12px;
-}
-
-.login-box input {
-  padding: 8px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  background: var(--input-bg);
   border: 1px solid var(--border);
-  color: var(--text-bright);
+  color: var(--text);
-  border-radius: 3px;
+  border-radius: 4px;
-  outline: none;
+  width: 280px;
 }
 
-.login-box input:focus {
+.login-screen button {
-  border-color: var(--accent-dim);
+  padding: 10px 24px;
-}
+  font-size: 16px;
-
-.login-box button {
-  padding: 8px 16px;
   font-family: inherit;
-  font-size: 14px;
   background: var(--accent-dim);
   border: none;
-  color: var(--text-bright);
+  color: white;
-  border-radius: 3px;
+  border-radius: 4px;
   cursor: pointer;
-  margin-top: 4px;
 }
 
-.login-box button:hover {
+.login-screen button:hover {
   background: var(--accent);
 }
 
-.login-box .error {
+.login-screen .error {
-  color: var(--error);
+  color: var(--unread-bg);
-  font-size: 12px;
-  margin-top: 8px;
 }
 
-/* ============================================
+.login-screen .motd {
-   IRC App Layout
+  color: var(--text-muted);
-   ============================================ */
+  max-width: 400px;
+  text-align: center;
+  white-space: pre-wrap;
+}
 
-.irc-app {
+/* Main layout */
+.app {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
 }
 
-/* ============================================
+/* Tab bar */
-   Tab Bar
-   ============================================ */
-
 .tab-bar {
   display: flex;
-  background: var(--bg-tab);
+  background: var(--bg-secondary);
   border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 32px;
-  align-items: stretch;
-}
-
-.tabs {
-  display: flex;
   overflow-x: auto;
-  flex: 1;
+  flex-shrink: 0;
-  scrollbar-width: none;
+  align-items: stretch;
+  min-height: 32px;
 }
 
-.tabs::-webkit-scrollbar {
+.tab-bar::-webkit-scrollbar {
-  display: none;
+  height: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--border);
 }
 
 .tab {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 6px 12px;
   cursor: pointer;
-  color: var(--text-dim);
+  border-bottom: 2px solid transparent;
   white-space: nowrap;
+  color: var(--text-muted);
   user-select: none;
-  border-right: 1px solid var(--border);
   font-size: 12px;
-  gap: 4px;
+  gap: 6px;
-  position: relative;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .tab:hover {
+  background: var(--tab-hover);
   color: var(--text);
-  background: rgba(255, 255, 255, 0.03);
 }
 
 .tab.active {
-  color: var(--text-bright);
+  color: var(--text);
-  background: var(--bg-tab-active);
+  border-bottom-color: var(--tab-active);
-  border-bottom: 2px solid var(--tab-indicator);
+  background: var(--bg-highlight);
-  margin-bottom: -1px;
 }
 
-.tab.has-unread .tab-label {
+.tab.server {
-  color: var(--unread);
   font-weight: bold;
 }
 
-.tab .unread-count {
+.tab .tab-name {
-  color: var(--unread);
+  overflow: hidden;
-  font-size: 11px;
+  text-overflow: ellipsis;
-  font-weight: bold;
 }
 
-.tab-close {
+.tab .close-btn {
-  color: var(--text-dim);
+  color: var(--text-muted);
   font-size: 14px;
   line-height: 1;
-  margin-left: 2px;
+  flex-shrink: 0;
 }
 
-.tab-close:hover {
+.tab .close-btn:hover {
-  color: var(--error);
+  color: var(--unread-bg);
 }
 
-.status-area {
+.tab .unread-badge {
+  display: inline-block;
+  background: var(--unread-bg);
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 0 5px;
+  border-radius: 8px;
+  min-width: 16px;
+  text-align: center;
+  line-height: 16px;
+  flex-shrink: 0;
+}
+
+/* Connection status */
+.connection-status {
   display: flex;
   align-items: center;
-  gap: 10px;
   padding: 0 12px;
-  flex-shrink: 0;
+  background: var(--warn);
-  font-size: 12px;
+  color: var(--bg);
-}
+  font-size: 11px;
-
-.status-nick {
-  color: var(--accent);
   font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.status-warn {
+/* Topic bar */
-  color: var(--warn);
-  animation: blink 1.5s ease-in-out infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* ============================================
-   Topic Bar
-   ============================================ */
-
 .topic-bar {
   padding: 4px 12px;
-  background: var(--bg-topic);
+  background: var(--topic-bg);
   border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 0;
-  line-height: 1.5;
 }
 
-.topic-label {
+.topic-bar .topic-label {
-  color: var(--text-dim);
+  color: var(--accent);
+  font-weight: bold;
 }
 
-.topic-text {
+/* Content area */
-  color: var(--text);
+.content {
-}
-
-/* ============================================
-   Main Content Area
-   ============================================ */
-
-.main-area {
   display: flex;
   flex: 1;
   overflow: hidden;
-  min-height: 0;
 }
 
-/* ============================================
+/* Messages */
-   Messages Panel
+.messages-pane {
-   ============================================ */
-
-.messages-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -289,178 +225,207 @@ body,
   min-width: 0;
 }
 
-.messages-scroll {
+.messages {
   flex: 1;
   overflow-y: auto;
-  padding: 4px 8px;
+  padding: 4px 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
 }
 
-.messages-scroll::-webkit-scrollbar {
+.messages::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
-.messages-scroll::-webkit-scrollbar-track {
+.messages::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-
-.messages-scroll::-webkit-scrollbar-thumb {
   background: var(--border);
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
-/* ============================================
-   Message Lines
-   ============================================ */
-
 .message {
-  padding: 1px 0;
+  padding: 1px 12px;
-  line-height: 1.4;
+  line-height: 1.5;
-  white-space: pre-wrap;
   word-wrap: break-word;
-  font-size: 13px;
+}
+
+.message:hover {
+  background: var(--bg-highlight);
 }
 
 .message .timestamp {
   color: var(--timestamp);
-  font-size: 12px;
+  font-size: 11px;
+  margin-right: 6px;
 }
 
 .message .nick {
   font-weight: bold;
+  margin-right: 6px;
 }
 
-.message .content {
+.message .nick::before {
+  content: '<';
+  color: var(--text-muted);
+}
+
+.message .nick::after {
+  content: '>';
+  color: var(--text-muted);
+}
+
+.message.system {
+  color: var(--system-color);
+  font-style: italic;
+}
+
+.message.system .timestamp {
+  color: var(--timestamp);
+}
+
+.message.system .content::before {
+  content: '*** ';
+}
+
+.message.action {
+  color: var(--action-color);
+}
+
+.message.action .timestamp {
+  color: var(--timestamp);
+}
+
+.message.action .action-nick {
+  font-weight: bold;
+}
+
+/* Input bar — full width at bottom */
+.input-bar {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.input-bar .input-nick {
+  padding: 0 8px 0 12px;
+  color: var(--accent);
+  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-size: 13px;
+}
+
+.input-bar .input-nick::after {
+  content: '>';
+  color: var(--text-muted);
+  margin-left: 1px;
+}
+
+.input-bar input {
+  flex: 1;
+  padding: 8px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  background: transparent;
+  border: none;
   color: var(--text);
+  outline: none;
 }
 
-/* System messages (joins, parts, quits, etc.) */
+.input-bar input::placeholder {
-.system-message {
+  color: var(--text-muted);
-  color: var(--system);
 }
 
-.system-message .system-text {
+/* User list */
-  color: var(--system);
-}
-
-/* /me action messages */
-.action-message .action-text {
-  color: var(--action);
-}
-
-/* ============================================
-   User List (Right Panel)
-   ============================================ */
-
 .user-list {
-  width: 160px;
+  width: 170px;
-  background: var(--user-list-bg);
+  background: var(--bg-secondary);
   border-left: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  overflow: hidden;
 }
 
 .user-list-header {
   padding: 6px 10px;
-  color: var(--user-list-header);
+  color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border-bottom: 1px solid var(--border);
+  font-weight: bold;
   flex-shrink: 0;
 }
 
 .user-list-entries {
   overflow-y: auto;
-  padding: 4px 0;
   flex: 1;
-  scrollbar-width: thin;
+  padding: 4px 0;
-  scrollbar-color: var(--border) transparent;
 }
 
-.nick-entry {
+.user-list-entries::-webkit-scrollbar {
+  width: 4px;
+}
+
+.user-list-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
+}
+
+.user-list .user {
   padding: 2px 10px;
   font-size: 12px;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.5;
+  color: var(--text);
 }
 
-.nick-entry:hover {
+.user-list .user:hover {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--tab-hover);
 }
 
-.nick-prefix {
+.user-list .user.op {
-  color: var(--text-dim);
+  color: var(--op-color);
-  display: inline-block;
-  width: 1ch;
-  text-align: right;
-  margin-right: 1px;
 }
 
-.nick-name {
+.user-list .user.voice {
-  font-weight: normal;
+  color: var(--voice-color);
 }
 
-/* ============================================
+/* Server tab messages */
-   Input Line (Bottom)
+.server-messages {
-   ============================================ */
+  color: var(--text-muted);
-
+  padding: 8px 12px;
-.input-line {
+  white-space: pre-wrap;
-  display: flex;
+  overflow-y: auto;
-  align-items: center;
-  background: var(--input-bg);
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-  height: 36px;
-  padding: 0 8px;
-  gap: 6px;
-}
-
-.input-prompt {
-  color: var(--prompt);
-  font-size: 13px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.input-line input {
   flex: 1;
-  padding: 4px 0;
-  font-family: inherit;
-  font-size: 13px;
-  background: transparent;
-  border: none;
-  color: var(--text-bright);
-  outline: none;
-  caret-color: var(--accent);
 }
 
-.input-line input::placeholder {
+.server-messages .message {
-  color: var(--text-dim);
+  padding: 1px 0;
-  font-style: italic;
 }
 
-/* ============================================
+.server-messages .message:hover {
-   Responsive
+  background: var(--bg-highlight);
-   ============================================ */
+}
 
+/* Responsive */
 @media (max-width: 600px) {
   .user-list {
     display: none;
   }
 
   .tab {
-    padding: 0 8px;
+    padding: 5px 8px;
     font-size: 11px;
   }
 
-  .input-prompt {
+  .input-bar .input-nick {
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .input-bar input {
     font-size: 12px;
   }
 }