refactor: restyle message item via tokens

src/index.css

@@ -1,4 +1,5 @@
 @import './styles/tokens.css';
+@import './styles/components.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -88,25 +89,7 @@ body {
   color: inherit;
 }
 
-.message-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  width: 100%;
-  color: inherit;
-}
 
-.message-item.user {
-  background-color: var(--message-user-bg);
-  border-left: 4px solid var(--message-user-border);
-}
-
-.message-item.assistant {
-  background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
-}
 
 .tool-call-message {
   display: flex;
@@ -144,70 +127,7 @@ body {
   font-size: 13px;
 }
 
-.message-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
 
-.message-sender {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
-.message-timestamp {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.message-revert-button {
-  background: none;
-  border: 1px solid var(--border-base);
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 16px;
-  line-height: 1;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 24px;
-}
-
-.message-revert-button:hover {
-  background-color: var(--surface-hover);
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
-}
-
-.message-revert-button:active {
-  transform: scale(0.95);
-}
-
-.message-content {
-  padding-top: 6px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: inherit;
-}
-
-.message-queued-badge {
-  display: inline-block;
-  background-color: var(--accent-primary);
-  color: white;
-  font-weight: bold;
-  padding: 4px 12px;
-  border-radius: 4px;
-  margin-bottom: 12px;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-}
 
 .message-text {
   font-size: 14px;
@@ -224,11 +144,7 @@ body {
   border-radius: 4px;
 }
 
-.message-error {
-  color: var(--status-error);
-  font-size: 13px;
-  margin-top: 4px;
-}
+
 
 .message-error-part {
   color: var(--status-error);
@@ -242,41 +158,7 @@ body {
   background-color: rgba(244, 67, 54, 0.15);
 }
 
-.message-error-block {
-  color: var(--status-error);
-  font-size: 14px;
-  padding: 12px;
-  background-color: rgba(244, 67, 54, 0.1);
-  border-radius: 4px;
-  border-left: 3px solid var(--status-error);
-  margin: 8px 0;
-}
 
-[data-theme="dark"] .message-error-block {
-  background-color: rgba(244, 67, 54, 0.15);
-}
-
-.message-generating {
-  color: var(--text-muted);
-  font-size: 14px;
-  font-style: italic;
-  padding: 8px 0;
-}
-
-.generating-spinner {
-  display: inline-block;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
 
 .message-reasoning {
   margin: 8px 0;
@@ -784,12 +666,7 @@ body {
   color: inherit;
 }
 
-.message-sending {
-  color: var(--text-muted);
-  font-size: 13px;
-  font-style: italic;
-  margin-top: 4px;
-}
+
 
 .prose {
   color: var(--text-primary);