diff --git a/crates/agent-gateway/web/src/components/hub/HubChrome.tsx b/crates/agent-gateway/web/src/components/hub/HubChrome.tsx
index ad295d273..b49340216 100644
--- a/crates/agent-gateway/web/src/components/hub/HubChrome.tsx
+++ b/crates/agent-gateway/web/src/components/hub/HubChrome.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 import { useLocale } from "../../i18n";
 import { cn } from "../../lib/shared/utils";
 import { PanelLeft } from "../icons";
@@ -6,15 +6,14 @@ import { Button } from "../ui/button";
 
 export function HubBackdrop(props: { tone?: "amber" | "violet" | "neutral" }) {
   const { tone = "neutral" } = props;
-  // macOS frosted-glass: subtle monochrome wash; tone provides only the faintest temperature shift.
-  // Dark: the canvas drops below --background (--hub-canvas) so background-tinted glass reads
-  // elevated, and the halos stay a whisper above the canvas instead of a gray fog.
+  // Cool monochrome wash; tone only shifts temperature slightly.
+  // Dark canvas sits below --background so glass panels read elevated.
   const haloClass =
     tone === "amber"
-      ? "bg-[radial-gradient(circle_at_top_left,hsl(0_0%_100%/0.85),transparent_60%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(222_18%_14%/0.55),transparent_60%)]"
+      ? "bg-[radial-gradient(circle_at_top_left,hsl(40_30%_98%/0.9),transparent_58%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(36_18%_14%/0.45),transparent_58%)]"
       : tone === "violet"
-        ? "bg-[radial-gradient(circle_at_top_left,hsl(220_18%_98%/0.85),transparent_60%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(224_20%_14%/0.55),transparent_60%)]"
-        : "bg-[radial-gradient(circle_at_top_left,hsl(0_0%_100%/0.8),transparent_60%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(224_18%_14%/0.5),transparent_60%)]";
+        ? "bg-[radial-gradient(circle_at_top_left,hsl(250_28%_98%/0.9),transparent_58%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(250_18%_14%/0.45),transparent_58%)]"
+        : "bg-[radial-gradient(circle_at_top_left,hsl(240_12%_98%/0.88),transparent_58%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(240_12%_14%/0.4),transparent_58%)]";
   return (
     <>
       <div className="pointer-events-none absolute inset-0 bg-[hsl(var(--hub-canvas))]" />
@@ -26,7 +25,7 @@ export function HubBackdrop(props: { tone?: "amber" | "violet" | "neutral" }) {
       />
       <div
         className={cn(
-          "pointer-events-none absolute -right-24 bottom-0 h-[360px] w-[360px] rounded-full opacity-60 blur-3xl",
+          "pointer-events-none absolute -right-24 bottom-0 h-[360px] w-[360px] rounded-full opacity-55 blur-3xl",
           haloClass,
         )}
       />
@@ -45,9 +44,10 @@ export function HubHeader(props: {
 }) {
   const { icon, title, subtitle, actions, sidebarOpen, onOpenSidebar } = props;
   const { t } = useLocale();
+  // Web has no macOS title-bar overlay; always show the open-sidebar control when closed.
   const showSidebarButton = !sidebarOpen;
   return (
-    <div className="hub-header relative z-10 px-5 pt-6 pb-3 sm:px-6 lg:px-8 xl:px-10">
+    <div className="hub-header relative z-10 px-5 pb-3 pt-5 sm:px-6 lg:px-8 xl:px-10">
       {showSidebarButton ? (
         <Button
           type="button"
@@ -55,26 +55,29 @@ export function HubHeader(props: {
           size="icon"
           onClick={onOpenSidebar}
           title={t("tooltip.openSidebar")}
-          className="absolute left-3 top-5 h-9 w-9 rounded-lg text-muted-foreground hover:bg-background/70 hover:text-foreground"
+          className="absolute left-3 top-4 h-9 w-9 rounded-full text-muted-foreground hover:bg-background/70 hover:text-foreground"
         >
           <PanelLeft className="h-4.5 w-4.5" />
         </Button>
       ) : null}
       <div
         className={cn(
-          "mx-auto flex w-full max-w-[1320px] items-center gap-4",
+          "mx-auto flex w-full max-w-[1320px] items-center gap-3.5",
           showSidebarButton && "pl-11 lg:pl-0",
         )}
       >
-        <div className="hub-header-icon flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-border/40 bg-background/70 text-foreground/80 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset] backdrop-blur-xl">
+        <div className="hub-header-icon flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] text-foreground/80">
           {icon}
         </div>
         <div className="min-w-0 flex-1">
-          <h1 className="text-[21px] font-semibold leading-tight tracking-tight text-foreground">
+          <h1 className="text-[calc(22px*var(--zone-font-scale,1))] font-semibold leading-[1.15] tracking-[-0.022em] text-foreground">
             {title}
           </h1>
           {subtitle ? (
-            <p className="mt-0.5 truncate text-[12px] text-muted-foreground" title={subtitle}>
+            <p
+              className="mt-0.5 truncate text-[12.5px] leading-snug tracking-[-0.005em] text-muted-foreground"
+              title={subtitle}
+            >
               {subtitle}
             </p>
           ) : null}
@@ -92,31 +95,61 @@ export function GlassPanel(props: {
   className?: string;
 }) {
   const { children, tone = "default", active = false, className } = props;
-  const toneClass = (() => {
-    switch (tone) {
-      case "muted":
-        return "border-border/40 bg-muted/40";
-      case "error":
-        return "border-destructive/30 bg-destructive/5";
-      case "amber":
-      case "violet":
-      case "neutral":
-        return active
-          ? "border-border/55 bg-background/80 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_6px_22px_-14px_rgba(15,23,42,0.18)] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_6px_22px_-14px_rgba(0,0,0,0.55)]"
-          : "border-border/40 bg-background/60";
-      default:
-        return "border-border/40 bg-background/60";
-    }
-  })();
   return (
     <div
-      className={cn(
-        "hub-glass-panel rounded-2xl border px-4 py-3.5 backdrop-blur-xl",
-        toneClass,
-        className,
-      )}
+      data-tone={tone}
+      data-active={active || undefined}
+      className={cn("hub-glass-panel", className)}
     >
       {children}
     </div>
   );
 }
+
+/** Status strip under HubHeader (Skills enabled / MCP ready). */
+export function HubStatusBanner(props: {
+  ready?: boolean;
+  children: ReactNode;
+  className?: string;
+}) {
+  const { ready = false, children, className } = props;
+  return (
+    <div
+      data-ready={ready || undefined}
+      className={cn("hub-status-banner hub-panel-enter", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Segmented tab track (Installed / Store / Import). */
+export function HubSegmentedTrack(props: { children: ReactNode; className?: string }) {
+  return <div className={cn("hub-segmented-track", props.className)}>{props.children}</div>;
+}
+
+export function HubSegmentButton(
+  props: ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+    icon?: ReactNode;
+    count?: number | null;
+  },
+) {
+  const { active, icon, count, className, children, type = "button", ...rest } = props;
+  return (
+    <button
+      type={type}
+      data-active={active || undefined}
+      className={cn("hub-segment-button", className)}
+      {...rest}
+    >
+      {icon}
+      <span>{children}</span>
+      {count != null && count > 0 ? (
+        <span className="hub-segment-count" data-active={active || undefined}>
+          {count}
+        </span>
+      ) : null}
+    </button>
+  );
+}
diff --git a/crates/agent-gateway/web/src/components/project-tools/RightDockLauncher.tsx b/crates/agent-gateway/web/src/components/project-tools/RightDockLauncher.tsx
index f2b9520e1..2bd23ebaa 100644
--- a/crates/agent-gateway/web/src/components/project-tools/RightDockLauncher.tsx
+++ b/crates/agent-gateway/web/src/components/project-tools/RightDockLauncher.tsx
@@ -190,7 +190,7 @@ export function RightDockChooser(props: RightDockChooserProps) {
             onClick={tool.onClick}
             disabled={tool.disabled}
             title={tool.titleAttr}
-            className="group flex items-center gap-3 rounded-lg border border-border/60 bg-background px-3.5 py-3 text-left text-sm text-foreground transition-all hover:border-border hover:bg-muted/60 hover:shadow-sm disabled:pointer-events-none disabled:opacity-50"
+            className="group flex items-center gap-3 rounded-2xl border border-border/50 bg-background/70 px-3.5 py-3 text-left text-sm text-foreground shadow-[0_1px_0_rgba(255,255,255,0.45)_inset] backdrop-blur-md transition-[background-color,border-color,transform,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-border hover:bg-background/90 hover:shadow-sm active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 motion-reduce:active:scale-100 dark:border-white/[0.08] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
           >
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors group-hover:bg-muted group-hover:text-foreground">
               {tool.icon}
diff --git a/crates/agent-gateway/web/src/components/project-tools/RightDockPanel.tsx b/crates/agent-gateway/web/src/components/project-tools/RightDockPanel.tsx
index 1d8fbecc2..b58a42ad2 100644
--- a/crates/agent-gateway/web/src/components/project-tools/RightDockPanel.tsx
+++ b/crates/agent-gateway/web/src/components/project-tools/RightDockPanel.tsx
@@ -742,22 +742,18 @@ export const RightDockPanel = memo(function RightDockPanel(props: RightDockPanel
         data-state={isOpen ? "open" : "closed"}
         data-project-tools-resizing={isResizing ? "true" : undefined}
         className={cn(
-          "project-tools-panel zone-font-scale fixed inset-x-0 bottom-0 z-40 flex h-[min(72vh,34rem)] min-h-0 w-full shrink-0 flex-col overflow-hidden bg-background shadow-2xl transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none md:relative md:inset-auto md:z-10 md:h-full md:overflow-visible md:shadow-none",
+          // Desktop: single drawer (track width + panel slide). Do NOT fade
+          // opacity first then collapse width — that reads as a double close.
+          // Mobile: bottom sheet via translate-y only.
+          "project-tools-panel zone-font-scale fixed inset-x-0 bottom-0 z-40 h-[min(72vh,34rem)] min-h-0 w-full shrink-0 overflow-hidden border-t shadow-[0_-12px_40px_-18px_rgba(15,23,42,0.28)] motion-reduce:transition-none md:relative md:inset-auto md:z-10 md:h-full md:border-l md:border-t-0 md:shadow-none",
           isOpen
-            ? "pointer-events-auto translate-y-0 border-t border-border opacity-100 md:w-[var(--project-tools-panel-width)] md:translate-x-0 md:border-l md:border-t-0"
-            : "pointer-events-none translate-y-full border-t border-transparent opacity-0 md:translate-x-3 md:translate-y-0 md:border-l-0 md:border-t-0",
+            ? "pointer-events-auto translate-y-0 md:translate-y-0"
+            : "pointer-events-none translate-y-full border-transparent md:translate-y-0",
           effectiveWidthCollapsed ? "md:w-0" : "md:w-[var(--project-tools-panel-width)]",
         )}
         style={{ ...panelStyle, "--zone-font-scale": fontScale } as CSSProperties}
       >
-        <div
-          className={cn(
-            "project-tools-panel-inner flex h-full min-h-0 w-full flex-col transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none md:w-[var(--project-tools-panel-width)] md:min-w-[var(--project-tools-panel-width)]",
-            isOpen
-              ? "translate-y-0 opacity-100 md:translate-x-0"
-              : "translate-y-3 opacity-0 md:translate-x-2 md:translate-y-0",
-          )}
-        >
+        <div className="project-tools-panel-inner flex h-full min-h-0 w-full flex-col md:w-[var(--project-tools-panel-width)] md:min-w-[var(--project-tools-panel-width)]">
           {effectiveShouldRenderContent ? (
             <>
               <div className="project-tools-panel-handle" aria-hidden="true" />
@@ -780,7 +776,7 @@ export const RightDockPanel = memo(function RightDockPanel(props: RightDockPanel
                   )}
                 />
               </button>
-              <div className="project-tools-panel-header flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
+              <div className="project-tools-panel-header flex h-11 shrink-0 items-center gap-2 px-3">
                 <div
                   className="project-tools-panel-tabs-shell flex min-w-0 flex-1 flex-col justify-center gap-1"
                   onWheel={handleTabsWheel}
diff --git a/crates/agent-gateway/web/src/components/project-tools/useRightDockPanelWidth.ts b/crates/agent-gateway/web/src/components/project-tools/useRightDockPanelWidth.ts
index 92eff9f17..6ad888bf2 100644
--- a/crates/agent-gateway/web/src/components/project-tools/useRightDockPanelWidth.ts
+++ b/crates/agent-gateway/web/src/components/project-tools/useRightDockPanelWidth.ts
@@ -143,9 +143,12 @@ export function useRightDockPanelWidth(options: UseRightDockPanelWidthOptions) {
       setWidthCollapsed(true);
       return;
     }
+    // Collapse track width immediately so CSS can animate width + panel slide
+    // together. Only delay unmounting content until the drawer motion finishes
+    // (must match --project-tools-motion-duration).
+    setWidthCollapsed(true);
     const timer = window.setTimeout(() => {
       setShouldRenderContent(false);
-      setWidthCollapsed(true);
     }, 220);
     return () => window.clearTimeout(timer);
   }, [collapseImmediately, isOpen]);
diff --git a/crates/agent-gateway/web/src/index.css b/crates/agent-gateway/web/src/index.css
index 1080a39ea..5eee17530 100644
--- a/crates/agent-gateway/web/src/index.css
+++ b/crates/agent-gateway/web/src/index.css
@@ -173,6 +173,15 @@
       "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Liberation Mono",
       monospace;
 
+    /* Apple motion vocabulary (shared with desktop GUI mirrored components) */
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
+    --duration-press: 100ms;
+    --duration-ui: 200ms;
+    --duration-sheet: 320ms;
+    --press-scale: 0.97;
+
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -2374,3 +2383,382 @@ body > div:not(#root) [data-streamdown="mermaid"]:has([style*="cursor:grabbing"]
 .mention-composer .mention-chip {
   margin-inline-end: 0.375rem;
 }
+
+/* ---------------------------------------------------------------------------
+ * Mirrored GUI materials (RightDock / FloorNav / MCP Hub). Keep in sync with
+ * crates/agent-gui/src/index.css so byte-identical TSX components render.
+ * --------------------------------------------------------------------------- */
+
+.chat-sidebar-section-label {
+  font-size: calc(11px * var(--zone-font-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1.25;
+  color: hsl(var(--muted-foreground) / 0.92);
+}
+
+.floor-nav-panel {
+  border: 1px solid hsl(var(--border) / 0.5);
+  background: hsl(var(--background) / 0.72);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  backdrop-filter: blur(20px) saturate(180%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.5) inset,
+    0 16px 40px -18px hsl(15 23% 10% / 0.32);
+  transform-origin: top right;
+  animation: floorNavPanelIn 180ms var(--ease-out);
+}
+.dark .floor-nav-panel {
+  border-color: hsl(0 0% 100% / 0.1);
+  background: hsl(0 0% 100% / 0.07);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 16px 40px -18px hsl(0 0% 0% / 0.65);
+}
+
+@keyframes floorNavPanelIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+    filter: blur(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+.floor-nav-row {
+  transition: background-color 80ms var(--ease-out);
+}
+.floor-nav-row:has(button:active) {
+  background-color: hsl(var(--foreground) / 0.09);
+}
+.floor-nav-row[data-floor-active]:has(button:active) {
+  background-color: hsl(var(--foreground) / 0.12);
+}
+
+.floor-nav-pin {
+  transition:
+    color 120ms var(--ease-out),
+    opacity 120ms var(--ease-out),
+    transform 100ms var(--ease-out),
+    background-color 120ms var(--ease-out);
+}
+.floor-nav-pin:active {
+  transform: scale(var(--press-scale));
+}
+
+.floor-nav-marker {
+  transition:
+    width 150ms var(--ease-out),
+    background-color 150ms var(--ease-out),
+    opacity 150ms var(--ease-out);
+}
+.floor-nav-marker:active {
+  opacity: 1;
+  background-color: hsl(var(--foreground) / 0.7);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .floor-nav-panel {
+    animation: none;
+  }
+  .floor-nav-pin:active {
+    transform: none;
+  }
+  .floor-nav-marker {
+    transition: background-color 120ms ease;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .floor-nav-panel {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: hsl(var(--background));
+  }
+}
+
+.project-tools-panel {
+  --project-tools-motion-duration: 200ms;
+  --project-tools-motion-ease: var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
+  background: hsl(var(--sidebar-bg));
+  border-color: hsl(var(--sidebar-separator, var(--border)) / 0.85);
+  transition:
+    width var(--project-tools-motion-duration) var(--project-tools-motion-ease),
+    border-color var(--project-tools-motion-duration) var(--project-tools-motion-ease),
+    transform var(--project-tools-motion-duration) var(--project-tools-motion-ease);
+}
+.project-tools-panel-inner {
+  background: hsl(var(--sidebar-bg));
+}
+@media (min-width: 768px) {
+  .project-tools-panel {
+    overflow: hidden;
+  }
+  .project-tools-panel-inner {
+    position: absolute;
+    inset-block: 0;
+    right: 0;
+    width: var(--project-tools-panel-width);
+    min-width: var(--project-tools-panel-width);
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--project-tools-motion-duration) var(--project-tools-motion-ease);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+  .project-tools-panel[data-state="closed"] .project-tools-panel-inner {
+    transform: translate3d(100%, 0, 0);
+  }
+  .project-tools-panel[data-state="open"] .project-tools-panel-inner {
+    transform: translate3d(0, 0, 0);
+  }
+  .project-tools-panel[data-project-tools-resizing="true"] {
+    transition: none;
+  }
+  .project-tools-panel[data-project-tools-resizing="true"] .project-tools-panel-inner {
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .project-tools-panel,
+  .project-tools-panel-inner {
+    transition: none;
+  }
+}
+.project-tools-panel-header {
+  position: relative;
+  height: 3.25rem;
+  border-bottom: none;
+  background: hsl(var(--background) / 0.55);
+  -webkit-backdrop-filter: blur(18px) saturate(170%);
+  backdrop-filter: blur(18px) saturate(170%);
+}
+.project-tools-panel-header::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 1px;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    hsl(var(--border) / 0.5) 12%,
+    hsl(var(--border) / 0.5) 88%,
+    transparent 100%
+  );
+  opacity: 0.75;
+}
+.project-tools-panel-tabs {
+  height: 2.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.project-tools-panel-handle {
+  display: none;
+}
+@media (max-width: 767px) {
+  .project-tools-panel-handle {
+    display: block;
+    height: 0.25rem;
+    width: 2.5rem;
+    margin: 0.5rem auto 0;
+    border-radius: 999px;
+    background: hsl(var(--muted-foreground) / 0.35);
+  }
+}
+
+/*
+ * Skills / MCP Hub materials — unlayered so they beat utility glass strings
+ * on cards and banners.
+ */
+.hub-header-icon {
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 98% / 0.72);
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+  backdrop-filter: blur(20px) saturate(170%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.85) inset,
+    0 4px 14px -10px hsl(220 25% 10% / 0.12);
+}
+.dark .hub-header-icon {
+  border-color: hsl(0 0% 100% / 0.1);
+  background: hsl(0 0% 100% / 0.06);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 4px 14px -10px hsl(0 0% 0% / 0.45);
+}
+
+.hub-glass-panel {
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 97% / 0.55);
+  padding: 0.875rem 1rem;
+  -webkit-backdrop-filter: blur(24px) saturate(175%);
+  backdrop-filter: blur(24px) saturate(175%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.75) inset,
+    0 8px 24px -16px hsl(220 25% 10% / 0.14);
+}
+.hub-glass-panel[data-tone="muted"] {
+  background: hsl(240 10% 96% / 0.5);
+  border-color: hsl(0 0% 0% / 0.06);
+}
+.hub-glass-panel[data-tone="error"] {
+  background: hsl(0 72% 96% / 0.7);
+  border-color: hsl(0 72% 51% / 0.28);
+}
+.hub-glass-panel[data-active] {
+  border-color: hsl(0 0% 0% / 0.12);
+  background: hsl(240 14% 98% / 0.7);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.85) inset,
+    0 10px 28px -14px hsl(220 25% 10% / 0.18);
+}
+.dark .hub-glass-panel {
+  border-color: hsl(0 0% 100% / 0.09);
+  background: hsl(0 0% 100% / 0.055);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 8px 24px -16px hsl(0 0% 0% / 0.55);
+}
+.dark .hub-glass-panel[data-tone="muted"] {
+  background: hsl(0 0% 100% / 0.035);
+  border-color: hsl(0 0% 100% / 0.07);
+}
+.dark .hub-glass-panel[data-tone="error"] {
+  background: hsl(0 55% 18% / 0.35);
+  border-color: hsl(0 62% 45% / 0.35);
+}
+.dark .hub-glass-panel[data-active] {
+  border-color: hsl(0 0% 100% / 0.12);
+  background: hsl(0 0% 100% / 0.08);
+}
+
+.hub-status-banner {
+  position: relative;
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 97% / 0.52);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  backdrop-filter: blur(28px) saturate(180%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.8) inset,
+    0 10px 28px -16px hsl(220 25% 10% / 0.14);
+}
+.hub-status-banner[data-ready] {
+  border-color: hsl(0 0% 0% / 0.1);
+  background: hsl(240 14% 98% / 0.62);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.88) inset,
+    0 12px 32px -16px hsl(220 25% 10% / 0.16);
+}
+.dark .hub-status-banner {
+  border-color: hsl(0 0% 100% / 0.09);
+  background: hsl(0 0% 100% / 0.05);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 10px 28px -16px hsl(0 0% 0% / 0.55);
+}
+.dark .hub-status-banner[data-ready] {
+  border-color: hsl(0 0% 100% / 0.11);
+  background: hsl(0 0% 100% / 0.07);
+}
+
+.hub-segmented-track {
+  display: inline-flex;
+  flex-shrink: 0;
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 97% / 0.5);
+  padding: 0.25rem;
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+  backdrop-filter: blur(20px) saturate(170%);
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.75) inset;
+}
+.dark .hub-segmented-track {
+  border-color: hsl(0 0% 100% / 0.08);
+  background: hsl(0 0% 100% / 0.04);
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.05) inset;
+}
+
+.hub-segment-button {
+  position: relative;
+  display: inline-flex;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  padding-inline: 1rem;
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: hsl(var(--muted-foreground));
+  transition:
+    background-color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    box-shadow 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.hub-segment-button:hover {
+  background: hsl(var(--background) / 0.65);
+  color: hsl(var(--foreground));
+}
+.hub-segment-button:active {
+  transform: scale(0.97);
+}
+.hub-segment-button[data-active] {
+  background: hsl(240 14% 99% / 0.92);
+  color: hsl(var(--foreground));
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.9) inset,
+    0 4px 12px -8px hsl(220 25% 10% / 0.16);
+  outline: 1px solid hsl(0 0% 0% / 0.08);
+}
+.dark .hub-segment-button[data-active] {
+  background: hsl(0 0% 100% / 0.09);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.08) inset,
+    0 4px 12px -8px hsl(0 0% 0% / 0.5);
+  outline-color: hsl(0 0% 100% / 0.1);
+}
+.hub-segment-count {
+  display: inline-flex;
+  height: 1rem;
+  min-width: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding-inline: 0.25rem;
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  background: hsl(var(--muted) / 0.7);
+  color: hsl(var(--muted-foreground));
+}
+.hub-segment-count[data-active] {
+  background: hsl(var(--foreground) / 0.08);
+  color: hsl(var(--foreground) / 0.85);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hub-segment-button:active {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .hub-header-icon,
+  .hub-glass-panel,
+  .hub-status-banner,
+  .hub-segmented-track {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: hsl(var(--background));
+  }
+}
diff --git a/crates/agent-gateway/web/src/pages/chat/transcript/FloorNavRail.tsx b/crates/agent-gateway/web/src/pages/chat/transcript/FloorNavRail.tsx
index e3f160a0b..75b012aec 100644
--- a/crates/agent-gateway/web/src/pages/chat/transcript/FloorNavRail.tsx
+++ b/crates/agent-gateway/web/src/pages/chat/transcript/FloorNavRail.tsx
@@ -253,15 +253,15 @@ export function FloorNavRail(props: {
         // 收藏区的副本不带定位锚点，展开自动居中永远对准主列表里的当前行。
         data-floor-active={(isActive && !isPinnedCopy) || undefined}
         className={cn(
-          "group/floor flex items-center gap-1 rounded-lg pr-1 transition-colors",
-          isActive ? "bg-foreground/[0.06]" : "hover:bg-foreground/[0.04]",
+          "floor-nav-row group/floor flex items-center gap-1 rounded-[10px] pr-1",
+          isActive ? "bg-foreground/[0.07]" : "hover:bg-foreground/[0.045]",
         )}
       >
         <button
           type="button"
           onClick={() => handleJump(floor.rowKey)}
           className={cn(
-            "min-w-0 flex-1 truncate px-2 py-1.5 text-left text-[12px] leading-tight",
+            "min-w-0 flex-1 truncate px-2 py-1.5 text-left text-[12px] leading-snug tracking-tight",
             isActive ? "font-medium text-foreground" : "text-muted-foreground",
           )}
           title={floor.preview}
@@ -274,10 +274,10 @@ export function FloorNavRail(props: {
           title={isBookmarked ? unpinLabel : pinLabel}
           onClick={() => toggleFloorBookmark(conversationId, floor.messageId)}
           className={cn(
-            "flex h-6 w-6 shrink-0 items-center justify-center rounded-md transition-all",
+            "floor-nav-pin flex h-6 w-6 shrink-0 items-center justify-center rounded-md motion-reduce:active:scale-100",
             isBookmarked
-              ? "text-amber-500 hover:text-amber-600"
-              : "text-muted-foreground/50 opacity-0 hover:text-foreground group-hover/floor:opacity-100 focus-visible:opacity-100",
+              ? "text-amber-500 hover:bg-amber-500/10 hover:text-amber-600"
+              : "text-muted-foreground/50 opacity-0 hover:bg-foreground/[0.06] hover:text-foreground group-hover/floor:opacity-100 focus-visible:opacity-100",
             // 触屏没有 hover 显隐，收藏按钮常显。
             isCoarsePointer && "opacity-100",
           )}
@@ -294,7 +294,7 @@ export function FloorNavRail(props: {
       aria-label={railLabel}
       aria-hidden={!railVisible || undefined}
       className={cn(
-        "pointer-events-none absolute right-4 top-2 z-10 flex items-center transition-opacity duration-200",
+        "pointer-events-none absolute right-4 top-2 z-10 flex items-center transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
         railVisible ? "opacity-100" : "opacity-0",
       )}
       style={{ bottom: bottomOffset }}
@@ -302,7 +302,7 @@ export function FloorNavRail(props: {
       {expanded ? (
         <div
           className={cn(
-            "floor-nav-panel flex max-h-[min(78%,560px)] w-60 max-w-[calc(100vw-2rem)] touch-manipulation flex-col overflow-hidden rounded-xl border border-border/50 bg-background/85 shadow-[0_12px_32px_-16px_rgba(15,23,42,0.28)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.06]",
+            "floor-nav-panel flex max-h-[min(78%,560px)] w-60 max-w-[calc(100vw-2rem)] touch-manipulation flex-col overflow-hidden rounded-2xl",
             // 隐藏态不吃指针事件：触摸透传给转写区，不会点到看不见的控件。
             railVisible ? "pointer-events-auto" : "pointer-events-none",
           )}
@@ -310,8 +310,8 @@ export function FloorNavRail(props: {
         >
           <div ref={panelScrollRef} className="min-h-0 overflow-y-auto p-1.5">
             {bookmarkedFloors.length > 0 ? (
-              <div className="mb-1.5 rounded-lg bg-amber-500/[0.07] p-1 ring-1 ring-amber-500/20">
-                <div className="flex items-center gap-1.5 px-1.5 pb-1 pt-0.5 text-[10.5px] font-medium text-amber-600/90 dark:text-amber-400/90">
+              <div className="mb-1.5 rounded-[10px] bg-amber-500/[0.07] p-1 ring-1 ring-amber-500/20">
+                <div className="chat-sidebar-section-label flex items-center gap-1.5 px-1.5 pb-1 pt-0.5 text-amber-600/90 dark:text-amber-400/90">
                   <Pin className="h-2.5 w-2.5 fill-current" />
                   {pinnedTitle}
                 </div>
@@ -352,7 +352,7 @@ export function FloorNavRail(props: {
                 onClick={() => handleJump(floor.rowKey)}
                 className={cn(
                   // after 伪元素把命中区扩到整条槽位高度，覆盖标记间 7px 间隙。
-                  "relative h-[2.5px] rounded-full transition-all duration-150 after:absolute after:-inset-x-2 after:-inset-y-1 after:content-['']",
+                  "floor-nav-marker relative h-[2.5px] rounded-full after:absolute after:-inset-x-2 after:-inset-y-1 after:content-['']",
                   isActive ? "w-[18px]" : "w-3 hover:w-[18px]",
                   isBookmarked
                     ? "bg-amber-500/90"
diff --git a/crates/agent-gateway/web/src/pages/mcp-hub/McpHubPage.tsx b/crates/agent-gateway/web/src/pages/mcp-hub/McpHubPage.tsx
index 82301550e..619eed913 100644
--- a/crates/agent-gateway/web/src/pages/mcp-hub/McpHubPage.tsx
+++ b/crates/agent-gateway/web/src/pages/mcp-hub/McpHubPage.tsx
@@ -1,5 +1,11 @@
 import { useState } from "react";
-import { HubBackdrop, HubHeader } from "../../components/hub/HubChrome";
+import {
+  HubBackdrop,
+  HubHeader,
+  HubSegmentButton,
+  HubSegmentedTrack,
+  HubStatusBanner,
+} from "../../components/hub/HubChrome";
 import { Cable, Cloud, Download, Plug, Plus, Server, Sparkles } from "../../components/icons";
 import { Button } from "../../components/ui/button";
 import { useLocale } from "../../i18n";
@@ -71,22 +77,13 @@ export function McpHubPage(props: McpHubPageProps) {
         <div className="hub-scroll min-h-0 flex-1 overflow-hidden px-5 pb-6 pt-2 sm:px-6 lg:px-8 xl:px-10">
           <div className="hub-content-stage mx-auto flex h-full min-h-0 w-full max-w-[1320px] flex-col gap-4">
             {/* Status banner */}
-            <div
-              className={cn(
-                "hub-panel-enter relative overflow-hidden rounded-2xl border backdrop-blur-xl",
-                ready
-                  ? "border-border/50 bg-background/75 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_8px_24px_-18px_rgba(15,23,42,0.18)] dark:border-white/[0.09] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_8px_24px_-18px_rgba(0,0,0,0.6)]"
-                  : "border-border/40 bg-background/60",
-              )}
-            >
+            <HubStatusBanner ready={ready}>
               <div className="flex items-center gap-3 px-4 py-3.5 sm:gap-x-5 sm:px-5">
                 <div className="flex min-w-0 flex-1 items-center gap-3 sm:gap-3.5">
                   <div
                     className={cn(
-                      "relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition-colors",
-                      ready
-                        ? "border-border/50 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
-                        : "border-border/40 bg-muted/40 text-muted-foreground",
+                      "hub-header-icon relative flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] transition-colors",
+                      ready ? "text-foreground/85" : "text-muted-foreground opacity-80",
                     )}
                   >
                     <Plug className="h-5 w-5" />
@@ -96,13 +93,13 @@ export function McpHubPage(props: McpHubPageProps) {
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-                      <div className="text-[13.5px] font-semibold tracking-tight text-foreground">
+                      <div className="text-[13.5px] font-semibold tracking-[-0.015em] text-foreground">
                         {ready ? t("mcpHub.statusReady") : t("mcpHub.statusEmpty")}
                       </div>
                       {ready ? (
                         <span
                           className={cn(
-                            "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-medium tabular-nums backdrop-blur-md",
+                            "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-medium tabular-nums",
                             enabledCount > 0
                               ? "bg-foreground/[0.06] text-foreground/85 ring-1 ring-border/50"
                               : "bg-background/60 text-muted-foreground ring-1 ring-border/40",
@@ -116,7 +113,7 @@ export function McpHubPage(props: McpHubPageProps) {
                       ) : null}
                     </div>
                     {statusHint ? (
-                      <div className="mt-0.5 truncate text-[11.5px] text-muted-foreground">
+                      <div className="mt-0.5 truncate text-[11.5px] tracking-[-0.005em] text-muted-foreground">
                         {statusHint}
                       </div>
                     ) : null}
@@ -134,11 +131,11 @@ export function McpHubPage(props: McpHubPageProps) {
                   <span className="hidden whitespace-nowrap sm:inline">{t("mcpHub.add")}</span>
                 </Button>
               </div>
-            </div>
+            </HubStatusBanner>
 
             {/* Tab bar */}
             <div className="hub-panel-enter flex items-center justify-between gap-3">
-              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
+              <HubSegmentedTrack className="max-sm:max-w-full max-sm:overflow-x-auto max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden">
                 {[
                   {
                     value: "installed" as const,
@@ -160,40 +157,22 @@ export function McpHubPage(props: McpHubPageProps) {
                   },
                 ].map((item) => {
                   const Icon = item.icon;
-                  const active = view === item.value;
                   return (
-                    <button
+                    <HubSegmentButton
                       key={item.value}
-                      type="button"
+                      active={view === item.value}
+                      icon={<Icon className="h-3.5 w-3.5" />}
+                      count={item.count}
                       onClick={() => setView(item.value)}
-                      className={cn(
-                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all",
-                        active
-                          ? "bg-background/85 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-border/45 dark:bg-white/[0.08] dark:ring-white/[0.09] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_12px_-8px_rgba(0,0,0,0.55)]"
-                          : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
-                      )}
                     >
-                      <Icon className="h-3.5 w-3.5" />
-                      <span>{item.label}</span>
-                      {item.count !== null && item.count > 0 ? (
-                        <span
-                          className={cn(
-                            "ml-0.5 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums",
-                            active
-                              ? "bg-foreground/[0.08] text-foreground/85"
-                              : "bg-muted/70 text-muted-foreground",
-                          )}
-                        >
-                          {item.count}
-                        </span>
-                      ) : null}
-                    </button>
+                      {item.label}
+                    </HubSegmentButton>
                   );
                 })}
-              </div>
+              </HubSegmentedTrack>
 
               {view === "store" ? (
-                <div className="hidden text-[11.5px] text-muted-foreground sm:flex items-center gap-1.5">
+                <div className="hidden items-center gap-1.5 text-[11.5px] text-muted-foreground sm:flex">
                   <Sparkles className="h-3.5 w-3.5 text-foreground/55" />
                   <span>{t("mcpHub.storeSubtitle")}</span>
                 </div>
diff --git a/crates/agent-gui/src/components/MacOsTitleBarSpacer.tsx b/crates/agent-gui/src/components/MacOsTitleBarSpacer.tsx
index 4a8d798ee..5ecae390a 100644
--- a/crates/agent-gui/src/components/MacOsTitleBarSpacer.tsx
+++ b/crates/agent-gui/src/components/MacOsTitleBarSpacer.tsx
@@ -119,7 +119,8 @@ export function MacOsTitleBarToggle({
     : trafficLightLeft + trafficLightWidth + MAC_OS_TITLEBAR_TOGGLE_GAP;
   return (
     <div
-      className="fixed z-49 flex items-center gap-0.5 transition-[left] duration-200 ease-out [-webkit-app-region:no-drag]"
+      // Keep in lockstep with .chat-history-sidebar drawer motion (200ms apple ease).
+      className="fixed z-49 flex items-center gap-0.5 transition-[left] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none [-webkit-app-region:no-drag]"
       style={{
         top: toggleTop,
         left: toggleLeft,
diff --git a/crates/agent-gui/src/components/chat/ChatHistorySidebar.tsx b/crates/agent-gui/src/components/chat/ChatHistorySidebar.tsx
index 4d9f91787..9dcee6bdc 100644
--- a/crates/agent-gui/src/components/chat/ChatHistorySidebar.tsx
+++ b/crates/agent-gui/src/components/chat/ChatHistorySidebar.tsx
@@ -310,12 +310,13 @@ const HistoryRow = memo(function HistoryRow(props: {
 
   return (
     <div
+      data-selected={isSelectionMode && isSelected ? "true" : undefined}
       className={cn(
-        "chat-history-row group/item grid h-[30px] grid-cols-[minmax(0,1fr)_auto] items-center rounded-lg pl-1 transition-colors",
+        "chat-history-row chat-sidebar-row group/item grid h-[30px] grid-cols-[minmax(0,1fr)_auto] items-center rounded-[10px] pl-1",
         isSelectionMode && isSelected
           ? "bg-primary/10 text-foreground hover:bg-primary/[0.14]"
           : isActive
-            ? "bg-foreground/[0.07] text-foreground hover:bg-foreground/[0.09]"
+            ? "chat-sidebar-row-active text-foreground hover:bg-foreground/[0.1]"
             : "text-foreground/85 hover:bg-foreground/[0.05] hover:text-foreground",
         isSelectionMode && isSelectionDisabled && "opacity-50",
       )}
@@ -353,8 +354,10 @@ const HistoryRow = memo(function HistoryRow(props: {
       ) : (
         <button
           type="button"
+          data-sidebar-row-select=""
           onClick={handleSelect}
           onMouseDown={(event) => {
+            // Keep shift-click from stealing focus so bulk range select stays crisp.
             if (event.shiftKey) event.preventDefault();
           }}
           onDoubleClick={(event) => {
@@ -365,7 +368,7 @@ const HistoryRow = memo(function HistoryRow(props: {
           }}
           aria-pressed={isSelectionMode ? isSelected : undefined}
           disabled={isSelectionMode && isSelectionDisabled}
-          className="flex h-[30px] min-w-0 items-center gap-2 rounded-md px-2 text-left outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+          className="flex h-[30px] min-w-0 items-center gap-2 rounded-md px-2 text-left outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
           title={item.title}
         >
           {isSelectionMode ? (
@@ -629,14 +632,15 @@ const ProjectRow = memo(function ProjectRow(props: {
   return (
     <div
       ref={rowRef}
+      data-tone={isMissing ? "danger" : isArchived ? "muted" : undefined}
       className={cn(
-        "group/project grid h-[30px] grid-cols-[minmax(0,1fr)_auto] items-center rounded-lg pl-1 transition-colors",
+        "chat-sidebar-row group/project grid h-[30px] grid-cols-[minmax(0,1fr)_auto] items-center rounded-[10px] pl-1",
         isMissing
           ? "text-destructive hover:bg-destructive/10"
           : isArchived
             ? "text-muted-foreground/60 hover:bg-foreground/[0.03]"
             : isActive
-              ? "bg-foreground/[0.07] text-foreground hover:bg-foreground/[0.09]"
+              ? "chat-sidebar-row-active text-foreground hover:bg-foreground/[0.1]"
               : "text-foreground/85 hover:bg-foreground/[0.05] hover:text-foreground",
       )}
     >
@@ -689,9 +693,10 @@ const ProjectRow = memo(function ProjectRow(props: {
             render={
               <button
                 type="button"
+                data-sidebar-row-select=""
                 aria-disabled={isArchived || undefined}
                 className={cn(
-                  "flex h-[30px] min-w-0 items-center gap-3 rounded-md px-2 text-left outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                  "flex h-[30px] min-w-0 items-center gap-3 rounded-md px-2 text-left outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
                   isMissing
                     ? "hover:text-destructive focus-visible:bg-destructive/10"
                     : isArchived
@@ -1654,28 +1659,60 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
     ],
   );
 
+  // Track open→closed / closed→open so section grid transitions stay frozen
+  // for the duration of the shell slide (avoids a second content collapse).
+  const [sidebarMotionActive, setSidebarMotionActive] = useState(false);
+  const sidebarMotionTimerRef = useRef<number | null>(null);
+  const prevOpenRef = useRef(isOpen);
+  useEffect(() => {
+    if (prevOpenRef.current === isOpen) return;
+    prevOpenRef.current = isOpen;
+    setSidebarMotionActive(true);
+    if (sidebarMotionTimerRef.current !== null) {
+      window.clearTimeout(sidebarMotionTimerRef.current);
+    }
+    // Match --chat-sidebar-motion-duration (200ms) + a frame of slack.
+    sidebarMotionTimerRef.current = window.setTimeout(() => {
+      sidebarMotionTimerRef.current = null;
+      setSidebarMotionActive(false);
+    }, 220);
+    return () => {
+      if (sidebarMotionTimerRef.current !== null) {
+        window.clearTimeout(sidebarMotionTimerRef.current);
+        sidebarMotionTimerRef.current = null;
+      }
+    };
+  }, [isOpen]);
+
   return (
     <aside
+      data-state={isOpen ? "open" : "closed"}
+      data-animating={sidebarMotionActive || undefined}
+      aria-hidden={!isOpen}
+      // Width on the track + translate on the fixed 272px panel share one curve
+      // so content and chrome slide as a single drawer (no opacity / dual phase).
       className={cn(
-        "chat-history-sidebar zone-font-scale flex h-full shrink-0 flex-col overflow-hidden border-r border-border/50 bg-[hsl(var(--sidebar-bg))] transition-[width,opacity] duration-200 ease-out",
-        isOpen ? "w-[272px] opacity-100" : "w-0 opacity-0",
+        "chat-history-sidebar zone-font-scale h-full shrink-0 border-r",
+        !isOpen && "pointer-events-none",
       )}
       style={{ "--zone-font-scale": fontScale } as CSSProperties}
     >
-      <div className="chat-history-sidebar-inner flex w-[272px] min-w-[272px] min-h-0 flex-1 flex-col">
+      <div className="chat-history-sidebar-inner flex min-h-0 flex-col">
         <MacOsTitleBarSpacer className="bg-[hsl(var(--sidebar-bg))]" />
-        <div className="shrink-0 border-b border-border/50 px-2 pb-3 pt-3">
-          <div className="flex items-center justify-between gap-2">
-            <div className="flex min-w-0 -translate-y-0.5 items-center gap-2">
+        <div className="shrink-0 px-2 pb-2.5 pt-3">
+          <div className="flex items-center justify-between gap-2 px-1">
+            <div className="flex min-w-0 -translate-y-0.5 items-center gap-2.5">
               <img
                 src={iconSimpleUrl}
                 alt=""
                 aria-hidden="true"
                 draggable={false}
-                className="h-8 w-8 shrink-0 select-none rounded-xl object-contain"
+                className="h-7 w-7 shrink-0 select-none rounded-[9px] object-contain"
               />
               <div className="min-w-0">
-                <div className="truncate font-semibold tracking-tight">Live Agent</div>
+                <div className="truncate text-[calc(15px*var(--zone-font-scale,1))] font-semibold tracking-tight text-foreground">
+                  Live Agent
+                </div>
               </div>
             </div>
 
@@ -1686,26 +1723,26 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
                 size="icon"
                 onClick={onCloseSidebar}
                 title={t("sidebar.closeSidebar")}
-                className="h-9 w-9 shrink-0 rounded-2xl text-muted-foreground hover:text-foreground"
+                className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-foreground"
               >
                 <PanelLeftClose className="h-4 w-4" />
               </Button>
             )}
           </div>
 
-          <div className="mt-3 flex flex-col gap-0.5">
+          <div className="mt-3.5 flex flex-col gap-0.5">
             <Button
               type="button"
               variant="ghost"
               onClick={onNewConversation}
               className={cn(
-                "chat-history-new-conversation-button h-[30px] w-full justify-start gap-3 rounded-lg px-3 text-[calc(14px*var(--zone-font-scale,1))] font-normal leading-5 shadow-none transition-colors",
+                "chat-history-new-conversation-button h-8 w-full justify-start gap-3 rounded-[10px] px-3 text-[calc(13.5px*var(--zone-font-scale,1))] font-medium leading-5 shadow-none",
                 activeView === "chat"
-                  ? "text-foreground/90 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08]"
-                  : "text-foreground/80 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08]",
+                  ? "text-foreground hover:bg-foreground/[0.07] focus-visible:bg-foreground/[0.07]"
+                  : "text-foreground/80 hover:bg-foreground/[0.07] hover:text-foreground focus-visible:bg-foreground/[0.07]",
               )}
             >
-              <CirclePlus className="h-4 w-4 shrink-0 text-foreground/85" />
+              <CirclePlus className="h-4 w-4 shrink-0 text-foreground/80" />
               <span className="chat-history-new-conversation-label">
                 {t("chat.newConversation")}
               </span>
@@ -1715,17 +1752,17 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
               variant="ghost"
               onClick={() => onOpenSkillsHub?.()}
               className={cn(
-                "sidebar-hub-menu-item h-[30px] w-full justify-start gap-3 rounded-lg px-3 text-[calc(14px*var(--zone-font-scale,1))] font-normal leading-5 shadow-none transition-colors",
+                "sidebar-hub-menu-item h-8 w-full justify-start gap-3 rounded-[10px] px-3 text-[calc(13.5px*var(--zone-font-scale,1))] font-medium leading-5 shadow-none",
                 activeView === "skills-hub"
-                  ? "bg-foreground/[0.06] text-foreground hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08]"
-                  : "text-foreground/80 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08]",
+                  ? "chat-sidebar-row-active text-foreground hover:bg-foreground/[0.09] focus-visible:bg-foreground/[0.09]"
+                  : "text-foreground/80 hover:bg-foreground/[0.07] hover:text-foreground focus-visible:bg-foreground/[0.07]",
               )}
               title="Skills Hub"
             >
               <Blend
                 className={cn(
                   "h-4 w-4 shrink-0",
-                  activeView === "skills-hub" ? "text-amber-500" : "text-foreground/85",
+                  activeView === "skills-hub" ? "text-amber-500" : "text-foreground/75",
                 )}
               />
               <span className="truncate">Skills</span>
@@ -1735,17 +1772,17 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
               variant="ghost"
               onClick={() => onOpenMcpHub?.()}
               className={cn(
-                "sidebar-hub-menu-item h-[30px] w-full justify-start gap-3 rounded-lg px-3 text-[calc(14px*var(--zone-font-scale,1))] font-normal leading-5 shadow-none transition-colors",
+                "sidebar-hub-menu-item h-8 w-full justify-start gap-3 rounded-[10px] px-3 text-[calc(13.5px*var(--zone-font-scale,1))] font-medium leading-5 shadow-none",
                 activeView === "mcp-hub"
-                  ? "bg-foreground/[0.06] text-foreground hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08]"
-                  : "text-foreground/80 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:bg-foreground/[0.08]",
+                  ? "chat-sidebar-row-active text-foreground hover:bg-foreground/[0.09] focus-visible:bg-foreground/[0.09]"
+                  : "text-foreground/80 hover:bg-foreground/[0.07] hover:text-foreground focus-visible:bg-foreground/[0.07]",
               )}
               title="MCP Hub"
             >
               <Cable
                 className={cn(
                   "h-4 w-4 shrink-0",
-                  activeView === "mcp-hub" ? "text-violet-500" : "text-foreground/85",
+                  activeView === "mcp-hub" ? "text-violet-500" : "text-foreground/75",
                 )}
               />
               <span className="truncate">MCP</span>
@@ -1757,8 +1794,11 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
           ref={sidebarSectionsRef}
           style={{ gridTemplateRows: sidebarSectionLayout.gridTemplateRows }}
           className={cn(
-            "grid min-h-0 flex-1 content-start",
-            isProjectSectionResizing ? undefined : SIDEBAR_SECTION_ROWS_TRANSITION_CLASS,
+            "chat-history-sidebar-sections grid min-h-0 flex-1 content-start",
+            // Freeze row-height easing while the shell is sliding open/closed.
+            isProjectSectionResizing || sidebarMotionActive || !isOpen
+              ? undefined
+              : SIDEBAR_SECTION_ROWS_TRANSITION_CLASS,
           )}
         >
           {showProjects ? (
@@ -1770,13 +1810,13 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
                 <button
                   type="button"
                   aria-expanded={!projectsCollapsed}
-                  className="group flex min-w-0 items-center gap-1 rounded-md px-3 py-1 text-xs font-semibold text-muted-foreground outline-hidden"
+                  className="group flex min-w-0 items-center gap-1 rounded-md px-3 py-1 chat-sidebar-section-label outline-hidden"
                   onClick={() => onProjectsCollapsedChange?.(!projectsCollapsed)}
                 >
                   <span>{t("chat.workspaceSection")}</span>
                   <ChevronRight
                     aria-hidden="true"
-                    className="h-3.5 w-3.5 shrink-0 opacity-0 transition-[opacity,transform] duration-300 ease-in-out group-hover:opacity-100"
+                    className="h-3.5 w-3.5 shrink-0 opacity-0 transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-100"
                     style={{ transform: `rotate(${projectsCollapsed ? 0 : 90}deg)` }}
                   />
                 </button>
@@ -1943,7 +1983,7 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
             ref={recentHeaderRef}
             className={cn(
               "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2 pb-2",
-              showProjects ? "border-t border-border/35 pt-0.5" : "pt-3",
+              showProjects ? "border-t border-[hsl(var(--sidebar-separator)/0.7)] pt-1" : "pt-3",
             )}
           >
             {selectionMode ? (
@@ -1964,13 +2004,13 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
               <button
                 type="button"
                 aria-expanded={!recentCollapsed}
-                className="group flex min-w-0 items-center gap-1 rounded-md px-3 py-1 text-xs font-semibold text-muted-foreground outline-hidden"
+                className="group flex min-w-0 items-center gap-1 rounded-md px-3 py-1 chat-sidebar-section-label outline-hidden"
                 onClick={() => onRecentCollapsedChange?.(!recentCollapsed)}
               >
                 <span className="min-w-0 truncate">{t("chat.recentConversation")}</span>
                 <ChevronRight
                   aria-hidden="true"
-                  className="h-3.5 w-3.5 shrink-0 opacity-0 transition-[opacity,transform] duration-300 ease-in-out group-hover:opacity-100"
+                  className="h-3.5 w-3.5 shrink-0 opacity-0 transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-100"
                   style={{ transform: `rotate(${recentCollapsed ? 0 : 90}deg)` }}
                 />
               </button>
@@ -2130,16 +2170,16 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
             </div>
           </div>
         </div>
-        <div className="shrink-0 border-t border-border/50 bg-[hsl(var(--sidebar-bg))] px-2 py-1.5">
+        <div className="shrink-0 border-t border-[hsl(var(--sidebar-separator)/0.7)] bg-[hsl(var(--sidebar-bg))] px-2 py-1.5">
           <div className="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
             <Button
               type="button"
               variant="ghost"
               onClick={onOpenSettings}
-              className="h-8 w-full min-w-0 justify-start gap-2.5 rounded-lg px-2.5 text-[calc(13px*var(--zone-font-scale,1))] font-normal text-foreground/85 shadow-none hover:bg-foreground/[0.08] hover:text-foreground"
+              className="h-8 w-full min-w-0 justify-start gap-2.5 rounded-[10px] px-2.5 text-[calc(13px*var(--zone-font-scale,1))] font-medium text-foreground/85 shadow-none hover:bg-foreground/[0.07] hover:text-foreground"
               title={t("tooltip.settings")}
             >
-              <Settings className="h-4 w-4 shrink-0 text-foreground/75" />
+              <Settings className="h-4 w-4 shrink-0 text-foreground/70" />
               <span className="truncate">{t("tooltip.settings")}</span>
             </Button>
             {appUpdate?.showUpdateButton ? (
diff --git a/crates/agent-gui/src/components/hub/HubChrome.tsx b/crates/agent-gui/src/components/hub/HubChrome.tsx
index 31816c548..8a1ae88b2 100644
--- a/crates/agent-gui/src/components/hub/HubChrome.tsx
+++ b/crates/agent-gui/src/components/hub/HubChrome.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 import { useLocale } from "../../i18n";
 import { cn } from "../../lib/shared/utils";
 import { PanelLeft } from "../icons";
@@ -7,15 +7,14 @@ import { Button } from "../ui/button";
 
 export function HubBackdrop(props: { tone?: "amber" | "violet" | "neutral" }) {
   const { tone = "neutral" } = props;
-  // macOS frosted-glass: subtle monochrome wash; tone provides only the faintest temperature shift.
-  // Dark: the canvas drops below --background (--hub-canvas) so background-tinted glass reads
-  // elevated, and the halos stay a whisper above the canvas instead of a gray fog.
+  // Cool monochrome wash; tone only shifts temperature slightly.
+  // Dark canvas sits below --background so glass panels read elevated.
   const haloClass =
     tone === "amber"
-      ? "bg-[radial-gradient(circle_at_top_left,hsl(0_0%_100%/0.85),transparent_60%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(222_18%_14%/0.55),transparent_60%)]"
+      ? "bg-[radial-gradient(circle_at_top_left,hsl(40_30%_98%/0.9),transparent_58%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(36_18%_14%/0.45),transparent_58%)]"
       : tone === "violet"
-        ? "bg-[radial-gradient(circle_at_top_left,hsl(220_18%_98%/0.85),transparent_60%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(224_20%_14%/0.55),transparent_60%)]"
-        : "bg-[radial-gradient(circle_at_top_left,hsl(0_0%_100%/0.8),transparent_60%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(224_18%_14%/0.5),transparent_60%)]";
+        ? "bg-[radial-gradient(circle_at_top_left,hsl(250_28%_98%/0.9),transparent_58%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(250_18%_14%/0.45),transparent_58%)]"
+        : "bg-[radial-gradient(circle_at_top_left,hsl(240_12%_98%/0.88),transparent_58%)] dark:bg-[radial-gradient(circle_at_top_left,hsl(240_12%_14%/0.4),transparent_58%)]";
   return (
     <>
       <div className="pointer-events-none absolute inset-0 bg-[hsl(var(--hub-canvas))]" />
@@ -27,7 +26,7 @@ export function HubBackdrop(props: { tone?: "amber" | "violet" | "neutral" }) {
       />
       <div
         className={cn(
-          "pointer-events-none absolute -right-24 bottom-0 h-[360px] w-[360px] rounded-full opacity-60 blur-3xl",
+          "pointer-events-none absolute -right-24 bottom-0 h-[360px] w-[360px] rounded-full opacity-55 blur-3xl",
           haloClass,
         )}
       />
@@ -51,7 +50,7 @@ export function HubHeader(props: {
   return (
     <>
       <MacOsTitleBarSpacer />
-      <div className="hub-header relative z-10 px-5 pt-6 pb-3 sm:px-6 lg:px-8 xl:px-10">
+      <div className="hub-header relative z-10 px-5 pb-3 pt-5 sm:px-6 lg:px-8 xl:px-10">
         {showSidebarButton ? (
           <Button
             type="button"
@@ -59,26 +58,29 @@ export function HubHeader(props: {
             size="icon"
             onClick={onOpenSidebar}
             title={t("tooltip.openSidebar")}
-            className="absolute left-3 top-5 h-9 w-9 rounded-lg text-muted-foreground hover:bg-background/70 hover:text-foreground"
+            className="absolute left-3 top-4 h-9 w-9 rounded-full text-muted-foreground hover:bg-background/70 hover:text-foreground"
           >
             <PanelLeft className="h-4.5 w-4.5" />
           </Button>
         ) : null}
         <div
           className={cn(
-            "mx-auto flex w-full max-w-[1320px] items-center gap-4",
+            "mx-auto flex w-full max-w-[1320px] items-center gap-3.5",
             showSidebarButton && "pl-11 lg:pl-0",
           )}
         >
-          <div className="hub-header-icon flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-border/40 bg-background/70 text-foreground/80 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset] backdrop-blur-xl">
+          <div className="hub-header-icon flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] text-foreground/80">
             {icon}
           </div>
           <div className="min-w-0 flex-1">
-            <h1 className="text-[21px] font-semibold leading-tight tracking-tight text-foreground">
+            <h1 className="text-[calc(22px*var(--zone-font-scale,1))] font-semibold leading-[1.15] tracking-[-0.022em] text-foreground">
               {title}
             </h1>
             {subtitle ? (
-              <p className="mt-0.5 truncate text-[12px] text-muted-foreground" title={subtitle}>
+              <p
+                className="mt-0.5 truncate text-[12.5px] leading-snug tracking-[-0.005em] text-muted-foreground"
+                title={subtitle}
+              >
                 {subtitle}
               </p>
             ) : null}
@@ -97,31 +99,61 @@ export function GlassPanel(props: {
   className?: string;
 }) {
   const { children, tone = "default", active = false, className } = props;
-  const toneClass = (() => {
-    switch (tone) {
-      case "muted":
-        return "border-border/40 bg-muted/40";
-      case "error":
-        return "border-destructive/30 bg-destructive/5";
-      case "amber":
-      case "violet":
-      case "neutral":
-        return active
-          ? "border-border/55 bg-background/80 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_6px_22px_-14px_rgba(15,23,42,0.18)] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_6px_22px_-14px_rgba(0,0,0,0.55)]"
-          : "border-border/40 bg-background/60";
-      default:
-        return "border-border/40 bg-background/60";
-    }
-  })();
   return (
     <div
-      className={cn(
-        "hub-glass-panel rounded-2xl border px-4 py-3.5 backdrop-blur-xl",
-        toneClass,
-        className,
-      )}
+      data-tone={tone}
+      data-active={active || undefined}
+      className={cn("hub-glass-panel", className)}
     >
       {children}
     </div>
   );
 }
+
+/** Status strip under HubHeader (Skills enabled / MCP ready). */
+export function HubStatusBanner(props: {
+  ready?: boolean;
+  children: ReactNode;
+  className?: string;
+}) {
+  const { ready = false, children, className } = props;
+  return (
+    <div
+      data-ready={ready || undefined}
+      className={cn("hub-status-banner hub-panel-enter", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Segmented tab track (Installed / Store / Import). */
+export function HubSegmentedTrack(props: { children: ReactNode; className?: string }) {
+  return <div className={cn("hub-segmented-track", props.className)}>{props.children}</div>;
+}
+
+export function HubSegmentButton(
+  props: ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+    icon?: ReactNode;
+    count?: number | null;
+  },
+) {
+  const { active, icon, count, className, children, type = "button", ...rest } = props;
+  return (
+    <button
+      type={type}
+      data-active={active || undefined}
+      className={cn("hub-segment-button", className)}
+      {...rest}
+    >
+      {icon}
+      <span>{children}</span>
+      {count != null && count > 0 ? (
+        <span className="hub-segment-count" data-active={active || undefined}>
+          {count}
+        </span>
+      ) : null}
+    </button>
+  );
+}
diff --git a/crates/agent-gui/src/components/project-tools/RightDockLauncher.tsx b/crates/agent-gui/src/components/project-tools/RightDockLauncher.tsx
index f2b9520e1..2bd23ebaa 100644
--- a/crates/agent-gui/src/components/project-tools/RightDockLauncher.tsx
+++ b/crates/agent-gui/src/components/project-tools/RightDockLauncher.tsx
@@ -190,7 +190,7 @@ export function RightDockChooser(props: RightDockChooserProps) {
             onClick={tool.onClick}
             disabled={tool.disabled}
             title={tool.titleAttr}
-            className="group flex items-center gap-3 rounded-lg border border-border/60 bg-background px-3.5 py-3 text-left text-sm text-foreground transition-all hover:border-border hover:bg-muted/60 hover:shadow-sm disabled:pointer-events-none disabled:opacity-50"
+            className="group flex items-center gap-3 rounded-2xl border border-border/50 bg-background/70 px-3.5 py-3 text-left text-sm text-foreground shadow-[0_1px_0_rgba(255,255,255,0.45)_inset] backdrop-blur-md transition-[background-color,border-color,transform,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-border hover:bg-background/90 hover:shadow-sm active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 motion-reduce:active:scale-100 dark:border-white/[0.08] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
           >
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors group-hover:bg-muted group-hover:text-foreground">
               {tool.icon}
diff --git a/crates/agent-gui/src/components/project-tools/RightDockPanel.tsx b/crates/agent-gui/src/components/project-tools/RightDockPanel.tsx
index 1d8fbecc2..b58a42ad2 100644
--- a/crates/agent-gui/src/components/project-tools/RightDockPanel.tsx
+++ b/crates/agent-gui/src/components/project-tools/RightDockPanel.tsx
@@ -742,22 +742,18 @@ export const RightDockPanel = memo(function RightDockPanel(props: RightDockPanel
         data-state={isOpen ? "open" : "closed"}
         data-project-tools-resizing={isResizing ? "true" : undefined}
         className={cn(
-          "project-tools-panel zone-font-scale fixed inset-x-0 bottom-0 z-40 flex h-[min(72vh,34rem)] min-h-0 w-full shrink-0 flex-col overflow-hidden bg-background shadow-2xl transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none md:relative md:inset-auto md:z-10 md:h-full md:overflow-visible md:shadow-none",
+          // Desktop: single drawer (track width + panel slide). Do NOT fade
+          // opacity first then collapse width — that reads as a double close.
+          // Mobile: bottom sheet via translate-y only.
+          "project-tools-panel zone-font-scale fixed inset-x-0 bottom-0 z-40 h-[min(72vh,34rem)] min-h-0 w-full shrink-0 overflow-hidden border-t shadow-[0_-12px_40px_-18px_rgba(15,23,42,0.28)] motion-reduce:transition-none md:relative md:inset-auto md:z-10 md:h-full md:border-l md:border-t-0 md:shadow-none",
           isOpen
-            ? "pointer-events-auto translate-y-0 border-t border-border opacity-100 md:w-[var(--project-tools-panel-width)] md:translate-x-0 md:border-l md:border-t-0"
-            : "pointer-events-none translate-y-full border-t border-transparent opacity-0 md:translate-x-3 md:translate-y-0 md:border-l-0 md:border-t-0",
+            ? "pointer-events-auto translate-y-0 md:translate-y-0"
+            : "pointer-events-none translate-y-full border-transparent md:translate-y-0",
           effectiveWidthCollapsed ? "md:w-0" : "md:w-[var(--project-tools-panel-width)]",
         )}
         style={{ ...panelStyle, "--zone-font-scale": fontScale } as CSSProperties}
       >
-        <div
-          className={cn(
-            "project-tools-panel-inner flex h-full min-h-0 w-full flex-col transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none md:w-[var(--project-tools-panel-width)] md:min-w-[var(--project-tools-panel-width)]",
-            isOpen
-              ? "translate-y-0 opacity-100 md:translate-x-0"
-              : "translate-y-3 opacity-0 md:translate-x-2 md:translate-y-0",
-          )}
-        >
+        <div className="project-tools-panel-inner flex h-full min-h-0 w-full flex-col md:w-[var(--project-tools-panel-width)] md:min-w-[var(--project-tools-panel-width)]">
           {effectiveShouldRenderContent ? (
             <>
               <div className="project-tools-panel-handle" aria-hidden="true" />
@@ -780,7 +776,7 @@ export const RightDockPanel = memo(function RightDockPanel(props: RightDockPanel
                   )}
                 />
               </button>
-              <div className="project-tools-panel-header flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
+              <div className="project-tools-panel-header flex h-11 shrink-0 items-center gap-2 px-3">
                 <div
                   className="project-tools-panel-tabs-shell flex min-w-0 flex-1 flex-col justify-center gap-1"
                   onWheel={handleTabsWheel}
diff --git a/crates/agent-gui/src/components/project-tools/useRightDockPanelWidth.ts b/crates/agent-gui/src/components/project-tools/useRightDockPanelWidth.ts
index 92eff9f17..6ad888bf2 100644
--- a/crates/agent-gui/src/components/project-tools/useRightDockPanelWidth.ts
+++ b/crates/agent-gui/src/components/project-tools/useRightDockPanelWidth.ts
@@ -143,9 +143,12 @@ export function useRightDockPanelWidth(options: UseRightDockPanelWidthOptions) {
       setWidthCollapsed(true);
       return;
     }
+    // Collapse track width immediately so CSS can animate width + panel slide
+    // together. Only delay unmounting content until the drawer motion finishes
+    // (must match --project-tools-motion-duration).
+    setWidthCollapsed(true);
     const timer = window.setTimeout(() => {
       setShouldRenderContent(false);
-      setWidthCollapsed(true);
     }, 220);
     return () => window.clearTimeout(timer);
   }, [collapseImmediately, isOpen]);
diff --git a/crates/agent-gui/src/components/ui/button.tsx b/crates/agent-gui/src/components/ui/button.tsx
index 6dccde47c..bb20c2f62 100644
--- a/crates/agent-gui/src/components/ui/button.tsx
+++ b/crates/agent-gui/src/components/ui/button.tsx
@@ -5,7 +5,9 @@ import * as React from "react";
 import { cn } from "../../lib/shared/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  // Press feedback on pointer-down (Apple Response): scale only — never layout.
+  // motion-reduce drops the transform so keyboard/high-frequency use stays crisp.
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,opacity,box-shadow,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97] motion-reduce:active:scale-100",
   {
     variants: {
       variant: {
@@ -14,7 +16,7 @@ const buttonVariants = cva(
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
       },
       size: {
         default: "h-9 px-4 py-2",
diff --git a/crates/agent-gui/src/index.css b/crates/agent-gui/src/index.css
index aa352c8e8..c1ab80531 100644
--- a/crates/agent-gui/src/index.css
+++ b/crates/agent-gui/src/index.css
@@ -167,63 +167,83 @@
 @layer base {
   :root {
     color-scheme: light;
-    --app-font-family: ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
-    --chat-font-family: "OpenAI Sans Semibold", "PingFang SC", "Microsoft YaHei", sans-serif;
+    /* Prefer platform system face (SF Pro / Segoe / PingFang) for optical sizing
+       and tracking tables — Apple typography default before custom faces. */
+    --app-font-family:
+      -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", ui-sans-serif, system-ui,
+      "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+    --chat-font-family:
+      "OpenAI Sans Semibold", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
+      sans-serif;
     --code-font-family:
       "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Liberation Mono",
       monospace;
+
+    /* Apple motion vocabulary (WWDC Designing Fluid Interfaces / Emil curves) */
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
+    --duration-press: 100ms;
+    --duration-ui: 200ms;
+    --duration-sheet: 320ms;
+    --press-scale: 0.97;
+    /* ChatHeader row (py-2.5 + h-8) — keep in sync with overlay pad / composer top */
+    --chat-header-height: 3.25rem;
+
+    /* Light canvas: near-pure white content, cooler structural sidebar (#F5F5F7) */
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 10% 8%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 240 10% 8%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 240 10% 8%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 240 8% 12%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 240 6% 96%;
+    --secondary-foreground: 240 8% 12%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 240 6% 96%;
+    --muted-foreground: 240 5% 42%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 240 6% 96%;
+    --accent-foreground: 240 8% 12%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 240 6% 90%;
+    --input: 240 6% 90%;
+    --ring: 240 6% 40%;
 
-    --radius: 0.5rem;
+    --radius: 0.625rem;
 
-    /* Sidebar */
-    --sidebar-bg: 220 14% 96%;
+    /* Sidebar — heavier material encodes structure (Apple materials hierarchy) */
+    --sidebar-bg: 240 6% 96%;
+    --sidebar-separator: 240 6% 88%;
 
     /* Hub pages (MCP/Skills) canvas — in dark it sits below --background so
        background-tinted glass panels read as elevated surfaces. */
     --hub-canvas: var(--background);
 
     /* Chip / pill buttons (MCP, Skills, 新对话) */
-    --chip-bg: 220 13% 91%;
-    --chip-bg-hover: 220 13% 86%;
+    --chip-bg: 240 6% 91%;
+    --chip-bg-hover: 240 5% 86%;
     /* Send button disabled */
-    --send-disabled-bg: 220 13% 91%;
+    --send-disabled-bg: 240 6% 91%;
 
-    /* Chat-specific tokens */
-    --chat-user-bg: 220 9% 91%;
-    --chat-user-fg: 222 84% 5%;
+    /* Chat-specific tokens — user bubble closer to Messages gray fill */
+    --chat-user-bg: 240 6% 92%;
+    --chat-user-fg: 240 10% 8%;
     --chat-assistant-bg: 0 0% 100%;
-    --chat-assistant-fg: 222.2 84% 4.9%;
+    --chat-assistant-fg: 240 10% 8%;
     --chat-tool-bg: 0 0% 100%;
-    --chat-tool-border: 220 13% 91%;
-    --chat-thinking-bg: 220 14% 97%;
-    --chat-thinking-border: 220 13% 90%;
+    --chat-tool-border: 240 6% 90%;
+    --chat-thinking-bg: 240 6% 97%;
+    --chat-thinking-border: 240 6% 90%;
     --chat-success: 152 60% 42%;
     --chat-error: 0 72% 51%;
     --chat-running: 252 56% 57%;
@@ -252,53 +272,55 @@
   .dark {
     color-scheme: dark;
 
-    --background: 224 22% 9%;
-    --foreground: 210 30% 96%;
+    /* Apple dark canvas (~#1C1C1E content, slightly elevated chrome) */
+    --background: 240 6% 7%;
+    --foreground: 240 8% 96%;
 
-    --card: 224 22% 10%;
-    --card-foreground: 210 30% 96%;
+    --card: 240 5% 9%;
+    --card-foreground: 240 8% 96%;
 
-    --popover: 224 20% 12%;
-    --popover-foreground: 210 30% 96%;
+    --popover: 240 5% 11%;
+    --popover-foreground: 240 8% 96%;
 
-    --primary: 210 30% 96%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 240 8% 96%;
+    --primary-foreground: 240 8% 10%;
 
-    --secondary: 220 18% 17%;
-    --secondary-foreground: 210 30% 96%;
+    --secondary: 240 5% 14%;
+    --secondary-foreground: 240 8% 96%;
 
-    --muted: 220 18% 17%;
-    --muted-foreground: 215 18% 76%;
+    --muted: 240 5% 14%;
+    --muted-foreground: 240 5% 68%;
 
-    --accent: 220 18% 17%;
-    --accent-foreground: 210 30% 96%;
+    --accent: 240 5% 14%;
+    --accent-foreground: 240 8% 96%;
 
-    --destructive: 0 62.8% 36%;
-    --destructive-foreground: 210 30% 96%;
+    --destructive: 0 55% 38%;
+    --destructive-foreground: 240 8% 96%;
 
-    --border: 220 14% 26%;
-    --input: 220 14% 26%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 240 4% 18%;
+    --input: 240 4% 18%;
+    --ring: 240 5% 55%;
 
     /* Chip / pill buttons (dark) */
-    --chip-bg: 220 16% 24%;
-    --chip-bg-hover: 220 16% 30%;
+    --chip-bg: 240 5% 18%;
+    --chip-bg-hover: 240 5% 22%;
     /* Send button disabled (dark) */
-    --send-disabled-bg: 220 16% 24%;
+    --send-disabled-bg: 240 5% 18%;
 
     /* Hub pages canvas (dark) — deeper than --background for glass elevation */
-    --hub-canvas: 224 24% 6.5%;
+    --hub-canvas: 240 8% 5%;
 
     /* Chat-specific tokens (dark) */
-    --sidebar-bg: 224 22% 11%;
-    --chat-user-bg: 220 14% 28%;
-    --chat-user-fg: 210 30% 96%;
-    --chat-assistant-bg: 224 22% 9%;
-    --chat-assistant-fg: 210 30% 96%;
-    --chat-tool-bg: 224 22% 9%;
-    --chat-tool-border: 220 14% 24%;
-    --chat-thinking-bg: 220 18% 13%;
-    --chat-thinking-border: 220 14% 22%;
+    --sidebar-bg: 240 5% 9%;
+    --sidebar-separator: 240 4% 16%;
+    --chat-user-bg: 240 5% 18%;
+    --chat-user-fg: 240 8% 96%;
+    --chat-assistant-bg: 240 6% 7%;
+    --chat-assistant-fg: 240 8% 96%;
+    --chat-tool-bg: 240 6% 7%;
+    --chat-tool-border: 240 4% 16%;
+    --chat-thinking-bg: 240 5% 11%;
+    --chat-thinking-border: 240 4% 16%;
     --chat-success: 152 56% 52%;
     --chat-error: 0 75% 65%;
     --chat-running: 252 60% 70%;
@@ -719,21 +741,55 @@
     --text-2xl: calc(1.5rem * var(--zone-font-scale, 1));
   }
 
+  /*
+   * Assistant markdown — Apple reading rhythm (WWDC UI Typography):
+   * size-specific tracking, inverse leading (tight headings / open body),
+   * hierarchy from weight+size+leading together. Values are intentional.
+   */
   .chat-markdown {
-    @apply text-[calc(15px*var(--zone-font-scale,1))] leading-8 text-foreground;
+    --chat-md-size: calc(15.5px * var(--zone-font-scale, 1));
+    --chat-md-leading: 1.52;
+    --chat-md-tracking: -0.011em;
+    --chat-md-para-gap: 0.7em;
+    --chat-md-block-gap: 0.95em;
+    font-size: var(--chat-md-size);
+    line-height: var(--chat-md-leading);
+    letter-spacing: var(--chat-md-tracking);
+    color: hsl(var(--foreground) / 0.94);
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
   }
 
   .chat-markdown p {
-    @apply my-2 min-w-0 max-w-full break-words text-[calc(15px*var(--zone-font-scale,1))] leading-8 text-foreground [overflow-wrap:anywhere];
+    margin-block: var(--chat-md-para-gap);
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    font-size: var(--chat-md-size);
+    line-height: var(--chat-md-leading);
+    letter-spacing: var(--chat-md-tracking);
+    color: hsl(var(--foreground) / 0.94);
+  }
+
+  /* Tighter first paragraph under a heading; open air between prose blocks */
+  .chat-markdown [data-streamdown^="heading-"] + p {
+    margin-top: 0.35em;
+  }
+  .chat-markdown p + p {
+    margin-top: var(--chat-md-para-gap);
   }
 
   .chat-markdown strong,
   .chat-markdown [data-streamdown="strong"] {
-    @apply font-medium text-foreground;
+    font-weight: 600;
+    color: hsl(var(--foreground) / 0.98);
+    letter-spacing: -0.005em;
   }
 
   .chat-markdown em {
-    @apply text-foreground/90;
+    font-style: italic;
+    color: hsl(var(--foreground) / 0.9);
   }
 
   /* Hide the retained Streamdown caret without removing its inline slot. */
@@ -741,49 +797,106 @@
     opacity: 0;
   }
 
-  /* Headings */
+  /* Headings — larger → tighter leading + more negative tracking */
   .chat-markdown [data-streamdown="heading-1"] {
-    @apply mb-2 mt-6 text-xl font-semibold tracking-tight text-foreground;
+    margin: 1.35em 0 0.4em;
+    font-size: calc(1.35rem * var(--zone-font-scale, 1));
+    font-weight: 600;
+    line-height: 1.18;
+    letter-spacing: -0.025em;
+    color: hsl(var(--foreground));
   }
   .chat-markdown [data-streamdown="heading-2"] {
-    @apply mb-2 mt-5 text-lg font-semibold tracking-tight text-foreground;
+    margin: 1.2em 0 0.35em;
+    font-size: calc(1.18rem * var(--zone-font-scale, 1));
+    font-weight: 600;
+    line-height: 1.22;
+    letter-spacing: -0.02em;
+    color: hsl(var(--foreground));
   }
   .chat-markdown [data-streamdown="heading-3"] {
-    @apply mb-1.5 mt-4 text-base font-semibold tracking-tight text-foreground;
+    margin: 1.05em 0 0.3em;
+    font-size: calc(1.05rem * var(--zone-font-scale, 1));
+    font-weight: 600;
+    line-height: 1.28;
+    letter-spacing: -0.015em;
+    color: hsl(var(--foreground));
   }
   .chat-markdown [data-streamdown="heading-4"],
   .chat-markdown [data-streamdown="heading-5"] {
-    @apply mb-1 mt-4 text-sm font-semibold tracking-tight text-foreground;
+    margin: 0.95em 0 0.25em;
+    font-size: calc(0.95rem * var(--zone-font-scale, 1));
+    font-weight: 600;
+    line-height: 1.32;
+    letter-spacing: -0.01em;
+    color: hsl(var(--foreground) / 0.96);
   }
   .chat-markdown [data-streamdown="heading-6"] {
-    @apply mb-1 mt-4 text-xs font-semibold tracking-wide text-muted-foreground;
+    margin: 0.9em 0 0.2em;
+    font-size: calc(0.82rem * var(--zone-font-scale, 1));
+    font-weight: 600;
+    line-height: 1.35;
+    letter-spacing: 0.01em;
+    text-transform: none;
+    color: hsl(var(--muted-foreground));
   }
 
-  /* Links */
+  /* Links — calm, readable; underline is secondary */
   .chat-markdown [data-streamdown="link"] {
-    @apply rounded-xs font-medium text-primary underline decoration-primary/30 underline-offset-2 transition-colors hover:decoration-primary/70;
+    border-radius: 2px;
+    font-weight: 500;
+    color: hsl(var(--primary));
+    text-decoration: underline;
+    text-decoration-color: hsl(var(--primary) / 0.28);
+    text-underline-offset: 0.18em;
+    text-decoration-thickness: 1px;
+    transition: text-decoration-color 150ms var(--ease-out);
+  }
+  .chat-markdown [data-streamdown="link"]:hover {
+    text-decoration-color: hsl(var(--primary) / 0.65);
   }
 
   /* Inline code */
   .chat-markdown [data-streamdown="inline-code"] {
-    @apply whitespace-pre-wrap break-words rounded-md border-0 bg-foreground/[0.05] px-1.5 py-0.5 font-mono text-[0.92em] font-normal text-foreground [overflow-wrap:anywhere];
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    border-radius: 0.35rem;
+    border: 0;
+    background: hsl(var(--foreground) / 0.055);
+    padding: 0.12em 0.38em;
+    font-family: var(--code-font-family);
+    font-size: 0.9em;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 1.35;
+    color: hsl(var(--foreground) / 0.95);
   }
 
   /* Code blocks — container, header, body (safe in components layer) */
   .chat-markdown [data-streamdown="code-block"] {
     @apply relative my-4 w-full min-w-0 overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none outline-none ring-0;
+    margin-block: var(--chat-md-block-gap);
   }
   .chat-markdown [data-streamdown="code-block-header"] {
-    @apply h-8 border-0 bg-transparent px-2 py-0 text-[calc(11px*var(--zone-font-scale,1))] font-medium tracking-[0.06em] text-muted-foreground/85 shadow-none;
+    @apply h-8 border-0 bg-transparent px-2 py-0 shadow-none;
+    font-size: calc(11px * var(--zone-font-scale, 1));
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    color: hsl(var(--muted-foreground) / 0.88);
   }
   .chat-markdown [data-streamdown="code-block-header"] > span {
-    @apply ml-0 font-mono tracking-[0.06em];
+    @apply ml-0 font-mono;
+    letter-spacing: 0.04em;
   }
   .chat-markdown [data-streamdown="code-block-body"] {
-    @apply w-full min-w-0 overflow-x-auto rounded-xl border-0 bg-muted/40 p-4 text-[calc(13px*var(--zone-font-scale,1))] shadow-none outline-none ring-0;
+    @apply w-full min-w-0 overflow-x-auto rounded-xl border-0 bg-muted/40 p-4 shadow-none outline-none ring-0;
+    font-size: calc(13px * var(--zone-font-scale, 1));
+    letter-spacing: 0;
   }
   .chat-markdown [data-streamdown="code-block-body"] pre {
-    @apply leading-6;
+    line-height: 1.55;
+    letter-spacing: 0;
   }
   .chat-markdown--streaming [data-streamdown="code-block"][data-incomplete="true"] {
     @apply relative border-0 bg-transparent;
@@ -797,37 +910,74 @@
     @apply border-0 bg-transparent text-muted-foreground/85;
   }
 
-  /* Blockquotes */
+  /* Blockquotes — secondary voice, not heavy italic (Notes-like) */
   .chat-markdown [data-streamdown="blockquote"] {
-    @apply my-3 min-w-0 max-w-full border-l-2 border-border/70 pl-4 italic text-muted-foreground [overflow-wrap:anywhere];
+    margin-block: var(--chat-md-block-gap);
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    border-left: 2px solid hsl(var(--border) / 0.85);
+    padding-left: 0.9em;
+    font-style: normal;
+    color: hsl(var(--muted-foreground));
+    letter-spacing: -0.005em;
   }
   .chat-markdown [data-streamdown="blockquote"] p {
-    @apply my-0;
+    margin-block: 0.35em;
+    color: inherit;
   }
 
-  /* Lists */
+  /* Lists — slightly tighter than body paragraphs, same type size */
   .chat-markdown [data-streamdown="unordered-list"] {
-    @apply my-2 ml-1 list-disc space-y-0.5 pl-5;
+    margin-block: 0.65em;
+    margin-left: 0.15em;
+    list-style-type: disc;
+    padding-left: 1.35em;
   }
   .chat-markdown [data-streamdown="ordered-list"] {
-    @apply my-2 ml-1 list-decimal space-y-0.5 pl-5;
+    margin-block: 0.65em;
+    margin-left: 0.15em;
+    list-style-type: decimal;
+    padding-left: 1.35em;
   }
   .chat-markdown [data-streamdown="list-item"] {
-    @apply min-w-0 max-w-full break-words pl-1 text-[calc(15px*var(--zone-font-scale,1))] leading-8 [overflow-wrap:anywhere];
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    margin-block: 0.2em;
+    padding-left: 0.2em;
+    font-size: var(--chat-md-size);
+    line-height: var(--chat-md-leading);
+    letter-spacing: var(--chat-md-tracking);
+  }
+  .chat-markdown [data-streamdown="list-item"] > p {
+    margin-block: 0.2em;
   }
   .chat-markdown .contains-task-list {
-    @apply list-none pl-0;
+    list-style: none;
+    padding-left: 0;
   }
   .chat-markdown .task-list-item {
-    @apply flex items-start gap-2 pl-0;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding-left: 0;
   }
   .chat-markdown .task-list-item input[type="checkbox"] {
-    @apply mt-[0.45rem] h-3.5 w-3.5 rounded border border-border align-middle accent-emerald-500;
+    margin-top: 0.4em;
+    height: 0.875rem;
+    width: 0.875rem;
+    border-radius: 0.25rem;
+    border: 1px solid hsl(var(--border));
+    vertical-align: middle;
+    accent-color: hsl(152 55% 42%);
   }
 
   /* Tables */
   .chat-markdown [data-streamdown="table-wrapper"] {
     @apply my-4 w-full min-w-0 gap-0 rounded-none border-0 bg-transparent p-0 shadow-none outline-none ring-0;
+    margin-block: var(--chat-md-block-gap);
   }
   .chat-markdown [data-streamdown="table-wrapper"] > div:first-child {
     @apply justify-end gap-1 px-0 pt-0;
@@ -839,31 +989,49 @@
     @apply rounded-md border-0 bg-transparent shadow-none transition-colors hover:bg-foreground/[0.04] hover:text-foreground;
   }
   .chat-markdown [data-streamdown="table"] {
-    @apply my-2 w-full min-w-full table-auto border-collapse border-0 bg-transparent text-sm shadow-none outline-none ring-0;
+    @apply my-2 w-full min-w-full table-auto border-collapse border-0 bg-transparent shadow-none outline-none ring-0;
+    font-size: calc(0.9em * var(--zone-font-scale, 1));
+    letter-spacing: -0.005em;
   }
   .chat-markdown [data-streamdown="table-header"] {
     @apply bg-transparent;
   }
   .chat-markdown [data-streamdown="table-header-cell"] {
-    @apply border-0 border-b border-border/50 px-0 py-2 pr-8 text-left align-bottom text-sm font-semibold tracking-tight text-foreground;
+    border: 0;
+    border-bottom: 1px solid hsl(var(--border) / 0.55);
+    padding: 0.45em 2em 0.45em 0;
+    text-align: left;
+    vertical-align: bottom;
+    font-size: 0.92em;
+    font-weight: 600;
+    line-height: 1.35;
+    letter-spacing: -0.012em;
+    color: hsl(var(--foreground));
   }
   .chat-markdown [data-streamdown="table-cell"] {
-    @apply border-0 border-b border-border/30 px-0 py-1 pr-8 text-left align-middle leading-8 text-foreground/90;
+    border: 0;
+    border-bottom: 1px solid hsl(var(--border) / 0.32);
+    padding: 0.4em 2em 0.4em 0;
+    text-align: left;
+    vertical-align: middle;
+    line-height: 1.45;
+    color: hsl(var(--foreground) / 0.9);
   }
   .chat-markdown [data-streamdown="table-body"] [data-streamdown="table-row"]:nth-child(even) {
     @apply bg-transparent;
   }
   .chat-markdown [data-streamdown="table-header-cell"]:last-child,
   .chat-markdown [data-streamdown="table-cell"]:last-child {
-    @apply pr-0;
+    padding-right: 0;
   }
   .chat-markdown [data-streamdown="table-row"]:last-child [data-streamdown="table-cell"] {
-    @apply border-b-0;
+    border-bottom: 0;
   }
 
   /* Mermaid */
   .chat-markdown [data-streamdown="mermaid-block"] {
     @apply my-4 flex w-full min-w-0 gap-2 rounded-none border-0 bg-transparent p-0 shadow-none;
+    margin-block: var(--chat-md-block-gap);
   }
   .chat-markdown [data-streamdown="mermaid-block"] > div:last-child,
   .chat-markdown [data-streamdown="mermaid"] {
@@ -881,50 +1049,84 @@
 
   /* Math */
   .chat-markdown .katex {
-    @apply text-[1.04em];
+    font-size: 1.05em;
   }
   .chat-markdown .katex-display {
-    @apply my-3.5 block max-w-full overflow-x-auto overflow-y-hidden px-1 py-1.5 text-center;
+    margin-block: 0.9em;
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 0.35em 0.25em;
+    text-align: center;
   }
 
-  /* Thinking markdown */
+  /* Thinking markdown — denser secondary voice; stays subordinate to answer */
   .chat-markdown.thinking-markdown {
-    @apply text-[calc(12px*var(--zone-font-scale,1))] leading-6 text-muted-foreground/80;
+    --chat-md-size: calc(12.5px * var(--zone-font-scale, 1));
+    --chat-md-leading: 1.45;
+    --chat-md-tracking: 0;
+    --chat-md-para-gap: 0.4em;
+    font-size: var(--chat-md-size);
+    line-height: var(--chat-md-leading);
+    letter-spacing: var(--chat-md-tracking);
+    color: hsl(var(--muted-foreground) / 0.82);
   }
   .chat-markdown.thinking-markdown p {
-    @apply my-1 text-[calc(12px*var(--zone-font-scale,1))] leading-6 text-muted-foreground/80;
+    margin-block: var(--chat-md-para-gap);
+    font-size: var(--chat-md-size);
+    line-height: var(--chat-md-leading);
+    color: hsl(var(--muted-foreground) / 0.82);
   }
   .chat-markdown.thinking-markdown [data-streamdown^="heading-"] {
-    @apply mb-0 mt-1 text-[calc(12px*var(--zone-font-scale,1))] font-medium leading-6 tracking-normal text-muted-foreground/90;
+    margin: 0.45em 0 0.15em;
+    font-size: var(--chat-md-size);
+    font-weight: 500;
+    line-height: 1.4;
+    letter-spacing: 0;
+    color: hsl(var(--muted-foreground) / 0.92);
   }
   .chat-markdown.thinking-markdown [data-streamdown="unordered-list"],
   .chat-markdown.thinking-markdown [data-streamdown="ordered-list"] {
-    @apply my-1 pl-4;
+    margin-block: 0.35em;
+    padding-left: 1.1em;
   }
   .chat-markdown.thinking-markdown [data-streamdown="list-item"] {
-    @apply text-[calc(12px*var(--zone-font-scale,1))] leading-5 text-muted-foreground/80;
+    font-size: var(--chat-md-size);
+    line-height: 1.4;
+    color: hsl(var(--muted-foreground) / 0.82);
   }
   .chat-markdown.thinking-markdown [data-streamdown="blockquote"] {
-    @apply my-1 border-l-0 pl-0 not-italic text-muted-foreground/75;
+    margin-block: 0.35em;
+    border-left: 0;
+    padding-left: 0;
+    font-style: normal;
+    color: hsl(var(--muted-foreground) / 0.75);
   }
   .chat-markdown.thinking-markdown [data-streamdown="inline-code"] {
-    @apply bg-foreground/[0.03] text-[calc(11px*var(--zone-font-scale,1))] text-muted-foreground/90;
+    background: hsl(var(--foreground) / 0.03);
+    font-size: calc(11px * var(--zone-font-scale, 1));
+    color: hsl(var(--muted-foreground) / 0.9);
   }
   .chat-markdown.thinking-markdown [data-streamdown="code-block-body"] {
-    @apply bg-muted/20 p-3 text-[calc(11px*var(--zone-font-scale,1))];
+    @apply bg-muted/20 p-3;
+    font-size: calc(11px * var(--zone-font-scale, 1));
   }
 
   /* Images */
   .chat-markdown [data-streamdown="image-wrapper"] {
-    @apply my-4 overflow-visible rounded-none border-0 bg-transparent shadow-none;
+    @apply overflow-visible rounded-none border-0 bg-transparent shadow-none;
+    margin-block: var(--chat-md-block-gap);
   }
   .chat-markdown [data-streamdown="image"] {
     @apply block max-h-[34rem] max-w-full rounded-xl border border-border/60 bg-muted/10 object-contain;
   }
 
-  /* Horizontal rule */
+  /* Horizontal rule — soft section break */
   .chat-markdown [data-streamdown="horizontal-rule"] {
-    @apply my-5 border-border/45;
+    margin-block: 1.25em;
+    border: 0;
+    border-top: 1px solid hsl(var(--border) / 0.5);
   }
 
   /* First/last child margin reset */
@@ -968,9 +1170,9 @@
     @apply rounded border border-border/50 bg-muted/60 px-1 py-0.5 font-mono text-[calc(11px*var(--zone-font-scale,1))] text-foreground/90;
   }
 
-  /* Smooth entrance for chat bubbles */
+  /* Smooth entrance for chat bubbles — start from visible scale (never 0) */
   .chat-bubble-enter {
-    animation: chatBubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: chatBubbleIn var(--duration-ui) var(--ease-out);
   }
 
   /*
@@ -993,7 +1195,7 @@
   @keyframes chatBubbleIn {
     from {
       opacity: 0;
-      transform: translateY(6px) scale(0.98);
+      transform: translateY(4px) scale(0.98);
     }
     to {
       opacity: 1;
@@ -1001,44 +1203,331 @@
     }
   }
 
-  /* Jump-to-bottom affordance: mounted only while scroll-follow is detached,
-   * so it only needs an entrance animation. Centering lives here because the
-   * animation transform would override a Tailwind translate utility.
-   * Frosted-glass treatment follows the .hub-frost-hero idiom (translucent
-   * theme tint + blur/saturate, white-tint override in dark). */
+  /* Floating chat header — translucent material; overlays transcript scroll */
+  .chat-header {
+    background: hsl(var(--background) / 0.72);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    backdrop-filter: blur(20px) saturate(180%);
+  }
+  .chat-header::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 1px;
+    pointer-events: none;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      hsl(var(--border) / 0.55) 18%,
+      hsl(var(--border) / 0.55) 82%,
+      transparent 100%
+    );
+    opacity: 0.7;
+  }
+
+  /* Scroll content clears the overlay header; messages still pass under it. */
+  .chat-transcript-scroll-pad {
+    padding-top: calc(var(--chat-header-height) + 0.5rem);
+  }
+
+  /* Overlay host: header captures input; siblings can sit under it. */
+  .chat-header-overlay {
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    z-index: 20;
+  }
+
+  /*
+   * Sidebar open/close — single drawer motion.
+   * Width-only clipping with a strong ease-out looked like two phases: content
+   * vanished early, then the empty shell finished shrinking. Slide the fixed
+   * 272px panel with transform while the track width collapses on the same
+   * curve so chrome + content move as one piece.
+   */
+  .chat-history-sidebar {
+    --chat-sidebar-width: 272px;
+    --chat-sidebar-motion-duration: 200ms;
+    --chat-sidebar-motion-ease: var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
+    position: relative;
+    width: var(--chat-sidebar-width);
+    overflow: hidden;
+    background: hsl(var(--sidebar-bg));
+    border-right-color: hsl(var(--sidebar-separator) / 0.9);
+    transition:
+      width var(--chat-sidebar-motion-duration) var(--chat-sidebar-motion-ease),
+      border-color var(--chat-sidebar-motion-duration) var(--chat-sidebar-motion-ease);
+  }
+  .chat-history-sidebar[data-state="closed"] {
+    width: 0;
+    border-right-color: transparent;
+  }
+  .chat-history-sidebar-inner {
+    position: absolute;
+    inset-block: 0;
+    left: 0;
+    width: var(--chat-sidebar-width);
+    min-width: var(--chat-sidebar-width);
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--chat-sidebar-motion-duration) var(--chat-sidebar-motion-ease);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+  .chat-history-sidebar[data-state="closed"] .chat-history-sidebar-inner {
+    transform: translate3d(-100%, 0, 0);
+  }
+  /* While the shell is animating, freeze section row transitions so grid
+     height easing cannot play a second “content collapse” on top of the slide. */
+  .chat-history-sidebar[data-state="closed"] .chat-history-sidebar-sections,
+  .chat-history-sidebar[data-animating="true"] .chat-history-sidebar-sections {
+    transition: none !important;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .chat-history-sidebar,
+    .chat-history-sidebar-inner {
+      transition: none;
+    }
+  }
+  .chat-sidebar-section-label {
+    font-size: calc(11px * var(--zone-font-scale, 1));
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1.25;
+    color: hsl(var(--muted-foreground) / 0.92);
+  }
+  .chat-sidebar-row-active {
+    background: hsl(var(--foreground) / 0.08);
+  }
+  .dark .chat-sidebar-row-active {
+    background: hsl(var(--foreground) / 0.1);
+  }
+
+  /*
+   * Sidebar list touch-down (Apple Response): highlight on pointer-down of the
+   * row's select control, not on release. No scale — list rows are high-frequency
+   * and should only change fill. `:has(button:active)` paints the whole rounded
+   * row while the primary select button is pressed.
+   */
+  .chat-sidebar-row {
+    transition:
+      background-color 80ms var(--ease-out),
+      color 80ms var(--ease-out);
+  }
+
+  .chat-sidebar-row:not(.chat-sidebar-row-active):not([data-selected="true"]):has(
+    > button:active,
+    [data-sidebar-row-select]:active
+  ) {
+    background-color: hsl(var(--foreground) / 0.08);
+    color: hsl(var(--foreground));
+  }
+
+  .chat-sidebar-row.chat-sidebar-row-active:has(> button:active, [data-sidebar-row-select]:active),
+  .chat-sidebar-row[data-selected="true"]:has(> button:active, [data-sidebar-row-select]:active) {
+    background-color: hsl(var(--foreground) / 0.14);
+  }
+
+  .chat-sidebar-row[data-tone="danger"]:has(> button:active, [data-sidebar-row-select]:active) {
+    background-color: hsl(var(--destructive) / 0.12);
+    color: hsl(var(--destructive));
+  }
+
+  .chat-sidebar-row[data-tone="muted"]:has(> button:active, [data-sidebar-row-select]:active) {
+    background-color: hsl(var(--foreground) / 0.05);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-sidebar-row {
+      transition: none;
+    }
+  }
+
+  /* Suggestion cards — light material + press feedback */
+  .chat-suggest-card {
+    border: 1px solid hsl(var(--border) / 0.55);
+    background: hsl(var(--foreground) / 0.03);
+    box-shadow: 0 1px 0 hsl(0 0% 100% / 0.5) inset;
+    transition:
+      background-color var(--duration-ui) var(--ease-out),
+      border-color var(--duration-ui) var(--ease-out),
+      transform var(--duration-press) var(--ease-out),
+      box-shadow var(--duration-ui) var(--ease-out);
+  }
+  .chat-suggest-card:hover {
+    background: hsl(var(--foreground) / 0.055);
+    border-color: hsl(var(--border) / 0.8);
+  }
+  .chat-suggest-card:active {
+    transform: scale(var(--press-scale));
+  }
+  .dark .chat-suggest-card {
+    border-color: hsl(0 0% 100% / 0.08);
+    background: hsl(0 0% 100% / 0.04);
+    box-shadow: 0 1px 0 hsl(0 0% 100% / 0.06) inset;
+  }
+  .dark .chat-suggest-card:hover {
+    background: hsl(0 0% 100% / 0.07);
+    border-color: hsl(0 0% 100% / 0.12);
+  }
+
+  /* Composer toolbar icon buttons — instant press response */
+  .composer-toolbar-action {
+    transition:
+      background-color var(--duration-ui) var(--ease-out),
+      color var(--duration-ui) var(--ease-out),
+      transform var(--duration-press) var(--ease-out);
+  }
+  .composer-toolbar-action:active:not(:disabled) {
+    transform: scale(var(--press-scale));
+  }
+
+  /*
+   * Jump-to-bottom — same glass material family as composer / header.
+   * Centering lives here: entrance animation transform would override a
+   * Tailwind translate utility. Press uses scale (occasional affordance).
+   */
   .chat-jump-to-bottom {
     transform: translateX(-50%);
-    animation: chatJumpToBottomIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
-    border: 1px solid hsl(var(--border) / 0.55);
-    background: hsl(var(--background) / 0.45);
-    -webkit-backdrop-filter: blur(18px) saturate(180%);
-    backdrop-filter: blur(18px) saturate(180%);
+    animation: chatJumpToBottomIn 180ms var(--ease-out);
+    border: 1px solid hsl(var(--border) / 0.5);
+    background: hsl(var(--background) / 0.55);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    backdrop-filter: blur(20px) saturate(180%);
     box-shadow:
-      0 1px 0 hsl(0 0% 100% / 0.45) inset,
-      0 8px 24px -14px hsl(0 0% 0% / 0.35);
+      0 1px 0 hsl(0 0% 100% / 0.5) inset,
+      0 10px 28px -14px hsl(0 0% 0% / 0.32);
+    color: hsl(var(--muted-foreground));
+    transition:
+      background-color 150ms var(--ease-out),
+      color 150ms var(--ease-out),
+      box-shadow 150ms var(--ease-out),
+      transform 100ms var(--ease-out);
   }
   .chat-jump-to-bottom:hover {
-    background: hsl(var(--background) / 0.65);
+    background: hsl(var(--background) / 0.72);
+    color: hsl(var(--foreground));
+  }
+  .chat-jump-to-bottom:active {
+    transform: translateX(-50%) scale(var(--press-scale));
   }
   .dark .chat-jump-to-bottom {
     border-color: hsl(0 0% 100% / 0.12);
-    background: hsl(0 0% 100% / 0.06);
+    background: hsl(0 0% 100% / 0.07);
     box-shadow:
       0 1px 0 hsl(0 0% 100% / 0.08) inset,
-      0 8px 24px -14px hsl(0 0% 0% / 0.6);
+      0 10px 28px -14px hsl(0 0% 0% / 0.65);
   }
   .dark .chat-jump-to-bottom:hover {
-    background: hsl(0 0% 100% / 0.11);
+    background: hsl(0 0% 100% / 0.12);
   }
 
   @keyframes chatJumpToBottomIn {
     from {
       opacity: 0;
-      transform: translateX(-50%) translateY(6px);
+      transform: translateX(-50%) translateY(6px) scale(0.96);
     }
     to {
       opacity: 1;
-      transform: translateX(-50%) translateY(0);
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+  }
+
+  /*
+   * Floor nav panel — floating material aligned with model-selector / composer.
+   * Origin top-right (rail sits on the right edge); enter/exit under 200ms.
+   */
+  .floor-nav-panel {
+    border: 1px solid hsl(var(--border) / 0.5);
+    background: hsl(var(--background) / 0.72);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    backdrop-filter: blur(20px) saturate(180%);
+    box-shadow:
+      0 1px 0 hsl(0 0% 100% / 0.5) inset,
+      0 16px 40px -18px hsl(15 23% 10% / 0.32);
+    transform-origin: top right;
+    animation: floorNavPanelIn 180ms var(--ease-out);
+  }
+  .dark .floor-nav-panel {
+    border-color: hsl(0 0% 100% / 0.1);
+    background: hsl(0 0% 100% / 0.07);
+    box-shadow:
+      0 1px 0 hsl(0 0% 100% / 0.06) inset,
+      0 16px 40px -18px hsl(0 0% 0% / 0.65);
+  }
+
+  @keyframes floorNavPanelIn {
+    from {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.96);
+      filter: blur(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  .floor-nav-row {
+    transition: background-color 80ms var(--ease-out);
+  }
+  .floor-nav-row:has(button:active) {
+    background-color: hsl(var(--foreground) / 0.09);
+  }
+  .floor-nav-row[data-floor-active]:has(button:active) {
+    background-color: hsl(var(--foreground) / 0.12);
+  }
+
+  .floor-nav-pin {
+    transition:
+      color 120ms var(--ease-out),
+      opacity 120ms var(--ease-out),
+      transform 100ms var(--ease-out),
+      background-color 120ms var(--ease-out);
+  }
+  .floor-nav-pin:active {
+    transform: scale(var(--press-scale));
+  }
+
+  .floor-nav-marker {
+    transition:
+      width 150ms var(--ease-out),
+      background-color 150ms var(--ease-out),
+      opacity 150ms var(--ease-out);
+  }
+  .floor-nav-marker:active {
+    opacity: 1;
+    background-color: hsl(var(--foreground) / 0.7);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-jump-to-bottom {
+      animation: none;
+      transition:
+        background-color 120ms ease,
+        color 120ms ease;
+    }
+    .chat-jump-to-bottom:active {
+      transform: translateX(-50%);
+    }
+    .floor-nav-panel {
+      animation: none;
+    }
+    .floor-nav-pin:active {
+      transform: none;
+    }
+    .floor-nav-marker {
+      transition: background-color 120ms ease;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .chat-jump-to-bottom,
+    .floor-nav-panel {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      background: hsl(var(--background));
     }
   }
 
@@ -1047,44 +1536,46 @@
    * rises, then the suggestion cards cascade. Steady-state motion stays
    * transform/opacity-only: a slow float on the logo plus a halo breathe. */
   .chat-hero-logo-enter {
-    animation: chatHeroLogoIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
+    /* Critically damped feel — no spring overshoot on non-gesture UI */
+    animation: chatHeroLogoIn 0.45s var(--ease-out) backwards;
     will-change: transform, opacity;
   }
 
   /* Float and breathe share one 6s clock, delayed past the entrance so the
-   * pop settles before the idle motion takes over. */
+   * pop settles before the idle motion takes over. Amplitude stays subtle. */
   .chat-hero-logo-float {
-    animation: chatHeroFloat 6s ease-in-out 1.2s infinite;
+    animation: chatHeroFloat 7s ease-in-out 1s infinite;
   }
 
   .chat-hero-halo-breathe {
-    animation: chatHeroHaloBreathe 6s ease-in-out 1.2s infinite;
+    animation: chatHeroHaloBreathe 7s ease-in-out 1s infinite;
   }
 
   .chat-hero-title-enter {
-    animation: chatHeroRiseIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards;
+    animation: chatHeroRiseIn 0.48s var(--ease-out) 0.08s backwards;
     will-change: transform, opacity;
+    letter-spacing: -0.02em;
   }
 
   .chat-hero-line-enter {
-    animation: chatHeroRiseIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
+    animation: chatHeroRiseIn 0.48s var(--ease-out) 0.14s backwards;
   }
 
   .chat-hero-cta-enter {
-    animation: chatHeroRiseIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.28s backwards;
+    animation: chatHeroRiseIn 0.48s var(--ease-out) 0.2s backwards;
   }
 
   /* Suggestion cards: --chat-hero-delay is staggered per card from JSX.
    * `backwards` (not `both`) so hover styles win once the entrance ends. */
   .chat-hero-card-enter {
-    animation: chatHeroCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--chat-hero-delay, 0.26s)
-      backwards;
+    animation: chatHeroCardIn 0.42s var(--ease-out) var(--chat-hero-delay, 0.22s) backwards;
   }
 
   @keyframes chatHeroLogoIn {
     from {
       opacity: 0;
-      transform: translateY(10px) scale(0.72);
+      /* Never animate from scale(0) — start from a visible shape */
+      transform: translateY(8px) scale(0.92);
     }
     to {
       opacity: 1;
@@ -1098,7 +1589,7 @@
       transform: translateY(0);
     }
     50% {
-      transform: translateY(-5px);
+      transform: translateY(-3px);
     }
   }
 
@@ -1108,14 +1599,14 @@
       opacity: 1;
     }
     50% {
-      opacity: 0.6;
+      opacity: 0.7;
     }
   }
 
   @keyframes chatHeroRiseIn {
     from {
       opacity: 0;
-      transform: translateY(12px);
+      transform: translateY(8px);
     }
     to {
       opacity: 1;
@@ -1126,7 +1617,7 @@
   @keyframes chatHeroCardIn {
     from {
       opacity: 0;
-      transform: translateY(14px) scale(0.96);
+      transform: translateY(10px) scale(0.97);
     }
     to {
       opacity: 1;
@@ -1134,9 +1625,9 @@
     }
   }
 
-  /* Settings page section transitions */
+  /* Settings page section transitions — critically damped ease-out */
   .settings-section-enter {
-    animation: settingsSectionIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: settingsSectionIn 0.24s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
     /*
      * No `will-change` here: this class sits on the settings scroll container
      * itself, and a permanent layer promotion on a scroller makes Android
@@ -1146,7 +1637,7 @@
   }
 
   .settings-section-title-enter {
-    animation: settingsSectionTitleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: settingsSectionTitleIn 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
   }
 
   /* Provider dialog: panel switches (sections are keyed by panel id, so the
@@ -1256,7 +1747,7 @@
   @keyframes settingsSectionIn {
     from {
       opacity: 0;
-      transform: translateY(14px) scale(0.985);
+      transform: translateY(8px) scale(0.99);
     }
     to {
       opacity: 1;
@@ -1267,7 +1758,7 @@
   @keyframes settingsSectionTitleIn {
     from {
       opacity: 0;
-      transform: translateY(8px);
+      transform: translateY(4px);
     }
     to {
       opacity: 1;
@@ -1278,7 +1769,7 @@
   /* Settings system-tools tab views: soft enter when switching between the
    * built-in and custom tabs (the view wrapper is keyed by tab). */
   .settings-tools-view-enter {
-    animation: settingsToolsViewIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: settingsToolsViewIn 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
     will-change: transform, opacity;
   }
 
@@ -1432,6 +1923,11 @@
       animation: none;
     }
 
+    .chat-suggest-card:active,
+    .composer-toolbar-action:active:not(:disabled) {
+      transform: none;
+    }
+
     .sidebar-context-menu,
     .sidebar-context-menu [role="menuitem"] {
       animation: none !important;
@@ -1443,6 +1939,12 @@
       transition: none !important;
     }
 
+    .chat-header {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      background: hsl(var(--background));
+    }
+
     .ssh-auth-panel,
     .ssh-collapsible,
     .settings-modal-overlay,
@@ -1453,6 +1955,26 @@
     }
   }
 
+  /* Accessibility: solid surfaces when translucency hurts legibility */
+  @media (prefers-reduced-transparency: reduce) {
+    .chat-header,
+    .project-tools-panel-header {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      background: hsl(var(--background));
+    }
+
+    .chat-jump-to-bottom {
+      -webkit-backdrop-filter: none !important;
+      backdrop-filter: none !important;
+      background: hsl(var(--background)) !important;
+    }
+
+    .project-tools-panel {
+      background: hsl(var(--sidebar-bg));
+    }
+  }
+
   /* Mention composer placeholder */
   .mention-composer.is-empty::before {
     content: attr(data-placeholder);
@@ -1651,45 +2173,76 @@
     transform: translateY(5px) scale(0.975);
   }
 
-  /* Chat header model selector: grow out of the trigger with a soft slide.
-   * Base UI drives the popup lifecycle, so enter/exit are keyed off
-   * data-starting-style / data-ending-style and the transition delays
-   * unmount (data-state rules never match Base UI popups). */
+  /*
+   * Chat header model selector — origin-aware popover (Apple spatial consistency).
+   * Grows from the trigger via Base UI `--transform-origin`; enter/exit share a
+   * path; exit is faster than enter (asymmetric timing). Materializes with a
+   * light blur so the surface reads as glass arriving, not a flat opacity fade.
+   * Lifecycle: data-starting-style / data-ending-style (not data-state).
+   */
   .model-selector-dropdown {
-    /* Slide from the anchor side; flipped placement overrides per data-side. */
-    --model-menu-slide-y: -6px;
-    transform-origin: var(--transform-origin);
+    --model-menu-slide-y: -8px;
+    --model-menu-slide-x: 0px;
+    /* Fallback when --transform-origin is unset: grow from top-start (align=start). */
+    transform-origin: var(--transform-origin, 16px 0);
     transition:
-      opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
-      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+      opacity 200ms var(--ease-out),
+      transform 200ms var(--ease-out),
+      filter 200ms var(--ease-out);
   }
 
   .model-selector-dropdown[data-side="top"] {
-    --model-menu-slide-y: 6px;
+    --model-menu-slide-y: 8px;
+  }
+
+  .model-selector-dropdown[data-side="left"],
+  .model-selector-dropdown[data-side="inline-start"] {
+    --model-menu-slide-x: 6px;
+    --model-menu-slide-y: 0px;
+  }
+
+  .model-selector-dropdown[data-side="right"],
+  .model-selector-dropdown[data-side="inline-end"] {
+    --model-menu-slide-x: -6px;
+    --model-menu-slide-y: 0px;
   }
 
   .model-selector-dropdown[data-starting-style],
   .model-selector-dropdown[data-ending-style] {
     opacity: 0;
-    transform: translateY(var(--model-menu-slide-y)) scale(0.96);
+    /* Never scale(0) — start from a visible shape near the trigger */
+    filter: blur(2px);
+    transform: translate(var(--model-menu-slide-x), var(--model-menu-slide-y)) scale(0.96);
   }
 
+  /* Exit: same path, snappier (~half enter) so dismiss feels responsive */
   .model-selector-dropdown[data-ending-style] {
-    transition-duration: 0.12s;
-    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-    transform: translateY(calc(var(--model-menu-slide-y) / 2)) scale(0.98);
+    transition-duration: 110ms;
+    transition-timing-function: var(--ease-out);
+    filter: blur(1px);
+    transform: translate(
+        calc(var(--model-menu-slide-x) * 0.45),
+        calc(var(--model-menu-slide-y) * 0.45)
+      )
+      scale(0.98);
   }
 
-  /* `backwards` (not `both`): a filled forwards animation would keep holding
-   * transform after it ends and suppress the item highlight translate. */
+  /* Trigger: open state reads as “menu is attached here” */
+  .model-selector-trigger[data-popup-open],
+  .model-selector-trigger[aria-expanded="true"] {
+    background-color: hsl(var(--muted) / 0.7);
+  }
+
+  /* Item cascade on open only — short stagger, never blocks interaction */
   .model-selector-dropdown[data-open] .model-selector-item {
-    animation: modelSelectorItemIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+    /* `backwards` (not `both`): don't hold transform after settle (kills hover). */
+    animation: modelSelectorItemIn 160ms var(--ease-out) backwards;
   }
 
   @keyframes modelSelectorItemIn {
     from {
       opacity: 0;
-      transform: translateY(calc(var(--model-menu-slide-y) / 2));
+      transform: translateY(calc(var(--model-menu-slide-y) * 0.35 + 3px));
     }
     to {
       opacity: 1;
@@ -1697,13 +2250,37 @@
     }
   }
 
+  /* List rows: press highlight (no scale — high frequency while menu is open) */
+  .model-selector-item {
+    transition: background-color 100ms var(--ease-out);
+  }
+  .model-selector-item:active {
+    background-color: hsl(var(--foreground) / 0.09);
+  }
+
+  .model-selector-item .model-selector-check {
+    animation: modelSelectorCheckIn 140ms var(--ease-out) both;
+  }
+
+  @keyframes modelSelectorCheckIn {
+    from {
+      opacity: 0;
+      transform: scale(0.85);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .composer-dropdown,
     .composer-dropdown [role="menuitemcheckbox"],
     .composer-dropdown [role="menuitem"],
     .composer-branch-dropdown,
     .model-selector-dropdown,
-    .model-selector-item {
+    .model-selector-item,
+    .model-selector-item .model-selector-check {
       animation: none !important;
     }
 
@@ -1715,6 +2292,20 @@
     .model-selector-trigger svg {
       transition: none !important;
     }
+
+    .model-selector-dropdown[data-starting-style],
+    .model-selector-dropdown[data-ending-style] {
+      filter: none;
+      transform: none;
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .model-selector-dropdown[data-starting-style],
+    .model-selector-dropdown[data-ending-style] {
+      filter: none;
+    }
   }
 
   /* Context checkpoint animations */
@@ -1897,7 +2488,7 @@
   @keyframes hubPageIn {
     from {
       opacity: 0;
-      transform: translateY(8px);
+      transform: translateY(6px);
     }
     to {
       opacity: 1;
@@ -1908,7 +2499,7 @@
   @keyframes hubPanelIn {
     from {
       opacity: 0;
-      transform: translateY(14px) scale(0.985);
+      transform: translateY(10px) scale(0.98);
     }
     to {
       opacity: 1;
@@ -1919,7 +2510,7 @@
   @keyframes hubChipIn {
     from {
       opacity: 0;
-      transform: translateY(6px) scale(0.94);
+      transform: translateY(5px) scale(0.97);
     }
     to {
       opacity: 1;
@@ -1952,28 +2543,29 @@
   }
 
   .hub-page-enter {
-    animation: hubPageIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation: hubPageIn 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
   }
 
   .hub-page-enter .hub-header {
-    animation: hubPanelIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation: hubPanelIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
   }
 
   .hub-page-enter .hub-content-stage {
-    animation: hubPanelIn 420ms cubic-bezier(0.16, 1, 0.3, 1) 70ms both;
+    animation: hubPanelIn 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) 50ms both;
   }
 
   .hub-panel-enter,
   .hub-empty-state-enter {
-    animation: hubPanelIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation: hubPanelIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
   }
 
   .hub-panel-enter-delayed {
-    animation-delay: 110ms;
+    animation-delay: 80ms;
   }
 
+  /* Critically damped — no spring overshoot on high-frequency chips */
   .hub-chip-enter {
-    animation: hubChipIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    animation: hubChipIn 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
   }
   .hub-chip-enter:nth-child(1) {
     animation-delay: 0ms;
@@ -2275,32 +2867,32 @@
   }
 
   .skill-card-enter {
-    animation: skillCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation: skillCardIn 0.28s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
   }
   .skill-card-enter:nth-child(1) {
     animation-delay: 0ms;
   }
   .skill-card-enter:nth-child(2) {
-    animation-delay: 50ms;
+    animation-delay: 35ms;
   }
   .skill-card-enter:nth-child(3) {
-    animation-delay: 100ms;
+    animation-delay: 70ms;
   }
   .skill-card-enter:nth-child(4) {
-    animation-delay: 150ms;
+    animation-delay: 105ms;
   }
   .skill-card-enter:nth-child(5) {
-    animation-delay: 200ms;
+    animation-delay: 140ms;
   }
   .skill-card-enter:nth-child(6) {
-    animation-delay: 250ms;
+    animation-delay: 175ms;
   }
   .skill-card-enter:nth-child(n + 7) {
-    animation-delay: 300ms;
+    animation-delay: 200ms;
   }
 
   .skill-check-enter {
-    animation: skillCardCheckIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    animation: skillCardCheckIn 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
   }
 
   .skills-scan-dot {
@@ -2459,6 +3051,141 @@
   }
 }
 
+/*
+ * Settings page chrome — Apple-like sidebar + content hierarchy.
+ * Unlayered so materials beat utility borders/backgrounds.
+ */
+.settings-sidebar {
+  background: hsl(var(--sidebar-bg));
+  border-right: 1px solid hsl(var(--sidebar-separator) / 0.85);
+}
+.settings-sidebar-header {
+  border-bottom: 1px solid hsl(var(--sidebar-separator) / 0.7);
+}
+.settings-sidebar-footer {
+  border-top: 1px solid hsl(var(--sidebar-separator) / 0.7);
+}
+.settings-title-icon {
+  color: hsl(var(--foreground) / 0.8);
+  background: hsl(240 12% 97% / 0.7);
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.75) inset;
+}
+.dark .settings-title-icon {
+  background: hsl(0 0% 100% / 0.06);
+  border-color: hsl(0 0% 100% / 0.1);
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.06) inset;
+}
+
+.settings-back-button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 10px;
+  padding: 0.5rem 0.625rem;
+  font-size: 13px;
+  letter-spacing: -0.01em;
+  color: hsl(var(--muted-foreground));
+  transition:
+    background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.settings-back-button:hover {
+  background: hsl(var(--foreground) / 0.06);
+  color: hsl(var(--foreground));
+}
+.settings-back-button:active {
+  transform: scale(0.98);
+}
+
+.settings-nav-group-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.25;
+  color: hsl(var(--muted-foreground) / 0.75);
+  text-transform: uppercase;
+}
+
+.settings-nav-item {
+  color: hsl(var(--foreground) / 0.78);
+  transition:
+    background-color 80ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    color 80ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.settings-nav-item:hover {
+  background: hsl(var(--foreground) / 0.05);
+  color: hsl(var(--foreground));
+}
+.settings-nav-item:active {
+  background: hsl(var(--foreground) / 0.09);
+}
+.settings-nav-item[data-active] {
+  background: hsl(var(--foreground) / 0.08);
+  color: hsl(var(--foreground));
+  font-weight: 600;
+}
+.settings-nav-item-icon {
+  color: inherit;
+  background: hsl(var(--foreground) / 0.05);
+  transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.settings-nav-item[data-active] .settings-nav-item-icon {
+  background: hsl(var(--foreground) / 0.1);
+}
+.settings-nav-item:hover .settings-nav-item-icon {
+  background: hsl(var(--foreground) / 0.08);
+}
+
+.settings-main-header {
+  border-bottom: 1px solid hsl(var(--border) / 0.55);
+  background: hsl(var(--background) / 0.72);
+  -webkit-backdrop-filter: blur(18px) saturate(170%);
+  backdrop-filter: blur(18px) saturate(170%);
+}
+.dark .settings-main-header {
+  border-bottom-color: hsl(0 0% 100% / 0.08);
+  background: hsl(var(--background) / 0.65);
+}
+
+.settings-card {
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 98% / 0.78);
+  padding: 1rem;
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.7) inset,
+    0 6px 18px -14px hsl(220 25% 10% / 0.1);
+}
+.dark .settings-card {
+  border-color: hsl(0 0% 100% / 0.09);
+  background: hsl(0 0% 100% / 0.04);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.05) inset,
+    0 6px 18px -14px hsl(0 0% 0% / 0.45);
+}
+
+.settings-switch {
+  transition: background-color 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-back-button:active {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .settings-main-header,
+  .settings-card {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: hsl(var(--background));
+  }
+}
+
 /*
  * SSH settings — responsive helpers. Unlayered so these win over the
  * Tailwind flex/align/gap/padding utilities on the same elements
@@ -2535,7 +3262,10 @@ body > div:not(#root) [data-streamdown="mermaid"]:has([style*="cursor:grabbing"]
   transform: none;
 }
 
-.chat-history-sidebar,
+/*
+ * Only contain rows — not the sidebar shell. `contain: paint` on the shell
+ * fights width transitions (content disappears, then the column snaps).
+ */
 .chat-history-row {
   contain: layout paint style;
 }
@@ -2844,15 +3574,186 @@ body > div:not(#root) [data-streamdown="mermaid"]:has([style*="cursor:grabbing"]
 }
 
 /*
- * Right-dock header metrics — the dock markup is byte-mirrored with the
- * gateway WebUI and therefore carries the web-sized utilities (h-11 header,
- * h-8 tab row, no vertical padding). The desktop GUI restores its own
- * metrics here. MUST stay outside @layer so these rules beat the Tailwind
- * utility classes baked into the mirrored markup (unlayered styles win over
- * the utilities layer in Tailwind v4).
+ * Composer glass material — MUST stay outside @layer so utilities cannot
+ * override fill/blur. Light mode: high-opacity white on pure canvas reads solid;
+ * use cool translucent fill + strong blur so glass remains legible.
+ */
+.composer-glass-card {
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsl(0 0% 0% / 0.1);
+  background: hsl(240 12% 97% / 0.48);
+  -webkit-backdrop-filter: blur(40px) saturate(190%);
+  backdrop-filter: blur(40px) saturate(190%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.85) inset,
+    0 12px 40px -14px hsl(220 25% 10% / 0.18),
+    0 2px 8px -2px hsl(220 25% 10% / 0.08);
+  transition:
+    background-color 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    border-color 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    box-shadow 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.composer-glass-card:focus-within {
+  border-color: hsl(0 0% 0% / 0.14);
+  background: hsl(240 14% 98% / 0.58);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.9) inset,
+    0 16px 48px -14px hsl(220 25% 10% / 0.22),
+    0 4px 12px -4px hsl(220 25% 10% / 0.1);
+}
+.dark .composer-glass-card {
+  border-color: hsl(0 0% 100% / 0.12);
+  background: hsl(0 0% 100% / 0.08);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.1) inset,
+    0 12px 40px -14px hsl(0 0% 0% / 0.72),
+    0 2px 6px -2px hsl(0 0% 0% / 0.42);
+}
+.dark .composer-glass-card:focus-within {
+  border-color: hsl(0 0% 100% / 0.16);
+  background: hsl(0 0% 100% / 0.11);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.12) inset,
+    0 16px 48px -14px hsl(0 0% 0% / 0.78),
+    0 4px 12px -4px hsl(0 0% 0% / 0.5);
+}
+
+.composer-queue-glass {
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsl(0 0% 0% / 0.09);
+  background: hsl(240 12% 97% / 0.48);
+  -webkit-backdrop-filter: blur(36px) saturate(180%);
+  backdrop-filter: blur(36px) saturate(180%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.8) inset,
+    0 8px 24px -18px hsl(220 25% 10% / 0.2);
+}
+.dark .composer-queue-glass {
+  border-color: hsl(0 0% 100% / 0.1);
+  background: hsl(0 0% 100% / 0.06);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.08) inset,
+    0 8px 24px -18px hsl(0 0% 0% / 0.72);
+}
+
+.composer-queue-item-glass {
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsl(0 0% 0% / 0.06);
+  background: hsl(0 0% 100% / 0.42);
+  -webkit-backdrop-filter: blur(20px) saturate(160%);
+  backdrop-filter: blur(20px) saturate(160%);
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.7);
+}
+.dark .composer-queue-item-glass {
+  border-color: hsl(0 0% 100% / 0.06);
+  background: hsl(0 0% 100% / 0.04);
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.05);
+}
+
+.composer-bottom-fade {
+  background: linear-gradient(
+    to top,
+    hsl(var(--background) / 0.88) 0%,
+    hsl(var(--background) / 0.35) 55%,
+    transparent 100%
+  );
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .composer-glass-card,
+  .composer-queue-glass,
+  .composer-queue-item-glass {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background: hsl(var(--background)) !important;
+  }
+  .composer-bottom-fade {
+    background: hsl(var(--background));
+  }
+}
+
+/*
+ * Right-dock chrome + open/close motion.
+ * Desktop used to fade/slide content (opacity + translate) for ~220ms, then
+ * collapse width — a clear two-phase close. Now: track width + panel slide
+ * share one curve (same as left sidebar drawer). No opacity.
+ * MUST stay outside @layer so unlayered styles beat Tailwind utilities.
  */
+.project-tools-panel {
+  --project-tools-motion-duration: 200ms;
+  --project-tools-motion-ease: var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
+  background: hsl(var(--sidebar-bg));
+  border-color: hsl(var(--sidebar-separator) / 0.85);
+  transition:
+    width var(--project-tools-motion-duration) var(--project-tools-motion-ease),
+    border-color var(--project-tools-motion-duration) var(--project-tools-motion-ease),
+    transform var(--project-tools-motion-duration) var(--project-tools-motion-ease);
+}
+.project-tools-panel-inner {
+  background: hsl(var(--sidebar-bg));
+}
+@media (min-width: 768px) {
+  .project-tools-panel {
+    overflow: hidden;
+  }
+  .project-tools-panel-inner {
+    position: absolute;
+    inset-block: 0;
+    right: 0;
+    width: var(--project-tools-panel-width);
+    min-width: var(--project-tools-panel-width);
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--project-tools-motion-duration) var(--project-tools-motion-ease);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+  .project-tools-panel[data-state="closed"] .project-tools-panel-inner {
+    transform: translate3d(100%, 0, 0);
+  }
+  .project-tools-panel[data-state="open"] .project-tools-panel-inner {
+    transform: translate3d(0, 0, 0);
+  }
+  /* While dragging the resize handle, kill width transition so the panel
+     tracks the pointer 1:1 without lag. */
+  .project-tools-panel[data-project-tools-resizing="true"] {
+    transition: none;
+  }
+  .project-tools-panel[data-project-tools-resizing="true"] .project-tools-panel-inner {
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .project-tools-panel,
+  .project-tools-panel-inner {
+    transition: none;
+  }
+}
 .project-tools-panel-header {
+  position: relative;
   height: 3.25rem;
+  border-bottom: none;
+  background: hsl(var(--background) / 0.55);
+  -webkit-backdrop-filter: blur(18px) saturate(170%);
+  backdrop-filter: blur(18px) saturate(170%);
+}
+.project-tools-panel-header::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 1px;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    hsl(var(--border) / 0.5) 12%,
+    hsl(var(--border) / 0.5) 88%,
+    transparent 100%
+  );
+  opacity: 0.75;
 }
 .project-tools-panel-tabs {
   height: 2.5rem;
@@ -2865,6 +3766,255 @@ body > div:not(#root) [data-streamdown="mermaid"]:has([style*="cursor:grabbing"]
   display: none;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .project-tools-panel,
+  .project-tools-panel-inner {
+    transition: none;
+  }
+}
+
+/*
+ * Skills / MCP Hub materials — unlayered so they beat utility glass strings
+ * on cards and banners. Light mode uses cooler translucent fills (same lesson
+ * as composer glass: high white opacity on white canvas reads solid).
+ */
+.hub-header-icon {
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 98% / 0.72);
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+  backdrop-filter: blur(20px) saturate(170%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.85) inset,
+    0 4px 14px -10px hsl(220 25% 10% / 0.12);
+}
+.dark .hub-header-icon {
+  border-color: hsl(0 0% 100% / 0.1);
+  background: hsl(0 0% 100% / 0.06);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 4px 14px -10px hsl(0 0% 0% / 0.45);
+}
+
+.hub-glass-panel {
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 97% / 0.55);
+  padding: 0.875rem 1rem;
+  -webkit-backdrop-filter: blur(24px) saturate(175%);
+  backdrop-filter: blur(24px) saturate(175%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.75) inset,
+    0 8px 24px -16px hsl(220 25% 10% / 0.14);
+}
+.hub-glass-panel[data-tone="muted"] {
+  background: hsl(240 10% 96% / 0.5);
+  border-color: hsl(0 0% 0% / 0.06);
+}
+.hub-glass-panel[data-tone="error"] {
+  background: hsl(0 72% 96% / 0.7);
+  border-color: hsl(0 72% 51% / 0.28);
+}
+.hub-glass-panel[data-active] {
+  border-color: hsl(0 0% 0% / 0.12);
+  background: hsl(240 14% 98% / 0.7);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.85) inset,
+    0 10px 28px -14px hsl(220 25% 10% / 0.18);
+}
+.dark .hub-glass-panel {
+  border-color: hsl(0 0% 100% / 0.09);
+  background: hsl(0 0% 100% / 0.055);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 8px 24px -16px hsl(0 0% 0% / 0.55);
+}
+.dark .hub-glass-panel[data-tone="muted"] {
+  background: hsl(0 0% 100% / 0.035);
+  border-color: hsl(0 0% 100% / 0.07);
+}
+.dark .hub-glass-panel[data-tone="error"] {
+  background: hsl(0 55% 18% / 0.35);
+  border-color: hsl(0 62% 45% / 0.35);
+}
+.dark .hub-glass-panel[data-active] {
+  border-color: hsl(0 0% 100% / 0.12);
+  background: hsl(0 0% 100% / 0.08);
+}
+
+.hub-status-banner {
+  position: relative;
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 97% / 0.52);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  backdrop-filter: blur(28px) saturate(180%);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.8) inset,
+    0 10px 28px -16px hsl(220 25% 10% / 0.14);
+}
+.hub-status-banner[data-ready] {
+  border-color: hsl(0 0% 0% / 0.1);
+  background: hsl(240 14% 98% / 0.62);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.88) inset,
+    0 12px 32px -16px hsl(220 25% 10% / 0.16);
+}
+.dark .hub-status-banner {
+  border-color: hsl(0 0% 100% / 0.09);
+  background: hsl(0 0% 100% / 0.05);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.06) inset,
+    0 10px 28px -16px hsl(0 0% 0% / 0.55);
+}
+.dark .hub-status-banner[data-ready] {
+  border-color: hsl(0 0% 100% / 0.11);
+  background: hsl(0 0% 100% / 0.07);
+}
+
+.hub-segmented-track {
+  display: inline-flex;
+  flex-shrink: 0;
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 97% / 0.5);
+  padding: 0.25rem;
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+  backdrop-filter: blur(20px) saturate(170%);
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.75) inset;
+}
+.dark .hub-segmented-track {
+  border-color: hsl(0 0% 100% / 0.08);
+  background: hsl(0 0% 100% / 0.04);
+  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.05) inset;
+}
+
+.hub-segment-button {
+  position: relative;
+  display: inline-flex;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  padding-inline: 1rem;
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: hsl(var(--muted-foreground));
+  transition:
+    background-color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    box-shadow 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.hub-segment-button:hover {
+  background: hsl(var(--background) / 0.65);
+  color: hsl(var(--foreground));
+}
+.hub-segment-button:active {
+  transform: scale(0.97);
+}
+.hub-segment-button[data-active] {
+  background: hsl(240 14% 99% / 0.92);
+  color: hsl(var(--foreground));
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.9) inset,
+    0 4px 12px -8px hsl(220 25% 10% / 0.16);
+  outline: 1px solid hsl(0 0% 0% / 0.08);
+}
+.dark .hub-segment-button[data-active] {
+  background: hsl(0 0% 100% / 0.09);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.08) inset,
+    0 4px 12px -8px hsl(0 0% 0% / 0.5);
+  outline-color: hsl(0 0% 100% / 0.1);
+}
+.hub-segment-count {
+  display: inline-flex;
+  height: 1rem;
+  min-width: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding-inline: 0.25rem;
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  background: hsl(var(--muted) / 0.7);
+  color: hsl(var(--muted-foreground));
+}
+.hub-segment-count[data-active] {
+  background: hsl(var(--foreground) / 0.08);
+  color: hsl(var(--foreground) / 0.85);
+}
+
+/* Skill / store cards — material + press; avoid transition: all */
+.hub-skill-card {
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 0% / 0.08);
+  background: hsl(240 12% 98% / 0.72);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.8) inset,
+    0 6px 20px -14px hsl(220 25% 10% / 0.14);
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+  backdrop-filter: blur(18px) saturate(160%);
+  transition:
+    transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    background-color 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    border-color 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    box-shadow 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+.hub-skill-card:hover {
+  border-color: hsl(0 0% 0% / 0.12);
+  background: hsl(240 14% 99% / 0.85);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.9) inset,
+    0 10px 24px -12px hsl(220 25% 10% / 0.16);
+  transform: translateY(-1px);
+}
+.hub-skill-card:active {
+  transform: scale(0.985);
+}
+.hub-skill-card.hub-skill-card--static:hover,
+.hub-skill-card.hub-skill-card--static:active {
+  transform: none;
+}
+.dark .hub-skill-card {
+  border-color: hsl(0 0% 100% / 0.09);
+  background: hsl(0 0% 100% / 0.055);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.05) inset,
+    0 6px 20px -14px hsl(0 0% 0% / 0.5);
+}
+.dark .hub-skill-card:hover {
+  border-color: hsl(0 0% 100% / 0.13);
+  background: hsl(0 0% 100% / 0.08);
+  box-shadow:
+    0 1px 0 hsl(0 0% 100% / 0.07) inset,
+    0 10px 24px -12px hsl(0 0% 0% / 0.55);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hub-segment-button:active,
+  .hub-skill-card:hover,
+  .hub-skill-card:active {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .hub-header-icon,
+  .hub-glass-panel,
+  .hub-status-banner,
+  .hub-segmented-track,
+  .hub-skill-card {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: hsl(var(--background));
+  }
+}
+
 /* Composer chip spacing — the gap after a chip is pure presentation; no
  * spacer character lives in the DOM (serialization re-inserts the word
  * boundary between a chip token and adjacent content). Outside @layer so
diff --git a/crates/agent-gui/src/pages/ChatPage.tsx b/crates/agent-gui/src/pages/ChatPage.tsx
index 94d9c3620..2c7cf1d31 100644
--- a/crates/agent-gui/src/pages/ChatPage.tsx
+++ b/crates/agent-gui/src/pages/ChatPage.tsx
@@ -1984,7 +1984,43 @@ export function ChatPage(props: ChatPageProps) {
             />
           ) : (
             <>
-              <div className="relative z-20">
+              {/* Transcript fills the column; header overlays so content scrolls under. */}
+              <ChangedFilesActionsProvider value={changedFilesActions}>
+                <ChatTranscript
+                  conversationId={currentConversationId}
+                  workspaceRoot={currentConversationWorkspaceRoot}
+                  gitClient={tauriGitClient}
+                  followRef={scrollFollowRef}
+                  hasModels={hasModels}
+                  historyItems={transcriptItems}
+                  hasMoreHistory={conversationState.transcript.hasMoreBefore}
+                  onLoadEarlierHistory={handleLoadEarlierHistory}
+                  isHistorySwitching={conversationOpenState.showOverlay}
+                  isSending={isSending}
+                  isAgentMode={isAgentMode}
+                  showUsage={isAgentDevExecutionMode}
+                  usageContextWindow={currentModelContextWindow}
+                  liveTranscriptStore={liveTranscriptStore}
+                  isCompactionRunning={isCompactionRunning}
+                  bottomReservePx={composerOverlayHeight}
+                  contentWidth={settings.customSettings.chatTranscript.width}
+                  onContentWidthChange={handleChatTranscriptWidthChange}
+                  onOpenFileLink={handleOpenChatFileLink}
+                  onResendFromEdit={handleResendFromEdit}
+                  onBranchConversation={
+                    // 会话加载中或加载失败时直接不传操作，展示明确的禁用态。
+                    isConversationHydrating || isConversationHydrationFailed
+                      ? undefined
+                      : handleBranchConversation
+                  }
+                  branchPendingMessageId={branchPendingMessageId}
+                  onOpenSettings={onOpenSettings}
+                  onSuggestionSelect={handleEmptyStateSuggestion}
+                  suggestionsDisabled={isSuggestionTyping}
+                />
+              </ChangedFilesActionsProvider>
+
+              <div className="chat-header-overlay">
                 <ChatHeader
                   settings={settings}
                   onSelectExecutionMode={(mode) =>
@@ -2022,7 +2058,7 @@ export function ChatPage(props: ChatPageProps) {
                           ? "Collapse project tools panel"
                           : (terminalDisabledMessage ?? "Expand project tools panel")
                       }
-                      className={`relative h-8 w-8 rounded-lg text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-foreground active:scale-95 ${
+                      className={`relative h-8 w-8 rounded-lg text-muted-foreground transition-[background-color,color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-foreground active:scale-[0.97] motion-reduce:active:scale-100 ${
                         rightDockOpen ? "bg-muted text-foreground" : ""
                       }`}
                     >
@@ -2039,44 +2075,11 @@ export function ChatPage(props: ChatPageProps) {
                     </Button>
                   }
                 />
-                <NotifyToast items={notifyItems} onDismiss={dismissNotify} />
+                <div className="relative">
+                  <NotifyToast items={notifyItems} onDismiss={dismissNotify} />
+                </div>
               </div>
 
-              <ChangedFilesActionsProvider value={changedFilesActions}>
-                <ChatTranscript
-                  conversationId={currentConversationId}
-                  workspaceRoot={currentConversationWorkspaceRoot}
-                  gitClient={tauriGitClient}
-                  followRef={scrollFollowRef}
-                  hasModels={hasModels}
-                  historyItems={transcriptItems}
-                  hasMoreHistory={conversationState.transcript.hasMoreBefore}
-                  onLoadEarlierHistory={handleLoadEarlierHistory}
-                  isHistorySwitching={conversationOpenState.showOverlay}
-                  isSending={isSending}
-                  isAgentMode={isAgentMode}
-                  showUsage={isAgentDevExecutionMode}
-                  usageContextWindow={currentModelContextWindow}
-                  liveTranscriptStore={liveTranscriptStore}
-                  isCompactionRunning={isCompactionRunning}
-                  bottomReservePx={composerOverlayHeight}
-                  contentWidth={settings.customSettings.chatTranscript.width}
-                  onContentWidthChange={handleChatTranscriptWidthChange}
-                  onOpenFileLink={handleOpenChatFileLink}
-                  onResendFromEdit={handleResendFromEdit}
-                  onBranchConversation={
-                    // 会话加载中或加载失败时直接不传操作，展示明确的禁用态。
-                    isConversationHydrating || isConversationHydrationFailed
-                      ? undefined
-                      : handleBranchConversation
-                  }
-                  branchPendingMessageId={branchPendingMessageId}
-                  onOpenSettings={onOpenSettings}
-                  onSuggestionSelect={handleEmptyStateSuggestion}
-                  suggestionsDisabled={isSuggestionTyping}
-                />
-              </ChangedFilesActionsProvider>
-
               <ChatComposerBar
                 composerRef={composerRef}
                 isSending={isSending}
diff --git a/crates/agent-gui/src/pages/SettingsPage.tsx b/crates/agent-gui/src/pages/SettingsPage.tsx
index 05422f7cf..e753a1495 100644
--- a/crates/agent-gui/src/pages/SettingsPage.tsx
+++ b/crates/agent-gui/src/pages/SettingsPage.tsx
@@ -66,19 +66,10 @@ function NavItem({ icon, label, active, onClick }: NavItemProps) {
     <button
       type="button"
       onClick={onClick}
-      className={`settings-nav-item group relative flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-left text-sm transition-all duration-150 ${
-        active
-          ? "settings-nav-item-active bg-primary/10 font-medium text-primary"
-          : "text-muted-foreground hover:bg-accent/60 hover:text-foreground"
-      }`}
+      data-active={active || undefined}
+      className="settings-nav-item group relative flex w-full items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-left text-[13.5px] tracking-[-0.01em]"
     >
-      <span
-        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-md transition-colors ${
-          active
-            ? "bg-primary/15 text-primary"
-            : "bg-muted/60 text-muted-foreground group-hover:bg-accent group-hover:text-foreground"
-        }`}
-      >
+      <span className="settings-nav-item-icon flex h-6 w-6 shrink-0 items-center justify-center rounded-md">
         {icon}
       </span>
       <span className="truncate leading-none">{label}</span>
@@ -232,34 +223,30 @@ export function SettingsPage(props: SettingsPageProps) {
   const onMac = isMacOsTauri();
 
   return (
-    <div className="flex h-full flex-col bg-background">
+    <div className="settings-page flex h-full flex-col bg-background">
       <div className="flex min-h-0 flex-1">
-        <aside className="settings-sidebar flex w-56 shrink-0 flex-col border-r border-border/60 bg-muted/20">
+        <aside className="settings-sidebar flex w-56 shrink-0 flex-col">
           {onMac && <div data-tauri-drag-region className="h-[38px] shrink-0" />}
-          <div className="border-b border-border/60 px-3 pb-3 pt-3">
-            <button
-              type="button"
-              onClick={onBack}
-              className="settings-back-button flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
-            >
+          <div className="settings-sidebar-header px-3 pb-3 pt-3">
+            <button type="button" onClick={onBack} className="settings-back-button">
               <ArrowLeft className="h-3.5 w-3.5 shrink-0" />
               <span>{t("settings.backToChat")}</span>
             </button>
 
-            <div className="mt-3 flex items-center gap-2.5 px-1">
-              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10">
-                <Settings2 className="h-3.5 w-3.5 text-primary" />
+            <div className="mt-3.5 flex items-center gap-2.5 px-1">
+              <div className="settings-title-icon flex h-7 w-7 items-center justify-center rounded-[9px]">
+                <Settings2 className="h-3.5 w-3.5" />
               </div>
-              <span className="text-sm font-semibold tracking-tight">{t("settings.title")}</span>
+              <span className="text-[15px] font-semibold tracking-[-0.02em] text-foreground">
+                {t("settings.title")}
+              </span>
             </div>
           </div>
 
-          <nav className="settings-nav flex-1 overflow-y-auto px-3 py-3">
+          <nav className="settings-nav flex-1 overflow-y-auto px-2.5 py-2.5">
             {navGroups.map((group, gi) => (
               <div key={group.label} className={gi > 0 ? "mt-4" : ""}>
-                <div className="mb-1 px-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
-                  {group.label}
-                </div>
+                <div className="settings-nav-group-label mb-1 px-2.5">{group.label}</div>
                 <div className="space-y-0.5">
                   {group.items.map((item) => (
                     <NavItem
@@ -275,7 +262,7 @@ export function SettingsPage(props: SettingsPageProps) {
             ))}
           </nav>
 
-          <div className="border-t border-border/60 px-3 py-2.5">
+          <div className="settings-sidebar-footer px-3 py-2.5">
             <div
               className="flex items-center gap-1.5 px-2.5 text-[11px] text-muted-foreground"
               title={saveIndicator.title}
@@ -286,10 +273,13 @@ export function SettingsPage(props: SettingsPageProps) {
           </div>
         </aside>
 
-        <main className="flex min-w-0 flex-1 flex-col">
+        <main className="settings-main flex min-w-0 flex-1 flex-col">
           <MacOsTitleBarSpacer />
-          <div className="border-b px-6 py-3.5">
-            <div key={section} className="settings-section-title-enter text-base font-semibold">
+          <div className="settings-main-header px-6 py-3.5">
+            <div
+              key={section}
+              className="settings-section-title-enter text-[17px] font-semibold tracking-[-0.02em] text-foreground"
+            >
               {sectionLabels[section]}
             </div>
           </div>
diff --git a/crates/agent-gui/src/pages/chat/components/ChatComposerBar.tsx b/crates/agent-gui/src/pages/chat/components/ChatComposerBar.tsx
index 15b88b0f2..e9ec44b65 100644
--- a/crates/agent-gui/src/pages/chat/components/ChatComposerBar.tsx
+++ b/crates/agent-gui/src/pages/chat/components/ChatComposerBar.tsx
@@ -162,8 +162,9 @@ const DEFAULT_QUEUE_SCROLLBAR_STATE: QueueScrollbarState = {
   thumbTop: 0,
 };
 
-const COMPOSER_EXPAND_ANIMATION_MS = 280;
-const COMPOSER_EXPAND_EASING = "cubic-bezier(0.32, 0.72, 0.22, 1)";
+const COMPOSER_EXPAND_ANIMATION_MS = 300;
+/* Apple sheet curve — critically readable settle without bounce */
+const COMPOSER_EXPAND_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
 
 function prefersReducedMotion() {
   return (
@@ -572,13 +573,14 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
       className={cn(
         "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center px-4 pb-4",
         // 展开态从头部下沿一路铺到底部，把整个聊天区让给输入框。
-        isComposerExpanded && "top-14",
+        // Align expanded top with overlay header height (CSS var, not fixed top-14).
+        isComposerExpanded && "top-[var(--chat-header-height)]",
       )}
     >
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-x-0 bottom-0 bg-background"
-        style={{ height: "1rem" }}
+        className="composer-bottom-fade pointer-events-none absolute inset-x-0 bottom-0"
+        style={{ height: "1.75rem" }}
       />
       <div
         className={cn(
@@ -602,7 +604,7 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
               )}
             >
               <div className="min-h-0 overflow-hidden">
-                <div className="rounded-t-lg border border-b-0 border-black/[0.055] bg-white/70 px-1 pb-1 pt-2 shadow-[0_8px_24px_-18px_rgba(15,23,42,0.24),inset_0_1px_0_rgba(255,255,255,0.72)] backdrop-blur-2xl backdrop-saturate-[165%] dark:border-white/[0.10] dark:bg-white/[0.06] dark:shadow-[0_8px_24px_-18px_rgba(0,0,0,0.72),inset_0_1px_0_rgba(255,255,255,0.08)]">
+                <div className="composer-queue-glass rounded-t-2xl border border-b-0 px-1 pb-1 pt-2">
                   <div className="relative min-h-0">
                     <ul
                       ref={queueListRef}
@@ -618,7 +620,7 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
                         return (
                           <li
                             key={item.id}
-                            className="relative grid h-9 min-h-9 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 rounded-md border border-black/[0.035] bg-white/42 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.56)] backdrop-blur-xl backdrop-saturate-[150%] transition-[border-color,background-color] dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"
+                            className="composer-queue-item-glass relative grid h-9 min-h-9 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 rounded-md border px-2 text-xs transition-[border-color,background-color]"
                           >
                             <div className="flex shrink-0 items-center gap-0.5">
                               {index > 0 ? (
@@ -745,23 +747,23 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
               : undefined
           }
           className={cn(
-            // 过渡只针对 focus-within 的配色/阴影；不能用 transition-all——
-            // 展开态切换 flex-grow 时会被一并动画，导致卡片先跳顶再长满的闪动。
+            // Material (fill/blur/border/shadow) lives in .composer-glass-card CSS —
+            // light mode needs lower opacity + cool tint so glass reads on white.
             // 常驻 flex-col：FLIP 动画把卡片钳在中间高度时，flex-1 的编辑器
             // 区吸收多余空间，工具栏才能始终贴住卡片底边。
-            "composer-glass-card relative z-10 flex flex-col overflow-hidden rounded-[24px] border border-black/[0.055] bg-white/70 shadow-[0_12px_40px_-14px_rgba(15,23,42,0.22),0_2px_6px_-2px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.74)] backdrop-blur-2xl backdrop-saturate-[165%] transition-[background-color,border-color,box-shadow] focus-within:border-black/[0.075] focus-within:bg-white/74 focus-within:shadow-[0_16px_46px_-14px_rgba(15,23,42,0.26),0_4px_12px_-4px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.78)] dark:border-white/[0.10] dark:bg-white/[0.06] dark:shadow-[0_12px_40px_-14px_rgba(0,0,0,0.72),0_2px_6px_-2px_rgba(0,0,0,0.42),inset_0_1px_0_rgba(255,255,255,0.08)] dark:focus-within:border-white/[0.15] dark:focus-within:bg-white/[0.08]",
+            "composer-glass-card relative z-10 flex flex-col overflow-hidden rounded-[24px]",
             isComposerExpanded && "min-h-0 flex-1",
           )}
         >
           {/* macOS material rim-light */}
           <div
             aria-hidden
-            className="pointer-events-none absolute inset-x-5 top-0 h-px rounded-full bg-gradient-to-r from-transparent via-white/85 to-transparent dark:via-white/15"
+            className="pointer-events-none absolute inset-x-5 top-0 z-[1] h-px rounded-full bg-gradient-to-r from-transparent via-white/90 to-transparent dark:via-white/15"
           />
-          {/* subtle inner gloss gradient */}
+          {/* subtle inner gloss — slightly stronger in light so glass still reads over white */}
           <div
             aria-hidden
-            className="pointer-events-none absolute inset-0 rounded-[24px] bg-gradient-to-b from-white/18 to-transparent opacity-70 dark:from-white/[0.04] dark:opacity-100"
+            className="pointer-events-none absolute inset-0 z-[1] rounded-[24px] bg-gradient-to-b from-white/35 via-white/8 to-transparent dark:from-white/[0.05] dark:via-transparent dark:to-transparent"
           />
 
           {pendingUploadedFiles.length > 0 ? (
@@ -790,7 +792,7 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
             title={toggleComposerExpandTooltip}
             aria-label={toggleComposerExpandTooltip}
             aria-expanded={isComposerExpanded}
-            className="absolute right-3 top-2 z-20 inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground/70 outline-hidden transition-[background-color,color,scale] hover:bg-muted/60 hover:text-foreground active:scale-90 focus-visible:bg-muted/60"
+            className="absolute right-3 top-2 z-20 inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground/70 outline-hidden transition-[background-color,color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/60 hover:text-foreground active:scale-[0.97] focus-visible:bg-muted/60 motion-reduce:active:scale-100"
           >
             {isComposerExpanded ? (
               <Minimize2 className="h-4 w-4" />
@@ -841,7 +843,7 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
                           : t("chat.upload.selectFiles")
                   }
                   className={cn(
-                    "composer-toolbar-action relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full outline-hidden transition-colors hover:bg-muted/60 focus-visible:bg-muted/60",
+                    "composer-toolbar-action relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full outline-hidden hover:bg-muted/60 focus-visible:bg-muted/60 motion-reduce:active:scale-100",
                     "disabled:pointer-events-none disabled:opacity-40",
                     pendingUploadedFiles.length > 0
                       ? "text-sky-600 hover:text-sky-700 dark:text-sky-300 dark:hover:text-sky-200"
@@ -879,7 +881,7 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
                       : t("chat.runtime.webSearchOff")
                   }
                   className={cn(
-                    "composer-toolbar-action inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full outline-hidden transition-colors hover:bg-muted/60 focus-visible:bg-muted/60",
+                    "composer-toolbar-action inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full outline-hidden hover:bg-muted/60 focus-visible:bg-muted/60 motion-reduce:active:scale-100",
                     "disabled:pointer-events-none disabled:opacity-40",
                     chatRuntimeControls.nativeWebSearchEnabled
                       ? "text-emerald-600 hover:text-emerald-700 dark:text-emerald-300 dark:hover:text-emerald-200"
@@ -911,7 +913,7 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
                         : t("chat.runtime.thinkingOff")
                   }
                   className={cn(
-                    "composer-toolbar-action inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full outline-hidden transition-colors hover:bg-muted/60 focus-visible:bg-muted/60",
+                    "composer-toolbar-action inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full outline-hidden hover:bg-muted/60 focus-visible:bg-muted/60 motion-reduce:active:scale-100",
                     "disabled:pointer-events-none disabled:opacity-40",
                     chatRuntimeControls.thinkingEnabled && thinkingSupported
                       ? "text-amber-600 hover:text-amber-700 dark:text-amber-300 dark:hover:text-amber-200"
@@ -1023,12 +1025,12 @@ export const ChatComposerBar = memo(function ChatComposerBar(props: {
                       : undefined
                 }
                 className={cn(
-                  "h-8 w-8 shrink-0 rounded-full border-0 p-0 shadow-none transition-all",
+                  "h-8 w-8 shrink-0 rounded-full border-0 p-0 shadow-none transition-[background-color,color,opacity,transform,filter] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]",
                   canQueueDraftWhileSending
-                    ? "hover:brightness-105 active:scale-95"
+                    ? "hover:brightness-105 active:scale-[0.97]"
                     : isSending
-                      ? "hover:opacity-90 active:scale-95"
-                      : "disabled:opacity-100 [&:not(:disabled)]:bg-foreground [&:not(:disabled)]:text-background [&:not(:disabled)]:hover:bg-foreground/85 [&:not(:disabled)]:active:scale-95 disabled:bg-muted/60 disabled:text-muted-foreground",
+                      ? "hover:opacity-90 active:scale-[0.97]"
+                      : "disabled:opacity-100 [&:not(:disabled)]:bg-foreground [&:not(:disabled)]:text-background [&:not(:disabled)]:hover:bg-foreground/90 [&:not(:disabled)]:active:scale-[0.97] disabled:bg-muted/60 disabled:text-muted-foreground",
                 )}
               >
                 {canQueueDraftWhileSending ? (
diff --git a/crates/agent-gui/src/pages/chat/components/ChatHeader.tsx b/crates/agent-gui/src/pages/chat/components/ChatHeader.tsx
index 8c5f41cf4..e198e5bdd 100644
--- a/crates/agent-gui/src/pages/chat/components/ChatHeader.tsx
+++ b/crates/agent-gui/src/pages/chat/components/ChatHeader.tsx
@@ -143,7 +143,9 @@ export const ChatHeader = memo(function ChatHeader(props: {
     <header
       data-tauri-drag-region
       className={cn(
-        "flex items-center justify-between gap-2 py-2.5 pr-4",
+        // pl transition matches sidebar drawer motion (200ms) so traffic-light
+        // inset doesn't jump ahead of the collapsing column on macOS.
+        "chat-header relative flex items-center justify-between gap-2 py-2.5 pr-4 transition-[padding] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
         !sidebarOpen && macOsTauri ? "pl-[232px]" : "pl-4",
       )}
     >
@@ -167,8 +169,9 @@ export const ChatHeader = memo(function ChatHeader(props: {
                 variant="ghost"
                 disabled={!hasModels}
                 className={cn(
-                  "model-selector-trigger h-8 max-w-[min(20rem,calc(100vw-8.5rem))] -translate-y-px justify-between gap-1.5 overflow-hidden rounded-lg px-2.5 py-1 cursor-pointer text-xs font-normal text-foreground transition-all duration-200 ease-out hover:bg-muted/60 dark:text-white",
-                  isModelPickerOpen && "bg-muted/60",
+                  "model-selector-trigger h-8 max-w-[min(20rem,calc(100vw-8.5rem))] -translate-y-px justify-between gap-1.5 overflow-hidden rounded-lg px-2.5 py-1 cursor-pointer text-xs font-normal text-foreground transition-[background-color,color,transform,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/60 dark:text-white",
+                  isModelPickerOpen &&
+                    "bg-muted/70 shadow-[inset_0_0_0_1px_hsl(var(--border)/0.55)]",
                 )}
               />
             }
@@ -181,7 +184,7 @@ export const ChatHeader = memo(function ChatHeader(props: {
             </span>
             <ChevronDown
               className={cn(
-                "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out dark:text-white",
+                "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none dark:text-white",
                 isModelPickerOpen && "rotate-180",
               )}
             />
@@ -190,14 +193,14 @@ export const ChatHeader = memo(function ChatHeader(props: {
             <Popover.Positioner
               side="bottom"
               align="start"
-              sideOffset={4}
+              sideOffset={6}
               collisionPadding={8}
               className="z-[9999]"
             >
               <Popover.Popup
                 initialFocus={searchInputRef}
                 aria-label={t("chat.selectModel")}
-                className="model-selector-dropdown w-[min(18rem,calc(100vw-1rem))] overflow-hidden rounded-xl border bg-popover p-0 text-xs text-popover-foreground shadow-md outline-none"
+                className="model-selector-dropdown w-[min(18rem,calc(100vw-1rem))] overflow-hidden rounded-2xl border border-border/60 bg-popover/95 p-0 text-xs text-popover-foreground shadow-[0_16px_48px_-18px_rgba(15,23,42,0.38),0_1px_0_rgba(255,255,255,0.55)_inset] outline-none backdrop-blur-xl backdrop-saturate-150 dark:border-white/[0.1] dark:shadow-[0_16px_48px_-18px_rgba(0,0,0,0.7),0_1px_0_rgba(255,255,255,0.06)_inset]"
               >
                 {(() => {
                   const isAgent = isAgentExecutionMode(settings.system.executionMode);
@@ -362,7 +365,8 @@ export const ChatHeader = memo(function ChatHeader(props: {
                           {expanded
                             ? group.opts.map((option) => {
                                 const isSelected = option.value === selectedValue;
-                                const itemAnimationDelay = `${Math.min(animationIndex, 5) * 0.025}s`;
+                                // Cap stagger so long lists don't feel slow (30–40ms steps, max ~5).
+                                const itemAnimationDelay = `${Math.min(animationIndex, 5) * 0.035}s`;
                                 animationIndex += 1;
                                 return (
                                   <button
@@ -376,7 +380,7 @@ export const ChatHeader = memo(function ChatHeader(props: {
                                       setIsModelPickerOpen(false);
                                     }}
                                     className={cn(
-                                      "model-selector-item flex h-[30px] w-full max-w-full shrink-0 cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-md px-2 py-0 text-left text-xs font-normal leading-5 text-foreground transition-none hover:bg-foreground/[0.05] focus-visible:bg-foreground/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 dark:text-white",
+                                      "model-selector-item flex h-[30px] w-full max-w-full shrink-0 cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-lg px-2 py-0 text-left text-xs font-normal leading-5 text-foreground hover:bg-foreground/[0.05] focus-visible:bg-foreground/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 dark:text-white",
                                       isSelected &&
                                         "bg-foreground/[0.07] font-medium text-foreground hover:bg-foreground/[0.09] focus-visible:bg-foreground/[0.09]",
                                     )}
@@ -390,7 +394,7 @@ export const ChatHeader = memo(function ChatHeader(props: {
                                       <span className="min-w-0 truncate">{option.model}</span>
                                     </span>
                                     {isSelected ? (
-                                      <Check className="h-4 w-4 shrink-0 text-primary" />
+                                      <Check className="model-selector-check h-4 w-4 shrink-0 text-primary" />
                                     ) : null}
                                   </button>
                                 );
diff --git a/crates/agent-gui/src/pages/chat/transcript/ChatEmptyState.tsx b/crates/agent-gui/src/pages/chat/transcript/ChatEmptyState.tsx
index 34f95c626..e9f45e3c1 100644
--- a/crates/agent-gui/src/pages/chat/transcript/ChatEmptyState.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/ChatEmptyState.tsx
@@ -114,35 +114,35 @@ export function ChatEmptyState({
             <button
               type="button"
               onClick={() => onOpenSettings("providers")}
-              className="chat-hero-cta-enter mt-5 inline-flex h-8 items-center gap-2 rounded-lg bg-foreground/[0.05] px-3 text-sm font-normal text-foreground/85 transition-colors hover:bg-foreground/[0.08] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+              className="chat-hero-cta-enter mt-5 inline-flex h-8 items-center gap-2 rounded-full bg-foreground px-3.5 text-sm font-medium text-background transition-[transform,opacity] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:opacity-90 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 motion-reduce:active:scale-100"
             >
-              <Settings className="h-4 w-4 text-foreground/65" />
+              <Settings className="h-4 w-4 opacity-80" />
               {t("chat.goToSettings")}
             </button>
           ) : null}
         </>
       ) : (
         <>
-          <div className="chat-hero-title-enter whitespace-nowrap text-center text-[calc(20px*var(--zone-font-scale,1))] font-semibold leading-7 tracking-tight text-foreground">
+          <div className="chat-hero-title-enter whitespace-nowrap text-center text-[calc(22px*var(--zone-font-scale,1))] font-semibold leading-7 tracking-tight text-foreground">
             {t(GREETING_KEYS[period])}，{t("chat.greetingSubtitle")}
           </div>
           {onSuggestionSelect ? (
-            <div className="mt-7 grid w-full max-w-[520px] grid-cols-1 gap-2 px-6 sm:grid-cols-3 sm:px-4">
+            <div className="mt-8 grid w-full max-w-[540px] grid-cols-1 gap-2.5 px-6 sm:grid-cols-3 sm:px-4">
               {SUGGESTION_CARDS.map((card, index) => (
                 <button
                   key={card.key}
                   type="button"
                   disabled={suggestionsDisabled}
                   onClick={() => onSuggestionSelect(t(card.promptKey))}
-                  style={{ "--chat-hero-delay": `${0.26 + index * 0.08}s` } as CSSProperties}
-                  className="chat-hero-card-enter flex h-11 items-center gap-2 rounded-lg bg-foreground/[0.025] px-2.5 text-left text-foreground/85 transition-colors hover:bg-foreground/[0.055] hover:text-foreground focus-visible:bg-foreground/[0.055] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+                  style={{ "--chat-hero-delay": `${0.2 + index * 0.06}s` } as CSSProperties}
+                  className="chat-hero-card-enter chat-suggest-card flex h-12 items-center gap-2.5 rounded-2xl px-3 text-left text-foreground/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 motion-reduce:active:scale-100"
                 >
                   <span
-                    className={`flex h-7 w-7 shrink-0 items-center justify-center ${card.chipClassName}`}
+                    className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-foreground/[0.04] ${card.chipClassName}`}
                   >
                     <card.icon className="h-4 w-4" />
                   </span>
-                  <span className="min-w-0 truncate text-[calc(14px*var(--zone-font-scale,1))] font-medium leading-5 text-foreground/90">
+                  <span className="min-w-0 truncate text-[calc(13.5px*var(--zone-font-scale,1))] font-medium leading-5 tracking-tight text-foreground/90">
                     {t(card.titleKey)}
                   </span>
                 </button>
diff --git a/crates/agent-gui/src/pages/chat/transcript/ChatTranscript.tsx b/crates/agent-gui/src/pages/chat/transcript/ChatTranscript.tsx
index 32070a9fd..66aaee3a9 100644
--- a/crates/agent-gui/src/pages/chat/transcript/ChatTranscript.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/ChatTranscript.tsx
@@ -286,9 +286,9 @@ export const ChatTranscript = memo(function ChatTranscript(props: ChatTranscript
         data-scroll-viewport
         className="h-full w-full overflow-y-auto [overflow-anchor:none]"
       >
-        <div className="mx-auto w-full max-w-[var(--chat-transcript-content-width)] px-5 py-4 [overflow-anchor:none]">
+        <div className="chat-transcript-scroll-pad mx-auto w-full max-w-[var(--chat-transcript-content-width)] px-5 pb-4 [overflow-anchor:none]">
           {showNoModelsState || showStartChatState ? (
-            <div className="flex min-h-[calc(100vh-220px)] flex-col items-center justify-center">
+            <div className="flex min-h-[calc(100vh-var(--chat-header-height)-12rem)] flex-col items-center justify-center">
               {/* Keyed per conversation so the hero entrance replays when
                   switching between empty conversations, not just on mount. */}
               <ChatEmptyState
@@ -361,7 +361,7 @@ export const ChatTranscript = memo(function ChatTranscript(props: ChatTranscript
           aria-label={jumpToBottomLabel}
           title={jumpToBottomLabel}
           onClick={() => scrollFollowHandle.jumpToBottom()}
-          className="chat-jump-to-bottom absolute left-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground"
+          className="chat-jump-to-bottom absolute left-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full motion-reduce:active:scale-100"
           style={{ bottom: Math.ceil(bottomReservePx) + 16 }}
         >
           <ChevronDown className="h-4 w-4" />
diff --git a/crates/agent-gui/src/pages/chat/transcript/FloorNavRail.tsx b/crates/agent-gui/src/pages/chat/transcript/FloorNavRail.tsx
index e3f160a0b..75b012aec 100644
--- a/crates/agent-gui/src/pages/chat/transcript/FloorNavRail.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/FloorNavRail.tsx
@@ -253,15 +253,15 @@ export function FloorNavRail(props: {
         // 收藏区的副本不带定位锚点，展开自动居中永远对准主列表里的当前行。
         data-floor-active={(isActive && !isPinnedCopy) || undefined}
         className={cn(
-          "group/floor flex items-center gap-1 rounded-lg pr-1 transition-colors",
-          isActive ? "bg-foreground/[0.06]" : "hover:bg-foreground/[0.04]",
+          "floor-nav-row group/floor flex items-center gap-1 rounded-[10px] pr-1",
+          isActive ? "bg-foreground/[0.07]" : "hover:bg-foreground/[0.045]",
         )}
       >
         <button
           type="button"
           onClick={() => handleJump(floor.rowKey)}
           className={cn(
-            "min-w-0 flex-1 truncate px-2 py-1.5 text-left text-[12px] leading-tight",
+            "min-w-0 flex-1 truncate px-2 py-1.5 text-left text-[12px] leading-snug tracking-tight",
             isActive ? "font-medium text-foreground" : "text-muted-foreground",
           )}
           title={floor.preview}
@@ -274,10 +274,10 @@ export function FloorNavRail(props: {
           title={isBookmarked ? unpinLabel : pinLabel}
           onClick={() => toggleFloorBookmark(conversationId, floor.messageId)}
           className={cn(
-            "flex h-6 w-6 shrink-0 items-center justify-center rounded-md transition-all",
+            "floor-nav-pin flex h-6 w-6 shrink-0 items-center justify-center rounded-md motion-reduce:active:scale-100",
             isBookmarked
-              ? "text-amber-500 hover:text-amber-600"
-              : "text-muted-foreground/50 opacity-0 hover:text-foreground group-hover/floor:opacity-100 focus-visible:opacity-100",
+              ? "text-amber-500 hover:bg-amber-500/10 hover:text-amber-600"
+              : "text-muted-foreground/50 opacity-0 hover:bg-foreground/[0.06] hover:text-foreground group-hover/floor:opacity-100 focus-visible:opacity-100",
             // 触屏没有 hover 显隐，收藏按钮常显。
             isCoarsePointer && "opacity-100",
           )}
@@ -294,7 +294,7 @@ export function FloorNavRail(props: {
       aria-label={railLabel}
       aria-hidden={!railVisible || undefined}
       className={cn(
-        "pointer-events-none absolute right-4 top-2 z-10 flex items-center transition-opacity duration-200",
+        "pointer-events-none absolute right-4 top-2 z-10 flex items-center transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
         railVisible ? "opacity-100" : "opacity-0",
       )}
       style={{ bottom: bottomOffset }}
@@ -302,7 +302,7 @@ export function FloorNavRail(props: {
       {expanded ? (
         <div
           className={cn(
-            "floor-nav-panel flex max-h-[min(78%,560px)] w-60 max-w-[calc(100vw-2rem)] touch-manipulation flex-col overflow-hidden rounded-xl border border-border/50 bg-background/85 shadow-[0_12px_32px_-16px_rgba(15,23,42,0.28)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.06]",
+            "floor-nav-panel flex max-h-[min(78%,560px)] w-60 max-w-[calc(100vw-2rem)] touch-manipulation flex-col overflow-hidden rounded-2xl",
             // 隐藏态不吃指针事件：触摸透传给转写区，不会点到看不见的控件。
             railVisible ? "pointer-events-auto" : "pointer-events-none",
           )}
@@ -310,8 +310,8 @@ export function FloorNavRail(props: {
         >
           <div ref={panelScrollRef} className="min-h-0 overflow-y-auto p-1.5">
             {bookmarkedFloors.length > 0 ? (
-              <div className="mb-1.5 rounded-lg bg-amber-500/[0.07] p-1 ring-1 ring-amber-500/20">
-                <div className="flex items-center gap-1.5 px-1.5 pb-1 pt-0.5 text-[10.5px] font-medium text-amber-600/90 dark:text-amber-400/90">
+              <div className="mb-1.5 rounded-[10px] bg-amber-500/[0.07] p-1 ring-1 ring-amber-500/20">
+                <div className="chat-sidebar-section-label flex items-center gap-1.5 px-1.5 pb-1 pt-0.5 text-amber-600/90 dark:text-amber-400/90">
                   <Pin className="h-2.5 w-2.5 fill-current" />
                   {pinnedTitle}
                 </div>
@@ -352,7 +352,7 @@ export function FloorNavRail(props: {
                 onClick={() => handleJump(floor.rowKey)}
                 className={cn(
                   // after 伪元素把命中区扩到整条槽位高度，覆盖标记间 7px 间隙。
-                  "relative h-[2.5px] rounded-full transition-all duration-150 after:absolute after:-inset-x-2 after:-inset-y-1 after:content-['']",
+                  "floor-nav-marker relative h-[2.5px] rounded-full after:absolute after:-inset-x-2 after:-inset-y-1 after:content-['']",
                   isActive ? "w-[18px]" : "w-3 hover:w-[18px]",
                   isBookmarked
                     ? "bg-amber-500/90"
diff --git a/crates/agent-gui/src/pages/chat/transcript/RowActions.tsx b/crates/agent-gui/src/pages/chat/transcript/RowActions.tsx
index 82bacc575..3bcc11d36 100644
--- a/crates/agent-gui/src/pages/chat/transcript/RowActions.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/RowActions.tsx
@@ -50,7 +50,7 @@ export function AssistantRowFooter(props: AssistantRowFooterProps) {
       >
         <button
           type="button"
-          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
+          className="rounded-md p-1 text-muted-foreground transition-[color,background-color,transform] duration-100 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/50 hover:text-foreground active:scale-[0.96] disabled:cursor-not-allowed disabled:opacity-40 motion-reduce:active:scale-100"
           title={t("chat.copy")}
           disabled={!replyText}
           onClick={() => {
@@ -74,7 +74,7 @@ export function AssistantRowFooter(props: AssistantRowFooterProps) {
           {() => (
             <button
               type="button"
-              className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
+              className="rounded-md p-1 text-muted-foreground transition-[color,background-color,transform] duration-100 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/50 hover:text-foreground active:scale-[0.96] disabled:cursor-not-allowed disabled:opacity-40 motion-reduce:active:scale-100"
               title={retryTitle}
               disabled={retryDisabled}
             >
@@ -97,7 +97,7 @@ export function AssistantRowFooter(props: AssistantRowFooterProps) {
           {() => (
             <button
               type="button"
-              className={`rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground disabled:cursor-not-allowed ${isRowBranchPending ? "" : "disabled:opacity-40"}`}
+              className={`rounded-md p-1 text-muted-foreground transition-[color,background-color,transform] duration-100 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/50 hover:text-foreground active:scale-[0.96] disabled:cursor-not-allowed motion-reduce:active:scale-100 ${isRowBranchPending ? "" : "disabled:opacity-40"}`}
               title={retryMessageRef ? t("chat.branch") : t("chat.branchUnavailable")}
               disabled={isSending || !retryMessageRef || !onBranchConversation || branchPending}
             >
@@ -136,7 +136,7 @@ export function UserRowFooter(props: UserRowFooterProps) {
       <div className="flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
         <button
           type="button"
-          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+          className="rounded-md p-1 text-muted-foreground transition-[color,background-color,transform] duration-100 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/50 hover:text-foreground active:scale-[0.96] motion-reduce:active:scale-100"
           title={t("chat.copy")}
           onClick={() => {
             navigator.clipboard.writeText(text);
@@ -147,7 +147,7 @@ export function UserRowFooter(props: UserRowFooterProps) {
         </button>
         <button
           type="button"
-          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40"
+          className="rounded-md p-1 text-muted-foreground transition-[color,background-color,transform] duration-100 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted/50 hover:text-foreground active:scale-[0.96] disabled:cursor-not-allowed disabled:opacity-40 motion-reduce:active:scale-100"
           title={editTitle}
           disabled={editDisabled}
           onClick={() => {
diff --git a/crates/agent-gui/src/pages/chat/transcript/UserMessageRow.tsx b/crates/agent-gui/src/pages/chat/transcript/UserMessageRow.tsx
index 5aadd8d2b..b6546aa92 100644
--- a/crates/agent-gui/src/pages/chat/transcript/UserMessageRow.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/UserMessageRow.tsx
@@ -69,7 +69,7 @@ export const UserMessageRow = memo(function UserMessageRow(props: UserMessageRow
       className={`chat-user-bubble-wrap group relative ml-auto max-w-[min(85%,calc(50em+2rem))] ${compactedClass}`}
     >
       <div
-        className={`${animateEntrance ? "chat-bubble-enter " : ""}chat-user-bubble ml-auto w-fit max-w-full rounded-2xl rounded-br-md bg-[hsl(var(--chat-user-bg))] px-4 py-2.5 font-chat text-[calc(14.5px*var(--zone-font-scale,1))] leading-relaxed text-[hsl(var(--chat-user-fg))]`}
+        className={`${animateEntrance ? "chat-bubble-enter " : ""}chat-user-bubble ml-auto w-fit max-w-full rounded-[18px] rounded-br-[6px] bg-[hsl(var(--chat-user-bg))] px-3.5 py-2 font-chat text-[calc(14.5px*var(--zone-font-scale,1))] leading-[1.45] tracking-[-0.01em] text-[hsl(var(--chat-user-fg))]`}
       >
         <UserAttachmentCards files={visibleFiles} workspaceRoot={workspaceRoot} />
         {item.text ? (
diff --git a/crates/agent-gui/src/pages/mcp-hub/McpHubPage.tsx b/crates/agent-gui/src/pages/mcp-hub/McpHubPage.tsx
index 82301550e..619eed913 100644
--- a/crates/agent-gui/src/pages/mcp-hub/McpHubPage.tsx
+++ b/crates/agent-gui/src/pages/mcp-hub/McpHubPage.tsx
@@ -1,5 +1,11 @@
 import { useState } from "react";
-import { HubBackdrop, HubHeader } from "../../components/hub/HubChrome";
+import {
+  HubBackdrop,
+  HubHeader,
+  HubSegmentButton,
+  HubSegmentedTrack,
+  HubStatusBanner,
+} from "../../components/hub/HubChrome";
 import { Cable, Cloud, Download, Plug, Plus, Server, Sparkles } from "../../components/icons";
 import { Button } from "../../components/ui/button";
 import { useLocale } from "../../i18n";
@@ -71,22 +77,13 @@ export function McpHubPage(props: McpHubPageProps) {
         <div className="hub-scroll min-h-0 flex-1 overflow-hidden px-5 pb-6 pt-2 sm:px-6 lg:px-8 xl:px-10">
           <div className="hub-content-stage mx-auto flex h-full min-h-0 w-full max-w-[1320px] flex-col gap-4">
             {/* Status banner */}
-            <div
-              className={cn(
-                "hub-panel-enter relative overflow-hidden rounded-2xl border backdrop-blur-xl",
-                ready
-                  ? "border-border/50 bg-background/75 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_8px_24px_-18px_rgba(15,23,42,0.18)] dark:border-white/[0.09] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_8px_24px_-18px_rgba(0,0,0,0.6)]"
-                  : "border-border/40 bg-background/60",
-              )}
-            >
+            <HubStatusBanner ready={ready}>
               <div className="flex items-center gap-3 px-4 py-3.5 sm:gap-x-5 sm:px-5">
                 <div className="flex min-w-0 flex-1 items-center gap-3 sm:gap-3.5">
                   <div
                     className={cn(
-                      "relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition-colors",
-                      ready
-                        ? "border-border/50 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
-                        : "border-border/40 bg-muted/40 text-muted-foreground",
+                      "hub-header-icon relative flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] transition-colors",
+                      ready ? "text-foreground/85" : "text-muted-foreground opacity-80",
                     )}
                   >
                     <Plug className="h-5 w-5" />
@@ -96,13 +93,13 @@ export function McpHubPage(props: McpHubPageProps) {
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-                      <div className="text-[13.5px] font-semibold tracking-tight text-foreground">
+                      <div className="text-[13.5px] font-semibold tracking-[-0.015em] text-foreground">
                         {ready ? t("mcpHub.statusReady") : t("mcpHub.statusEmpty")}
                       </div>
                       {ready ? (
                         <span
                           className={cn(
-                            "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-medium tabular-nums backdrop-blur-md",
+                            "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-medium tabular-nums",
                             enabledCount > 0
                               ? "bg-foreground/[0.06] text-foreground/85 ring-1 ring-border/50"
                               : "bg-background/60 text-muted-foreground ring-1 ring-border/40",
@@ -116,7 +113,7 @@ export function McpHubPage(props: McpHubPageProps) {
                       ) : null}
                     </div>
                     {statusHint ? (
-                      <div className="mt-0.5 truncate text-[11.5px] text-muted-foreground">
+                      <div className="mt-0.5 truncate text-[11.5px] tracking-[-0.005em] text-muted-foreground">
                         {statusHint}
                       </div>
                     ) : null}
@@ -134,11 +131,11 @@ export function McpHubPage(props: McpHubPageProps) {
                   <span className="hidden whitespace-nowrap sm:inline">{t("mcpHub.add")}</span>
                 </Button>
               </div>
-            </div>
+            </HubStatusBanner>
 
             {/* Tab bar */}
             <div className="hub-panel-enter flex items-center justify-between gap-3">
-              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
+              <HubSegmentedTrack className="max-sm:max-w-full max-sm:overflow-x-auto max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden">
                 {[
                   {
                     value: "installed" as const,
@@ -160,40 +157,22 @@ export function McpHubPage(props: McpHubPageProps) {
                   },
                 ].map((item) => {
                   const Icon = item.icon;
-                  const active = view === item.value;
                   return (
-                    <button
+                    <HubSegmentButton
                       key={item.value}
-                      type="button"
+                      active={view === item.value}
+                      icon={<Icon className="h-3.5 w-3.5" />}
+                      count={item.count}
                       onClick={() => setView(item.value)}
-                      className={cn(
-                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all",
-                        active
-                          ? "bg-background/85 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-border/45 dark:bg-white/[0.08] dark:ring-white/[0.09] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_12px_-8px_rgba(0,0,0,0.55)]"
-                          : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
-                      )}
                     >
-                      <Icon className="h-3.5 w-3.5" />
-                      <span>{item.label}</span>
-                      {item.count !== null && item.count > 0 ? (
-                        <span
-                          className={cn(
-                            "ml-0.5 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums",
-                            active
-                              ? "bg-foreground/[0.08] text-foreground/85"
-                              : "bg-muted/70 text-muted-foreground",
-                          )}
-                        >
-                          {item.count}
-                        </span>
-                      ) : null}
-                    </button>
+                      {item.label}
+                    </HubSegmentButton>
                   );
                 })}
-              </div>
+              </HubSegmentedTrack>
 
               {view === "store" ? (
-                <div className="hidden text-[11.5px] text-muted-foreground sm:flex items-center gap-1.5">
+                <div className="hidden items-center gap-1.5 text-[11.5px] text-muted-foreground sm:flex">
                   <Sparkles className="h-3.5 w-3.5 text-foreground/55" />
                   <span>{t("mcpHub.storeSubtitle")}</span>
                 </div>
diff --git a/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx b/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx
index 8088af59d..5d6efeb29 100644
--- a/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx
+++ b/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx
@@ -368,7 +368,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
       <div className="border-t" />
 
       <div className="grid gap-4 md:grid-cols-2">
-        <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+        <section className="settings-card space-y-3">
           <div className="flex items-start gap-3">
             <div className="space-y-1">
               <div className="flex items-center gap-2 text-sm font-medium text-foreground">
@@ -415,7 +415,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
           </div>
         </section>
 
-        <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+        <section className="settings-card space-y-3">
           <div className="flex items-start gap-3">
             <div className="space-y-1">
               <div className="flex items-center gap-2 text-sm font-medium text-foreground">
@@ -464,7 +464,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
         </section>
       </div>
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+      <section className="settings-card space-y-3">
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <Globe className="h-4 w-4 text-muted-foreground" />
@@ -582,7 +582,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
         </div>
       </section>
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+      <section className="settings-card space-y-3">
         <div className="flex items-center gap-2 text-sm font-medium text-foreground">
           <Minimize2 className="h-4 w-4 text-muted-foreground" />
           {t("settings.closeWindowBehavior")}
@@ -642,7 +642,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
         </div>
       </section>
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+      <section className="settings-card space-y-3">
         <div className="flex items-center gap-2 text-sm font-medium text-foreground">
           <MonitorSmartphone className="h-4 w-4 text-muted-foreground" />
           {t("settings.trayTitle")}
@@ -679,7 +679,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
         ) : null}
       </section>
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+      <section className="settings-card space-y-3">
         <div className="flex items-center gap-2 text-sm font-medium text-foreground">
           <ScanText className="h-4 w-4 text-muted-foreground" />
           {t("settings.fontFamily")}
@@ -778,7 +778,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
         </datalist>
       </section>
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
+      <section className="settings-card space-y-3">
         <div className="flex items-center gap-2 text-sm font-medium text-foreground">
           <ScanText className="h-4 w-4 text-muted-foreground" />
           {t("settings.fontSize")}
diff --git a/crates/agent-gui/src/pages/settings/shared.tsx b/crates/agent-gui/src/pages/settings/shared.tsx
index 6296d3570..37ce52666 100644
--- a/crates/agent-gui/src/pages/settings/shared.tsx
+++ b/crates/agent-gui/src/pages/settings/shared.tsx
@@ -6,7 +6,7 @@ export {
 export function PromptTag({ label, muted = false }: { label: string; muted?: boolean }) {
   return (
     <span
-      className={`inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] leading-none ${
+      className={`inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] leading-none tracking-[-0.01em] ${
         muted
           ? "border-border/60 bg-muted/40 text-muted-foreground"
           : "border-border/70 bg-muted/60 text-foreground/80"
@@ -36,16 +36,16 @@ export function AgentActivationSwitch(props: {
       aria-label={title}
       disabled={disabled}
       onClick={disabled ? undefined : onToggle}
-      className={`relative h-5 w-9 shrink-0 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 ${
+      className={`settings-switch relative h-5 w-9 shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 ${
         checked
-          ? "bg-sky-500"
+          ? "bg-emerald-500"
           : disabled
             ? "bg-muted-foreground/15"
-            : "bg-muted-foreground/20 hover:bg-muted-foreground/30"
+            : "bg-muted-foreground/25 hover:bg-muted-foreground/35"
       } ${disabled ? "cursor-not-allowed opacity-60" : ""} ${className ?? ""}`}
     >
       <span
-        className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+        className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none ${
           checked ? "translate-x-4" : "translate-x-0"
         }`}
       />
diff --git a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
index f0575a575..10ba5234b 100644
--- a/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
+++ b/crates/agent-gui/src/pages/skills-hub/SkillsHubPage.tsx
@@ -10,7 +10,14 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { GlassPanel, HubBackdrop, HubHeader } from "../../components/hub/HubChrome";
+import {
+  GlassPanel,
+  HubBackdrop,
+  HubHeader,
+  HubSegmentButton,
+  HubSegmentedTrack,
+  HubStatusBanner,
+} from "../../components/hub/HubChrome";
 import {
   Activity,
   AlertTriangle,
@@ -1126,9 +1133,9 @@ const InstalledSkillCard = memo(function InstalledSkillCard(props: InstalledSkil
           onOpenPreview(skill);
         }}
         className={cn(
-          "hub-skill-card skill-card-enter group flex h-full min-h-[13rem] w-full cursor-pointer flex-col rounded-2xl border border-border/50 bg-background/75 p-3.5 text-left shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_18px_-12px_rgba(15,23,42,0.16)] transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/85 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)] dark:border-white/[0.08] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_-12px_rgba(0,0,0,0.5)] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.07] dark:hover:shadow-[0_4px_16px_-10px_rgba(0,0,0,0.55)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
+          "hub-skill-card skill-card-enter group flex h-full min-h-[13rem] w-full cursor-pointer flex-col p-3.5 text-left focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
           "[content-visibility:auto] [contain-intrinsic-size:auto_13rem]",
-          bulkMode ? "cursor-default hover:translate-y-0" : null,
+          bulkMode ? "hub-skill-card--static cursor-default" : null,
         )}
       >
         {card}
@@ -1165,14 +1172,15 @@ const InstalledSkillCard = memo(function InstalledSkillCard(props: InstalledSkil
         onOpenPreview(skill);
       }}
       className={cn(
-        "hub-skill-card skill-card-enter group relative flex h-full min-h-[13rem] w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
+        "hub-skill-card skill-card-enter group relative flex h-full min-h-[13rem] w-full flex-col p-3.5 text-left",
         "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
         "[content-visibility:auto] [contain-intrinsic-size:auto_13rem]",
         // Enabled style always visible; bulk selection overlays primary ring.
         checked
           ? "border-emerald-500/35 bg-emerald-50/90 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_4px_14px_-12px_rgba(16,185,129,0.28)] dark:border-emerald-400/30 dark:bg-emerald-500/12 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_14px_-12px_rgba(16,185,129,0.22)]"
-          : "border-border/40 bg-muted/45 text-muted-foreground shadow-none hover:-translate-y-0.5 hover:border-border/55 hover:bg-muted/55 dark:border-white/[0.06] dark:bg-white/[0.025] dark:hover:border-white/[0.10] dark:hover:bg-white/[0.04]",
+          : "border-border/40 bg-muted/45 text-muted-foreground shadow-none",
         bulkSelected ? "ring-2 ring-primary/50 ring-offset-1 ring-offset-background" : null,
+        bulkMode ? "hub-skill-card--static" : null,
       )}
     >
       {card}
@@ -2360,22 +2368,13 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
         <div className="hub-scroll min-h-0 flex-1 overflow-hidden px-5 pb-6 pt-2 sm:px-6 lg:px-8 xl:px-10">
           <div className="hub-content-stage mx-auto flex h-full min-h-0 w-full max-w-[1320px] flex-col gap-4">
             {/* Status pill row */}
-            <div
-              className={cn(
-                "hub-panel-enter relative overflow-hidden rounded-2xl border backdrop-blur-xl",
-                skillsEnabled
-                  ? "border-border/50 bg-background/75 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_8px_24px_-18px_rgba(15,23,42,0.18)] dark:border-white/[0.09] dark:bg-white/[0.05] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_8px_24px_-18px_rgba(0,0,0,0.6)]"
-                  : "border-border/40 bg-background/60",
-              )}
-            >
+            <HubStatusBanner ready={skillsEnabled}>
               <div className="flex items-center gap-3 px-4 py-3.5 sm:gap-x-5 sm:px-5">
                 <div className="flex min-w-0 flex-1 items-center gap-3 sm:gap-3.5">
                   <div
                     className={cn(
-                      "relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition-colors",
-                      skillsEnabled
-                        ? "border-border/50 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset] dark:border-white/[0.09] dark:bg-white/[0.06] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]"
-                        : "border-border/40 bg-muted/40 text-muted-foreground",
+                      "hub-header-icon relative flex h-11 w-11 shrink-0 items-center justify-center rounded-[14px] transition-colors",
+                      skillsEnabled ? "text-foreground/85" : "text-muted-foreground opacity-80",
                     )}
                   >
                     <Plug className="h-5 w-5" />
@@ -2385,7 +2384,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-                      <div className="text-[13.5px] font-semibold tracking-tight text-foreground">
+                      <div className="text-[13.5px] font-semibold tracking-[-0.015em] text-foreground">
                         {skillsEnabled
                           ? t("settings.skillsHubEnabled")
                           : t("settings.skillsHubDisabled")}
@@ -2393,7 +2392,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       {selectableSkills.length > 0 && (
                         <span
                           className={cn(
-                            "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-medium tabular-nums backdrop-blur-md",
+                            "inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10.5px] font-medium tabular-nums",
                             selectedCount > 0
                               ? "bg-foreground/[0.06] text-foreground/85 ring-1 ring-border/50"
                               : "bg-background/60 text-muted-foreground ring-1 ring-border/40",
@@ -2409,7 +2408,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       )}
                     </div>
                     {skillsStatusHint ? (
-                      <div className="mt-0.5 truncate text-[11.5px] text-muted-foreground">
+                      <div className="mt-0.5 truncate text-[11.5px] tracking-[-0.005em] text-muted-foreground">
                         {skillsStatusHint}
                       </div>
                     ) : null}
@@ -2474,10 +2473,10 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                   </Button>
                 </div>
               </div>
-            </div>
+            </HubStatusBanner>
 
             <div className="hub-panel-enter flex items-center justify-between gap-3 max-sm:flex-col max-sm:items-stretch max-sm:gap-2">
-              <div className="inline-flex shrink-0 rounded-2xl border border-border/40 bg-background/60 p-1 backdrop-blur-xl shadow-[0_1px_0_rgba(255,255,255,0.5)_inset] max-sm:max-w-full max-sm:overflow-x-auto max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-[0_1px_0_rgba(255,255,255,0.04)_inset]">
+              <HubSegmentedTrack className="max-sm:max-w-full max-sm:overflow-x-auto max-sm:[scrollbar-width:none] max-sm:[&::-webkit-scrollbar]:hidden">
                 {[
                   {
                     value: "installed" as const,
@@ -2499,37 +2498,20 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                   },
                 ].map((item) => {
                   const Icon = item.icon;
-                  const active = view === item.value;
                   return (
-                    <button
+                    <HubSegmentButton
                       key={item.value}
-                      type="button"
+                      active={view === item.value}
+                      icon={<Icon className="h-3.5 w-3.5" />}
+                      count={item.count}
+                      className="max-sm:shrink-0"
                       onClick={() => setView(item.value)}
-                      className={cn(
-                        "relative inline-flex h-9 items-center justify-center gap-2 rounded-xl px-4 text-[12.5px] font-medium transition-all max-sm:shrink-0",
-                        active
-                          ? "bg-background/85 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_12px_-8px_rgba(15,23,42,0.18)] ring-1 ring-border/45 dark:bg-white/[0.08] dark:ring-white/[0.09] dark:shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_4px_12px_-8px_rgba(0,0,0,0.55)]"
-                          : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
-                      )}
                     >
-                      <Icon className="h-3.5 w-3.5" />
-                      <span>{item.label}</span>
-                      {item.count !== null && item.count > 0 ? (
-                        <span
-                          className={cn(
-                            "ml-0.5 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums",
-                            active
-                              ? "bg-foreground/[0.08] text-foreground/85"
-                              : "bg-muted/70 text-muted-foreground",
-                          )}
-                        >
-                          {item.count}
-                        </span>
-                      ) : null}
-                    </button>
+                      {item.label}
+                    </HubSegmentButton>
                   );
                 })}
-              </div>
+              </HubSegmentedTrack>
 
               {!lockedByChatMode ? (
                 <div className="flex w-full min-w-0 items-center justify-end gap-2">