diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 3b330cacef9..67299bab850 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -372,6 +372,13 @@
   border-color: rgba(255, 255, 255, 0.2);
 }
 
+/* Ensure chat toolbar toggles have a clearly visible active state. */
+.chat-controls .btn--icon.active {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
 /* Light theme icon button overrides */
 :root[data-theme="light"] .btn--icon {
   background: #ffffff;
@@ -386,6 +393,13 @@
   color: var(--text);
 }
 
+:root[data-theme="light"] .chat-controls .btn--icon.active {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-subtle);
+}
+
 .btn--icon svg {
   display: block;
   width: 18px;
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 670fc417ccb..09b89d9c270 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -542,6 +542,12 @@
   background: var(--bg-hover);
 }
 
+:root[data-theme="light"] .btn.active {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
 :root[data-theme="light"] .btn.primary {
   background: var(--accent);
   border-color: var(--accent);