diff --git a/public/app.js b/public/app.js
index ac11d6b..bff08f3 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1558,7 +1558,8 @@
     } else if (currentAgent === 'codex') {
       avatar.innerHTML = `<svg viewBox="0 0 41 41" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"><path d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.012L6.044 23.86a7.504 7.504 0 0 1-1.747-10.24zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .114-.012l9.048 5.228a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.647-1.71zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v4.999l-4.331 2.5-4.331-2.5V18z"/></svg>`;
     } else {
-      avatar.textContent = '🦀';
+      // Pixel-style crab SVG (Claude mascot), transparent bg, currentColor
+      avatar.innerHTML = `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" shape-rendering="crispEdges"><rect x="12" y="10" width="8" height="2"/><rect x="10" y="12" width="12" height="6"/><rect x="8" y="13" width="2" height="3"/><rect x="22" y="13" width="2" height="3"/><rect x="10" y="18" width="4" height="2"/><rect x="18" y="18" width="4" height="2"/><rect x="8" y="20" width="4" height="2"/><rect x="20" y="20" width="4" height="2"/><rect x="6" y="14" width="2" height="2"/><rect x="24" y="14" width="2" height="2"/><rect x="6" y="11" width="2" height="3"/><rect x="24" y="11" width="2" height="3"/><rect x="4" y="9" width="2" height="2"/><rect x="26" y="9" width="2" height="2"/><rect x="13" y="13" width="2" height="2"/><rect x="17" y="13" width="2" height="2"/><rect x="14" y="16" width="4" height="1"/></svg>`;
     }
 
     const bubble = document.createElement('div');
diff --git a/public/style.css b/public/style.css
index ba3621e..7c8b2ce 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1016,10 +1016,11 @@ body.session-loading-active {
 .msg.user .msg-avatar { background: var(--bg-bubble-user); color: #fff; }
 .msg.assistant .msg-avatar { background: var(--success); color: #fff; }
 .msg-avatar svg { display: block; flex-shrink: 0; }
-/* Claude avatar: pixel crab emoji on accent bg */
+/* Claude avatar: transparent bg, pixel crab uses theme accent color */
 .msg.assistant.agent-claude .msg-avatar {
-  background: var(--accent);
-  color: #fff;
+  background: transparent;
+  color: var(--accent);
+  border: 1.5px solid var(--accent);
   font-size: 18px;
 }
 /* Codex avatar: GPT logo on green bg */