fix(control-ui): restore light select arrows

Signed-off-by: sallyom <somalley@redhat.com>

CHANGELOG.md

@@ -79,6 +79,7 @@ Docs: https://docs.openclaw.ai
 - Providers/Anthropic: migrate 1M context handling to GA-capable Claude 4.x models by sizing eligible models at 1M without the retired `context-1m-2025-08-07` beta, ignoring that retired beta in older configs, and preserving OAuth-required Anthropic beta headers. (#45613) Thanks @haoyu-haoyu.
 - Cron/Telegram: parse forum-topic delivery targets through the Telegram plugin instead of cron core, including `:topic:` and `:topicId` forms for announce delivery. Thanks @etticat.
 - Twitch: keep stale message-handler cleanup callbacks from removing newer handler registrations for the same account, preserving inbound message delivery after reconnects. Fixes #83888. (#85425) Thanks @alkor2000.
+- Control UI/chat: keep light-mode model, thinking, config, and agents select arrows visible without tiling background icons. Fixes #85713. Thanks @Linux2010.
 - Memory/LanceDB: expose public memory artifacts through the active memory provider bridge so memory-wiki imports durable memory files, daily notes, dream reports, and event logs without depending on memory-core internals. Fixes #83604. (#85060) Thanks @brokemac79.
 - Crabbox: keep AWS hydration compatible with local Actions replay by inlining the hydrate workflow's Node/pnpm setup instead of invoking repo-local composite actions.
 - Agents/subagents: simplify native sub-agent completion handoff so children report their latest visible assistant result to the requester without using `message`, while keeping parent-owned message-tool delivery policy intact. Fixes #85070. (#85089) Thanks @brokemac79.

ui/src/styles/chat/grouped.css

@@ -369,7 +369,7 @@ img.chat-avatar {
   border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
 }
 
-:root[data-theme-mode="light"] .chat-bubble:hover {
+:root[data-theme-mode="light"] .chat-bubble:not(:where(.chat-bubble--tool-shell)):hover {
   border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
 }

ui/src/styles/components.css

@@ -1670,10 +1670,14 @@
 :root[data-theme-mode="light"] .field input,
 :root[data-theme-mode="light"] .field textarea,
 :root[data-theme-mode="light"] .field select {
-  background: var(--card);
+  background-color: var(--card);
   border-color: var(--input);
 }
 
+:root[data-theme-mode="light"] .field select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
 :root[data-theme-mode="light"] .btn {
   background: var(--bg);
   border-color: var(--input);
@@ -4486,6 +4490,7 @@ td.data-table-key-col {
 
 :root[data-theme-mode="light"] .agents-select {
   background-color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 .agents-select:focus {

ui/src/styles/components.test.ts

@@ -39,6 +39,22 @@ describe("agent fallback chip styles", () => {
   });
 });
 
+describe("field select styles", () => {
+  it("keeps light-mode native select arrows visible without tiling", () => {
+    const css = readComponentsCss();
+
+    expect(css).toMatch(
+      /\.field select \{[\s\S]*background-image: url\("data:image\/svg\+xml,[^"]*stroke='%23a1a1aa'[^"]*"\);[\s\S]*background-repeat: no-repeat;[\s\S]*background-position: right 10px center;/,
+    );
+    expect(css).toMatch(
+      /:root\[data-theme-mode="light"\] \.field input,[\s\S]*:root\[data-theme-mode="light"\] \.field textarea,[\s\S]*:root\[data-theme-mode="light"\] \.field select \{[\s\S]*background-color: var\(--card\);[\s\S]*border-color: var\(--input\);[\s\S]*\}\n\n:root\[data-theme-mode="light"\] \.field select \{[\s\S]*background-image: url\("data:image\/svg\+xml,[^"]*stroke='%23444'[^"]*"\);/,
+    );
+    expect(css).not.toContain(
+      ':root[data-theme-mode="light"] .field select {\n  background: var(--card);',
+    );
+  });
+});
+
 describe("sessions filter styles", () => {
   it("keeps the expanded sessions filters on one row until the mobile breakpoint", () => {
     const css = readComponentsCss();

ui/src/styles/config.test.ts

@@ -24,4 +24,15 @@ describe("config styles", () => {
     expect(css).not.toContain("margin: 0 -16px -32px");
     expect(css).not.toContain("margin: 0 -8px -16px");
   });
+
+  it("keeps light-mode config select arrows visible", () => {
+    const css = readConfigCss();
+
+    expect(css).toMatch(
+      /\.cfg-select \{[\s\S]*background-image: url\("data:image\/svg\+xml,[^"]*stroke='%23888'[^"]*"\);[\s\S]*background-repeat: no-repeat;[\s\S]*background-position: right 10px center;/,
+    );
+    expect(css).toMatch(
+      /:root\[data-theme-mode="light"\] \.cfg-select \{[\s\S]*background-color: white;[\s\S]*border-color: var\(--border\);[\s\S]*background-image: url\("data:image\/svg\+xml,[^"]*stroke='%23444'[^"]*"\);/,
+    );
+  });
 });

ui/src/styles/layout.mobile.test.ts

@@ -146,4 +146,15 @@ describe("grouped chat width styles", () => {
 
     expect(css).toContain("max-width: var(--chat-message-max-width, min(900px, 68%));");
   });
+
+  it("excludes tool shells from light hover without overriding user bubble hover", () => {
+    const css = readGroupedChatCss();
+
+    expect(css).toContain(
+      ':root[data-theme-mode="light"] .chat-bubble:not(:where(.chat-bubble--tool-shell)):hover',
+    );
+    expect(css).not.toContain(
+      ':root[data-theme-mode="light"] .chat-bubble:not(.chat-bubble--tool-shell):hover',
+    );
+  });
 });