diff --git a/ui/src/styles/chat/split-view.css b/ui/src/styles/chat/split-view.css
index e5f47ac0ca3b..5e195140b5b2 100644
--- a/ui/src/styles/chat/split-view.css
+++ b/ui/src/styles/chat/split-view.css
@@ -38,14 +38,22 @@ openclaw-chat-pane {
   overflow: hidden;
 }
 
+/* Active-pane focus ring. The fixed toolbar and the weighted flex panes have
+   independent x-origins, so paired horizontal accent lines across the two
+   layers always render visibly offset; each layer marks focus on its own. */
 .chat-split-view__pane--active {
-  box-shadow: inset 0 2px 0 var(--accent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
 }
 
 .chat-split-view--narrow .chat-split-view__pane {
   min-height: 0;
 }
 
+/* Narrow mode shows only the active pane; a focus ring is pure noise there. */
+.chat-split-view--narrow .chat-split-view__pane--active {
+  box-shadow: none;
+}
+
 .chat-split-view__drop-indicator {
   position: absolute;
   z-index: 20;
@@ -137,7 +145,7 @@ openclaw-chat-pane {
 }
 
 .chat-split-toolbar__pane--active {
-  box-shadow: inset 0 2px 0 var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
 /* Pane controls replace the breadcrumb hierarchy in split mode, while the