refactor: restyle message item via tokens

src/components/message-item.tsx

@@ -53,13 +53,21 @@ export default function MessageItem(props: MessageItemProps) {
   }
 
   return (
-    <div class={`message-item ${isUser() ? "user" : "assistant"}`}>
-      <div class="message-header">
-        <span class="message-sender">{isUser() ? "You" : "Assistant"}</span>
-        <span class="message-timestamp">{timestamp()}</span>
+    <div 
+      class={`message-item-base ${
+        isUser() 
+          ? "bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]" 
+          : "bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
+      }`}
+    >
+      <div class="flex justify-between items-center gap-3">
+        <span class="font-semibold text-sm text-[var(--text-muted)]">
+          {isUser() ? "You" : "Assistant"}
+        </span>
+        <span class="text-xs text-[var(--text-muted)]">{timestamp()}</span>
         <Show when={isUser() && props.onRevert}>
           <button
-            class="message-revert-button"
+            class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-2 py-0.5 rounded text-base leading-none transition-all duration-200 flex items-center justify-center min-w-7 h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
             onClick={handleRevert}
             title="Revert to this message"
             aria-label="Revert to this message"
@@ -69,7 +77,7 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
       </div>
 
-      <div class="message-content">
+      <div class="pt-1.5 leading-relaxed whitespace-pre-wrap break-words">
         <Show when={props.isQueued && isUser()}>
           <div class="message-queued-badge">QUEUED</div>
         </Show>