Redesign SPA to look like a proper IRC client

- Tabs for channels, queries, and server window with unread indicators
- Persistent input line at bottom with IRC-style prompt [nick] #channel >
- Full IRC command support: /join /part /msg /me /nick /topic /mode /quit /help
- User list on right side with @ops, +voiced, and regular user prefixes
- Topic bar at top of channel windows
- Messages displayed inline: [HH:MM:SS] <nick> message (same line)
- /me actions rendered as: * nick does something
- IRC vocabulary: 'parted' not 'left', 'has changed the topic' not 'set topic'
- Input history with up/down arrow keys
- Parse RPL_NAMREPLY (353) for mode prefixes in user list
- Parse RPL_TOPIC (332) for topic updates from server
- CTCP ACTION support for /me command
- Dark theme with monospace font, classic IRC aesthetic

closes #50

web/dist/style.css

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

web/src/style.css

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