refactor(webui): improve visual consistency (#5249)

webui/src/components/thread/AssistantSelectionAction.tsx

@@ -3,6 +3,9 @@ import { createPortal } from "react-dom";
 import { MessageCircleMore } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
+import { floatingSurfaceElevationClassName } from "@/components/ui/floating-surface";
+import { cn } from "@/lib/utils";
+
 const MAX_QUOTED_CONTEXT_CHARS = 4_000;
 
 interface SelectionActionState {
@@ -142,7 +145,10 @@ export function AssistantSelectionAction({
       ref={actionRef}
       type="button"
       data-selection-follow-up="true"
-      className="fixed z-[80] inline-flex h-9 max-w-[calc(100vw-24px)] items-center gap-1.5 rounded-full border border-border/80 bg-popover px-3 text-[13px] font-medium text-popover-foreground shadow-lg shadow-black/10 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:shadow-black/35"
+      className={cn(
+        floatingSurfaceElevationClassName,
+        "fixed z-[80] inline-flex h-9 max-w-[calc(100vw-24px)] items-center gap-1.5 rounded-full px-3 text-[13px] font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      )}
       style={{
         left: action.left,
         top: action.top,

webui/src/components/thread/PromptRail.tsx

@@ -10,6 +10,7 @@ import {
 import { useTranslation } from "react-i18next";
 
 import { MarkdownText } from "@/components/MarkdownText";
+import { floatingSurfaceElevationClassName } from "@/components/ui/floating-surface";
 import { cn } from "@/lib/utils";
 import type { UIMessage } from "@/lib/types";
 import {
@@ -203,8 +204,7 @@ export function PromptRail({
               data-testid={previewVisible ? "prompt-rail-preview" : undefined}
               className={cn(
                 "pointer-events-none absolute left-10 z-30 w-[34rem] max-w-[calc(100vw-4rem)] -translate-y-1/2 rounded-[20px] px-4 py-3 text-left",
-                "bg-popover/95 text-popover-foreground shadow-[0_18px_45px_rgba(0,0,0,0.12)] backdrop-blur-xl",
-                "dark:shadow-[0_18px_45px_rgba(0,0,0,0.45)]",
+                floatingSurfaceElevationClassName,
                 "transition-[opacity,transform] duration-150",
                 previewVisible
                   ? "translate-x-0 scale-100 opacity-100"

webui/src/components/thread/ThreadComposer.tsx

@@ -52,6 +52,7 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import {
   floatingItemClassName,
+  floatingSurfaceElevationClassName,
   floatingSurfaceVisualClassName,
 } from "@/components/ui/floating-surface";
 import {
@@ -805,8 +806,8 @@ function RunElapsedStrip({
           tabIndex={-1}
           className={cn(
             "absolute bottom-[calc(100%+8px)] left-3 right-3 z-[50] flex max-w-none flex-col overflow-hidden",
-            "rounded-2xl border border-black/[0.08] bg-card shadow-[0_12px_40px_rgba(15,23,42,0.14)]",
-            "backdrop-blur-sm dark:border-white/[0.1] dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)]",
+            "rounded-2xl",
+            floatingSurfaceElevationClassName,
           )}
           style={{ maxHeight: `${Math.round(panelMaxPx)}px` }}
         >