diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
index 6cf7449..ae7a6ae 100644
--- a/src/components/ChatPanel.tsx
+++ b/src/components/ChatPanel.tsx
@@ -130,17 +130,25 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
     }
   };
 
-  const renderMessage = (msg: Message) => (
-    <div key={msg.id} className="text-sm">
-      <div className="flex items-center gap-1 text-xs text-[var(--muted)] mb-0.5">
-        <span>{AUTHOR_ICON[msg.author_type] || "👤"}</span>
-        <span className="font-medium">{msg.author_slug}</span>
-        <span>·</span>
-        <span>{new Date(msg.created_at).toLocaleString("ru-RU", { hour: "2-digit", minute: "2-digit" })}</span>
+  const renderMessage = (msg: Message) => {
+    const bgStyle =
+      msg.author_type === "system"
+        ? { backgroundColor: "rgba(161, 120, 0, 0.2)", borderRadius: 6, padding: "4px 8px" }
+        : msg.author_type === "agent"
+          ? { backgroundColor: "rgba(0, 120, 60, 0.2)", borderRadius: 6, padding: "4px 8px" }
+          : undefined;
+    return (
+      <div key={msg.id} className="text-sm" style={bgStyle}>
+        <div className="flex items-center gap-1 text-xs text-[var(--muted)] mb-0.5">
+          <span>{AUTHOR_ICON[msg.author_type] || "👤"}</span>
+          <span className="font-medium">{msg.author_slug}</span>
+          <span>·</span>
+          <span>{new Date(msg.created_at).toLocaleString("ru-RU", { hour: "2-digit", minute: "2-digit" })}</span>
+        </div>
+        <div className="ml-5 whitespace-pre-wrap">{msg.content}</div>
       </div>
-      <div className="ml-5 whitespace-pre-wrap">{msg.content}</div>
-    </div>
-  );
+    );
+  };
 
   if (fullscreen) {
     return (