style: refine acrylic workbench surfaces

features/agent/components/agent-collapsed-rail.tsx

@@ -3,9 +3,7 @@
 import { ChevronRight } from "lucide-react";
 import type { PersonaState } from "@/shared/ai-elements/persona";
 import { cn } from "@/lib/utils";
-import {
-  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
-} from "@/features/map/core/components/map-control-styles";
+import { MAP_MAJOR_PANEL_RADIUS_CLASS_NAME } from "@/features/map/core/components/map-control-styles";
 import { AgentPersona } from "./agent-persona";
 
 type AgentCollapsedRailProps = {
@@ -16,13 +14,13 @@ type AgentCollapsedRailProps = {
 
 export function AgentCollapsedRail({ personaState, statusLabel = "Agent", onExpand }: AgentCollapsedRailProps) {
   return (
-    <aside className={cn("agent-rail-enter glass-control pointer-events-auto w-[136px] p-1.5 shadow-[0_6px_18px_rgba(15,23,42,0.12)]", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}>
+    <aside className={cn("agent-rail-enter acrylic-panel pointer-events-auto w-[136px] border p-1.5", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}>
       <button
         type="button"
         aria-label="展开排水助手面板"
         title="展开排水助手面板"
         onClick={onExpand}
-        className="agent-rail-item group flex h-14 w-full items-center justify-center gap-4 rounded-xl bg-white px-3 transition hover:bg-slate-50"
+        className="agent-rail-item surface-control group flex h-14 w-full items-center justify-center gap-4 rounded-xl border px-3 transition-[background-color,transform] hover:bg-white active:scale-95"
       >
         <AgentPersona
           className="h-12 w-12"
@@ -30,7 +28,7 @@ export function AgentCollapsedRail({ personaState, statusLabel = "Agent", onExpa
           state={personaState}
           statusLabel={statusLabel}
         />
-        <span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg !border-0 transition group-hover:translate-x-0.5">
+        <span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg !border-0 transition-transform group-hover:translate-x-0.5">
           <ChevronRight size={17} strokeWidth={2.25} aria-hidden="true" />
         </span>
       </button>

features/agent/components/agent-command-panel.tsx

@@ -40,10 +40,6 @@ import {
 } from "@/shared/ui/dropdown-menu";
 import { Button } from "@/shared/ui/button";
 import { cn } from "@/lib/utils";
-import {
-  MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
-  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
-} from "@/features/map/core/components/map-control-styles";
 import type { AgentChatSessionSummary } from "../api/client";
 import { AgentPersona } from "./agent-persona";
 import {
@@ -164,23 +160,23 @@ export function AgentCommandPanel({
         className={cn(
           "pointer-events-auto flex h-full min-h-0 w-full flex-col overflow-hidden",
           "agent-panel-shell",
-          MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
-          MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
+          "acrylic-panel border",
+          "rounded-2xl",
           collapsing ? "agent-panel-collapse" : "agent-panel-enter"
         )}
       >
       <Agent className="flex h-full min-h-0 flex-col border-0 bg-transparent">
         <div className="agent-panel-band border-b border-slate-200">
-          <div className="flex items-center justify-between gap-3 px-4 py-3">
-            <div className="flex min-w-0 flex-1 items-center gap-3 text-slate-900">
+          <div className="flex min-h-16 items-center justify-between gap-2 px-3 py-2">
+            <div className="flex min-w-0 flex-1 items-center gap-2.5 text-slate-900">
               <AgentPersona
-                className="h-[72px] w-[72px]"
-                fallbackClassName="h-[72px] w-[72px] rounded-2xl"
+                className="h-10 w-10"
+                fallbackClassName="h-10 w-10 rounded-xl"
                 state={personaState}
                 statusLabel={statusLabel}
                 streaming={streaming}
               />
-              <div className="min-w-0 flex-1 space-y-2">
+              <div className="min-w-0 flex-1">
                 <div className="min-w-0">
                   <div className="flex min-w-0 items-center gap-2">
                     <p className="shrink-0 text-xs font-semibold uppercase text-slate-500">对话主题</p>
@@ -297,17 +293,13 @@ export function AgentCommandPanel({
                 ) : (
                   <motion.div
                     key="empty"
-                    className="flex flex-1 items-center justify-center px-5 py-10"
+                    className="flex flex-1 items-start justify-start px-4 py-6"
                     initial="initial"
                     animate="animate"
                     exit="exit"
                     variants={agentPanelItemVariants}
                   >
-                    <AgentEmptyState
-                      personaState={personaState}
-                      statusLabel={statusLabel}
-                      streaming={streaming}
-                    />
+                    <AgentEmptyState />
                   </motion.div>
                 )}
               </AnimatePresence>
@@ -327,14 +319,14 @@ export function AgentCommandPanel({
 
         <div className="agent-panel-band relative border-t border-slate-200 p-3">
           {messages.length === 0 && !streaming ? (
-            <div className="pointer-events-none absolute inset-x-0 bottom-full z-10 bg-gradient-to-t from-white/95 via-white/80 to-transparent px-3 pb-2 pt-5">
+            <div className="surface-dock pointer-events-none absolute inset-x-0 bottom-full z-10 px-3 pb-2 pt-2">
               <Suggestions aria-label="推荐问题" role="group" className="pointer-events-auto px-0.5">
                 {AGENT_PROMPT_SUGGESTIONS.map((suggestion) => (
                   <Suggestion
                     key={suggestion}
                     suggestion={suggestion}
                     onClick={submitPrompt}
-                    className="max-w-full border-slate-200 bg-white text-slate-600 shadow-sm hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
+                    className="surface-reading max-w-full border border-slate-200 text-slate-600 hover:bg-blue-50 hover:text-blue-700"
                   >
                     <span className="truncate">{suggestion}</span>
                   </Suggestion>
@@ -604,40 +596,25 @@ function ExpertModelIcon({ size }: { size: number }) {
   );
 }
 
-function AgentEmptyState({
-  personaState,
-  statusLabel,
-  streaming
-}: {
-  personaState?: PersonaState;
-  statusLabel: string;
-  streaming: boolean;
-}) {
+function AgentEmptyState() {
   return (
     <section
       aria-labelledby="agent-empty-state-title"
-      className="mx-auto flex w-full max-w-sm flex-col items-center rounded-2xl border border-slate-200 bg-white p-4 text-center shadow-sm sm:p-5"
+      className="mx-auto flex w-full max-w-sm flex-col px-2 py-4 text-left"
     >
-      <AgentPersona
-        className="mb-3 h-20 w-20"
-        fallbackClassName="h-20 w-20 rounded-2xl"
-        state={personaState}
-        statusLabel={statusLabel}
-        streaming={streaming}
-      />
       <p id="agent-empty-state-title" className="text-base font-semibold text-slate-900">
         从一个问题开始
       </p>
-      <p className="mt-1.5 max-w-72 text-xs leading-5 text-slate-500">
+      <p className="mt-1.5 text-xs leading-5 text-slate-500">
         描述分析目标，或选择下方推荐问题。Agent 会整理证据并给出下一步建议。
       </p>
-      <ul className="mt-4 grid w-full grid-cols-2 gap-2" aria-label="Agent 分析能力">
+      <ul className="mt-5 w-full divide-y divide-slate-200 border-y border-slate-200" aria-label="Agent 分析能力">
         {AGENT_CAPABILITIES.map(({ icon: Icon, label }) => (
           <li
             key={label}
-            className="flex min-h-16 flex-col items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-slate-50 px-2 py-3 text-xs font-semibold text-slate-700 min-[420px]:min-h-14 min-[420px]:flex-row min-[420px]:gap-2"
+            className="flex min-h-11 items-center gap-3 px-1 text-xs font-semibold text-slate-700"
           >
-            <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg border border-slate-200 bg-white text-slate-600">
+            <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-blue-50 text-blue-700">
               <Icon size={16} strokeWidth={1.8} aria-hidden="true" />
             </span>
             <span className="whitespace-nowrap">{label}</span>

features/agent/components/agent-message-details.tsx

@@ -351,7 +351,7 @@ function PermissionRequestCard({
   };
 
   return (
-    <div className="rounded-lg bg-[var(--glass-menu)] px-2.5 py-2 text-xs">
+    <div className="surface-reading rounded-lg px-2.5 py-2 text-xs">
       <div className="grid grid-cols-[1fr_auto] gap-2">
         <div className="min-w-0">
           <p className="truncate font-semibold text-slate-800" title={permission.target ?? permission.permission}>
@@ -479,7 +479,7 @@ function QuestionRequestCard({
   };
 
   return (
-    <div className="rounded-lg bg-[var(--glass-menu)] px-2.5 py-2 text-xs">
+    <div className="surface-reading rounded-lg px-2.5 py-2 text-xs">
       <div className="mb-2 flex items-center justify-between gap-2">
         <span className="min-w-0 truncate font-semibold text-slate-800">
           {request.questions[0]?.header || "问题"}
@@ -597,7 +597,7 @@ function QuestionInput({
             return (
               <label
                 key={option.label}
-                className="flex cursor-pointer items-start gap-2 rounded-md border border-slate-200 bg-[var(--surface-solid)] px-2 py-1.5 text-slate-600"
+                className="surface-reading flex cursor-pointer items-start gap-2 rounded-md border border-slate-200 px-2 py-1.5 text-slate-600"
               >
                 <input
                   type={question.multiple ? "checkbox" : "radio"}
@@ -620,7 +620,7 @@ function QuestionInput({
       ) : null}
       {showCustomInput ? (
         <textarea
-          className="min-h-16 w-full resize-none rounded-md border border-slate-200 bg-[var(--surface-solid)] px-2 py-1.5 text-xs leading-5 text-slate-700 outline-none transition focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:opacity-60"
+          className="surface-reading min-h-16 w-full resize-none rounded-md border border-slate-200 px-2 py-1.5 text-xs leading-5 text-slate-700 outline-none transition focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:opacity-60"
           placeholder="输入回答"
           value={value.custom}
           disabled={disabled}

features/agent/components/agent-operational-brief.tsx

@@ -61,7 +61,7 @@ export function AgentOperationalBrief({
         </button>
         <button
           type="button"
-          className="flex h-9 items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-[var(--glass-menu)] px-3 text-xs font-semibold text-slate-700 transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="surface-control flex h-9 items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-semibold text-slate-700 transition-colors hover:bg-blue-50 hover:text-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
           disabled={streaming}
           onClick={() => onSubmitCommand(brief.secondaryCommand)}
         >
@@ -75,7 +75,7 @@ export function AgentOperationalBrief({
 
 function AgentBriefMetric({ icon, label, value }: { icon: ReactNode; label: string; value: string }) {
   return (
-    <div className="min-w-0 rounded-xl border border-slate-200/70 bg-slate-50/90 px-2 py-2">
+    <div className="surface-reading min-w-0 rounded-xl border px-2 py-2">
       <dt className="flex items-center gap-1.5 text-xs font-semibold text-slate-500">
         <span className="text-blue-600">{icon}</span>
         {label}

features/agent/components/agent-ui-envelope-renderer.tsx

@@ -303,7 +303,7 @@ function PropRows({ props, labels }: { props: unknown; labels: Record<string, st
   return (
     <dl className="grid grid-cols-2 gap-2">
       {rows.map((row) => (
-        <div key={row.label} className="min-w-0 rounded-lg bg-[var(--glass-menu)] px-2.5 py-2">
+        <div key={row.label} className="surface-reading min-w-0 rounded-lg px-2.5 py-2">
           <dt className="truncate text-xs text-slate-500">{row.label}</dt>
           <dd className="mt-1 truncate text-sm font-semibold text-slate-900" title={row.value}>
             {row.value}