From 354a229727d980c7808cc5034916ce8958731679 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Wed, 29 Jul 2026 05:47:27 -0700
Subject: [PATCH 1/2] feat(web): redesign desktop UI and interactions

---
 .../components/AboutDialog/AboutDialog.scss   |  32 +-
 .../GalleryLayout/GalleryLayout.scss          |  64 +--
 .../src/app/components/NavBar/NavBar.scss     |  78 ++--
 .../src/app/components/NavBar/NavBar.tsx      |   4 +-
 .../src/app/components/NavPanel/NavPanel.scss | 403 +++++++++++++++++
 .../components/NavPanel/NavSearchDialog.scss  | 312 +++++--------
 .../components/NavPanel/NavSearchDialog.tsx   |   8 +-
 .../components/BranchQuickSwitch.scss         |  56 ++-
 .../sections/sessions/SessionsSection.scss    | 113 +++++
 .../workspaces/WorkspaceListSection.scss      | 156 +++++++
 .../NewProjectDialog/NewProjectDialog.scss    |  20 +-
 .../RemoteConnectDialog.scss                  |  12 +-
 .../RemoteConnectDisclaimer.scss              |   6 +-
 .../src/app/components/SceneBar/SceneBar.scss | 260 +++++------
 .../src/app/components/SceneBar/SceneBar.tsx  |   2 +-
 .../TitleBar/NotificationButton.scss          |  12 +-
 .../TitleBar/NotificationButton.tsx           |   1 +
 .../components/panels/BranchSelectModal.scss  |  12 +-
 .../panels/DiffFullscreenViewer.css           |   6 +-
 .../src/app/components/panels/FilesPanel.scss |  23 +-
 .../components/panels/TerminalEditModal.scss  |  13 +-
 .../components/panels/base/FlexiblePanel.scss |  12 +-
 .../content-canvas/editor-area/DropZone.scss  |  19 +-
 .../mission-control/MissionControl.scss       |  18 +-
 .../mission-control/ThumbnailCard.scss        |  12 +-
 .../tab-bar/TabOverflowMenu.scss              |  12 +-
 src/web-ui/src/app/layout/AppLayout.scss      | 101 ++---
 .../src/app/layout/FloatingMiniChat.scss      | 113 +++--
 .../src/app/layout/FloatingMiniChat.tsx       |   2 +-
 src/web-ui/src/app/layout/WorkspaceBody.scss  | 121 ++---
 src/web-ui/src/app/layout/WorkspaceBody.tsx   |   4 +-
 .../src/app/scenes/agents/AgentsView.scss     |  17 +-
 .../app/scenes/profile/views/NurseryView.scss |  12 +-
 .../src/app/scenes/settings/SettingsNav.scss  |  10 +-
 .../app/scenes/settings/SettingsScene.scss    |  56 +--
 .../scenes/settings/SettingsScene.test.tsx    |  15 +-
 .../src/app/scenes/settings/SettingsScene.tsx |  71 +--
 .../src/app/scenes/welcome/WelcomeScene.scss  | 311 +++++++------
 .../components/Alert/Alert.scss               |  30 +-
 .../components/Alert/Alert.tsx                |   3 +-
 .../components/Badge/Badge.scss               |   4 +-
 .../components/Button/Button.scss             | 128 +++---
 .../components/Button/Button.tsx              |   5 +-
 .../components/Card/Card.scss                 |  70 ++-
 .../components/Checkbox/Checkbox.scss         |  63 ++-
 .../components/Checkbox/Checkbox.tsx          |   4 +-
 .../ConfirmDialog/ConfirmDialog.scss          |  14 +-
 .../ConfirmDialog/ConfirmDialog.tsx           |   9 +-
 .../components/Empty/Empty.scss               |  31 +-
 .../components/Empty/Empty.tsx                |   1 +
 .../components/IconButton/IconButton.scss     |  83 ++--
 .../components/IconButton/IconButton.tsx      |   1 +
 .../components/Input/Input.scss               |  68 ++-
 .../components/Input/Input.tsx                |  16 +-
 .../components/Modal/Modal.scss               |  90 ++--
 .../components/Search/Search.scss             |  78 +++-
 .../components/Search/Search.tsx              |   9 +-
 .../components/Select/Select.scss             | 189 +++++---
 .../components/Select/Select.tsx              |  40 +-
 .../components/Switch/Switch.scss             |  87 ++--
 .../components/Switch/Switch.tsx              |   7 +-
 .../components/Tabs/Tabs.scss                 | 115 +++--
 .../components/Tabs/Tabs.tsx                  |  78 +++-
 .../component-library/components/Tag/Tag.scss |  75 +++-
 .../component-library/components/Tag/Tag.tsx  |   9 +-
 .../components/Textarea/Textarea.scss         |  41 +-
 .../components/Textarea/Textarea.tsx          |  20 +-
 .../components/Tooltip/Tooltip.scss           |  79 +---
 .../components/Tooltip/Tooltip.tsx            |  21 +-
 .../src/flow_chat/components/ChatInput.scss   | 223 +++++++---
 .../src/flow_chat/components/ChatInput.tsx    |  53 ++-
 .../components/CoworkExampleCards.scss        |  26 +-
 .../components/CoworkExampleCards.tsx         |  10 +-
 .../flow_chat/components/FlowTextBlock.scss   |  21 +-
 .../flow_chat/components/ModelSelector.scss   |  89 +++-
 .../flow_chat/components/ModelSelector.tsx    | 140 +++++-
 .../components/PendingQueuePanel.scss         |  72 ++-
 .../flow_chat/components/RichTextInput.scss   |  39 +-
 .../components/ScrollToBottomButton.scss      |  40 +-
 .../components/ScrollToBottomButton.tsx       |   2 +-
 .../components/ScrollToLatestBar.scss         |  31 +-
 .../components/ScrollToLatestBar.tsx          |   4 +-
 .../components/ScrollToTurnHeaderButton.scss  |  34 +-
 .../components/ScrollToTurnHeaderButton.tsx   |   1 +
 .../components/StickyTaskIndicator.scss       |  29 +-
 .../components/StickyTaskIndicator.tsx        |   1 +
 .../flow_chat/components/ToolApprovalBar.scss |  36 +-
 .../src/flow_chat/components/WelcomePanel.css |  75 +++-
 .../src/flow_chat/components/WelcomePanel.tsx |  24 +-
 .../components/modern/ModelRoundItem.scss     |  73 ++-
 .../modern/PermissionRequestPanel.scss        |  74 +++-
 .../modern/ProcessingIndicator.scss           |  33 +-
 .../components/modern/UserMessageItem.scss    | 121 ++++-
 .../config/components/AIModelConfig.scss      |  70 ++-
 .../config/components/AppearanceConfig.scss   |  38 +-
 .../config/components/ConfigForm.scss         |  10 +-
 .../config/components/DebugConfig.scss        |   6 +-
 .../config/components/DefaultModelConfig.scss |  14 +-
 .../config/components/MCPResourceBrowser.scss |  11 +-
 .../components/ModelSelectionRadio.scss       |  10 +-
 .../components/common/ConfigPageHeader.scss   |  25 +-
 .../components/common/ConfigPageLayout.scss   |  26 +-
 .../common/config-page-layout.tokens.scss     |   4 +-
 .../tools/editor/components/CodeEditor.scss   |   6 +-
 .../tools/editor/components/DiffEditor.scss   |  15 +-
 .../editor/components/EditorStatusBar.scss    |   5 +-
 .../editor/components/MarkdownEditor.scss     |   9 +-
 .../tools/editor/components/PlanViewer.scss   |  35 +-
 .../components/FileSearchResults.scss         |  21 +-
 .../file-system/styles/FileExplorer.scss      |  22 +-
 .../CreateBranchDialog.scss                   |  11 +-
 .../GitBranchHistoryView.scss                 |  17 +-
 .../GitDiffEditor/GitDiffEditor.scss          |  19 +-
 .../components/GitDiffView/GitDiffView.scss   |  22 +-
 .../components/GitGraphView/GitGraphView.scss |   6 +-
 .../GitSettingsView/GitSettingsView.scss      |  18 +-
 .../git/components/PushButton/PushButton.scss |   8 +-
 .../LspPluginList/LspPluginList.scss          |   5 +-
 .../ReferencesPanel/ReferencesPanel.scss      |  17 +-
 .../tools/terminal/components/Terminal.scss   |  12 +-
 .../workspace/components/WorkspaceManager.css | 417 ++++++++----------
 .../workspace/components/WorkspaceManager.tsx |  21 +-
 122 files changed, 4055 insertions(+), 2063 deletions(-)

diff --git a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
index 6a4c6bf504..7dccae44bc 100644
--- a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
+++ b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
@@ -374,7 +374,12 @@
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
-  transition: all 0.2s ease;
+  transition:
+    transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
   display: flex;
   align-items: center;
   
@@ -409,7 +414,12 @@
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition:
+    transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease;
   
   &:hover {
     background: var(--element-bg-subtle);
@@ -430,7 +440,11 @@
 
   svg {
     color: var(--color-text-muted);
-    transition: all 0.2s ease;
+    transition:
+      transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease;
   }
 }
 
@@ -482,7 +496,11 @@
   background: transparent;
   border: 1px solid transparent;
   border-radius: 6px;
-  transition: all 0.2s ease;
+  transition:
+    transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
   min-width: 0;
   
   &:hover {
@@ -508,7 +526,11 @@
   justify-content: center;
   background: var(--element-bg-subtle);
   border-radius: 6px;
-  transition: all 0.2s ease;
+  transition:
+    transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
 
   svg {
     width: 12px;
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
index 4b4d3f7e94..39ab5959dd 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
@@ -1,9 +1,8 @@
 @use '../../../component-library/styles/tokens' as *;
 @use '../../../component-library/styles/btn-primary-tokens.scss' as btn-primary;
-@use '../../styles/surface-stagger';
 
-$gutter: clamp(40px, 6vw, 80px);
-$content-max: 1480px;
+$gutter: clamp(28px, 4vw, 64px);
+$content-max: 1360px;
 
 .gallery-layout {
   display: flex;
@@ -45,20 +44,16 @@ $content-max: 1480px;
   align-items: flex-start;
   gap: $size-gap-4;
   width: min(100%, $content-max);
-  padding: $size-gap-8 $gutter $size-gap-6;
+  padding: 28px $gutter $size-gap-5;
   margin: 0 auto;
   box-sizing: border-box;
   position: sticky;
   top: 0;
   z-index: 10;
-  background: linear-gradient(
-    to bottom,
-    var(--color-bg-scene) 0%,
-    var(--color-bg-scene) 72%,
-    transparent 100%
-  );
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: color-mix(in srgb, var(--color-bg-scene) 94%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 76%, transparent);
+  backdrop-filter: blur(16px) saturate(1.08);
+  -webkit-backdrop-filter: blur(16px) saturate(1.08);
 
   &__identity {
     flex: 1;
@@ -67,7 +62,7 @@ $content-max: 1480px;
 
   &__title {
     margin: 0 0 $size-gap-1;
-    font-size: clamp(18px, 2vw, 22px);
+    font-size: clamp(20px, 2vw, 24px);
     font-weight: $font-weight-semibold;
     color: var(--color-text-primary);
     letter-spacing: -0.02em;
@@ -103,9 +98,9 @@ $content-max: 1480px;
 .gallery-zones {
   display: flex;
   flex-direction: column;
-  gap: $size-gap-8;
+  gap: 28px;
   width: min(100%, $content-max);
-  padding: $size-gap-6 $gutter $size-gap-8;
+  padding: $size-gap-5 $gutter $size-gap-8;
   margin: 0 auto;
   box-sizing: border-box;
 }
@@ -113,7 +108,7 @@ $content-max: 1480px;
 .gallery-zone {
   display: flex;
   flex-direction: column;
-  gap: $size-gap-3;
+  gap: $size-gap-4;
   scroll-margin-top: 152px;
 
   &__header {
@@ -175,8 +170,7 @@ $content-max: 1480px;
   border: 1px solid var(--border-subtle);
   position: relative;
   overflow: hidden;
-  animation: gallery-item-in 0.28s $easing-decelerate both;
-  @include surface-stagger.animation-delay(60ms);
+  animation: gallery-item-in 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
 
   &::after {
     content: '';
@@ -189,18 +183,21 @@ $content-max: 1480px;
       var(--skeleton-shimmer-peak) 50%,
       var(--skeleton-shimmer-0) 100%
     );
-    animation: gallery-shimmer 1.6s ease-in-out surface-stagger.delay(0.12s) infinite;
+    animation: gallery-shimmer 1.2s linear infinite;
   }
 }
 
 .gallery-empty {
-  min-height: 180px;
+  min-height: 220px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: $size-gap-3;
   padding: $size-gap-8 $size-gap-6;
+  border: 1px dashed var(--border-subtle);
+  border-radius: $size-radius-lg;
+  background: color-mix(in srgb, var(--element-bg-subtle) 72%, transparent);
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
   text-align: center;
@@ -217,7 +214,8 @@ $content-max: 1480px;
 .gallery-anchor-btn,
 .gallery-cat-chip {
   transition:
-    background $motion-fast $easing-standard,
+    transform $motion-fast cubic-bezier(0.23, 1, 0.32, 1),
+    background-color $motion-fast $easing-standard,
     color $motion-fast $easing-standard,
     border-color $motion-fast $easing-standard;
 }
@@ -248,6 +246,10 @@ $content-max: 1480px;
     cursor: not-allowed;
   }
 
+  &:active:not(:disabled) {
+    transform: scale(0.975);
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-accent-500);
     outline-offset: -1px;
@@ -318,7 +320,7 @@ $content-max: 1480px;
   gap: $size-gap-1;
   height: 24px;
   padding: 0 $size-gap-2;
-  border-radius: $size-radius-full;
+  border-radius: $size-radius-base;
   background: transparent;
   color: var(--color-text-muted);
   font-size: var(--font-size-xs);
@@ -334,6 +336,10 @@ $content-max: 1480px;
     outline: 2px solid var(--color-accent-500);
     outline-offset: -1px;
   }
+
+  &:active {
+    transform: scale(0.975);
+  }
 }
 
 .gallery-filter-chip,
@@ -368,7 +374,7 @@ $content-max: 1480px;
 .gallery-filter-count {
   height: 16px;
   padding: 0 4px;
-  border-radius: $size-radius-full;
+  border-radius: $size-radius-sm;
   background: var(--element-bg-medium);
   color: var(--color-text-muted);
   font-size: 10px;
@@ -378,7 +384,7 @@ $content-max: 1480px;
   min-width: 24px;
   height: 24px;
   padding: 0 8px;
-  border-radius: $size-radius-full;
+  border-radius: $size-radius-base;
   background: var(--element-bg-medium);
   border: 1px solid var(--border-subtle);
   font-size: var(--font-size-xs);
@@ -391,7 +397,7 @@ $content-max: 1480px;
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
-  border-radius: $size-radius-full;
+  border-radius: $size-radius-sm;
   background: color-mix(in srgb, var(--color-success) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--color-success) 28%, transparent);
   color: var(--color-success);
@@ -492,3 +498,11 @@ $content-max: 1480px;
     animation: none;
   }
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .gallery-page-header {
+    background: var(--color-bg-scene);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
diff --git a/src/web-ui/src/app/components/NavBar/NavBar.scss b/src/web-ui/src/app/components/NavBar/NavBar.scss
index 14ac7dc861..77e7498e68 100644
--- a/src/web-ui/src/app/components/NavBar/NavBar.scss
+++ b/src/web-ui/src/app/components/NavBar/NavBar.scss
@@ -1,5 +1,6 @@
 /**
- * NavBar styles — back/forward + drag region + window controls (32px).
+ * Compact navigation chrome. Buttons share one geometry and only animate the
+ * press response; panel and history changes themselves remain immediate.
  */
 
 @use '../../../component-library/styles/tokens.scss' as *;
@@ -7,93 +8,71 @@
 .bitfun-nav-bar {
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 38px;
   flex-shrink: 0;
-  padding: 0 $size-gap-2;
-  gap: $size-gap-1;
+  padding: 0 6px;
+  gap: 2px;
   background: var(--color-bg-primary);
   user-select: none;
 
   &--collapsed {
     justify-content: flex-start;
-    // Add tiny horizontal breathing room so edge buttons keep full corner rendering.
-    padding: 0 calc(#{$size-gap-2} + 1px);
+    padding-inline: 7px;
   }
 
   &--macos {
-    // Reserve left native titlebar area for traffic lights in overlay mode.
-    padding-left: calc(#{$size-gap-2} + 72px);
+    padding-left: 78px;
     padding-right: 2px;
-
   }
 
   &--macos#{&}--collapsed {
-    padding-left: calc(#{$size-gap-2} + 1px);
+    padding-left: 7px;
     padding-right: 2px;
   }
 
-  // ── Back / Forward buttons ──────────────────────────────
-
-  &__btn {
+  &__btn,
+  &__panel-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 26px;
-    height: 26px;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
     padding: 0;
     border: none;
-    border-radius: 4px;
+    border-radius: $size-radius-sm;
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
-    flex-shrink: 0;
-    transition: color $motion-fast $easing-standard,
-                background $motion-fast $easing-standard;
-
-    &:hover:not(.is-inactive) {
-      color: var(--color-text-primary);
-      background: var(--element-bg-soft);
-    }
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      color 120ms ease,
+      background 120ms ease;
 
     &.is-inactive {
-      opacity: 0.3;
+      opacity: 0.32;
       cursor: default;
     }
 
+    &:active:not(.is-inactive) {
+      transform: scale(0.96);
+      background: var(--element-bg-medium);
+    }
+
     &:focus-visible {
       outline: 2px solid var(--color-accent-500);
-      outline-offset: -1px;
+      outline-offset: -2px;
     }
   }
 
-  &__panel-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition: color $motion-fast $easing-standard,
-                background $motion-fast $easing-standard;
-
-    &:hover {
+  @media (hover: hover) and (pointer: fine) {
+    &__btn:hover:not(.is-inactive),
+    &__panel-toggle:hover {
       color: var(--color-text-primary);
       background: var(--element-bg-soft);
     }
-
-    &:focus-visible {
-      outline: 2px solid var(--color-accent-500);
-      outline-offset: -1px;
-    }
   }
 
-  // ── WindowControls container ────────────────────────────
-  // WindowControls renders its own wrapper; just align it here.
   .window-controls {
     flex-shrink: 0;
   }
@@ -103,5 +82,6 @@
   .bitfun-nav-bar__btn,
   .bitfun-nav-bar__panel-toggle {
     transition: none;
+    transform: none;
   }
 }
diff --git a/src/web-ui/src/app/components/NavBar/NavBar.tsx b/src/web-ui/src/app/components/NavBar/NavBar.tsx
index cbebee436d..8a167e1202 100644
--- a/src/web-ui/src/app/components/NavBar/NavBar.tsx
+++ b/src/web-ui/src/app/components/NavBar/NavBar.tsx
@@ -1,7 +1,7 @@
 /**
  * NavBar — navigation history controls + window chrome.
  *
- * Sits at the top of the left column, same height as SceneBar (32px).
+ * Sits at the top of the left column, same height as SceneBar (38px).
  * Layout: [←][→]  <drag-region>  [_][□][×]
  *
  * - Back/Forward buttons mirror IDE navigation history.
@@ -115,6 +115,7 @@ const NavBar: React.FC<NavBarProps> = ({
       {/* Back / Forward */}
       <Tooltip content={t('nav.backShortcut')} placement="bottom" followCursor disabled={!canGoBack}>
         <button
+          type="button"
           className={`bitfun-nav-bar__btn${!canGoBack ? ' is-inactive' : ''}`}
           onClick={canGoBack ? goBack : undefined}
           aria-disabled={!canGoBack}
@@ -126,6 +127,7 @@ const NavBar: React.FC<NavBarProps> = ({
 
       <Tooltip content={t('nav.forwardShortcut')} placement="bottom" followCursor disabled={!canGoForward}>
         <button
+          type="button"
           className={`bitfun-nav-bar__btn${!canGoForward ? ' is-inactive' : ''}`}
           onClick={canGoForward ? goForward : undefined}
           aria-disabled={!canGoForward}
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 4070f712ec..bd7a1af5ef 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -2129,3 +2129,406 @@ $_section-header-height: 24px;
     transform: scale(0.86);
   }
 }
+
+// ──────────────────────────────────────────────
+// Desktop navigation refinement
+// ──────────────────────────────────────────────
+// This final layer consolidates geometry and interaction behavior across the
+// older navigation subsections without changing their information architecture.
+
+.bitfun-nav-panel {
+  border-radius: $size-radius-base;
+  background: var(--color-bg-primary);
+
+  &__content {
+    overflow: visible;
+  }
+
+  &__layer--main {
+    transition: none;
+  }
+
+  &__layer--scene {
+    clip-path: inset(0);
+    background: var(--color-bg-primary);
+    transition: none;
+
+    .is-split-open &,
+    .is-split-open &.is-active {
+      clip-path: inset(0);
+      transition: none;
+    }
+  }
+
+  &__brand-header {
+    padding: 0 6px 5px;
+  }
+
+  &__top-actions {
+    gap: 2px;
+    padding: 5px 6px $size-gap-3;
+  }
+
+  &__top-action-expand {
+    gap: 2px;
+    margin-bottom: $size-gap-1;
+    padding-bottom: $size-gap-2;
+  }
+
+  &__top-action-sublist {
+    gap: 2px;
+    transition: none;
+  }
+
+  &__top-action-btn {
+    height: 32px;
+    padding-inline: $size-gap-2;
+    border-radius: $size-radius-sm;
+    font-weight: 500;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active {
+      transform: scale(0.985);
+      background: var(--element-bg-medium);
+    }
+
+    &.is-active {
+      background: var(--element-bg-medium);
+    }
+
+    &:not(.bitfun-nav-panel__top-action-btn--sub):hover .bitfun-nav-panel__top-action-icon-slot {
+      transform: none;
+    }
+
+    &--sub {
+      padding-left: $size-gap-4;
+      color: var(--color-text-muted);
+    }
+  }
+
+  &__top-action-icon-circle {
+    border-radius: $size-radius-sm;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+
+    .bitfun-nav-panel__top-action-btn:hover & {
+      transform: none;
+    }
+
+    .bitfun-nav-panel__top-action-btn:active & {
+      transform: scale(0.95);
+    }
+  }
+
+  &__sections {
+    padding-bottom: $size-gap-2;
+
+    &.is-mode-switching {
+      animation: none;
+    }
+  }
+
+  &__section {
+    margin-bottom: $size-gap-3;
+    transition: none;
+
+    &:last-child {
+      margin-bottom: $size-gap-3;
+    }
+
+    &.is-departing-up,
+    &.is-departing-down {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  &__section-header {
+    height: 26px;
+    margin: 0 6px;
+    padding: 0 $size-gap-2;
+    border-radius: $size-radius-sm;
+    opacity: 1;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease;
+
+    &--interactive:active {
+      transform: scale(0.985);
+    }
+  }
+
+  &__section-label {
+    color: var(--color-text-muted);
+    letter-spacing: 0.045em;
+    transition: color 120ms ease;
+  }
+
+  &__section-action,
+  &__item-action {
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      color 120ms ease,
+      background 120ms ease;
+
+    &:active {
+      transform: scale(0.94);
+    }
+  }
+
+  &__collapsible,
+  &__item-slot {
+    transition: none;
+
+    &.is-departing-up,
+    &.is-departing-anchor,
+    &.is-departing-down {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  &__items {
+    gap: 2px;
+    padding: 2px 6px;
+  }
+
+  &__item {
+    height: 32px;
+    padding: 0 $size-gap-2;
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease,
+      opacity 120ms ease;
+
+    &:active {
+      transform: scale(0.985);
+    }
+
+    &.is-active {
+      background: var(--element-bg-medium);
+      font-weight: 500;
+
+      &::before {
+        left: 3px;
+        width: 2px;
+        height: 14px;
+        border-radius: $size-radius-full;
+      }
+    }
+  }
+
+  &__item-icon {
+    transition:
+      color 120ms ease,
+      opacity 120ms ease;
+  }
+
+  &__bottom-bar {
+    gap: $size-gap-1;
+    padding: 4px 6px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  &__pages-entry,
+  &__assistant-entry,
+  &__miniapp-entry {
+    min-height: 36px;
+    padding-block: 0;
+    border-radius: $size-radius-base;
+    box-shadow: none;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+
+    &:hover,
+    &.is-active {
+      box-shadow: none;
+    }
+
+    &:active {
+      transform: scale(0.985);
+    }
+  }
+
+  &__miniapp-entry.is-active {
+    border-color: var(--border-subtle);
+    background: var(--element-bg-medium);
+  }
+
+  &__miniapp-bubble {
+    width: 24px;
+    height: 24px;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease,
+      filter 120ms ease;
+
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+
+    &:active {
+      transform: scale(0.94);
+    }
+  }
+
+  &__mode-pill {
+    border-radius: $size-radius-lg;
+    box-shadow: none;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      border-color 120ms ease,
+      background 120ms ease;
+
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+
+    &:active {
+      transform: scale(0.985);
+    }
+  }
+
+  &__mode-pill-inner,
+  &__mode-pill-liquid {
+    border-radius: $size-radius-base;
+  }
+
+  &__mode-pill-liquid,
+  &__mode-pill-liquid.is-morph-to-assistant,
+  &__mode-pill-liquid.is-morph-to-pro {
+    animation: none;
+    transition:
+      transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 180ms ease;
+  }
+}
+
+.bitfun-nav-panel__footer {
+  min-height: 36px;
+  padding: 4px 6px 0;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.bitfun-nav-panel__footer-btn--icon,
+.bitfun-nav-panel__footer .bitfun-notification-btn.bitfun-notification-btn--nav-hover-icon:not(.bitfun-notification-btn--has-progress) {
+  width: 28px;
+  height: 28px;
+  border-radius: $size-radius-sm;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 120ms ease,
+    color 120ms ease;
+}
+
+.bitfun-nav-panel__footer-btn--icon:active,
+.bitfun-nav-panel__footer .bitfun-notification-btn:active {
+  transform: scale(0.94);
+}
+
+.bitfun-nav-panel__workspace-menu,
+.bitfun-nav-panel__mode-dropdown,
+.bitfun-nav-panel__footer-menu,
+.bitfun-nav-panel__footer-multimodal-menu {
+  border-color: var(--border-medium);
+  border-radius: $size-radius-lg;
+  box-shadow: 0 14px 42px -12px var(--color-overlay-black-30);
+  animation: bitfun-nav-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
+
+  &.is-closing {
+    animation: bitfun-nav-popover-out 100ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+}
+
+.bitfun-nav-panel__footer-multimodal-menu {
+  animation: bitfun-nav-centered-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.bitfun-nav-panel__workspace-menu-item,
+.bitfun-nav-panel__mode-dropdown-item,
+.bitfun-nav-panel__footer-menu-item,
+.bitfun-nav-panel__footer-multimodal-item {
+  border-radius: $size-radius-sm;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 120ms ease,
+    color 120ms ease;
+
+  &:active:not(:disabled) {
+    transform: scale(0.985);
+  }
+}
+
+.bitfun-nav-panel__remote-disclaimer-btn {
+  border-radius: $size-radius-sm;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 120ms ease,
+    background 120ms ease,
+    color 120ms ease;
+
+  &:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+}
+
+@keyframes bitfun-nav-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(3px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes bitfun-nav-popover-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2px) scale(0.99);
+  }
+}
+
+@keyframes bitfun-nav-centered-popover-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 3px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-nav-panel__section-header--interactive:hover,
+  .bitfun-nav-panel__top-action-btn:hover,
+  .bitfun-nav-panel__item:hover,
+  .bitfun-nav-panel__footer-btn--icon:hover {
+    background: var(--element-bg-soft);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-nav-panel__workspace-menu,
+  .bitfun-nav-panel__mode-dropdown,
+  .bitfun-nav-panel__footer-menu,
+  .bitfun-nav-panel__footer-multimodal-menu {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss
index 753fdb332f..3e910f89c7 100644
--- a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss
@@ -1,98 +1,68 @@
 @use '../../../component-library/styles/tokens.scss' as *;
 @use '../../styles/nav-panel-font-scope.scss' as nav-font;
 
+// Search is commonly opened from the keyboard, so the command surface appears
+// immediately with no entrance or stagger animation.
 .bitfun-nav-search-dialog__overlay {
   @include nav-font.nav-panel-font-token-scope;
 
   position: fixed;
   inset: 0;
   z-index: 600;
-  background: transparent;
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 80px;
+  padding: clamp(56px, 9vh, 92px) $size-gap-4 $size-gap-4;
+  background: var(--color-overlay-black-12);
 }
 
-// ── Card — matches .bitfun-scene-viewport surface (--color-bg-scene)
-
 .bitfun-nav-search-dialog__card {
-  width: 520px;
-  max-width: calc(100vw - 32px);
-  background: var(--color-bg-scene);
-  border-radius: calc(#{$size-radius-base} + 2px);
-  border: 1px solid var(--border-subtle);
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--color-text-primary) 4%, transparent),
-    0 2px 4px var(--color-overlay-slate-04),
-    0 8px 24px var(--color-overlay-slate-08),
-    0 24px 56px -12px rgba(var(--color-overlay-slate-rgb), 0.22),
-    0 48px 80px -24px var(--color-overlay-slate-12);
-  overflow: hidden;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 120px);
-  animation: bitfun-nav-search-card-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-:root[data-theme-type='light'] .bitfun-nav-search-dialog__card {
-  border-color: var(--border-medium);
-}
-
-:root[data-theme-type='dark'] .bitfun-nav-search-dialog__card {
+  width: min(560px, 100%);
+  max-height: min(640px, calc(100vh - 112px));
+  overflow: hidden;
+  border: 1px solid var(--border-medium);
+  border-radius: $size-radius-lg;
+  background: var(--color-bg-elevated);
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--color-static-white) 6%, transparent),
-    0 1px 0 color-mix(in srgb, var(--color-static-white) 5%, transparent),
-    0 4px 12px rgba(var(--color-static-black-rgb), 0.35),
-    0 20px 48px -8px rgba(var(--color-static-black-rgb), 0.65),
-    0 40px 72px -20px rgba(var(--color-static-black-rgb), 0.45);
+    0 1px 0 color-mix(in srgb, var(--color-static-white) 5%, transparent) inset,
+    0 18px 56px -12px var(--color-overlay-black-30);
 }
 
-@keyframes bitfun-nav-search-card-in {
-  from {
-    opacity: 0;
-    transform: translateY(-12px) scale(0.982);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-// ── Input row ────────────────────────────────────────────────────────────────
-
 .bitfun-nav-search-dialog__input-row {
+  flex-shrink: 0;
   padding: $size-gap-2;
   border-bottom: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-  background: var(--color-bg-scene);
+  background: var(--color-bg-elevated);
 }
 
-// Real search field in dialog (capsule). Nav trigger is a plain button — styles differ on purpose.
 .bitfun-nav-search-dialog__search {
   width: 100%;
 
   .search__wrapper {
-    height: 32px;
-    min-height: 32px;
-    padding: 0 $size-gap-2;
+    min-height: 36px;
+    height: 36px;
     gap: $size-gap-2;
-    border: none;
-    border-radius: $size-radius-full;
-    background: var(--color-bg-scene);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent);
+    padding: 0 $size-gap-2;
+    border: 1px solid var(--border-subtle);
+    border-radius: $size-radius-base;
+    background: var(--color-bg-primary);
+    box-shadow: none;
     transition:
-      background 0.2s ease,
-      box-shadow 0.2s ease;
+      border-color 120ms ease,
+      background 120ms ease;
 
     &:hover {
-      background: color-mix(in srgb, var(--color-bg-scene) 88%, var(--element-bg-medium));
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent);
+      border-color: var(--border-medium);
+      background: color-mix(in srgb, var(--color-bg-primary) 88%, var(--element-bg-soft));
+      box-shadow: none;
     }
 
     &:focus-within {
-      background: color-mix(in srgb, var(--color-bg-scene) 82%, var(--element-bg-medium));
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 68%, transparent);
+      border-color: color-mix(in srgb, var(--color-accent-500) 72%, var(--border-medium));
+      background: var(--color-bg-primary);
+      box-shadow: none;
     }
   }
 
@@ -102,38 +72,22 @@
     &::placeholder {
       color: var(--color-text-disabled);
     }
-
-    &:focus::placeholder {
-      color: color-mix(in srgb, var(--color-text-disabled) 72%, transparent);
-    }
   }
 }
 
-@keyframes bitfun-nav-search-fade-rise {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// ── Results ──────────────────────────────────────────────────────────────────
-
 .bitfun-nav-search-dialog__results {
-  overflow-y: auto;
   flex: 1;
-  padding: $size-gap-1 $size-gap-2 $size-gap-2;
+  padding: 6px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
-    width: 3px;
+    width: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--border-subtle);
-    border-radius: 2px;
+    border-radius: $size-radius-full;
+    background: var(--border-medium);
   }
 
   &::-webkit-scrollbar-track {
@@ -142,159 +96,149 @@
 }
 
 .bitfun-nav-search-dialog__empty {
-  padding: $size-gap-4 $size-gap-2;
-  text-align: center;
+  padding: $size-gap-6 $size-gap-3;
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
-  animation: bitfun-nav-search-fade-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
+  text-align: center;
 }
 
-// ── Groups ───────────────────────────────────────────────────────────────────
-
 .bitfun-nav-search-dialog__group {
-  animation: bitfun-nav-search-fade-rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
-
-  &:nth-of-type(1) {
-    animation-delay: 0.04s;
-  }
-
-  &:nth-of-type(2) {
-    animation-delay: 0.08s;
-  }
-
-  &:nth-of-type(3) {
-    animation-delay: 0.12s;
-  }
+  padding: 2px 0;
 
   & + & {
     margin-top: $size-gap-1;
-    border-top: 1px solid var(--border-subtle);
     padding-top: $size-gap-1;
+    border-top: 1px solid var(--border-subtle);
   }
 }
 
 .bitfun-nav-search-dialog__group-label {
-  padding: $size-gap-1 $size-gap-1 $size-gap-1 2px;
-  font-size: var(--font-size-xxs);
-  font-weight: 700;
+  padding: 5px $size-gap-2 4px;
   color: var(--color-text-muted);
+  font-size: var(--font-size-xxs);
+  font-weight: $font-weight-semibold;
+  letter-spacing: 0.055em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
   user-select: none;
-  opacity: 0.88;
 }
 
-// Default (no query): sessions column — label only, no rows; hint below label.
 .bitfun-nav-search-dialog__session-hint {
-  padding: $size-gap-2 $size-gap-2 $size-gap-1 2px;
-  font-size: var(--font-size-xs);
-  line-height: 1.45;
+  padding: $size-gap-2;
   color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
   user-select: none;
 }
 
-// ── Result item ──────────────────────────────────────────────────────────────
-
 .bitfun-nav-search-dialog__item {
   display: flex;
   align-items: center;
   gap: $size-gap-2;
   width: 100%;
-  padding: 6px $size-gap-2;
+  min-height: 42px;
+  padding: 5px $size-gap-2;
   border: none;
-  border-radius: 4px;
+  border-radius: $size-radius-base;
   background: transparent;
-  cursor: pointer;
-  text-align: left;
   color: var(--color-text-primary);
-  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 120ms ease;
 
+  &--active,
   &:hover {
     background: var(--element-bg-soft);
   }
 
-  &--active {
+  &:active {
+    transform: scale(0.99);
     background: var(--element-bg-medium);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-accent-500);
+    outline-offset: -2px;
+  }
 }
 
 .bitfun-nav-search-dialog__item-icon {
-  color: var(--color-text-primary);
   display: flex;
   align-items: center;
-  flex-shrink: 0;
-  opacity: 0.82;
-  transition: opacity 0.2s ease;
+  justify-content: center;
+  flex: 0 0 26px;
+  width: 26px;
+  height: 26px;
+  border-radius: $size-radius-sm;
+  background: var(--element-bg-subtle);
+  color: var(--color-text-muted);
 
-  .bitfun-nav-search-dialog__item:hover &,
   .bitfun-nav-search-dialog__item--active & {
-    opacity: 1;
+    color: var(--color-text-primary);
   }
 }
 
 .bitfun-nav-search-dialog__item-content {
-  flex: 1;
-  min-width: 0;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
+  min-width: 0;
 }
 
-.bitfun-nav-search-dialog__item-label {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-primary);
-  white-space: nowrap;
+.bitfun-nav-search-dialog__item-label,
+.bitfun-nav-search-dialog__item-sublabel {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bitfun-nav-search-dialog__item-label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: 1.25;
 }
 
 .bitfun-nav-search-dialog__item-sublabel {
-  font-size: var(--font-size-xs);
   color: var(--color-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-size: var(--font-size-xs);
+  line-height: 1.2;
 }
 
-// ── Trigger button (NavPanel brand-header) ───────────────────────────────────
-// Opens the search dialog — capsule + scene surface (matches .bitfun-scene-viewport / dialog search).
-
 .bitfun-nav-panel__search-trigger {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: $size-gap-2;
   width: 100%;
-  height: 32px;
-  min-height: 32px;
+  min-height: 34px;
+  height: 34px;
   padding: 0 $size-gap-2;
-  border: none;
-  border-radius: $size-radius-full;
-  background: var(--color-bg-scene);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent);
-  cursor: text;
-  color: var(--color-text-primary);
+  border: 1px solid var(--border-subtle);
+  border-radius: $size-radius-base;
+  background: var(--element-bg-subtle);
+  color: var(--color-text-secondary);
+  box-shadow: none;
+  font: inherit;
   font-size: var(--font-size-sm);
   font-weight: 500;
   text-align: left;
-  box-sizing: border-box;
+  cursor: text;
   transition:
-    background $motion-fast $easing-standard,
-    box-shadow $motion-fast $easing-standard,
-    color $motion-fast $easing-standard;
-
-  &:hover {
-    background: color-mix(in srgb, var(--color-bg-scene) 88%, var(--element-bg-medium));
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent);
-    color: var(--color-text-primary);
-  }
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 120ms ease,
+    background 120ms ease,
+    color 120ms ease;
 
   &:active {
-    background: color-mix(in srgb, var(--color-bg-scene) 82%, var(--element-bg-medium));
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 68%, transparent);
+    transform: scale(0.985);
+    border-color: var(--border-medium);
+    background: var(--element-bg-medium);
   }
 
   &:focus-visible {
-    outline: 1px solid var(--color-accent-500);
+    outline: 2px solid var(--color-accent-500);
     outline-offset: 1px;
   }
 
@@ -306,13 +250,7 @@
     width: 22px;
     min-width: 22px;
     height: 22px;
-    transform: scale(1);
-    transform-origin: center;
-    transition: transform $motion-fast $easing-standard;
-  }
-
-  &:hover &__icon {
-    transform: scale(1.07);
+    color: var(--color-text-muted);
   }
 
   &__icon-inner {
@@ -326,40 +264,24 @@
   flex: 1;
   min-width: 0;
   overflow: hidden;
-  white-space: nowrap;
+  color: inherit;
   text-overflow: ellipsis;
-  color: var(--color-text-primary);
+  white-space: nowrap;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-nav-search-dialog__card,
-  .bitfun-nav-search-dialog__group,
-  .bitfun-nav-search-dialog__empty {
-    animation: none !important;
-  }
-
-  .bitfun-nav-search-dialog__group {
-    animation-delay: 0s !important;
-    opacity: 1;
-    transform: none;
-  }
-
-  .bitfun-nav-search-dialog__empty {
-    opacity: 1;
-    transform: none;
-  }
-
-  .bitfun-nav-search-dialog__item {
-    transition: background 0.12s ease;
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-nav-panel__search-trigger:hover {
+    border-color: var(--border-medium);
+    background: var(--element-bg-soft);
+    color: var(--color-text-primary);
   }
+}
 
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-nav-search-dialog__search .search__wrapper,
+  .bitfun-nav-search-dialog__item,
   .bitfun-nav-panel__search-trigger {
-    transition:
-      background 0.15s ease,
-      color 0.15s ease;
-
-    &:hover .bitfun-nav-panel__search-trigger__icon {
-      transform: none;
-    }
+    transition: none;
+    transform: none;
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx
index 86e2952810..a057e0a37a 100644
--- a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.tsx
@@ -349,7 +349,13 @@ const NavSearchDialog: React.FC<NavSearchDialogProps> = ({ open, onClose }) => {
 
   const dialog = (
     <div className="bitfun-nav-search-dialog__overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
-      <div className="bitfun-nav-search-dialog__card" ref={cardRef}>
+      <div
+        className="bitfun-nav-search-dialog__card"
+        ref={cardRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('nav.search.triggerTooltip')}
+      >
         <div className="bitfun-nav-search-dialog__input-row">
           <Search
             ref={inputRef}
diff --git a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
index 0440886e9c..9f03f5f7bf 100644
--- a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
+++ b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
@@ -8,36 +8,33 @@
 .branch-quick-switch {
   position: fixed;
   z-index: $z-popover;
-  background: var(--color-bg-primary);
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  box-shadow: 0 8px 32px var(--color-overlay-black-30);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--border-medium);
+  border-radius: $size-radius-lg;
+  box-shadow: 0 14px 42px -12px var(--color-overlay-black-30);
   overflow: hidden;
-  animation: branch-quick-switch-enter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes branch-quick-switch-enter {
-  from { opacity: 0; transform: translateX(-8px); }
-  to   { opacity: 1; transform: translateX(0); }
 }
 
 // ── Search ──────────────────────────────────────────────
 
 .branch-quick-switch__search {
-  padding: 8px;
+  padding: $size-gap-2;
   border-bottom: 1px solid var(--border-subtle);
 }
 
 .branch-quick-switch__input {
   width: 100%;
-  padding: 6px 10px;
+  height: 32px;
+  padding: 0 $size-gap-2;
   font-size: var(--font-size-xs);
   border: 1px solid var(--border-subtle);
-  border-radius: 4px;
-  background: var(--color-bg-secondary);
+  border-radius: $size-radius-sm;
+  background: var(--color-bg-primary);
   color: var(--color-text-primary);
   outline: none !important;
-  transition: border-color 0.15s ease;
+  transition:
+    border-color 120ms ease,
+    background 120ms ease;
 
   &:focus,
   &:focus-visible {
@@ -53,6 +50,7 @@
 
 .branch-quick-switch__list {
   max-height: 280px;
+  padding: $size-gap-1;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -81,10 +79,14 @@
 .branch-quick-switch__item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: $size-gap-2;
+  min-height: 32px;
+  padding: 0 $size-gap-2;
+  border-radius: $size-radius-sm;
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    background 120ms ease;
 
   &:hover:not(.branch-quick-switch__item--current),
   &--selected:not(.branch-quick-switch__item--current) {
@@ -92,7 +94,7 @@
   }
 
   &--current {
-    background: var(--color-accent-100);
+    background: var(--element-bg-medium);
     cursor: default;
 
     .branch-quick-switch__item-icon { color: var(--color-text-secondary); }
@@ -103,6 +105,10 @@
     opacity: 0.7;
     pointer-events: none;
   }
+
+  &:active:not(.branch-quick-switch__item--current) {
+    transform: scale(0.985);
+  }
 }
 
 .branch-quick-switch__item-icon  { flex-shrink: 0; color: var(--color-text-primary); }
@@ -117,3 +123,15 @@
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .branch-quick-switch__input,
+  .branch-quick-switch__item {
+    transition: none;
+    transform: none;
+  }
+
+  .branch-quick-switch__spinner {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index cb03638145..2cff88556f 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -850,3 +850,116 @@
     transition: opacity $motion-fast $easing-standard;
   }
 }
+
+// Compact session rows share the shell's 6px radius and 120ms physical press
+// response. Running/attention motion remains because it communicates state.
+.bitfun-nav-panel {
+  &__inline-list {
+    margin: 0 6px 0 $size-gap-3;
+    padding: 2px 0;
+  }
+
+  &__inline-action {
+    height: 26px;
+    border-style: solid;
+    border-radius: $size-radius-sm;
+    color: var(--color-text-muted);
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      border-color 120ms ease,
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active {
+      transform: scale(0.985);
+    }
+  }
+
+  &__inline-item {
+    height: 28px;
+    padding: 0 6px;
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active:not(.is-disabled) {
+      transform: scale(0.99);
+      background: var(--element-bg-medium);
+    }
+
+    &.is-active {
+      background: var(--element-bg-medium);
+      box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-accent-500) 76%, transparent);
+    }
+  }
+
+  &__items--session-blocks &__inline-item:hover &__inline-item-icon:not(.is-running):not(.is-ask-user) {
+    transform: none;
+  }
+
+  &__inline-item-actions {
+    transition:
+      opacity 100ms ease,
+      visibility 100ms ease;
+  }
+
+  &__inline-item-action-btn,
+  &__inline-toggle,
+  &__inline-item-edit-btn {
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active {
+      transform: scale(0.94);
+    }
+  }
+
+  &__inline-item-menu-popover {
+    border-color: var(--border-medium);
+    border-radius: $size-radius-lg;
+    box-shadow: 0 14px 42px -12px var(--color-overlay-black-30);
+    transform-origin: top right;
+    animation: bitfun-session-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+
+  &__inline-item-menu-item {
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active {
+      transform: scale(0.985);
+    }
+  }
+}
+
+@keyframes bitfun-session-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-nav-panel__inline-action:hover,
+  .bitfun-nav-panel__inline-item:hover {
+    background: var(--element-bg-soft);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-nav-panel__inline-item-menu-popover {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index 841398bd3c..30eebbd5e3 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -1302,3 +1302,159 @@
   0%, 100% { opacity: 1; }
   50%       { opacity: 0.3; }
 }
+
+// Workspace rows use the same compact surface language as the rest of the
+// desktop navigation. Status pulses remain untouched because they carry live
+// indexing/connection meaning.
+.bitfun-nav-panel {
+  &__workspace-list {
+    padding-top: 1px;
+  }
+
+  &__workspace-group {
+    gap: 2px;
+  }
+
+  &__workspace-group-title {
+    min-height: 24px;
+    margin: 0 6px;
+    padding: 0 $size-gap-2;
+    color: var(--color-text-muted);
+    font-weight: 600;
+    letter-spacing: 0.045em;
+  }
+
+  &__workspace-group-title-action {
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active {
+      transform: scale(0.92);
+    }
+  }
+
+  &__workspace-item,
+  &__assistant-item {
+    gap: 1px;
+    padding: 1px 0;
+    border-radius: $size-radius-base;
+    transition:
+      border-color 120ms ease,
+      background 120ms ease,
+      opacity 120ms ease;
+  }
+
+  &__workspace-item-card,
+  &__assistant-item-card {
+    border-radius: $size-radius-sm;
+    background: transparent;
+    box-shadow: none;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+  }
+
+  &__workspace-item.is-active &__workspace-item-card,
+  &__assistant-item.is-active &__assistant-item-card {
+    background: var(--element-bg-medium);
+    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--color-accent-500) 76%, transparent);
+  }
+
+  &__workspace-item-card:active,
+  &__assistant-item-card:active {
+    transform: scale(0.99);
+  }
+
+  &__workspace-item-label,
+  &__assistant-item-label {
+    font-weight: 500;
+  }
+
+  &__workspace-item.is-active &__workspace-item-label,
+  &__assistant-item.is-active &__assistant-item-label {
+    font-weight: 600;
+  }
+
+  &__workspace-item-collapse-btn,
+  &__assistant-item-collapse-btn,
+  &__workspace-item-name-btn,
+  &__assistant-item-name-btn {
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+
+    &:active {
+      transform: scale(0.97);
+    }
+  }
+
+  &__workspace-item-menu-trigger,
+  &__assistant-item-menu-trigger {
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active {
+      transform: scale(0.92);
+    }
+  }
+
+  &__workspace-item-sessions,
+  &__assistant-item-sessions {
+    transition: none;
+  }
+
+  &__workspace-item-menu-popover {
+    padding: $size-gap-1;
+    border-color: var(--border-medium);
+    border-radius: $size-radius-lg;
+    box-shadow: 0 14px 42px -12px var(--color-overlay-black-30);
+    transform-origin: top left;
+    animation: bitfun-workspace-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+
+  &__workspace-item-menu-item {
+    border-radius: $size-radius-sm;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active:not(:disabled) {
+      transform: scale(0.985);
+    }
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-nav-panel__workspace-item-card:hover,
+  .bitfun-nav-panel__assistant-item-card:hover {
+    background: var(--element-bg-soft);
+  }
+
+  .bitfun-nav-panel__workspace-item.is-active .bitfun-nav-panel__workspace-item-card:hover,
+  .bitfun-nav-panel__assistant-item.is-active .bitfun-nav-panel__assistant-item-card:hover {
+    background: var(--element-bg-medium);
+  }
+}
+
+@keyframes bitfun-workspace-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-nav-panel__workspace-item-menu-popover {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss
index b3ee655b5b..d65b7352ae 100644
--- a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss
+++ b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss
@@ -166,7 +166,12 @@
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition:
+      transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease,
+      box-shadow 150ms ease;
     
     svg {
       width: 14px;
@@ -202,7 +207,11 @@
       border: 1px solid var(--border-subtle);
       border-radius: 8px;
       color: var(--color-text-primary);
-      transition: all 0.2s ease;
+      transition:
+        transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+        background-color 150ms ease,
+        border-color 150ms ease,
+        color 150ms ease;
       
       &::placeholder {
         color: var(--color-text-muted);
@@ -347,7 +356,12 @@
     font-weight: 500;
     border-radius: 6px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition:
+      transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease,
+      box-shadow 150ms ease;
     
     &--cancel {
       background: transparent;
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
index 880e753781..16d6671a09 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
@@ -401,7 +401,11 @@
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
 
   &--connect {
     background: var(--color-accent-600);
@@ -499,7 +503,11 @@
   border: none;
   border-radius: 17px;
   cursor: pointer;
-  transition: all $motion-fast $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
 
   &:hover:not(.is-active) {
     color: var(--color-text-primary);
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss
index 0d4ff570c7..4a07e5346f 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss
@@ -85,7 +85,11 @@
   padding: 7px 16px;
   font-size: 12px;
   cursor: pointer;
-  transition: all $motion-fast $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
 }
 
 .bitfun-remote-disclaimer__btn--secondary {
diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.scss b/src/web-ui/src/app/components/SceneBar/SceneBar.scss
index 9bfc4e1db4..533e9c5da9 100644
--- a/src/web-ui/src/app/components/SceneBar/SceneBar.scss
+++ b/src/web-ui/src/app/components/SceneBar/SceneBar.scss
@@ -1,30 +1,30 @@
 /**
- * SceneBar styles — scene-level tab strip (32px height).
+ * Scene-level tabs. The strip is compact desktop chrome; selecting and
+ * rearranging tabs is intentionally immediate, with motion reserved for the
+ * 120ms physical press response.
  */
 
 @use '../../../component-library/styles/tokens.scss' as *;
 
-$_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
-
 .bitfun-scene-bar {
   display: flex;
   align-items: stretch;
-  height: 40px;
+  height: 38px;
   flex-shrink: 0;
+  overflow: hidden;
   background: transparent;
   user-select: none;
-  overflow: hidden;
 
   &__tabs {
+    --scene-tab-count: 1;
+    --scene-tab-gap: 3px;
+
     display: flex;
     align-items: stretch;
     flex: 1;
-    gap: $size-gap-1;
-    --scene-tab-gap: #{$size-gap-1};
-    --scene-tab-count: 1;
-    // Keep horizontal breathing room so edge tabs don't have
-    // their rounded corners visually clipped at container bounds.
-    padding: $_tab-v-margin 2px;
+    gap: var(--scene-tab-gap);
+    min-width: 0;
+    padding: 5px 2px;
     overflow: hidden;
   }
 
@@ -36,8 +36,6 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
   }
 }
 
-// macOS only (Windows always renders WindowControls on the right).
-// Keep the tabs flush with the SceneViewport edge below — symmetric with the left side.
 .bitfun-scene-bar--no-controls {
   padding-right: 0;
 
@@ -46,28 +44,11 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
   }
 }
 
-// ── Individual tab ──────────────────────────────────────
-
 .bitfun-scene-tab {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-  cursor: pointer;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-  font-weight: 400;
-  white-space: nowrap;
-  // Slightly lift off --color-bg-primary so tabs never disappear into the chrome
-  // (dark presets often set tertiary === primary; mixing secondary fixes that).
-  background: color-mix(in srgb, var(--color-bg-secondary) 44%, var(--color-bg-primary));
-  // Full radius — tab floats symmetrically inside the bar
-  border-radius: $size-radius-sm;
-  transition: color $motion-fast $easing-standard,
-              background $motion-fast $easing-standard,
-              flex-basis 360ms cubic-bezier(0.22, 1, 0.36, 1),
-              max-width 360ms cubic-bezier(0.22, 1, 0.36, 1);
-  outline: none;
   flex: 0 1 auto;
   flex-basis: calc(
     (100% - (var(--scene-tab-count) - 1) * var(--scene-tab-gap)) / var(--scene-tab-count)
@@ -77,83 +58,80 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
   );
   min-width: 0;
   overflow: hidden;
-  will-change: flex-basis, max-width;
-
-  &:hover {
-    color: var(--color-text-secondary);
-    background: color-mix(in srgb, var(--color-bg-secondary) 68%, var(--color-bg-primary));
-
-    .bitfun-scene-tab__close {
-      opacity: 1;
-    }
-  }
+  border: 1px solid transparent;
+  border-radius: $size-radius-sm;
+  outline: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: $font-weight-normal;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    color 120ms ease,
+    background 120ms ease,
+    border-color 120ms ease;
 
-  // Active state — same fill as .bitfun-nav-panel__item.is-active (no left rail on horizontal tabs)
   &--active {
-    color: var(--color-text-primary);
-    font-weight: 500;
+    border-color: color-mix(in srgb, var(--border-subtle) 72%, transparent);
     background: var(--element-bg-soft);
+    color: var(--color-text-primary);
+    font-weight: $font-weight-medium;
 
     .bitfun-scene-tab__icon {
       color: var(--color-text-primary);
       opacity: 1;
     }
 
-    &:hover .bitfun-scene-tab__close {
-      opacity: 1;
-    }
-  }
-
-  // Single tab: no pill background (same whether active or not).
-  &:only-child {
-    cursor: default;
-    background: transparent;
-    box-shadow: none;
-
-    &:hover {
-      background: transparent;
+    .bitfun-scene-tab__subtitle {
       color: var(--color-text-secondary);
     }
 
-    &.bitfun-scene-tab--active {
-      background: transparent;
-      box-shadow: none;
-
-      &:hover {
-        background: transparent;
-      }
+    .bitfun-scene-tab__close {
+      opacity: 0.62;
     }
   }
 
+  &:active {
+    transform: scale(0.985);
+    background: var(--element-bg-medium);
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-accent-500);
     outline-offset: -2px;
   }
 
-  // ── Inner content row (icon + label + sep + subtitle) ──
-  // Centered as a group; close button sits absolutely at right.
+  // A single scene doubles as window drag chrome, not a tab-shaped control.
+  &:only-child {
+    border-color: transparent;
+    background: transparent;
+    cursor: default;
+
+    &:active {
+      transform: none;
+      background: transparent;
+    }
+  }
 
   &__content {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: $size-gap-2;
+    gap: 6px;
     min-width: 0;
-    overflow: hidden;
-    // Keep the content group centered in the full tab. Closable tabs reserve
-    // the close-button footprint on both sides so the right-side control does
-    // not shift the visible title group away from the geometric center.
     padding: 0 calc(#{$size-gap-3} + 20px);
+    overflow: hidden;
   }
 
-  // Pinned tabs have no close button, so they need no mirrored reservation.
   &--pinned &__content {
     padding-inline: $size-gap-3;
   }
 
   &__icon {
     flex-shrink: 0;
-    opacity: 0.8;
+    opacity: 0.72;
   }
 
   &__label {
@@ -161,147 +139,111 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
   }
 
   &__sep {
+    flex-shrink: 0;
     color: var(--color-text-disabled);
     font-size: var(--font-size-xs);
-    flex-shrink: 0;
   }
 
   &__subtitle {
+    min-width: 0;
+    overflow: hidden;
     color: var(--color-text-muted);
     font-size: var(--font-size-xs);
-    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    min-width: 0;
-    flex-shrink: 1;
-  }
-
-  &--active &__subtitle {
-    color: var(--color-text-secondary);
   }
 
-  // Quick action icon inside tab content (e.g. new session for AI Agent tab)
   &__action {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
     width: 18px;
     height: 18px;
-    margin-left: $size-gap-1;
+    margin-left: 2px;
     border-radius: $size-radius-sm;
     color: var(--color-text-muted);
     cursor: pointer;
-    flex-shrink: 0;
-    transition: color $motion-fast $easing-standard,
-                background $motion-fast $easing-standard;
-
-    &:hover {
-      color: var(--color-accent-500);
-      background: var(--element-bg-soft);
-    }
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      color 120ms ease,
+      background 120ms ease;
 
     &:active {
+      transform: scale(0.94);
       background: var(--element-bg-medium);
     }
   }
 
-  // ── Close button — absolutely positioned right ──────────
-
   &__close {
+    position: absolute;
+    top: 50%;
+    right: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
-    right: $size-gap-2;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
+    padding: 0;
     border: none;
+    border-radius: $size-radius-sm;
     background: transparent;
     color: inherit;
-    cursor: pointer;
-    border-radius: $size-radius-sm;
-    padding: 0;
     opacity: 0;
-    flex-shrink: 0;
-    transition: opacity $motion-fast $easing-standard,
-                background $motion-fast $easing-standard;
+    transform: translateY(-50%);
+    cursor: pointer;
+    transition:
+      opacity 120ms ease,
+      background 120ms ease;
 
-    &:hover {
+    &:active {
       background: var(--element-bg-medium);
-      opacity: 1 !important;
     }
   }
 }
 
-[data-theme='bitfun-slate'] .bitfun-scene-tab__icon {
-  opacity: 0.94;
-}
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-scene-tab:not(:only-child):hover {
+    border-color: color-mix(in srgb, var(--border-subtle) 54%, transparent);
+    background: color-mix(in srgb, var(--element-bg-soft) 72%, transparent);
+    color: var(--color-text-secondary);
 
-// Light themes: inactive = former active (soft tint on chrome); active = former inactive (lifted pill + edge).
-:root[data-theme-type='light'] .bitfun-scene-tab {
-  background: var(--element-bg-soft);
-  color: var(--color-text-primary);
-  box-shadow: none;
+    .bitfun-scene-tab__close {
+      opacity: 1;
+    }
+  }
 
-  &:hover {
+  .bitfun-scene-tab--active:not(:only-child):hover {
+    border-color: var(--border-subtle);
     background: var(--element-bg-medium);
     color: var(--color-text-primary);
-    box-shadow: none;
   }
 
-  .bitfun-scene-tab__icon {
-    opacity: 1;
+  .bitfun-scene-tab__action:hover {
+    background: var(--element-bg-soft);
+    color: var(--color-text-primary);
   }
 
-  &--active {
-    background: var(--color-bg-secondary);
-    color: color-mix(in srgb, var(--color-text-primary) 86%, var(--color-text-muted));
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-subtle) 38%, transparent);
-
-    &:hover {
-      background: color-mix(in srgb, var(--color-bg-secondary) 82%, var(--element-bg-medium));
-      color: color-mix(in srgb, var(--color-text-primary) 90%, var(--color-text-muted));
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-subtle) 48%, transparent);
-    }
-
-    .bitfun-scene-tab__icon {
-      color: inherit;
-    }
-
-    .bitfun-scene-tab__subtitle {
-      color: var(--color-text-muted);
-    }
+  .bitfun-scene-tab__close:hover {
+    background: var(--element-bg-medium);
+    opacity: 1;
   }
+}
 
-  &:only-child {
-    background: transparent;
-    box-shadow: none;
-    color: color-mix(in srgb, var(--color-text-primary) 86%, var(--color-text-muted));
-
-    &:hover {
-      background: transparent;
-      color: color-mix(in srgb, var(--color-text-primary) 90%, var(--color-text-muted));
-    }
-
-    &.bitfun-scene-tab--active {
-      background: transparent;
-      box-shadow: none;
-      color: var(--color-text-primary);
+[data-theme='bitfun-slate'] .bitfun-scene-tab__icon {
+  opacity: 0.9;
+}
 
-      &:hover {
-        background: transparent;
-      }
-    }
-  }
+:root[data-theme-type='light'] .bitfun-scene-tab--active {
+  border-color: var(--border-subtle);
+  background: var(--color-bg-secondary);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .bitfun-scene-tab {
+  .bitfun-scene-tab,
+  .bitfun-scene-tab__action,
+  .bitfun-scene-tab__close {
     transition: none;
     transform: none;
-
-    &__close { transition: none; }
   }
 }
diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.tsx b/src/web-ui/src/app/components/SceneBar/SceneBar.tsx
index ae66034657..c76a1dd911 100644
--- a/src/web-ui/src/app/components/SceneBar/SceneBar.tsx
+++ b/src/web-ui/src/app/components/SceneBar/SceneBar.tsx
@@ -1,5 +1,5 @@
 /**
- * SceneBar — horizontal scene-level tab bar (32px).
+ * SceneBar — horizontal scene-level tab bar (38px).
  *
  * Delegates state to useSceneManager.
  * AI Agent tab shows the current session title as a subtitle.
diff --git a/src/web-ui/src/app/components/TitleBar/NotificationButton.scss b/src/web-ui/src/app/components/TitleBar/NotificationButton.scss
index 80fd2954a0..8f02eee62b 100644
--- a/src/web-ui/src/app/components/TitleBar/NotificationButton.scss
+++ b/src/web-ui/src/app/components/TitleBar/NotificationButton.scss
@@ -17,14 +17,21 @@
   font-size: var(--font-size-xs);
   flex-shrink: 0;
   position: relative;
-  transition: color $motion-fast $easing-standard,
-              background $motion-fast $easing-standard;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    color 120ms ease,
+    background 120ms ease;
 
   &:hover {
     color: var(--color-text-primary);
     background: var(--element-bg-soft);
   }
 
+  &:active {
+    transform: scale(0.94);
+    background: var(--element-bg-medium);
+  }
+
   svg {
     display: block;
   }
@@ -92,5 +99,6 @@
   }
   .bitfun-notification-btn {
     transition: none;
+    transform: none;
   }
 }
diff --git a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
index f962053654..ba1a435080 100644
--- a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
+++ b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
@@ -60,6 +60,7 @@ const NotificationButton: React.FC<NotificationButtonProps> = ({
       ].filter(Boolean).join(' ')}
       onClick={() => notificationService.toggleCenter()}
       type="button"
+      aria-label={t('nav.notifications')}
       data-testid="notification-button"
     >
       {activeNotification ? (
diff --git a/src/web-ui/src/app/components/panels/BranchSelectModal.scss b/src/web-ui/src/app/components/panels/BranchSelectModal.scss
index 37f48645e9..c3795bf231 100644
--- a/src/web-ui/src/app/components/panels/BranchSelectModal.scss
+++ b/src/web-ui/src/app/components/panels/BranchSelectModal.scss
@@ -68,7 +68,11 @@
   cursor: pointer;
   padding: 5px;
   border-radius: 5px;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -290,7 +294,11 @@
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
 
   &--cancel {
     background: var(--element-bg-base);
diff --git a/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css b/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css
index 93126ec508..96bb76b033 100644
--- a/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css
+++ b/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css
@@ -115,7 +115,11 @@
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
   background: var(--color-overlay-white-08);
   color: var(--color-overlay-white-80);
   border: 1px solid var(--color-overlay-white-12);
diff --git a/src/web-ui/src/app/components/panels/FilesPanel.scss b/src/web-ui/src/app/components/panels/FilesPanel.scss
index afdb0f715c..551f44ef49 100644
--- a/src/web-ui/src/app/components/panels/FilesPanel.scss
+++ b/src/web-ui/src/app/components/panels/FilesPanel.scss
@@ -246,7 +246,11 @@
     cursor: pointer;
     font-size: 11px;
     font-weight: 500;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-soft);
@@ -274,7 +278,11 @@
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     
     &:hover {
       background: var(--element-bg-soft);
@@ -394,7 +402,10 @@
     font-size: var(--font-size-xs);
     line-height: 18px;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-soft);
@@ -487,7 +498,11 @@
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     font-size: var(--font-size-xs);
 
     &:hover {
diff --git a/src/web-ui/src/app/components/panels/TerminalEditModal.scss b/src/web-ui/src/app/components/panels/TerminalEditModal.scss
index 21530bcb5e..c4b1475821 100644
--- a/src/web-ui/src/app/components/panels/TerminalEditModal.scss
+++ b/src/web-ui/src/app/components/panels/TerminalEditModal.scss
@@ -67,7 +67,11 @@
   cursor: pointer;
   padding: 5px;
   border-radius: 5px;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -182,7 +186,12 @@
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease,
+    box-shadow 140ms ease;
 
   &--cancel {
     background: var(--element-bg-base);
diff --git a/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss b/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss
index fded252673..5e58f79c68 100644
--- a/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss
+++ b/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss
@@ -13,7 +13,11 @@
   -webkit-backdrop-filter: $blur-base;
   box-shadow: none;
   overflow: hidden;
-  transition: all $motion-base $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard,
+    opacity $motion-fast $easing-standard;
   font-family: $font-family-sans;
   position: relative;
 
@@ -61,7 +65,11 @@
   border-radius: 0;
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all $motion-fast $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
 
   &:hover {
     background: var(--element-bg-base);
diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss b/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss
index e34273b171..083fe2c94c 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss
@@ -45,7 +45,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
   cursor: pointer;
 
   &::before {
@@ -55,7 +60,11 @@
     border: 1px dashed var(--color-accent-500);
     border-radius: 4px;
     opacity: 0.4;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
   }
 
   &:hover::before {
@@ -85,7 +94,11 @@
     box-shadow: 0 2px 8px var(--color-accent-400);
     opacity: 0.85;
     transform: scale(1);
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
     pointer-events: none;
 
     span {
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss
index dad6999e00..c8c07f3dd5 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss
@@ -64,7 +64,11 @@
     cursor: pointer;
     border-radius: 3px;
     font-size: 11px;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
 
     &:hover {
       background: var(--element-bg-base);
@@ -93,7 +97,11 @@
     color: var(--color-text-muted);
     cursor: pointer;
     border-radius: 3px;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
 
     &:hover {
       background: var(--element-bg-soft);
@@ -148,7 +156,11 @@
     border-radius: 3px;
     font-size: 11px;
     font-weight: 500;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
 
     &:hover {
       background: var(--element-bg-soft);
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss
index 8d0bdf8f2f..fafc5487c3 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss
@@ -14,7 +14,11 @@
   border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
 
   // Switch to solid border on hover
   &:hover {
@@ -126,7 +130,11 @@
     color: var(--color-text-muted);
     cursor: pointer;
     border-radius: 3px;
-    transition: all 0.1s ease;
+    transition:
+      transform 100ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 100ms ease,
+      color 100ms ease,
+      opacity 100ms ease;
 
     &:hover {
       background: var(--element-bg-base);
diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss
index cad2da3aff..6f892997d4 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss
@@ -24,7 +24,11 @@
   // Use text-secondary to ensure visibility in light/dark themes
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
 
   &:hover {
     border-color: var(--border-base);
@@ -225,7 +229,11 @@
       border-radius: 3px;
       flex-shrink: 0;
       opacity: 0;
-      transition: all 0.1s ease;
+      transition:
+        transform 100ms cubic-bezier(0.23, 1, 0.32, 1),
+        background-color 100ms ease,
+        color 100ms ease,
+        opacity 100ms ease;
 
       &:hover {
         background: var(--color-error-bg);
diff --git a/src/web-ui/src/app/layout/AppLayout.scss b/src/web-ui/src/app/layout/AppLayout.scss
index 74563d4ab5..51d178e651 100644
--- a/src/web-ui/src/app/layout/AppLayout.scss
+++ b/src/web-ui/src/app/layout/AppLayout.scss
@@ -1,7 +1,8 @@
 /**
- * BitFun main layout styles (SCSS).
- * Token-driven application shell with a consistent dark background.
- * Follows BEM naming and design tokens.
+ * BitFun desktop shell.
+ *
+ * The root stays visually quiet and lets the scene viewport carry elevation.
+ * Frequent workspace and panel changes deliberately avoid entrance motion.
  */
 
 @use '../../component-library/styles/tokens.scss' as *;
@@ -31,24 +32,18 @@ html, body {
 
 // ==================== Main layout container ====================
 .bitfun-app-layout {
+  position: relative;
   display: flex;
   flex-direction: column;
-  height: 100vh;
   width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  max-height: 100vh;
   overflow: hidden;
-  
-  // Use theme background
   background: var(--color-bg-primary);
-  
   color: var(--color-text-primary);
   font-family: $font-family-sans;
-  position: relative;
-
-  // Ensure layout stability
-  min-height: 100vh;
-  max-height: 100vh;
 
-  // Font rendering
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -57,12 +52,10 @@ html, body {
     outline: none;
   }
 
-  // All children
   * {
     box-sizing: border-box;
   }
 
-  // Focus management
   *:focus-visible {
     outline: 2px solid var(--color-accent-500);
     outline-offset: 2px;
@@ -74,18 +67,10 @@ html, body {
     background: var(--color-bg-primary);
   }
   
-  // ==================== Transitioning ====================
-  &--transitioning {
-    // Styles during transition
-    .bitfun-app-main-workspace {
-      // Content transition handled by child components
-    }
-  }
-
   // ==================== Modifier - loading ====================
   &--loading {
     pointer-events: none;
-    opacity: 0.9;
+    opacity: 0.92;
   }
 
   // ==================== Modifier - error ====================
@@ -112,35 +97,38 @@ html, body {
 
 // ==================== Main content area (full height, no TitleBar) ====================
 .bitfun-app-main-workspace {
-  flex: 1;
+  position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  margin-top: 0;
+  min-width: 0;
+  min-height: 0;
   width: 100%;
+  margin-top: 0;
   overflow: hidden;
-  position: relative;
-  background: var(--color-bg-scene);
+  background: var(--color-bg-primary);
 }
 
 .bitfun-window-mode-hint {
   position: fixed;
-  top: calc(env(safe-area-inset-top, 0px) + #{$size-gap-3});
+  top: calc(env(safe-area-inset-top, 0px) + #{$size-gap-2});
   left: 50%;
   z-index: $z-notification;
   display: inline-flex;
   align-items: center;
   gap: $size-gap-2;
   max-width: min(560px, calc(100vw - 32px));
-  min-height: 34px;
-  padding: $size-gap-1 $size-gap-3;
+  min-height: 36px;
+  padding: $size-gap-1 $size-gap-2 $size-gap-1 $size-gap-3;
   border: 1px solid var(--border-subtle);
-  border-radius: $size-radius-base;
-  background: color-mix(in srgb, var(--color-bg-elevated) 90%, transparent);
-  box-shadow: 0 12px 28px var(--color-overlay-black-30);
+  border-radius: $size-radius-lg;
+  background: color-mix(in srgb, var(--color-bg-elevated) 94%, transparent);
+  box-shadow:
+    0 1px 0 color-mix(in srgb, var(--color-static-white) 5%, transparent) inset,
+    0 12px 32px var(--color-overlay-black-30);
   color: var(--color-text-primary);
   pointer-events: none;
   transform: translateX(-50%);
-  animation: bitfun-window-mode-hint-in $motion-base $easing-decelerate both;
   backdrop-filter: blur(12px);
 
   &__title {
@@ -163,17 +151,6 @@ html, body {
   }
 }
 
-@keyframes bitfun-window-mode-hint-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
 // ==================== Scrollbar styles ====================
 // Moved to global scrollbar.css for shared management.
 
@@ -196,14 +173,14 @@ html, body {
 // ==================== Dark theme tweaks ====================
 @media (prefers-color-scheme: dark) {
   .bitfun-app-layout {
-    background: var(--color-bg-scene);
+    background: var(--color-bg-primary);
   }
 }
 
 // ==================== High-contrast mode ====================
 @media (prefers-contrast: high) {
   .bitfun-app-layout {
-    background: var(--color-bg-scene);
+    background: var(--color-bg-primary);
   }
 }
 
@@ -214,32 +191,4 @@ html, body {
     animation: none;
   }
 
-  .bitfun-window-mode-hint {
-    animation: none;
-  }
-}
-
-// ==================== Animations ====================
-@keyframes shimmer {
-  0%, 100% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-}
-
-// Startup sweep glow: icy blue band from left to right, no delay.
-@keyframes header-sweep-glow {
-  0% {
-    transform: translateX(-100%);
-    opacity: 1;
-  }
-  95% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(300%);
-    opacity: 0;
-  }
 }
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.scss b/src/web-ui/src/app/layout/FloatingMiniChat.scss
index 66ef4eaf1e..bde3f64943 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.scss
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.scss
@@ -1,19 +1,19 @@
 /**
- * FloatingMiniChat — subtle circular button + spring-animated expanded panel.
+ * FloatingMiniChat — compact circular button + origin-aware expanded panel.
  *
  * Button style follows the app's muted dark-UI language.
- * Panel springs from the button position (bottom-right) on open.
+ * Panel opens from the button position (bottom-right) with a short ease-out.
  * Button hides while the panel is visible.
  */
 
 @use '../../component-library/styles/tokens' as *;
 
-$fmc-ease: cubic-bezier(0.4, 0, 0.2, 1);
-$fmc-open-duration: 0.42s;
-$fmc-close-duration: 0.25s;
+$fmc-ease: cubic-bezier(0.23, 1, 0.32, 1);
+$fmc-open-duration: 0.22s;
+$fmc-close-duration: 0.16s;
 
-$button-size: 44px;
-$button-offset: 28px;
+$button-size: 42px;
+$button-offset: 20px;
 // Sized for the full session composer (workspace strip, model/permission
 // controls, action row) rather than the single-line input it replaced.
 $panel-width: 440px;
@@ -36,8 +36,8 @@ $panel-height: 680px;
   z-index: $z-overlay + 1;
   pointer-events: none;
   transition:
-    right $motion-base $easing-decelerate,
-    bottom $motion-base $easing-decelerate;
+    right 220ms cubic-bezier(0.77, 0, 0.175, 1),
+    bottom 220ms cubic-bezier(0.77, 0, 0.175, 1);
 
   &--miniapp-customizing {
     right: calc(clamp(380px, 38vw, 560px) + #{$button-offset + 16px});
@@ -60,35 +60,32 @@ $panel-height: 680px;
   width: $button-size;
   height: $button-size;
   border-radius: 50%;
-  border: 1px solid var(--border-base);
+  border: 1px solid var(--border-medium);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
-  background: var(--color-bg-tertiary);
+  background: var(--color-bg-elevated);
   box-shadow:
-    0 2px 8px rgba(var(--color-static-black-rgb), 0.35),
+    0 8px 24px -10px var(--color-overlay-black-30),
     inset 0 1px 0 var(--color-overlay-white-04);
   transition:
-    transform 0.2s $fmc-ease,
-    background 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
+    transform 120ms $fmc-ease,
+    background 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
     opacity $fmc-close-duration $fmc-ease;
 
   &:hover {
-    background: var(--color-bg-elevated);
-    border-color: var(--border-medium);
+    background: var(--element-bg-hover);
+    border-color: var(--border-strong);
     color: var(--color-text-primary);
-    box-shadow:
-      0 4px 16px rgba(var(--color-static-black-rgb), 0.45),
-      0 0 12px color-mix(in srgb, var(--color-accent-500) 8%, transparent);
-    transform: scale(1.06);
+    box-shadow: 0 10px 28px -10px var(--color-overlay-black-30);
   }
 
   &:active {
-    transform: scale(0.94);
+    transform: scale(0.96);
   }
 
   // Hide when the panel is open. `visibility` (delayed until the fade-out
@@ -96,11 +93,11 @@ $panel-height: 680px;
   // would leave an invisible but clickable trigger under the panel.
   .bitfun-fmc--open & {
     opacity: 0;
-    transform: scale(0.5);
+    transform: scale(0.96);
     visibility: hidden;
     pointer-events: none;
     transition:
-      transform 0.2s $fmc-ease,
+      transform 120ms $fmc-ease,
       opacity $fmc-close-duration $fmc-ease,
       visibility 0s linear $fmc-close-duration;
   }
@@ -213,11 +210,11 @@ $panel-height: 680px;
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 80px);
   background: var(--color-bg-primary);
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
+  border: 1px solid var(--border-medium);
+  border-radius: $size-radius-lg;
   box-shadow:
-    0 4px 12px var(--color-overlay-black-30),
-    0 0 1px var(--color-overlay-white-08);
+    0 1px 0 var(--color-overlay-white-04) inset,
+    0 20px 60px -16px var(--color-overlay-black-30);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -228,7 +225,7 @@ $panel-height: 680px;
   // animation ends rather than relying on pointer-events alone.
   transform-origin: bottom right;
   opacity: 0;
-  transform: scale(0.15);
+  transform: translateY(8px) scale(0.96);
   visibility: hidden;
   pointer-events: none;
   transition:
@@ -238,7 +235,7 @@ $panel-height: 680px;
 
   &--open {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0) scale(1);
     visibility: visible;
     pointer-events: auto;
     transition:
@@ -258,7 +255,7 @@ $panel-height: 680px;
       left: 0;
       right: 0;
       height: 2px;
-      border-radius: 8px 8px 0 0;
+      border-radius: $size-radius-lg $size-radius-lg 0 0;
       background: linear-gradient(
         90deg,
         var(--color-accent-600),
@@ -281,18 +278,19 @@ $panel-height: 680px;
 // ─── Header ────────────────────────────────────────────────
 .bitfun-fmc__header {
   flex: 0 0 auto;
-  height: 36px;
+  height: 40px;
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  padding: 0 $size-gap-2;
   gap: 4px;
   border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--color-bg-elevated) 78%, var(--color-bg-primary));
 }
 
 .bitfun-fmc__header-btn {
   flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -301,7 +299,10 @@ $panel-height: 680px;
   color: var(--color-text-muted);
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition:
+    transform 120ms $fmc-ease,
+    background 120ms ease,
+    color 120ms ease;
 
   &:hover {
     background: var(--element-bg-base);
@@ -309,7 +310,7 @@ $panel-height: 680px;
   }
 
   &:active {
-    transform: scale(0.92);
+    transform: scale(0.94);
   }
 
   &--close:hover {
@@ -428,7 +429,7 @@ $panel-height: 680px;
   align-items: flex-start;
   justify-content: center;
   box-sizing: border-box;
-  padding: 42px 36px;
+  padding: 36px 32px;
   overflow-y: auto;
   color: var(--color-text-primary);
 
@@ -443,17 +444,16 @@ $panel-height: 680px;
 }
 
 .bitfun-fmc__miniapp-welcome-icon {
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-primary);
-  border-radius: 14px;
+  border-radius: $size-radius-lg;
   border: 1px solid var(--border-subtle);
   background: var(--element-bg-subtle);
-  box-shadow:
-    0 10px 28px var(--color-overlay-black-20);
+  box-shadow: 0 12px 28px -18px var(--color-overlay-black-30);
 }
 
 .bitfun-fmc__miniapp-welcome-eyebrow {
@@ -481,7 +481,7 @@ $panel-height: 680px;
   padding: 6px 9px;
   box-sizing: border-box;
   border: 1px solid var(--border-subtle);
-  border-radius: 999px;
+  border-radius: $size-radius-base;
   background: var(--element-bg-subtle);
   color: var(--color-text-muted);
   font-size: var(--flowchat-font-size-xs);
@@ -547,7 +547,11 @@ $panel-height: 680px;
     border-color: var(--border-medium);
     background: var(--element-bg-hover);
     color: var(--color-text-primary);
-    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: scale(0.985);
+    background: var(--element-bg-medium);
   }
 
   &:focus-visible {
@@ -566,3 +570,20 @@ $panel-height: 680px;
     padding: 32px 24px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-fmc,
+  .bitfun-fmc__button,
+  .bitfun-fmc__panel,
+  .bitfun-fmc__header-btn,
+  .bitfun-fmc__miniapp-suggestion {
+    transition: none;
+  }
+
+  .bitfun-fmc__button,
+  .bitfun-fmc__panel,
+  .bitfun-fmc__header-btn,
+  .bitfun-fmc__miniapp-suggestion {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.tsx b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
index c0c8309017..be4cdac149 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.tsx
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.tsx
@@ -44,7 +44,7 @@ type PanelPhase = 'closed' | 'opening' | 'open';
 
 /** Fallback for a transitionend that never arrives (reduced motion, interrupted
  *  transition). Must stay >= $fmc-open-duration in FloatingMiniChat.scss. */
-const PANEL_OPEN_SETTLE_MS = 600;
+const PANEL_OPEN_SETTLE_MS = 280;
 
 export const FloatingMiniChat: React.FC = () => {
   const { t, i18n } = useTranslation('flow-chat');
diff --git a/src/web-ui/src/app/layout/WorkspaceBody.scss b/src/web-ui/src/app/layout/WorkspaceBody.scss
index 1931d6daf7..1be5f419c3 100644
--- a/src/web-ui/src/app/layout/WorkspaceBody.scss
+++ b/src/web-ui/src/app/layout/WorkspaceBody.scss
@@ -1,134 +1,113 @@
 /**
- * WorkspaceBody styles.
- *
- * Root:       flex-row
- *   .nav-area   (240px, flex-column) ← NavBar + NavPanel
- *   .scene-area (flex:1, flex-column) ← SceneBar + SceneViewport
+ * WorkspaceBody is the desktop workbench: quiet chrome on the left, the
+ * elevated scene surface on the right. Panel visibility is intentionally
+ * immediate because it is commonly toggled from the keyboard.
  */
 
 @use '../../component-library/styles/tokens.scss' as *;
 
 $_nav-width: 240px;
-$_nav-collapsed-width: 80px;
-
-// ── Root: left-right split ───────────────────────────────
+$_nav-collapsed-width: 76px;
+$_workbench-gap: 6px;
 
 .bitfun-workspace-body {
   --nav-width: #{$_nav-width};
 
+  position: relative;
+  isolation: isolate;
   display: flex;
-  flex-direction: row;
   flex: 1;
+  flex-direction: row;
+  gap: $_workbench-gap;
+  width: 100%;
   height: 100%;
   max-height: 100%;
+  padding: 0 $_workbench-gap $_workbench-gap;
   overflow: hidden;
-  position: relative;
-  isolation: isolate;
   background: var(--color-bg-primary);
   color: var(--color-text-primary);
-  padding: 0 $size-gap-2 $size-gap-2 $size-gap-2;
-  gap: $size-gap-2;
 }
 
-// ── Left column: NavBar on top, NavPanel below ───────────
-
 .bitfun-workspace-body__nav-area {
+  position: relative;
+  z-index: 3;
   display: flex;
+  flex: 0 0 var(--nav-width);
   flex-direction: column;
   width: var(--nav-width);
-  flex-shrink: 0;
+  min-width: 0;
   height: 100%;
   overflow: visible;
-  position: relative;
-  z-index: 3;
-  transition: width $motion-base $easing-standard;
 
   &.is-collapsed {
+    flex-basis: 0;
     width: 0;
     overflow: hidden;
     pointer-events: none;
   }
 }
 
-.bitfun-is-resizing-nav .bitfun-workspace-body__nav-area {
-  transition: none;
-}
-
-.bitfun-workspace-body.is-entering .bitfun-workspace-body__nav-area:not(.is-collapsed) {
-  animation: wb-nav-slide-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-.bitfun-workspace-body.is-exiting .bitfun-workspace-body__nav-area:not(.is-collapsed) {
-  animation: wb-nav-slide-out 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
 .bitfun-workspace-body__collapsed-nav {
   position: absolute;
   top: 0;
-  left: $size-gap-2;
+  left: $_workbench-gap;
   z-index: $z-dropdown;
   width: $_nav-collapsed-width;
-  height: 40px;
+  height: 38px;
 }
 
-// ── Nav divider ────────────────────────────────────────
-
 .bitfun-workspace-body__nav-divider {
   position: absolute;
   top: 0;
-  left: calc(#{$size-gap-2} + var(--nav-width));
-  width: 8px;
-  height: 100%;
-  cursor: ew-resize;
+  bottom: $_workbench-gap;
+  left: calc(#{$_workbench-gap} + var(--nav-width));
   z-index: 10;
+  width: $_workbench-gap;
+  cursor: ew-resize;
   background: transparent;
 
   &::after {
     content: '';
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
+    inset: 38px auto 0 50%;
     width: 1px;
     border-radius: $size-radius-full;
-    background: var(--color-accent-500);
+    background: var(--border-subtle);
     opacity: 0;
     transform: translateX(-50%);
-    transition: opacity $motion-fast $easing-standard;
+    transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1);
     pointer-events: none;
   }
+}
 
-  &:hover::after {
-    opacity: 0.55;
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-workspace-body__nav-divider:hover::after {
+    opacity: 1;
+    background: color-mix(in srgb, var(--color-accent-500) 58%, var(--border-subtle));
   }
 }
 
-// Active resizing state — keep line visible while dragging
 .bitfun-is-resizing-nav .bitfun-workspace-body__nav-divider::after {
+  width: 2px;
   opacity: 1;
-  width: 3px;
   background: var(--color-accent-500);
-  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-500) 50%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-500) 36%, transparent);
 }
 
-// ── Right column: rounded scene card (SceneBar + SceneViewport) ───
-
 .bitfun-workspace-body__scene-area {
+  position: relative;
+  z-index: 1;
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
+  gap: 0;
   min-width: 0;
   height: 100%;
   overflow: hidden;
-  position: relative;
-  z-index: 1;
   background: transparent;
-  gap: 0;
-  transition: opacity $motion-fast $easing-standard;
 }
 
-// When nav is collapsed, the floating collapsed-nav (80px wide) overlays
-// the top-left area. Offset SceneBar content to avoid visual clipping/occlusion.
+// The compact toolbar remains reachable when the navigation panel is hidden.
 .bitfun-workspace-body__nav-area.is-collapsed + .bitfun-workspace-body__scene-area {
   .bitfun-scene-bar {
     padding-left: calc(#{$_nav-collapsed-width} + #{$size-gap-1});
@@ -136,7 +115,7 @@ $_nav-collapsed-width: 80px;
 }
 
 .bitfun-app-layout--macos .bitfun-workspace-body__collapsed-nav {
-  left: calc(#{$size-gap-2} + 72px);
+  left: calc(#{$_workbench-gap} + 72px);
 }
 
 .bitfun-app-layout--macos .bitfun-workspace-body__nav-area.is-collapsed + .bitfun-workspace-body__scene-area {
@@ -145,8 +124,6 @@ $_nav-collapsed-width: 80px;
   }
 }
 
-// When the left nav is collapsed, the hidden nav area still mounts a NavBar.
-// Suppress its macOS fixed logo button to avoid duplicate icons.
 .bitfun-workspace-body__nav-area.is-collapsed .bitfun-nav-bar--macos .bitfun-nav-bar__logo-menu {
   display: none;
 }
@@ -160,24 +137,8 @@ $_nav-collapsed-width: 80px;
   cursor: ew-resize !important;
 }
 
-@keyframes wb-nav-slide-in {
-  from {
-    width: 0;
-    opacity: 0;
-  }
-  to {
-    width: var(--nav-width);
-    opacity: 1;
-  }
-}
-
-@keyframes wb-nav-slide-out {
-  from {
-    width: var(--nav-width);
-    opacity: 1;
-  }
-  to {
-    width: 0;
-    opacity: 0;
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-workspace-body__nav-divider::after {
+    transition: none;
   }
 }
diff --git a/src/web-ui/src/app/layout/WorkspaceBody.tsx b/src/web-ui/src/app/layout/WorkspaceBody.tsx
index 13b57556ce..cc4562027f 100644
--- a/src/web-ui/src/app/layout/WorkspaceBody.tsx
+++ b/src/web-ui/src/app/layout/WorkspaceBody.tsx
@@ -3,10 +3,10 @@
  *
  * Left-right layout:
  *   .nav-area   (240px, flex-column)
- *     NavBar        (32px — back/forward + drag + WindowControls)
+ *     NavBar        (38px — back/forward + drag + WindowControls)
  *     NavPanel      (flex:1 — navigation sidebar)
  *   .scene-area (flex:1, flex-column)
- *     SceneBar      (32px — scene tab strip)
+ *     SceneBar      (38px — scene tab strip)
  *     SceneViewport (flex:1 — active scene content)
  */
 
diff --git a/src/web-ui/src/app/scenes/agents/AgentsView.scss b/src/web-ui/src/app/scenes/agents/AgentsView.scss
index efaa2fe0c3..a53bd30f18 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsView.scss
+++ b/src/web-ui/src/app/scenes/agents/AgentsView.scss
@@ -46,7 +46,10 @@
     border: 1px solid var(--border-subtle);
     border-radius: $size-radius-sm;
     cursor: pointer;
-    transition: all $motion-fast $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       color: var(--color-text-primary);
@@ -169,7 +172,11 @@
     border: 1px solid var(--border-subtle);
     border-radius: $size-radius-base;
     cursor: pointer;
-    transition: all $motion-fast $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     text-align: left;
     font-family: $font-family-sans;
 
@@ -241,7 +248,11 @@
     color: var(--color-text-muted);
     font-size: var(--font-size-xs);
     cursor: pointer;
-    transition: all $motion-fast $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     font-family: $font-family-sans;
 
     &:hover {
diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
index c7489324f9..13b4767dba 100644
--- a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
+++ b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -569,7 +569,11 @@ $nursery-gallery-gutter: clamp(24px, 4vw, 56px);
     cursor: pointer;
     color: var(--color-text-muted);
     border-radius: $size-radius-sm;
-    transition: all $motion-fast $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       color: var(--color-text-secondary);
@@ -716,7 +720,11 @@ $nursery-gallery-gutter: clamp(24px, 4vw, 56px);
     cursor: pointer;
     color: var(--color-text-muted);
     border-radius: $size-radius-sm;
-    transition: all $motion-fast $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       color: var(--color-text-secondary);
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
index 03f76dd79f..dd3ee4fad4 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
@@ -49,7 +49,7 @@
       padding: 0 $size-gap-2;
       gap: $size-gap-2;
       border: none;
-      border-radius: $size-radius-full;
+      border-radius: $size-radius-base;
       background: var(--color-bg-scene);
       box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent);
       transition:
@@ -178,7 +178,7 @@
   // ── Category group ─────────────────────────────────────
 
   &__category:not(:last-child) {
-    margin-bottom: $size-gap-6;
+    margin-bottom: $size-gap-5;
   }
 
   &__category-header {
@@ -192,8 +192,7 @@
   &__category-label {
     font-size: var(--font-size-2xs);
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    letter-spacing: 0.015em;
     color: var(--color-text-muted);
     transition: color $motion-fast $easing-standard;
   }
@@ -257,8 +256,9 @@
 
     &.is-active {
       color: var(--color-text-primary);
-      background: var(--element-bg-soft);
+      background: color-mix(in srgb, var(--color-accent-500) 10%, var(--element-bg-soft));
       font-weight: 500;
+      box-shadow: inset 2px 0 0 var(--color-accent-500);
     }
 
     &:focus-visible {
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.scss b/src/web-ui/src/app/scenes/settings/SettingsScene.scss
index 9a50a9fa36..ebac1b8e31 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.scss
@@ -2,28 +2,6 @@
  * SettingsScene styles.
  */
 
-@keyframes settings-content-enter {
-  from {
-    transform: translate3d(0, 4px, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes settings-content-exit {
-  from {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -2px, 0);
-  }
-}
-
 .bitfun-settings-scene {
   display: flex;
   flex-direction: column;
@@ -63,48 +41,18 @@
 
   &__content-stack {
     flex: 1;
-    position: relative;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
   }
 
   &__content-wrapper {
-    position: absolute;
-    inset: 0;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: 100%;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
-
-    &--active {
-      z-index: 1;
-    }
-
-    &--entering {
-      animation: settings-content-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
-      will-change: transform;
-    }
-
-    &--outgoing {
-      z-index: 2;
-      pointer-events: none;
-      animation: settings-content-exit 180ms cubic-bezier(0.4, 0, 1, 1) both;
-      will-change: transform, opacity;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bitfun-settings-scene__content-wrapper {
-    &--entering {
-      animation: none;
-    }
-
-    &--outgoing {
-      display: none;
-      animation: none;
-    }
   }
 }
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx b/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
index 5b41f02dda..1ea8581fe5 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.test.tsx
@@ -111,8 +111,7 @@ describe('SettingsScene lazy tab routing', () => {
     expect(container.querySelector('[data-testid="voice-input-config"]')).not.toBeNull();
   });
 
-  it('keeps the previous settings page mounted through the local transition', async () => {
-    vi.useFakeTimers();
+  it('switches settings pages immediately without retaining the outgoing panel', async () => {
     await act(async () => {
       root.render(<SettingsScene />);
     });
@@ -123,18 +122,8 @@ describe('SettingsScene lazy tab routing', () => {
     });
 
     const activePanel = container.querySelector('[data-settings-panel-active="true"]');
-    const outgoingPanel = container.querySelector('.bitfun-settings-scene__content-wrapper--outgoing');
     expect(activePanel?.getAttribute('data-settings-panel')).toBe('appearance');
-    expect(outgoingPanel?.getAttribute('data-settings-panel')).toBe('basics');
-
-    act(() => {
-      vi.advanceTimersByTime(179);
-    });
-    expect(container.querySelector('[data-settings-panel="basics"]')).not.toBeNull();
-
-    act(() => {
-      vi.advanceTimersByTime(1);
-    });
     expect(container.querySelector('[data-settings-panel="basics"]')).toBeNull();
+    expect(container.querySelectorAll('[data-settings-panel-active="true"]')).toHaveLength(1);
   });
 });
diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
index c17097392c..2593d1953b 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
+++ b/src/web-ui/src/app/scenes/settings/SettingsScene.tsx
@@ -9,9 +9,6 @@
 import React, {
   Suspense,
   useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
 } from 'react';
 import { useSettingsStore } from './settingsStore';
 import type { ConfigTab } from './settingsConfig';
@@ -36,9 +33,6 @@ import {
 } from './settingsContentRegistry';
 import './SettingsScene.scss';
 
-// Keep in sync with settings-content-exit in SettingsScene.scss.
-const SETTINGS_CONTENT_EXIT_DURATION_MS = 180;
-
 function SettingsSceneLoading() {
   return (
     <div className="bitfun-settings-scene__loading" aria-busy="true" aria-hidden="true">
@@ -79,8 +73,6 @@ const SettingsScene: React.FC = () => {
 
   const resolvedTab: ConfigTab =
     (activeTab as string) === 'session-config' ? 'session-personalization' : activeTab;
-  const [outgoingTab, setOutgoingTab] = useState<ConfigTab | null>(null);
-  const previousTabRef = useRef<ConfigTab>(resolvedTab);
 
   useEffect(() => {
     /** Legacy merged session settings tab removed in favor of two panels. */
@@ -89,59 +81,24 @@ const SettingsScene: React.FC = () => {
     }
   }, [activeTab, setActiveTab]);
 
-  // Derive the previous tab during render so React keeps its keyed subtree
-  // mounted in the same commit that introduces the incoming page.
-  const renderedOutgoingTab = previousTabRef.current !== resolvedTab
-    ? previousTabRef.current
-    : outgoingTab;
-
-  useLayoutEffect(() => {
-    const previousTab = previousTabRef.current;
-    previousTabRef.current = resolvedTab;
-    if (previousTab === resolvedTab) return;
-
-    setOutgoingTab(previousTab);
-    const exitTimer = window.setTimeout(() => {
-      setOutgoingTab(current => current === previousTab ? null : current);
-    }, SETTINGS_CONTENT_EXIT_DURATION_MS);
-
-    return () => window.clearTimeout(exitTimer);
-  }, [resolvedTab]);
-
-  const renderedTabs: ConfigTab[] = [resolvedTab];
-  if (renderedOutgoingTab && renderedOutgoingTab !== resolvedTab) {
-    renderedTabs.push(renderedOutgoingTab);
-  }
+  const Content = resolveSettingsContent(resolvedTab);
 
   return (
     <div className="bitfun-settings-scene" data-testid="settings-scene" data-settings-tab={resolvedTab}>
       <div className="bitfun-settings-scene__content-stack">
-        {renderedTabs.map(tab => {
-          const Content = resolveSettingsContent(tab);
-          if (!Content) return null;
-
-          const isActive = tab === resolvedTab;
-          const isOutgoing = !isActive && tab === renderedOutgoingTab;
-          return (
-            <div
-              key={tab}
-              className={[
-                'bitfun-settings-scene__content-wrapper',
-                isActive && 'bitfun-settings-scene__content-wrapper--active',
-                isActive && renderedOutgoingTab && 'bitfun-settings-scene__content-wrapper--entering',
-                isOutgoing && 'bitfun-settings-scene__content-wrapper--outgoing',
-              ].filter(Boolean).join(' ')}
-              aria-hidden={!isActive}
-              data-testid="settings-scene-content"
-              data-settings-panel={tab}
-              data-settings-panel-active={isActive ? 'true' : 'false'}
-            >
-              <Suspense fallback={isActive ? <SettingsSceneLoading /> : null}>
-                <Content />
-              </Suspense>
-            </div>
-          );
-        })}
+        {Content ? (
+          <div
+            key={resolvedTab}
+            className="bitfun-settings-scene__content-wrapper"
+            data-testid="settings-scene-content"
+            data-settings-panel={resolvedTab}
+            data-settings-panel-active="true"
+          >
+            <Suspense fallback={<SettingsSceneLoading />}>
+              <Content />
+            </Suspense>
+          </div>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
index 056b98d3c3..cf16150994 100644
--- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
+++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
@@ -1,6 +1,7 @@
 /**
- * WelcomeScene styles.
- * Session card hover effects mirror btn-action / btn-action-ai from component library.
+ * WelcomeScene is a focused project launcher, not a marketing page. The
+ * greeting establishes context; recent workspaces and primary actions live in
+ * one precise surface with predictable row geometry.
  */
 
 @use '../../../component-library/styles/tokens.scss' as *;
@@ -10,59 +11,61 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
   width: 100%;
+  height: 100%;
+  padding: clamp(#{$size-gap-6}, 6vh, #{$size-gap-12}) $size-gap-8;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: $size-gap-8 $size-gap-6;
-  animation: welcome-fade-in 0.35s $easing-decelerate;
+  background: var(--color-bg-scene);
+  animation: welcome-scene-reveal 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
 
   &__content {
     display: flex;
     flex-direction: column;
-    gap: $size-gap-8;
-    max-width: 560px;
-    width: 100%;
+    gap: $size-gap-6;
+    width: min(100%, 680px);
+    margin: auto;
   }
 
   &__greeting {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: $size-gap-3;
+    align-items: flex-start;
+    gap: $size-gap-2;
+    text-align: left;
   }
 
   &__title {
     margin: 0;
-    font-size: var(--font-size-2xl);
-    line-height: $line-height-tight;
-    letter-spacing: -0.02em;
     color: var(--color-text-primary);
+    font-size: clamp(var(--font-size-2xl), 3vw, 32px);
     font-weight: $font-weight-semibold;
+    line-height: 1.08;
+    letter-spacing: -0.025em;
   }
 
   &__greeting-label {
-    font-size: var(--font-size-lg);
-    line-height: 1.5;
-    color: var(--color-text-primary);
+    max-width: 560px;
     margin: 0;
-    max-width: 420px;
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-base);
+    line-height: 1.55;
   }
 
-  // ── Divider ──────────────────────────────────────────
-
   &__divider {
-    height: 1px;
-    background: var(--border-subtle);
+    display: none;
   }
 
-  // ── Switch workspace section ─────────────────────────
-
   &__switch {
     display: flex;
     flex-direction: column;
-    gap: $size-gap-3;
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    border-radius: $size-radius-lg;
+    background: color-mix(in srgb, var(--color-bg-secondary) 54%, var(--color-bg-scene));
+    box-shadow:
+      0 1px 0 color-mix(in srgb, var(--color-static-white) 4%, transparent) inset,
+      0 12px 30px -20px var(--color-overlay-black-30);
   }
 
   &__switch-header {
@@ -70,42 +73,57 @@
     align-items: center;
     justify-content: space-between;
     gap: $size-gap-3;
+    min-height: 46px;
+    padding: $size-gap-2 $size-gap-3;
+    border-bottom: 1px solid var(--border-subtle);
   }
 
   &__section-label {
     display: flex;
     align-items: center;
-    gap: $size-gap-1;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    font-weight: $font-weight-medium;
+    gap: 6px;
+    min-width: 0;
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-xs);
+    font-weight: $font-weight-semibold;
+    letter-spacing: 0.045em;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+
+    svg {
+      flex-shrink: 0;
+      color: var(--color-text-muted);
+    }
   }
 
   &__switch-actions {
     display: flex;
     align-items: center;
-    gap: $size-gap-1;
+    gap: 2px;
+    flex-shrink: 0;
   }
 
   &__link-btn {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 4px;
-    padding: 4px $size-gap-2;
+    gap: 6px;
+    min-height: 28px;
+    padding: 0 $size-gap-2;
     border: none;
     border-radius: $size-radius-sm;
     background: transparent;
     color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
+    font: inherit;
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
     cursor: pointer;
-    transition: background $motion-fast $easing-standard,
-                color $motion-fast $easing-standard;
-
-    &:hover:not(:disabled) {
-      background: var(--element-bg-soft);
-      color: var(--color-text-secondary);
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
+
+    &:active:not(:disabled) {
+      transform: scale(0.97);
+      background: var(--element-bg-medium);
     }
 
     &:disabled {
@@ -113,50 +131,25 @@
       cursor: default;
     }
 
-    svg { flex-shrink: 0; }
+    svg {
+      flex-shrink: 0;
+    }
   }
 
-  // ── Recent list ──────────────────────────────────────
-
   &__recent-list {
     display: flex;
     flex-direction: column;
-    gap: 1px;
+    gap: 2px;
+    padding: $size-gap-2;
   }
 
   &__recent-row {
     display: flex;
     align-items: stretch;
-    border-radius: $size-radius-sm;
+    min-height: 38px;
     overflow: hidden;
-    transition: background $motion-fast $easing-standard;
-
-    &:hover {
-      background: var(--element-bg-soft);
-
-      .welcome-scene__recent-item {
-        color: var(--color-text-primary);
-
-        svg { color: var(--color-text-secondary); }
-      }
-
-      .welcome-scene__recent-time-btn__label {
-        opacity: 0;
-      }
-
-      .welcome-scene__recent-time-btn__icon {
-        opacity: 1;
-        color: var(--color-text-secondary);
-      }
-    }
-
-    &:hover .welcome-scene__recent-time-btn:hover {
-      background: var(--element-bg-subtle);
-
-      .welcome-scene__recent-time-btn__icon svg {
-        transform: scale(1.12);
-      }
-    }
+    border-radius: $size-radius-base;
+    transition: background 120ms ease;
   }
 
   &__recent-item {
@@ -165,44 +158,54 @@
     gap: $size-gap-2;
     flex: 1;
     min-width: 0;
-    padding: $size-gap-1 + 2px $size-gap-2;
+    padding: 0 $size-gap-2;
     border: none;
     background: transparent;
     color: var(--color-text-secondary);
-    font-size: var(--font-size-base);
-    cursor: pointer;
+    font: inherit;
+    font-size: var(--font-size-sm);
     text-align: left;
-    transition: color $motion-fast $easing-standard;
+    cursor: pointer;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      color 120ms ease;
 
     svg {
       flex-shrink: 0;
       color: var(--color-text-muted);
-      transition: color $motion-fast $easing-standard;
+      transition: color 120ms ease;
+    }
+
+    &:active {
+      transform: scale(0.99);
     }
   }
 
   &__recent-time-btn {
     position: relative;
-    flex-shrink: 0;
     align-self: stretch;
-    min-width: 5.25rem;
+    flex-shrink: 0;
+    min-width: 5.5rem;
     margin: 0;
-    padding: 0 $size-gap-2 0 $size-gap-1;
+    padding: 0 $size-gap-2;
     border: none;
+    border-radius: $size-radius-sm;
     background: transparent;
     color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
+    font: inherit;
+    font-size: var(--font-size-xs);
     cursor: pointer;
-    transition: color $motion-fast $easing-standard,
-                background $motion-fast $easing-standard;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      background 120ms ease,
+      color 120ms ease;
 
     &__label {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       min-height: 100%;
-      padding-right: 1px;
-      transition: opacity $motion-fast $easing-standard;
+      transition: opacity 100ms ease;
     }
 
     &__icon {
@@ -215,21 +218,19 @@
       opacity: 0;
       color: var(--color-text-muted);
       pointer-events: none;
-      transition: opacity $motion-fast $easing-standard,
-                  color $motion-fast $easing-standard;
+      transition:
+        opacity 100ms ease,
+        color 100ms ease;
+    }
 
-      svg {
-        display: block;
-        transform-origin: center right;
-        transition: transform $motion-fast $easing-standard;
-      }
+    &:active {
+      transform: scale(0.96);
     }
 
     &:focus-visible {
-      color: var(--color-text-primary);
+      z-index: 1;
       outline: 2px solid var(--color-accent-500);
       outline-offset: -2px;
-      z-index: 1;
     }
 
     &:focus-visible &__label {
@@ -238,83 +239,141 @@
 
     &:focus-visible &__icon {
       opacity: 1;
-      color: var(--color-text-secondary);
+      color: var(--color-text-primary);
     }
   }
 
   &__recent-name {
-    flex: 1;
     display: inline-flex;
     align-items: baseline;
     gap: 0;
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    min-width: 0;
   }
 
   &__recent-host {
     flex-shrink: 0;
     max-width: 40%;
     overflow: hidden;
-    text-overflow: ellipsis;
     color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-xs);
+    text-overflow: ellipsis;
   }
 
   &__recent-host-sep {
     flex-shrink: 0;
-    color: var(--color-text-muted);
-    opacity: 0.6;
-    font-size: var(--font-size-sm);
+    color: var(--color-text-disabled);
+    font-size: var(--font-size-xs);
   }
 
   &__no-recent {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-muted);
+    min-height: 72px;
     margin: 0;
-    padding: $size-gap-1 $size-gap-2;
+    padding: $size-gap-4;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .welcome-scene__link-btn:hover:not(:disabled) {
+    background: var(--element-bg-soft);
+    color: var(--color-text-primary);
+  }
+
+  .welcome-scene__recent-row:hover {
+    background: var(--element-bg-soft);
+
+    .welcome-scene__recent-item {
+      color: var(--color-text-primary);
+
+      svg {
+        color: var(--color-text-secondary);
+      }
+    }
+
+    .welcome-scene__recent-time-btn__label {
+      opacity: 0;
+    }
+
+    .welcome-scene__recent-time-btn__icon {
+      opacity: 1;
+      color: var(--color-text-secondary);
+    }
   }
 
+  .welcome-scene__recent-time-btn:hover {
+    background: var(--element-bg-medium);
+    color: var(--color-text-primary);
+  }
 }
 
-// ── Animations ────────────────────────────────────────
+:root[data-theme-type='light'] .welcome-scene__switch {
+  border-color: var(--border-medium);
+  box-shadow:
+    0 1px 0 color-mix(in srgb, var(--color-static-white) 46%, transparent) inset,
+    0 14px 32px -24px var(--color-overlay-black-30);
+}
 
-@keyframes welcome-fade-in {
+@keyframes welcome-scene-reveal {
   from {
     opacity: 0;
-    transform: translateY(10px);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
-// ── Responsive ────────────────────────────────────────
-
-@media (max-width: 480px) {
+@media (max-width: 620px) {
   .welcome-scene {
-    padding: $size-gap-5 $size-gap-4;
-  }
-}
+    align-items: flex-start;
+    padding: $size-gap-6 $size-gap-4;
 
-@media (prefers-reduced-motion: reduce) {
-  .welcome-scene {
-    animation: none;
+    &__content {
+      gap: $size-gap-5;
+    }
+
+    &__switch-header {
+      align-items: flex-start;
+      flex-direction: column;
+      padding-block: $size-gap-3;
+    }
+
+    &__switch-actions {
+      width: 100%;
+    }
 
-    &__recent-item,
-    &__recent-time-btn,
     &__link-btn {
-      transition: none;
+      justify-content: center;
+      flex: 1;
     }
+  }
+}
 
-    &__recent-time-btn__icon svg {
-      transition: none;
+@media (max-width: 420px) {
+  .welcome-scene__link-btn {
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .welcome-scene {
+    animation: none;
+  }
 
-  .welcome-scene__recent-row:hover .welcome-scene__recent-time-btn:hover .welcome-scene__recent-time-btn__icon svg {
+  .welcome-scene__link-btn,
+  .welcome-scene__recent-row,
+  .welcome-scene__recent-item,
+  .welcome-scene__recent-time-btn,
+  .welcome-scene__recent-time-btn__label,
+  .welcome-scene__recent-time-btn__icon {
+    transition: none;
     transform: none;
   }
 }
diff --git a/src/web-ui/src/component-library/components/Alert/Alert.scss b/src/web-ui/src/component-library/components/Alert/Alert.scss
index 8c11678742..4d72aa5160 100644
--- a/src/web-ui/src/component-library/components/Alert/Alert.scss
+++ b/src/web-ui/src/component-library/components/Alert/Alert.scss
@@ -11,6 +11,7 @@
   backdrop-filter: tokens.$blur-base;
   -webkit-backdrop-filter: tokens.$blur-base;
   position: relative;
+  box-shadow: tokens.$shadow-xs;
 
   &--success {
     border-color: var(--color-success-border);
@@ -121,11 +122,32 @@
     color: var(--color-text-muted);
     cursor: pointer;
     border-radius: tokens.$size-radius-sm;
-    transition: all tokens.$motion-base tokens.$easing-standard;
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
+
+    &:active {
+      transform: scale(0.97);
+    }
 
-    &:hover {
-      background: var(--element-bg-medium);
-      color: var(--color-text-primary);
+    &:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--color-accent-500) 50%, transparent);
+      outline-offset: 1px;
     }
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .alert__close:hover {
+    background: var(--element-bg-medium);
+    color: var(--color-text-primary);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .alert__close:active {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Alert/Alert.tsx b/src/web-ui/src/component-library/components/Alert/Alert.tsx
index 9405f1bf17..046062d282 100644
--- a/src/web-ui/src/component-library/components/Alert/Alert.tsx
+++ b/src/web-ui/src/component-library/components/Alert/Alert.tsx
@@ -92,7 +92,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(({
       aria-live={type === 'error' ? 'assertive' : 'polite'}
     >
       {showIcon && (
-        <div className="alert__icon">
+        <div className="alert__icon" aria-hidden="true">
           {icons[type]}
         </div>
       )}
@@ -108,6 +108,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(({
           className="alert__close"
           onClick={handleClose}
           aria-label={t('tooltip.close')}
+          type="button"
         >
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
             <path d="M1 1L11 11M11 1L1 11" strokeLinecap="round"/>
diff --git a/src/web-ui/src/component-library/components/Badge/Badge.scss b/src/web-ui/src/component-library/components/Badge/Badge.scss
index 4c6a080754..ddd04c3883 100644
--- a/src/web-ui/src/component-library/components/Badge/Badge.scss
+++ b/src/web-ui/src/component-library/components/Badge/Badge.scss
@@ -13,8 +13,8 @@
   border-radius: tokens.$badge-border-radius;
   font-size: var(--font-size-xs);
   font-weight: tokens.$badge-font-weight;
-  line-height: 1;
-  border: none;
+  line-height: 1.25;
+  border: 1px solid transparent;
   white-space: nowrap;
   flex-shrink: 0;
 
diff --git a/src/web-ui/src/component-library/components/Button/Button.scss b/src/web-ui/src/component-library/components/Button/Button.scss
index c4275eb8d9..8cdeb31654 100644
--- a/src/web-ui/src/component-library/components/Button/Button.scss
+++ b/src/web-ui/src/component-library/components/Button/Button.scss
@@ -17,9 +17,15 @@
 
   background: var(--element-bg-base);
   color: var(--color-text-secondary);
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--size-radius-sm);
-  transition: all var(--motion-fast) var(--easing-standard);
+  transform: scale(1);
+  transition:
+    background-color var(--motion-fast) ease,
+    color var(--motion-fast) ease,
+    border-color var(--motion-fast) ease,
+    box-shadow var(--motion-fast) ease,
+    transform var(--motion-fast) var(--easing-standard);
 
   &:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--color-accent-500) 50%, transparent);
@@ -44,13 +50,9 @@
     font-size: var(--font-size-lg);
   }
 
-  &:hover:not(:disabled) {
-    background: var(--element-bg-medium);
-    color: var(--color-text-primary);
-  }
-
   &:active:not(:disabled) {
     background: var(--element-bg-soft);
+    transform: scale(0.98);
   }
 
   &:disabled,
@@ -63,10 +65,6 @@
   &-primary {
     @include btn-primary.btn-primary-surface-default;
 
-    &:hover:not(:disabled) {
-      @include btn-primary.btn-primary-surface-hover;
-    }
-
     &:active:not(:disabled) {
       @include btn-primary.btn-primary-surface-active;
     }
@@ -84,11 +82,6 @@
     background: var(--element-bg-base);
     color: var(--color-text-secondary);
 
-    &:hover:not(:disabled) {
-      background: var(--element-bg-medium);
-      color: var(--color-text-primary);
-    }
-
     &:active:not(:disabled) {
       background: var(--element-bg-soft);
     }
@@ -98,11 +91,6 @@
     background: transparent;
     color: var(--color-text-secondary);
 
-    &:hover:not(:disabled) {
-      background: var(--element-bg-soft);
-      color: var(--color-text-primary);
-    }
-
     &:active:not(:disabled) {
       background: var(--element-bg-base);
     }
@@ -113,13 +101,6 @@
     color: var(--color-text-secondary);
     border: 1px dashed var(--border-base);
 
-    &:hover:not(:disabled) {
-      background: var(--element-bg-subtle);
-      color: var(--color-text-primary);
-      border-style: solid;
-      border-color: var(--border-medium);
-    }
-
     &:active:not(:disabled) {
       background: var(--element-bg-base);
       border-color: var(--border-strong);
@@ -173,29 +154,20 @@
   outline: none;
   border: none;
   border-radius: var(--size-radius-sm);
-  transition: all var(--motion-fast) var(--easing-standard);
+  transform: scale(1);
+  transition:
+    background-color var(--motion-fast) ease,
+    color var(--motion-fast) ease,
+    box-shadow var(--motion-fast) ease,
+    transform var(--motion-fast) var(--easing-standard);
 
   background: var(--element-bg-base);
   color: var(--color-text-secondary);
 
-  &:hover {
-    background: var(--element-bg-medium);
-    color: var(--color-text-primary);
-  }
-
   &-ai {
     background: color-mix(in srgb, var(--color-purple-500) 18%, transparent);
     color: var(--color-purple-500);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-purple-500) 28%, transparent);
-      color: var(--color-static-white);
-
-      svg {
-        color: var(--color-purple-500);
-      }
-    }
-
     &:active {
       background: color-mix(in srgb, var(--color-purple-500) 22%, transparent);
     }
@@ -205,11 +177,6 @@
     background: color-mix(in srgb, var(--color-error) 18%, transparent);
     color: var(--color-error);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-error) 28%, transparent);
-      color: var(--color-static-white);
-    }
-
     &:active {
       background: color-mix(in srgb, var(--color-error) 22%, transparent);
     }
@@ -219,11 +186,6 @@
     background: color-mix(in srgb, var(--color-success) 18%, transparent);
     color: var(--color-success);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-success) 28%, transparent);
-      color: var(--color-static-white);
-    }
-
     &:active {
       background: color-mix(in srgb, var(--color-success) 22%, transparent);
     }
@@ -234,6 +196,66 @@
     cursor: default;
     pointer-events: none;
   }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .btn {
+    &:hover:not(:disabled) {
+      background: var(--element-bg-medium);
+      color: var(--color-text-primary);
+    }
+
+    &-primary:hover:not(:disabled) {
+      @include btn-primary.btn-primary-surface-hover;
+    }
+
+    &-ghost:hover:not(:disabled) {
+      background: var(--element-bg-soft);
+    }
+
+    &-dashed:hover:not(:disabled) {
+      background: var(--element-bg-subtle);
+      border-style: solid;
+      border-color: var(--border-medium);
+    }
+  }
+
+  .btn-action {
+    &:hover:not(:disabled) {
+      background: var(--element-bg-medium);
+      color: var(--color-text-primary);
+    }
+
+    &-ai:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--color-purple-500) 28%, transparent);
+    }
+
+    &-danger:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--color-error) 28%, transparent);
+    }
+
+    &-success:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--color-success) 28%, transparent);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn,
+  .btn-action {
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease;
+
+    &:active:not(:disabled) {
+      transform: none;
+    }
+  }
 }
 
 @keyframes spin {
diff --git a/src/web-ui/src/component-library/components/Button/Button.tsx b/src/web-ui/src/component-library/components/Button/Button.tsx
index dd1040fece..2a65d955a7 100644
--- a/src/web-ui/src/component-library/components/Button/Button.tsx
+++ b/src/web-ui/src/component-library/components/Button/Button.tsx
@@ -66,10 +66,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       className={classNames}
       disabled={disabled || isLoading}
       {...props}
+      aria-busy={isLoading || props['aria-busy'] || undefined}
     >
       {isLoading ? (
         <>
-          <span className="btn-loading-icon"></span>
+          <span className="btn-loading-icon" aria-hidden="true"></span>
           <span className="btn-loading-text">Loading...</span>
         </>
       ) : (
@@ -79,4 +80,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   );
 });
 
-Button.displayName = 'Button';
\ No newline at end of file
+Button.displayName = 'Button';
diff --git a/src/web-ui/src/component-library/components/Card/Card.scss b/src/web-ui/src/component-library/components/Card/Card.scss
index 3714dd68bd..89aa3590f5 100644
--- a/src/web-ui/src/component-library/components/Card/Card.scss
+++ b/src/web-ui/src/component-library/components/Card/Card.scss
@@ -12,11 +12,16 @@
   position: relative;
 
   background: var(--v-card-bg-default);
-  border: none;
+  border: 1px solid var(--border-subtle);
   border-radius: var(--size-radius-base);
   color: var(--color-text-secondary);
 
-  transition: all var(--motion-base) var(--easing-standard);
+  transform: translateY(0) scale(1);
+  transition:
+    background-color var(--motion-fast) ease,
+    border-color var(--motion-fast) ease,
+    box-shadow var(--motion-fast) ease,
+    transform var(--motion-fast) var(--easing-standard);
 
 
   &--default {
@@ -29,6 +34,7 @@
 
   &--subtle {
     background: transparent;
+    border-color: transparent;
   }
 
   &--accent {
@@ -51,28 +57,9 @@
   &--interactive {
     cursor: pointer;
 
-    &:hover {
-      background: var(--v-card-bg-hover);
-    }
-
     &:active {
       background: var(--v-card-bg-active);
-    }
-
-    &.v-card--accent:hover {
-      background: var(--v-card-bg-accent-hover);
-    }
-
-    &.v-card--purple:hover {
-      background: var(--v-card-bg-purple-hover);
-    }
-
-    &.v-card--elevated:hover {
-      background: var(--v-card-bg-active);
-    }
-
-    &.v-card--subtle:hover {
-      background: var(--v-card-bg-default);
+      transform: scale(0.985);
     }
   }
 
@@ -112,6 +99,45 @@
   }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .v-card--interactive:hover {
+    background: var(--v-card-bg-hover);
+    border-color: var(--border-base);
+    box-shadow: var(--shadow-sm);
+    transform: translateY(-1px);
+
+    &.v-card--accent {
+      background: var(--v-card-bg-accent-hover);
+    }
+
+    &.v-card--purple {
+      background: var(--v-card-bg-purple-hover);
+    }
+
+    &.v-card--elevated {
+      background: var(--v-card-bg-active);
+    }
+
+    &.v-card--subtle {
+      background: var(--v-card-bg-default);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .v-card--interactive {
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      box-shadow var(--motion-fast) ease;
+
+    &:active,
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
 :root[data-theme-type="light"] .v-card,
 [data-theme-type="light"] .v-card {
   --v-card-bg-default: var(--color-overlay-black-08);
diff --git a/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss b/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss
index f7e285798f..f6870727aa 100644
--- a/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss
+++ b/src/web-ui/src/component-library/components/Checkbox/Checkbox.scss
@@ -51,7 +51,11 @@
     background: transparent;
     border: 1px solid var(--border-subtle);
     border-radius: tokens.$size-radius-sm;
-    transition: all 0.2s ease;
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     pointer-events: none;
   }
 
@@ -60,8 +64,11 @@
     height: 11px;
     color: var(--color-static-white);
     opacity: 0;
-    transform: scale(0.5);
-    transition: all 0.2s ease;
+    transform: scale(0.92);
+    transition:
+      opacity var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard),
+      color var(--motion-fast) ease;
   }
 
   &__content {
@@ -111,24 +118,8 @@
     outline-offset: 2px;
   }
 
-  &:hover:not(&--disabled) &__box {
-    border-color: var(--border-base);
-    background: var(--element-bg-subtle);
-  }
-
-  &:hover:not(&--disabled) &__input:checked + &__box,
-  &:hover:not(&--disabled) &__input:indeterminate + &__box {
-    background: color-mix(in srgb, var(--color-accent-500) 15%, transparent);
-    border-color: var(--color-accent-400);
-  }
-
-  &:hover:not(&--disabled) &__input:checked + &__box &__icon,
-  &:hover:not(&--disabled) &__input:indeterminate + &__box &__icon {
-    color: var(--color-accent-400);
-  }
-
   &__input:active:not(:disabled) + &__box {
-    transform: scale(0.95);
+    transform: scale(0.97);
   }
 
   &--error &__box {
@@ -198,3 +189,35 @@
     }
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-checkbox:not(.bitfun-checkbox--disabled):hover {
+    .bitfun-checkbox__box {
+      border-color: var(--border-base);
+      background: var(--element-bg-subtle);
+    }
+
+    .bitfun-checkbox__input:checked + .bitfun-checkbox__box,
+    .bitfun-checkbox__input:indeterminate + .bitfun-checkbox__box {
+      background: color-mix(in srgb, var(--color-accent-500) 15%, transparent);
+      border-color: var(--color-accent-400);
+    }
+
+    .bitfun-checkbox__input:checked + .bitfun-checkbox__box .bitfun-checkbox__icon,
+    .bitfun-checkbox__input:indeterminate + .bitfun-checkbox__box .bitfun-checkbox__icon {
+      color: var(--color-accent-400);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-checkbox__box {
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease;
+  }
+
+  .bitfun-checkbox__input:active:not(:disabled) + .bitfun-checkbox__box {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx b/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx
index af37382cfd..5ca9a93469 100644
--- a/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx
+++ b/src/web-ui/src/component-library/components/Checkbox/Checkbox.tsx
@@ -53,11 +53,12 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       <label className={containerClass}>
         <div className="bitfun-checkbox__wrapper">
           <input
+            {...props}
             ref={checkboxRef}
             type="checkbox"
             className="bitfun-checkbox__input"
             disabled={disabled}
-            {...props}
+            aria-checked={indeterminate ? 'mixed' : props.checked}
           />
           <span className="bitfun-checkbox__box">
             <svg
@@ -65,6 +66,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
             >
               {indeterminate ? (
                 <line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
diff --git a/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss b/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss
index 19e8d38dfb..33633f3375 100644
--- a/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss
+++ b/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss
@@ -11,17 +11,17 @@
   width: 100%;
   max-width: 560px;
   box-sizing: border-box;
-  padding-top: $size-gap-16;
+  padding-top: $size-gap-8;
 
   &__icon {
     flex-shrink: 0;
-    width: 48px;
-    height: 48px;
+    width: 40px;
+    height: 40px;
     margin: 0 auto $size-gap-4;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: $size-radius-full;
 
     svg {
       flex-shrink: 0;
@@ -52,11 +52,11 @@
     flex: 1;
     min-width: 0;
     margin: 0;
-    padding: 0 $size-gap-6 $size-gap-4;
+    padding: 0 $size-gap-6 $size-gap-5;
   }
 
   &__title {
-    font-size: var(--font-size-lg);
+    font-size: var(--font-size-xl);
     font-weight: $font-weight-semibold;
     line-height: 1.35;
     letter-spacing: 0;
@@ -161,7 +161,7 @@
     gap: $size-gap-2;
     justify-content: flex-end;
     align-items: center;
-    padding: $size-gap-4 $size-gap-6 $size-gap-5;
+    padding: $size-gap-4 $size-gap-6;
     border-top: 1px solid var(--border-base);
 
     .btn {
diff --git a/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.tsx b/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.tsx
index 4f4e354325..f0e818dd91 100644
--- a/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.tsx
+++ b/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.tsx
@@ -80,11 +80,9 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        confirmButtonRef.current?.focus();
-      }, 100);
-    }
+    if (!isOpen) return;
+    const frame = requestAnimationFrame(() => confirmButtonRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
   }, [isOpen]);
 
   const handleConfirm = () => {
@@ -106,6 +104,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       onClose={handleCancel}
       size="medium"
       showCloseButton={false}
+      ariaLabelledBy={titleId}
     >
       <div className={`confirm-dialog confirm-dialog--${type}`}>
         <div className="confirm-dialog__icon" aria-hidden>
diff --git a/src/web-ui/src/component-library/components/Empty/Empty.scss b/src/web-ui/src/component-library/components/Empty/Empty.scss
index 8665bd3cf7..1381d8a568 100644
--- a/src/web-ui/src/component-library/components/Empty/Empty.scss
+++ b/src/web-ui/src/component-library/components/Empty/Empty.scss
@@ -7,13 +7,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 20px;
+  gap: var(--size-gap-4);
+  padding: var(--size-gap-10) var(--size-gap-5);
   text-align: center;
+  animation: bitfun-empty-fade-in calc(var(--motion-fast) + 70ms) var(--easing-standard);
 
   &__image {
-    margin-bottom: 16px;
     opacity: 0.8;
-    animation: bitfun-empty-fade-in 0.5s ease-out;
 
     svg {
       display: block;
@@ -21,24 +21,31 @@
   }
 
   &__description {
-    font-size: 14px;
-    color: var(--color-overlay-white-60);
-    margin-bottom: 16px;
-    animation: bitfun-empty-fade-in 0.5s ease-out 0.1s both;
-  }
-
-  &__footer {
-    animation: bitfun-empty-fade-in 0.5s ease-out 0.2s both;
+    max-width: 36ch;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-base);
+    color: var(--color-text-muted);
   }
 }
 
 @keyframes bitfun-empty-fade-in {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(4px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-empty {
+    animation: bitfun-empty-fade-only var(--motion-fast) ease;
+  }
+}
+
+@keyframes bitfun-empty-fade-only {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
diff --git a/src/web-ui/src/component-library/components/Empty/Empty.tsx b/src/web-ui/src/component-library/components/Empty/Empty.tsx
index dbe0fc2379..82fdc6b665 100644
--- a/src/web-ui/src/component-library/components/Empty/Empty.tsx
+++ b/src/web-ui/src/component-library/components/Empty/Empty.tsx
@@ -23,6 +23,7 @@ const DefaultImage: React.FC<{ size: number }> = ({ size }) => (
     viewBox="0 0 120 120"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
   >
     <circle cx="60" cy="60" r="50" fill="var(--color-accent-100)" />
     <path
diff --git a/src/web-ui/src/component-library/components/IconButton/IconButton.scss b/src/web-ui/src/component-library/components/IconButton/IconButton.scss
index 9b2d35d30e..9ba5bd8562 100644
--- a/src/web-ui/src/component-library/components/IconButton/IconButton.scss
+++ b/src/web-ui/src/component-library/components/IconButton/IconButton.scss
@@ -16,27 +16,22 @@
   transform-origin: center;
   transition:
     transform var(--motion-fast) var(--easing-standard),
-    background var(--motion-fast) var(--easing-standard),
-    color var(--motion-fast) var(--easing-standard);
+    background-color var(--motion-fast) ease,
+    color var(--motion-fast) ease,
+    border-color var(--motion-fast) ease;
 
   background: transparent;
   color: var(--color-text-secondary);
 
-  &:hover:not(:disabled) {
-    transform: scale(1.06);
-    background: var(--color-overlay-white-08);
-    color: var(--color-accent-500);
-  }
-
   &:active:not(:disabled) {
-    transform: scale(1.02);
+    transform: scale(0.97);
     background: var(--color-overlay-white-08);
   }
 
   svg {
     display: block;
     flex-shrink: 0;
-    transition: color var(--motion-fast) var(--easing-standard);
+    transition: color var(--motion-fast) ease;
   }
 
   &--xs {
@@ -88,10 +83,6 @@
     background: color-mix(in srgb, var(--color-accent-500) 20%, transparent);
     color: var(--color-static-white);
 
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--color-accent-500) 30%, transparent);
-    }
-
     &:active:not(:disabled) {
       background: color-mix(in srgb, var(--color-accent-500) 24%, transparent);
     }
@@ -101,11 +92,6 @@
     background: transparent;
     color: var(--color-text-secondary);
 
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--color-error) 28%, transparent);
-      color: var(--color-error);
-    }
-
     &:active:not(:disabled) {
       background: color-mix(in srgb, var(--color-error) 22%, transparent);
       color: var(--color-error);
@@ -116,11 +102,6 @@
     background: color-mix(in srgb, var(--color-success) 18%, transparent);
     color: var(--color-success);
 
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--color-success) 28%, transparent);
-      color: var(--color-static-white);
-    }
-
     &:active:not(:disabled) {
       background: color-mix(in srgb, var(--color-success) 22%, transparent);
     }
@@ -130,11 +111,6 @@
     background: color-mix(in srgb, var(--color-warning) 18%, transparent);
     color: var(--color-warning);
 
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--color-warning) 28%, transparent);
-      color: var(--color-static-white);
-    }
-
     &:active:not(:disabled) {
       background: color-mix(in srgb, var(--color-warning) 22%, transparent);
     }
@@ -144,11 +120,6 @@
     background: color-mix(in srgb, var(--color-purple-500) 18%, transparent);
     color: var(--color-purple-500);
 
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--color-purple-500) 28%, transparent);
-      color: var(--color-static-white);
-    }
-
     &:active:not(:disabled) {
       background: color-mix(in srgb, var(--color-purple-500) 22%, transparent);
     }
@@ -175,6 +146,50 @@
   }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .icon-btn:hover:not(:disabled) {
+    background: var(--color-overlay-white-08);
+    color: var(--color-accent-500);
+  }
+
+  .icon-btn--primary:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-accent-500) 30%, transparent);
+    color: var(--color-static-white);
+  }
+
+  .icon-btn--danger:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-error) 28%, transparent);
+    color: var(--color-error);
+  }
+
+  .icon-btn--success:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-success) 28%, transparent);
+    color: var(--color-static-white);
+  }
+
+  .icon-btn--warning:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-warning) 28%, transparent);
+    color: var(--color-static-white);
+  }
+
+  .icon-btn--ai:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-purple-500) 28%, transparent);
+    color: var(--color-static-white);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon-btn {
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease;
+
+    &:active:not(:disabled) {
+      transform: none;
+    }
+  }
+}
+
 @keyframes icon-btn-spin {
   to {
     transform: rotate(360deg);
diff --git a/src/web-ui/src/component-library/components/IconButton/IconButton.tsx b/src/web-ui/src/component-library/components/IconButton/IconButton.tsx
index 0a52a81ed3..c14d93dd07 100644
--- a/src/web-ui/src/component-library/components/IconButton/IconButton.tsx
+++ b/src/web-ui/src/component-library/components/IconButton/IconButton.tsx
@@ -46,6 +46,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((
       className={classNames}
       disabled={disabled || isLoading}
       {...props}
+      aria-busy={isLoading || props['aria-busy'] || undefined}
     >
       {children}
     </button>
diff --git a/src/web-ui/src/component-library/components/Input/Input.scss b/src/web-ui/src/component-library/components/Input/Input.scss
index 63c5a8f9de..e1891cc5b8 100644
--- a/src/web-ui/src/component-library/components/Input/Input.scss
+++ b/src/web-ui/src/component-library/components/Input/Input.scss
@@ -47,19 +47,11 @@
       background: var(--element-bg-subtle);
       border: 1px solid transparent;
 
-      &:hover:not(.bitfun-input-wrapper--disabled &) {
-        background: var(--element-bg-soft);
-        border-color: var(--border-base);
-      }
-
       &:focus-within {
         background: var(--element-bg-soft);
         border-color: transparent;
       }
 
-      &:hover:focus-within {
-        border-color: var(--color-accent-500);
-      }
     }
   }
 
@@ -74,10 +66,6 @@
     .bitfun-input-container {
       border-color: var(--color-error-border) !important;
 
-      &:hover:not(.bitfun-input-wrapper--disabled &) {
-        border-color: var(--color-error) !important;
-      }
-
       &:focus-within {
         border-color: var(--color-error) !important;
       }
@@ -106,21 +94,20 @@
   align-items: center;
   gap: var(--size-gap-2);
   padding: 0 var(--size-gap-3);
-  border-radius: 4px;
-  transition: all var(--motion-base) var(--easing-standard);
+  border-radius: var(--size-radius-sm);
+  transition:
+    background-color var(--motion-fast) ease,
+    border-color var(--motion-fast) ease,
+    box-shadow var(--motion-fast) ease;
   position: relative;
   min-width: 0;
   overflow: hidden;
 
-  &:hover:not(.bitfun-input-wrapper--disabled &) {
-    background: var(--element-bg-subtle);
-    border-color: var(--border-strong);
-  }
-
   &:focus-within {
     background: transparent;
     border-color: var(--color-accent-500);
     outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 14%, transparent);
   }
 }
 
@@ -185,15 +172,52 @@
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  transition: color 0.15s;
+  transition:
+    color var(--motion-fast) ease,
+    transform var(--motion-fast) var(--easing-standard);
 
-  &:hover {
-    color: var(--color-text-secondary);
+  &:active {
+    transform: scale(0.97);
   }
 }
 
+.bitfun-input-hint,
 .bitfun-input-error-message {
   font-size: var(--font-size-xs);
   color: var(--color-error);
   margin-top: -2px;
 }
+
+.bitfun-input-hint {
+  color: var(--color-text-muted);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-input-wrapper:not(.bitfun-input-wrapper--disabled) .bitfun-input-container:hover {
+    background: var(--element-bg-subtle);
+    border-color: var(--border-strong);
+  }
+
+  .bitfun-input-wrapper--filled:not(.bitfun-input-wrapper--disabled) .bitfun-input-container:hover {
+    background: var(--element-bg-soft);
+    border-color: var(--border-base);
+  }
+
+  .bitfun-input-wrapper--filled .bitfun-input-container:hover:focus-within {
+    border-color: var(--color-accent-500);
+  }
+
+  .bitfun-input-wrapper--error:not(.bitfun-input-wrapper--disabled) .bitfun-input-container:hover {
+    border-color: var(--color-error) !important;
+  }
+
+  .bitfun-input-toggle:hover {
+    color: var(--color-text-secondary);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-input-toggle:active {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Input/Input.tsx b/src/web-ui/src/component-library/components/Input/Input.tsx
index ddb9ba8bd0..64ca1c95d3 100644
--- a/src/web-ui/src/component-library/components/Input/Input.tsx
+++ b/src/web-ui/src/component-library/components/Input/Input.tsx
@@ -2,7 +2,7 @@
  * Input component
  */
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import './Input.scss';
 
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
@@ -31,6 +31,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
   disabled,
   ...props
 }, ref) => {
+  const generatedId = useId();
+  const inputId = props.id ?? `${generatedId}-input`;
+  const supportId = `${generatedId}-support`;
   const resolvedInputSize = size ?? inputSize;
   const classNames = [
     'bitfun-input-wrapper',
@@ -45,22 +48,25 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
 
   return (
     <div className={classNames}>
-      {label && <label className="bitfun-input-label">{label}</label>}
+      {label && <label className="bitfun-input-label" htmlFor={inputId}>{label}</label>}
       <div className="bitfun-input-container">
         {prefix && <span className="bitfun-input-prefix">{prefix}</span>}
         <input
+          {...props}
           ref={ref}
+          id={inputId}
           className="bitfun-input"
           disabled={disabled}
-          {...props}
+          aria-invalid={error || undefined}
+          aria-describedby={(error && errorMessage) || (!error && hint) ? supportId : props['aria-describedby']}
         />
         {suffix && <span className="bitfun-input-suffix">{suffix}</span>}
       </div>
       {!error && hint && (
-        <span className="bitfun-input-error-message">{hint}</span>
+        <span id={supportId} className="bitfun-input-hint">{hint}</span>
       )}
       {error && errorMessage && (
-        <span className="bitfun-input-error-message">{errorMessage}</span>
+        <span id={supportId} className="bitfun-input-error-message" role="alert">{errorMessage}</span>
       )}
     </div>
   );
diff --git a/src/web-ui/src/component-library/components/Modal/Modal.scss b/src/web-ui/src/component-library/components/Modal/Modal.scss
index 824bf8d862..5cc9bac016 100644
--- a/src/web-ui/src/component-library/components/Modal/Modal.scss
+++ b/src/web-ui/src/component-library/components/Modal/Modal.scss
@@ -20,7 +20,7 @@ $modal-edge-gutter-sm: 10px;
   justify-content: center;
   padding: 24px;
   z-index: tokens.$z-modal;
-  animation: modal-overlay-fade 0.2s ease-out both;
+  animation: modal-overlay-fade calc(var(--motion-fast) + 70ms) var(--easing-standard) both;
 
   &--bottom-left {
     align-items: flex-end;
@@ -28,7 +28,8 @@ $modal-edge-gutter-sm: 10px;
     padding: 0 0 20px 20px;
 
     .modal {
-      animation: modal-dialog-enter-bottom 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+      transform-origin: left bottom;
+      animation: modal-dialog-enter-bottom calc(var(--motion-fast) + 70ms) var(--easing-standard) both;
     }
   }
 
@@ -38,7 +39,8 @@ $modal-edge-gutter-sm: 10px;
     padding: 0 20px 20px 0;
 
     .modal {
-      animation: modal-dialog-enter-bottom 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+      transform-origin: right bottom;
+      animation: modal-dialog-enter-bottom calc(var(--motion-fast) + 70ms) var(--easing-standard) both;
     }
   }
 }
@@ -60,11 +62,12 @@ $modal-edge-gutter-sm: 10px;
   flex-direction: column;
   background: var(--color-bg-primary);
   border: 1px solid var(--border-subtle);
-  border-radius: 8px;
+  border-radius: var(--size-radius-base);
   box-shadow: 0 16px 40px rgba(var(--color-static-black-rgb), 0.45);
   max-height: calc(100vh - 48px);
   overflow: hidden;
-  animation: modal-dialog-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+  transform-origin: center;
+  animation: modal-dialog-enter calc(var(--motion-fast) + 70ms) var(--easing-standard) both;
 
 
   &--small {
@@ -92,11 +95,7 @@ $modal-edge-gutter-sm: 10px;
 
   &--draggable {
     cursor: default;
-    transition: box-shadow 0.2s ease;
-
-    &:hover {
-      box-shadow: 0 20px 44px var(--color-overlay-black-50);
-    }
+    transition: box-shadow var(--motion-fast) ease;
   }
 
   &--dragging {
@@ -127,11 +126,7 @@ $modal-edge-gutter-sm: 10px;
     &--draggable {
       cursor: move;
       user-select: none;
-      transition: background 0.2s ease;
-
-      &:hover {
-        background: var(--element-bg-subtle);
-      }
+      transition: background-color var(--motion-fast) ease;
     }
 
     &--empty {
@@ -185,7 +180,12 @@ $modal-edge-gutter-sm: 10px;
     border-radius: 6px;
     color: var(--color-text-muted);
     cursor: pointer;
-    transition: all 0.2s ease;
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     outline: none;
 
     svg {
@@ -194,14 +194,8 @@ $modal-edge-gutter-sm: 10px;
       height: 12px;
     }
 
-    &:hover {
-      background: var(--element-bg-subtle);
-      border-color: var(--border-subtle);
-      color: var(--color-text-primary);
-    }
-
     &:active {
-      transform: scale(0.92);
+      transform: scale(0.97);
     }
 
     &:focus-visible {
@@ -236,7 +230,7 @@ $modal-edge-gutter-sm: 10px;
 @keyframes modal-dialog-enter {
   from {
     opacity: 0;
-    transform: translateY(8px) scale(0.992);
+    transform: translateY(6px) scale(0.985);
   }
   to {
     opacity: 1;
@@ -247,7 +241,7 @@ $modal-edge-gutter-sm: 10px;
 @keyframes modal-dialog-enter-bottom {
   from {
     opacity: 0;
-    transform: translateY(10px) scale(0.992);
+    transform: translateY(8px) scale(0.985);
   }
   to {
     opacity: 1;
@@ -258,28 +252,26 @@ $modal-edge-gutter-sm: 10px;
 @keyframes modal-dialog-exit {
   from {
     opacity: 1;
-    translate: 0 0;
-    scale: 1;
+    transform: translateY(0) scale(1);
   }
   to {
     opacity: 0;
-    translate: 0 5px;
-    scale: 0.992;
+    transform: translateY(4px) scale(0.99);
   }
 }
 
 .modal-overlay--exiting {
-  animation: modal-overlay-exit 0.18s ease-in both;
+  animation: modal-overlay-exit calc(var(--motion-fast) + 30ms) var(--easing-standard) both;
   pointer-events: none;
 }
 
 .modal.modal--exiting {
-  animation: modal-dialog-exit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
+  animation: modal-dialog-exit calc(var(--motion-fast) + 30ms) var(--easing-standard) both;
 }
 
 .modal--draggable,
 .modal--resizable {
-  animation: modal-overlay-fade 0.2s ease-out both;
+  animation: modal-overlay-fade calc(var(--motion-fast) + 70ms) var(--easing-standard) both;
 }
 
 
@@ -329,9 +321,41 @@ $modal-edge-gutter-sm: 10px;
   &--sw { bottom: 0; left: 0; cursor: sw-resize; }
   &--se { bottom: 0; right: 0; cursor: se-resize; }
 
-  &:hover {
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .modal--draggable:hover {
+    box-shadow: 0 20px 44px var(--color-overlay-black-50);
+  }
+
+  .modal__header--draggable:hover,
+  .modal__resize-handle:hover {
     background-color: var(--element-bg-subtle);
   }
+
+  .modal__close:hover {
+    background: var(--element-bg-subtle);
+    border-color: var(--border-subtle);
+    color: var(--color-text-primary);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-overlay,
+  .modal,
+  .modal--draggable,
+  .modal--resizable {
+    animation: modal-overlay-fade var(--motion-fast) ease both;
+  }
+
+  .modal-overlay--exiting,
+  .modal.modal--exiting {
+    animation: modal-overlay-exit var(--motion-fast) ease both;
+  }
+
+  .modal__close:active {
+    transform: none;
+  }
 }
 
 
diff --git a/src/web-ui/src/component-library/components/Search/Search.scss b/src/web-ui/src/component-library/components/Search/Search.scss
index 69c981d216..34ea61c0ca 100644
--- a/src/web-ui/src/component-library/components/Search/Search.scss
+++ b/src/web-ui/src/component-library/components/Search/Search.scss
@@ -16,7 +16,10 @@
     background: transparent;
     border: 1px solid var(--border-base);
     border-radius: $size-radius-sm;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      box-shadow var(--motion-fast) ease;
     min-height: 36px;
   }
 
@@ -26,6 +29,7 @@
 
   &--focused:not(.search--disabled) &__wrapper {
     border-color: var(--color-accent-500);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 14%, transparent);
   }
 
   &--focused:not(.search--disabled) &__prefix {
@@ -36,7 +40,7 @@
 
   &--expandable:not(.search--focused) &__wrapper {
     width: 200px;
-    transition: width $motion-base $easing-standard;
+    transition: width var(--motion-fast) var(--easing-standard);
   }
 
   &--expandable.search--focused &__wrapper {
@@ -49,12 +53,12 @@
     justify-content: center;
     flex-shrink: 0;
     color: var(--color-text-muted);
-    transition: color $motion-base $easing-standard;
+    transition: color var(--motion-fast) ease;
   }
 
   &__icon {
     display: block;
-    transition: color $motion-base $easing-standard;
+    transition: color var(--motion-fast) ease;
   }
 
   &__loading-icon {
@@ -88,7 +92,7 @@
 
     &::placeholder {
       color: var(--color-text-muted);
-      transition: color $motion-base $easing-standard;
+      transition: color var(--motion-fast) ease;
     }
 
     &:focus {
@@ -130,15 +134,16 @@
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
-    transition: color $motion-base $easing-standard;
-    animation: search-fade-in 0.2s ease forwards;
-
-    &:hover {
-      color: var(--color-text-secondary);
-    }
+    transform: scale(1);
+    transition:
+      color var(--motion-fast) ease,
+      background-color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
+    animation: search-fade-in var(--motion-fast) var(--easing-standard) forwards;
 
     &:active {
       color: var(--color-text-primary);
+      transform: scale(0.97);
     }
   }
 
@@ -164,14 +169,14 @@
     font-weight: $font-weight-medium;
     font-family: $font-family-sans;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     white-space: nowrap;
 
-    &:hover:not(:disabled) {
-      background: var(--color-accent-100);
-      color: var(--color-accent-400);
-    }
-
     &:active:not(:disabled) {
       transform: scale(0.98);
     }
@@ -208,7 +213,7 @@
     display: flex;
     align-items: center;
     gap: $size-gap-1;
-    animation: search-slide-down 0.2s ease;
+    animation: search-slide-down var(--motion-fast) var(--easing-standard);
   }
 
   &--small {
@@ -292,7 +297,7 @@
 @keyframes search-fade-in {
   from {
     opacity: 0;
-    transform: scale(0.8);
+    transform: scale(0.96);
   }
   to {
     opacity: 1;
@@ -303,10 +308,43 @@
 @keyframes search-slide-down {
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(-2px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .search__clear:hover {
+    color: var(--color-text-primary);
+    background: var(--element-bg-subtle);
+  }
+
+  .search__button:hover:not(:disabled) {
+    background: var(--color-accent-100);
+    color: var(--color-accent-400);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .search__wrapper,
+  .search__clear,
+  .search__button {
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      color var(--motion-fast) ease;
+  }
+
+  .search__clear,
+  .search__error-message {
+    animation: none;
+  }
+
+  .search__clear:active,
+  .search__button:active:not(:disabled) {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Search/Search.tsx b/src/web-ui/src/component-library/components/Search/Search.tsx
index 745f5a0d44..1b071a3206 100644
--- a/src/web-ui/src/component-library/components/Search/Search.tsx
+++ b/src/web-ui/src/component-library/components/Search/Search.tsx
@@ -2,7 +2,7 @@
  * Search input component
  */
 
-import React, { useState, useRef, useEffect, useCallback, forwardRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback, forwardRef, useId } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import './Search.scss';
 
@@ -128,6 +128,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(({
   ...rootProps
 }, ref) => {
   const { t } = useI18n('components');
+  const generatedId = useId();
+  const errorId = `${generatedId}-error`;
   
   // Resolve i18n default values
   const resolvedPlaceholder = placeholder ?? t('search.placeholder');
@@ -254,6 +256,9 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(({
           aria-label={inputAriaLabel ?? t('search.placeholder')}
           aria-controls={ariaControls}
           aria-expanded={ariaExpanded}
+          aria-busy={loading || undefined}
+          aria-invalid={error || undefined}
+          aria-describedby={error && errorMessage ? errorId : undefined}
         />
 
         {clearable && inputValue && !loading && !disabled && (
@@ -295,7 +300,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(({
       </div>
 
       {error && errorMessage && (
-        <div className="search__error-message">{errorMessage}</div>
+        <div id={errorId} className="search__error-message" role="alert">{errorMessage}</div>
       )}
     </div>
   );
diff --git a/src/web-ui/src/component-library/components/Select/Select.scss b/src/web-ui/src/component-library/components/Select/Select.scss
index 68315d2c38..f693e93a83 100644
--- a/src/web-ui/src/component-library/components/Select/Select.scss
+++ b/src/web-ui/src/component-library/components/Select/Select.scss
@@ -26,21 +26,26 @@
     border: 1px solid var(--border-base);
     border-radius: var(--size-radius-sm);
     cursor: pointer;
-    transition: all var(--motion-base) var(--easing-standard);
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      box-shadow var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     min-height: 36px;
     position: relative;
     min-width: 0;
     overflow: hidden;
 
-    &:hover:not(.select--disabled &) {
-      background: var(--element-bg-subtle);
-      border-color: var(--border-strong);
-    }
-
     &:focus-visible {
       outline: none;
       background: transparent;
       border-color: var(--color-accent-500);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 14%, transparent);
+    }
+
+    &:active:not(.select--disabled &) {
+      transform: scale(0.985);
     }
   }
 
@@ -71,9 +76,6 @@
     .select__trigger {
       border-color: var(--color-error-border);
 
-      &:hover:not(.select--disabled &) {
-        border-color: var(--color-error);
-      }
     }
   }
 
@@ -125,12 +127,9 @@
     font-size: var(--font-size-xs);
     color: var(--color-accent-500);
     max-width: 150px;
-    transition: all var(--motion-fast) var(--easing-standard);
-
-    &:hover {
-      background: var(--color-accent-100);
-      border-color: var(--border-accent);
-    }
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease;
 
     &--more {
       background: transparent;
@@ -138,9 +137,6 @@
       color: var(--color-text-secondary);
       cursor: default;
 
-      &:hover {
-        background: transparent;
-      }
     }
   }
 
@@ -166,13 +162,19 @@
     cursor: pointer;
     font-size: 14px;
     line-height: 1;
+    padding: 0;
+    border: 0;
+    background: transparent;
     color: var(--color-text-muted);
-    transition: all var(--motion-fast) var(--easing-standard);
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     margin-left: 2px;
 
-    &:hover {
-      background: var(--color-error-bg);
-      color: var(--color-error);
+    &:active {
+      transform: scale(0.97);
     }
   }
 
@@ -192,13 +194,19 @@
     border-radius: 50%;
     color: var(--color-text-muted);
     cursor: pointer;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     font-size: 16px;
     line-height: 1;
+    padding: 0;
+    border: 0;
+    background: transparent;
 
-    &:hover {
-      background: var(--color-error-bg);
-      color: var(--color-error);
+    &:active {
+      transform: scale(0.97);
     }
   }
 
@@ -221,7 +229,9 @@
     align-items: center;
     justify-content: center;
     color: var(--color-text-muted);
-    transition: all var(--motion-base) var(--easing-standard);
+    transition:
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
 
     &--open {
       transform: rotate(180deg);
@@ -230,6 +240,7 @@
   }
 
   &__dropdown {
+    --select-entry-y: -2px;
     position: absolute;
     left: 0;
     right: 0;
@@ -240,7 +251,8 @@
     border-radius: 0 0 var(--size-radius-sm) var(--size-radius-sm);
     box-shadow: 0 4px 12px var(--color-overlay-black-40);
     z-index: tokens.$z-dropdown;
-    animation: select-dropdown-appear var(--motion-fast) tokens.$easing-decelerate;
+    transform-origin: center top;
+    animation: select-dropdown-appear var(--motion-fast) var(--easing-standard);
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -260,11 +272,13 @@
     }
 
     &--top {
+      --select-entry-y: 2px;
       bottom: 100%;
       border-top: 1px solid var(--border-medium);
       border-bottom: none;
       border-radius: var(--size-radius-sm) var(--size-radius-sm) 0 0;
       box-shadow: 0 -4px 12px var(--color-overlay-black-40);
+      transform-origin: center bottom;
 
       &::before {
         top: auto;
@@ -294,12 +308,18 @@
     cursor: pointer;
     font-size: 14px;
     line-height: 1;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     flex-shrink: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
 
-    &:hover {
-      background: var(--color-error-bg);
-      color: var(--color-error);
+    &:active {
+      transform: scale(0.97);
     }
   }
 
@@ -315,16 +335,12 @@
     box-shadow: none !important;
     appearance: none;
     -webkit-appearance: none;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transition: background-color var(--motion-fast) ease;
 
     &::placeholder {
       color: var(--color-text-muted);
     }
 
-    &:hover {
-      background: var(--element-bg-soft);
-    }
-
     &:focus,
     &:focus-visible {
       background: var(--element-bg-soft);
@@ -345,14 +361,13 @@
     font-weight: var(--font-weight-medium);
     border-bottom: 1px solid var(--border-subtle);
     background: transparent;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease;
     border-radius: 3px;
     margin-bottom: 0;
     padding-bottom: 8px;
 
-    &:hover {
-      background: var(--element-bg-subtle);
-    }
   }
 
   &__options {
@@ -367,7 +382,9 @@
     gap: 8px;
     padding: 6px 10px;
     cursor: pointer;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease;
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     border-radius: 3px;
@@ -379,11 +396,6 @@
       margin-bottom: 0;
     }
 
-    &:hover:not(&--disabled) {
-      background: var(--element-bg-subtle);
-      color: var(--color-text-primary);
-    }
-
     &--highlighted:not(&--disabled) {
       background: var(--element-bg-subtle);
       color: var(--color-text-primary);
@@ -394,9 +406,6 @@
       color: var(--color-accent-500);
       font-weight: var(--font-weight-medium);
 
-      &:hover {
-        background: var(--color-accent-200);
-      }
     }
 
     &--disabled {
@@ -444,7 +453,10 @@
     justify-content: center;
     flex-shrink: 0;
     font-size: 11px;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      color var(--motion-fast) ease;
     background: transparent;
     color: transparent;
 
@@ -494,7 +506,9 @@
     gap: 8px;
     padding: 8px 12px;
     cursor: pointer;
-    transition: all var(--motion-fast) var(--easing-standard);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease;
     font-size: var(--font-size-sm);
     color: var(--color-accent-500);
     border-radius: 3px;
@@ -502,10 +516,6 @@
     background: var(--color-accent-100);
     border: 1px dashed var(--border-accent-soft);
 
-    &:hover {
-      background: var(--color-accent-200);
-      border-color: var(--border-accent);
-    }
   }
 
   &__custom-value-text {
@@ -606,7 +616,7 @@
 @keyframes select-dropdown-appear {
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(var(--select-entry-y)) scale(0.985);
   }
   to {
     opacity: 1;
@@ -614,6 +624,71 @@
   }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .select:not(.select--disabled) .select__trigger:hover {
+    background: var(--element-bg-subtle);
+    border-color: var(--border-strong);
+  }
+
+  .select--error:not(.select--disabled) .select__trigger:hover {
+    border-color: var(--color-error);
+  }
+
+  .select__tag:hover {
+    background: var(--color-accent-100);
+    border-color: var(--border-accent);
+  }
+
+  .select__tag--more:hover {
+    background: transparent;
+    border-color: var(--border-base);
+  }
+
+  .select__tag-remove:hover,
+  .select__clear:hover,
+  .select__search-clear:hover {
+    background: var(--color-error-bg);
+    color: var(--color-error);
+  }
+
+  .select__search-input:hover {
+    background: var(--element-bg-soft);
+  }
+
+  .select__select-all:hover,
+  .select__option:hover:not(.select__option--disabled) {
+    background: var(--element-bg-subtle);
+    color: var(--color-text-primary);
+  }
+
+  .select__option--selected:hover {
+    background: var(--color-accent-200);
+  }
+
+  .select__custom-value-hint:hover {
+    background: var(--color-accent-200);
+    border-color: var(--border-accent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select__trigger,
+  .select__tag-remove,
+  .select__clear,
+  .select__search-clear {
+    transform: none;
+  }
+
+  .select__dropdown {
+    animation: select-dropdown-fade var(--motion-fast) ease;
+  }
+}
+
+@keyframes select-dropdown-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @keyframes select-spin {
   to {
     transform: rotate(360deg);
diff --git a/src/web-ui/src/component-library/components/Select/Select.tsx b/src/web-ui/src/component-library/components/Select/Select.tsx
index dc03c4ecae..e15fb3f299 100644
--- a/src/web-ui/src/component-library/components/Select/Select.tsx
+++ b/src/web-ui/src/component-library/components/Select/Select.tsx
@@ -55,6 +55,7 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   dropdownTestId?: string;
   triggerAriaLabel?: string;
   triggerAriaLabelledBy?: string;
+  triggerAriaDescribedBy?: string;
 }
 
 export const Select: React.FC<SelectProps> = ({
@@ -88,12 +89,14 @@ export const Select: React.FC<SelectProps> = ({
   dropdownTestId,
   triggerAriaLabel,
   triggerAriaLabelledBy,
+  triggerAriaDescribedBy,
   ...rootProps
 }) => {
   const { t } = useI18n('components');
   const baseId = React.useId();
   const labelId = `${baseId}-label`;
   const listboxId = `${baseId}-listbox`;
+  const errorId = `${baseId}-error`;
   
   // Resolve i18n default values
   const resolvedPlaceholder = placeholder ?? t('select.placeholder');
@@ -402,7 +405,7 @@ export const Select: React.FC<SelectProps> = ({
   useEffect(() => {
     if (highlightedIndex >= 0 && dropdownRef.current && isKeyboardNavigation.current) {
       const highlightedElement = document.getElementById(`${listboxId}-option-${highlightedIndex}`);
-      highlightedElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      highlightedElement?.scrollIntoView({ block: 'nearest' });
       isKeyboardNavigation.current = false;
     }
   }, [highlightedIndex, listboxId]);
@@ -443,15 +446,17 @@ export const Select: React.FC<SelectProps> = ({
             <span key={opt.value} className="select__tag">
               {opt.icon && <span className="select__tag-icon">{opt.icon}</span>}
               <span className="select__tag-label">{opt.label}</span>
-              <span 
+              <button
+                type="button"
                 className="select__tag-remove"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleSelect(opt);
                 }}
+                aria-label={opt.label}
               >
                 ×
-              </span>
+              </button>
             </span>
           ))}
           {remaining > 0 && (
@@ -540,8 +545,11 @@ export const Select: React.FC<SelectProps> = ({
           ? `${listboxId}-option-${highlightedIndex}`
           : undefined}
         aria-disabled={disabled}
+        aria-busy={loading || undefined}
+        aria-invalid={error || undefined}
         aria-label={triggerAriaLabel}
         aria-labelledby={triggerAriaLabelledBy ?? (label ? labelId : undefined)}
+        aria-describedby={error && errorMessage ? errorId : triggerAriaDescribedBy}
         data-testid={triggerTestId}
       >
         {renderSelectedValue()}
@@ -553,7 +561,14 @@ export const Select: React.FC<SelectProps> = ({
             </span>
           )}
           {clearable && !loading && (multiple ? (selectedValue as any[]).length > 0 : selectedValue) && (
-            <span className="select__clear" onClick={handleClear}>×</span>
+            <button
+              type="button"
+              className="select__clear"
+              onClick={handleClear}
+              aria-label={t('search.clear')}
+            >
+              ×
+            </button>
           )}
           <span className={`select__arrow ${isOpen ? 'select__arrow--open' : ''}`}>
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
@@ -569,6 +584,8 @@ export const Select: React.FC<SelectProps> = ({
           className={`select__dropdown select__dropdown--${resolvedPlacement}`}
           ref={dropdownRef}
           role="listbox"
+          aria-multiselectable={multiple || undefined}
+          aria-busy={loading || undefined}
           data-testid={dropdownTestId}
         >
           {searchable && (
@@ -616,7 +633,8 @@ export const Select: React.FC<SelectProps> = ({
                 }}
               />
               {searchQuery && (
-                <span
+                <button
+                  type="button"
                   className="select__search-clear"
                   onClick={(e) => {
                     e.stopPropagation();
@@ -624,15 +642,21 @@ export const Select: React.FC<SelectProps> = ({
                     setHighlightedIndex(-1);
                     searchInputRef.current?.focus();
                   }}
+                  aria-label={t('search.clear')}
                 >
                   ×
-                </span>
+                </button>
               )}
             </div>
           )}
           
           {multiple && showSelectAll && filteredOptions.length > 0 && (
-            <div className="select__select-all" onClick={handleSelectAll}>
+            <div
+              className="select__select-all"
+              onClick={handleSelectAll}
+              role="option"
+              aria-selected={filteredOptions.filter(opt => !opt.disabled).every(opt => isSelected(opt.value))}
+            >
               <span className={`select__checkbox ${
                 filteredOptions.filter(opt => !opt.disabled).every(opt => isSelected(opt.value))
                   ? 'select__checkbox--checked' : ''
@@ -708,7 +732,7 @@ export const Select: React.FC<SelectProps> = ({
       )}
       
       {error && errorMessage && (
-        <div className="select__error-message">{errorMessage}</div>
+        <div id={errorId} className="select__error-message" role="alert">{errorMessage}</div>
       )}
     </div>
   );
diff --git a/src/web-ui/src/component-library/components/Switch/Switch.scss b/src/web-ui/src/component-library/components/Switch/Switch.scss
index 7a66296b25..1e3639ee6d 100644
--- a/src/web-ui/src/component-library/components/Switch/Switch.scss
+++ b/src/web-ui/src/component-library/components/Switch/Switch.scss
@@ -57,7 +57,11 @@
     background: transparent;
     border: 1px solid var(--border-subtle);
     border-radius: 10px;
-    transition: all 0.2s ease;
+    transform: scale(1);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
     pointer-events: none;
 
     &--checked {
@@ -73,7 +77,7 @@
     color: var(--color-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--motion-fast) ease;
   }
 
   &__thumb {
@@ -84,7 +88,11 @@
     background: var(--element-bg-subtle);
     border: 1px solid var(--border-base);
     border-radius: 50%;
-    transition: all 0.2s ease;
+    transform: translateX(0);
+    transition:
+      transform var(--motion-fast) var(--easing-standard),
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -99,7 +107,7 @@
   }
 
   &__input:checked + &__track &__thumb {
-    left: calc(100% - 18px);
+    transform: translateX(16px);
     background: var(--btn-primary-bg);
     border-color: var(--btn-primary-bg);
   }
@@ -118,30 +126,6 @@
     outline: none;
   }
 
-  &:hover:not(&--disabled):not(&--loading) &__track {
-    border-color: var(--border-base);
-  }
-
-  &:hover:not(&--disabled):not(&--loading) &__thumb {
-    background: var(--element-bg-base);
-    border-color: var(--border-base);
-  }
-
-  &:hover:not(&--disabled):not(&--loading) &__input:checked + &__track {
-    background: var(--color-accent-300);
-    border-color: var(--color-accent-500);
-  }
-
-  &:hover:not(&--disabled):not(&--loading) &__input:checked + &__track &__thumb {
-    background: var(--btn-primary-hover-bg);
-    border-color: var(--btn-primary-hover-bg);
-  }
-
-  :root[data-theme-type='dark'] &:hover:not(&--disabled):not(&--loading) &__input:checked + &__track &__thumb {
-    background: color-mix(in srgb, var(--color-accent-500) 88%, white);
-    border-color: var(--color-accent-500);
-  }
-
   &__input:checked + &__track &__loading {
     color: var(--color-overlay-white-95);
   }
@@ -186,7 +170,7 @@
     }
 
     .bitfun-switch__input:checked + .bitfun-switch__track .bitfun-switch__thumb {
-      left: calc(100% - 16px);
+      transform: translateX(14px);
     }
 
     .bitfun-switch__loading {
@@ -223,7 +207,7 @@
     }
 
     .bitfun-switch__input:checked + .bitfun-switch__track .bitfun-switch__thumb {
-      left: calc(100% - 22px);
+      transform: translateX(20px);
     }
 
     .bitfun-switch__loading {
@@ -241,6 +225,49 @@
   }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-switch:not(.bitfun-switch--disabled):not(.bitfun-switch--loading) {
+    &:hover .bitfun-switch__track {
+      border-color: var(--border-base);
+    }
+
+    &:hover .bitfun-switch__thumb {
+      background: var(--element-bg-base);
+      border-color: var(--border-base);
+    }
+
+    &:hover .bitfun-switch__input:checked + .bitfun-switch__track {
+      background: var(--color-accent-300);
+      border-color: var(--color-accent-500);
+    }
+
+    &:hover .bitfun-switch__input:checked + .bitfun-switch__track .bitfun-switch__thumb {
+      background: var(--btn-primary-hover-bg);
+      border-color: var(--btn-primary-hover-bg);
+    }
+  }
+
+  :root[data-theme-type='dark']
+    .bitfun-switch:not(.bitfun-switch--disabled):not(.bitfun-switch--loading):hover
+    .bitfun-switch__input:checked + .bitfun-switch__track
+    .bitfun-switch__thumb {
+    background: color-mix(in srgb, var(--color-accent-500) 88%, white);
+    border-color: var(--color-accent-500);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-switch__track {
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease;
+  }
+
+  .bitfun-switch__input:active:not(:disabled) + .bitfun-switch__track {
+    transform: none;
+  }
+}
+
 @keyframes bitfun-switch-spin {
   from {
     transform: rotate(0deg);
diff --git a/src/web-ui/src/component-library/components/Switch/Switch.tsx b/src/web-ui/src/component-library/components/Switch/Switch.tsx
index 0e4358c929..03346f17aa 100644
--- a/src/web-ui/src/component-library/components/Switch/Switch.tsx
+++ b/src/web-ui/src/component-library/components/Switch/Switch.tsx
@@ -47,12 +47,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       <label className={containerClass}>
         <div className="bitfun-switch__wrapper">
           <input
+            {...props}
             ref={ref}
             type="checkbox"
             className="bitfun-switch__input"
             disabled={isDisabled}
             checked={checked}
-            {...props}
+            aria-busy={loading || props['aria-busy'] || undefined}
           />
           <span className={switchClass}>
             {(checkedText || uncheckedText) && (
@@ -62,7 +63,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             )}
             <span className="bitfun-switch__thumb">
               {loading && (
-                <svg className="bitfun-switch__loading" viewBox="0 0 16 16">
+                <svg className="bitfun-switch__loading" viewBox="0 0 16 16" aria-hidden="true">
                   <circle
                     cx="8"
                     cy="8"
@@ -91,4 +92,4 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   }
 );
 
-Switch.displayName = 'Switch';
\ No newline at end of file
+Switch.displayName = 'Switch';
diff --git a/src/web-ui/src/component-library/components/Tabs/Tabs.scss b/src/web-ui/src/component-library/components/Tabs/Tabs.scss
index 35f9ec902a..83f9e99211 100644
--- a/src/web-ui/src/component-library/components/Tabs/Tabs.scss
+++ b/src/web-ui/src/component-library/components/Tabs/Tabs.scss
@@ -25,24 +25,21 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
-    padding: tokens.$size-gap-2 tokens.$size-gap-3;
+    padding: 0;
     font-size: var(--font-size-sm);
     font-weight: tokens.$font-weight-medium;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all tokens.$motion-base tokens.$easing-standard;
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      color var(--motion-fast) ease;
     user-select: none;
     position: relative;
     background: transparent;
     border: none;
     white-space: nowrap;
 
-    &:hover:not(&--disabled):not(&--active) {
-      color: var(--color-text-primary);
-      background: var(--element-bg-subtle);
-    }
-
     &--active {
       color: var(--color-accent-500);
     }
@@ -52,6 +49,27 @@
       cursor: default;
     }
 
+    &-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      min-width: 0;
+      padding: tokens.$size-gap-2 tokens.$size-gap-3;
+      border: 0;
+      border-radius: inherit;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      cursor: inherit;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--color-accent-500) 50%, transparent);
+        outline-offset: -2px;
+      }
+    }
+
     &-icon {
       display: flex;
       align-items: center;
@@ -76,15 +94,28 @@
       width: 16px;
       height: 16px;
       margin-left: 4px;
-      border-radius: 3px;
+      padding: 0;
+      border: 0;
+      border-radius: var(--size-radius-sm);
+      background: transparent;
+      color: inherit;
       font-size: 18px;
       line-height: 1;
-      transition: all 0.2s;
+      cursor: pointer;
+      transform: scale(1);
+      transition:
+        background-color var(--motion-fast) ease,
+        color var(--motion-fast) ease,
+        transform var(--motion-fast) var(--easing-standard);
       opacity: 1;
 
-      &:hover {
-        background: color-mix(in srgb, var(--color-error) 20%, transparent);
-        color: var(--color-error);
+      &:active {
+        transform: scale(0.97);
+      }
+
+      &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--color-accent-500) 50%, transparent);
+        outline-offset: 1px;
       }
     }
   }
@@ -96,6 +127,10 @@
   &--stretch {
     .bitfun-tabs__tab {
       flex: 1;
+
+      &-button {
+        flex: 1;
+      }
     }
   }
 
@@ -121,11 +156,6 @@
         overflow: hidden;
       }
 
-      &:hover .bitfun-tabs__tab-close {
-        opacity: 1;
-        width: 16px;
-        margin-left: 4px;
-      }
     }
   }
 
@@ -159,16 +189,16 @@
         overflow: hidden;
       }
 
-      &:hover:not(&--disabled):not(&--active) {
-        background: var(--element-bg-medium);
-      }
     }
   }
 
   &--pill {
     .bitfun-tabs__tab {
-      border-radius: 20px;
-      padding: 6px 16px;
+      border-radius: tokens.$size-radius-full;
+
+      &-button {
+        padding: 6px 16px;
+      }
 
       &--active {
         background: linear-gradient(135deg,
@@ -182,15 +212,21 @@
 
   &--small {
     .bitfun-tabs__tab {
-      padding: 6px 12px;
       font-size: 12px;
+
+      &-button {
+        padding: 6px 12px;
+      }
     }
   }
 
   &--large {
     .bitfun-tabs__tab {
-      padding: 10px 20px;
       font-size: 16px;
+
+      &-button {
+        padding: 10px 20px;
+      }
     }
   }
 
@@ -272,3 +308,32 @@
 .bitfun-tab-pane {
   width: 100%;
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-tabs__tab:not(.bitfun-tabs__tab--disabled):not(.bitfun-tabs__tab--active):hover {
+    color: var(--color-text-primary);
+    background: var(--element-bg-subtle);
+  }
+
+  .bitfun-tabs--card
+    .bitfun-tabs__tab:not(.bitfun-tabs__tab--disabled):not(.bitfun-tabs__tab--active):hover {
+    background: var(--element-bg-medium);
+  }
+
+  .bitfun-tabs--line .bitfun-tabs__tab:hover .bitfun-tabs__tab-close {
+    opacity: 1;
+    width: 16px;
+    margin-left: 4px;
+  }
+
+  .bitfun-tabs__tab-close:hover {
+    background: color-mix(in srgb, var(--color-error) 20%, transparent);
+    color: var(--color-error);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-tabs__tab-close:active {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Tabs/Tabs.tsx b/src/web-ui/src/component-library/components/Tabs/Tabs.tsx
index 972da53190..8f19558c23 100644
--- a/src/web-ui/src/component-library/components/Tabs/Tabs.tsx
+++ b/src/web-ui/src/component-library/components/Tabs/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState, createContext, useContext, useMemo } from 'react';
+import React, { useState, createContext, useContext, useMemo, useId } from 'react';
 import './Tabs.scss';
 
 export interface TabItem {
@@ -7,6 +7,7 @@ export interface TabItem {
   icon?: React.ReactNode;
   disabled?: boolean;
   closable?: boolean;
+  closeAriaLabel?: string;
 }
 
 export interface TabsProps {
@@ -28,6 +29,7 @@ export interface TabPaneProps {
   icon?: React.ReactNode;
   disabled?: boolean;
   closable?: boolean;
+  closeAriaLabel?: string;
   children?: React.ReactNode;
   className?: string;
 }
@@ -60,6 +62,7 @@ export const Tabs: React.FC<TabsProps> = ({
   className = '',
   style,
 }) => {
+  const generatedId = useId();
   const [internalActiveKey, setInternalActiveKey] = useState<string>(
     defaultActiveKey || ''
   );
@@ -72,8 +75,8 @@ export const Tabs: React.FC<TabsProps> = ({
 
     React.Children.forEach(children, (child) => {
       if (React.isValidElement<TabPaneProps>(child) && child.type === TabPane) {
-        const { tabKey, label, icon, disabled, closable } = child.props;
-        nextTabs.push({ key: tabKey, label, icon, disabled, closable });
+        const { tabKey, label, icon, disabled, closable, closeAriaLabel } = child.props;
+        nextTabs.push({ key: tabKey, label, icon, disabled, closable, closeAriaLabel });
         nextPanes[tabKey] = child;
       }
     });
@@ -104,6 +107,38 @@ export const Tabs: React.FC<TabsProps> = ({
     onTabClose?.(key);
   };
 
+  const getTabId = (key: string) => `${generatedId}-tab-${key}`;
+  const getPanelId = (key: string) => `${generatedId}-panel-${key}`;
+
+  const handleTabKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {
+    const enabledTabs = tabs
+      .map((tab, index) => ({ tab, index }))
+      .filter(({ tab }) => !tab.disabled);
+    const enabledIndex = enabledTabs.findIndex(({ index }) => index === currentIndex);
+    let target: (typeof enabledTabs)[number] | undefined;
+
+    if (event.key === 'ArrowRight') {
+      target = enabledTabs[(enabledIndex + 1) % enabledTabs.length];
+    } else if (event.key === 'ArrowLeft') {
+      target = enabledTabs[(enabledIndex - 1 + enabledTabs.length) % enabledTabs.length];
+    } else if (event.key === 'Home') {
+      target = enabledTabs[0];
+    } else if (event.key === 'End') {
+      target = enabledTabs[enabledTabs.length - 1];
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleTabClick(tabs[currentIndex].key, tabs[currentIndex].disabled);
+      return;
+    } else {
+      return;
+    }
+
+    if (!target) return;
+    event.preventDefault();
+    handleTabClick(target.tab.key);
+    document.getElementById(getTabId(target.tab.key))?.focus();
+  };
+
   const containerClass = [
     'bitfun-tabs',
     `bitfun-tabs--${type}`,
@@ -121,8 +156,8 @@ export const Tabs: React.FC<TabsProps> = ({
     <TabsContext.Provider value={contextValue}>
       <div className={containerClass} style={style}>
         <div className="bitfun-tabs__nav">
-          <div className="bitfun-tabs__nav-list">
-            {tabs.map((tab) => (
+          <div className="bitfun-tabs__nav-list" role="tablist">
+            {tabs.map((tab, index) => (
               <div
                 key={tab.key}
                 className={[
@@ -130,24 +165,45 @@ export const Tabs: React.FC<TabsProps> = ({
                   activeKey === tab.key && 'bitfun-tabs__tab--active',
                   tab.disabled && 'bitfun-tabs__tab--disabled',
                 ].filter(Boolean).join(' ')}
-                onClick={() => handleTabClick(tab.key, tab.disabled)}
               >
-                {tab.icon && <span className="bitfun-tabs__tab-icon">{tab.icon}</span>}
-                <span className="bitfun-tabs__tab-label">{tab.label}</span>
+                <button
+                  id={getTabId(tab.key)}
+                  className="bitfun-tabs__tab-button"
+                  type="button"
+                  onClick={() => handleTabClick(tab.key, tab.disabled)}
+                  onKeyDown={(event) => handleTabKeyDown(event, index)}
+                  role="tab"
+                  tabIndex={activeKey === tab.key && !tab.disabled ? 0 : -1}
+                  aria-selected={activeKey === tab.key}
+                  aria-disabled={tab.disabled || undefined}
+                  aria-controls={getPanelId(tab.key)}
+                  disabled={tab.disabled}
+                >
+                  {tab.icon && <span className="bitfun-tabs__tab-icon">{tab.icon}</span>}
+                  <span className="bitfun-tabs__tab-label">{tab.label}</span>
+                </button>
                 {tab.closable && (
-                  <span
+                  <button
                     className="bitfun-tabs__tab-close"
+                    type="button"
                     onClick={(e) => handleTabClose(e, tab.key)}
+                    aria-label={tab.closeAriaLabel}
                   >
                     ×
-                  </span>
+                  </button>
                 )}
               </div>
             ))}
           </div>
           {type === 'line' && <div className="bitfun-tabs__ink-bar" />}
         </div>
-        <div className="bitfun-tabs__content">
+        <div
+          id={getPanelId(activeKey)}
+          className="bitfun-tabs__content"
+          role="tabpanel"
+          aria-labelledby={getTabId(activeKey)}
+          tabIndex={0}
+        >
           {panes[activeKey]}
         </div>
       </div>
diff --git a/src/web-ui/src/component-library/components/Tag/Tag.scss b/src/web-ui/src/component-library/components/Tag/Tag.scss
index 07bd7ed2ab..9e716ca527 100644
--- a/src/web-ui/src/component-library/components/Tag/Tag.scss
+++ b/src/web-ui/src/component-library/components/Tag/Tag.scss
@@ -7,7 +7,11 @@
   padding: tokens.$size-gap-1 tokens.$size-gap-3;
   border-radius: tokens.$size-radius-sm;
   font-weight: tokens.$font-weight-medium;
-  transition: all tokens.$motion-base tokens.$easing-standard;
+  border: 1px solid transparent;
+  transition:
+    background-color var(--motion-fast) ease,
+    border-color var(--motion-fast) ease,
+    color var(--motion-fast) ease;
   position: relative;
 
   &--small {
@@ -30,55 +34,36 @@
     background: var(--color-accent-200);
     color: var(--color-text-secondary);
 
-    &:hover {
-      background: var(--color-accent-300);
-    }
   }
 
   &--green {
     background: color-mix(in srgb, var(--color-success) 14%, transparent);
     color: var(--color-success);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-success) 20%, transparent);
-    }
   }
 
   &--red {
     background: color-mix(in srgb, var(--color-error) 14%, transparent);
     color: var(--color-error);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-error) 20%, transparent);
-    }
   }
 
   &--yellow {
     background: color-mix(in srgb, var(--color-warning) 14%, transparent);
     color: var(--color-warning);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-warning) 20%, transparent);
-    }
   }
 
   &--purple {
     background: var(--color-purple-200);
     color: var(--color-purple-500);
 
-    &:hover {
-      background: color-mix(in srgb, var(--color-purple-500) 20%, transparent);
-    }
   }
 
   &--gray {
     background: var(--element-bg-medium);
     color: var(--color-text-secondary);
 
-    &:hover {
-      background: var(--element-bg-strong);
-      color: var(--color-text-primary);
-    }
   }
 
   &--rounded {
@@ -100,10 +85,15 @@
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    transition: all tokens.$motion-base tokens.$easing-standard;
-
-    &:hover {
-      background: var(--color-overlay-black-15);
+    transform: scale(1);
+    color: currentColor;
+    transition:
+      background-color var(--motion-fast) ease,
+      color var(--motion-fast) ease,
+      transform var(--motion-fast) var(--easing-standard);
+
+    &:active {
+      transform: scale(0.97);
     }
 
     svg {
@@ -112,3 +102,40 @@
     }
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .tag--blue:hover {
+    background: var(--color-accent-300);
+  }
+
+  .tag--green:hover {
+    background: color-mix(in srgb, var(--color-success) 20%, transparent);
+  }
+
+  .tag--red:hover {
+    background: color-mix(in srgb, var(--color-error) 20%, transparent);
+  }
+
+  .tag--yellow:hover {
+    background: color-mix(in srgb, var(--color-warning) 20%, transparent);
+  }
+
+  .tag--purple:hover {
+    background: color-mix(in srgb, var(--color-purple-500) 20%, transparent);
+  }
+
+  .tag--gray:hover {
+    background: var(--element-bg-strong);
+    color: var(--color-text-primary);
+  }
+
+  .tag__close:hover {
+    background: var(--color-overlay-black-15);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tag__close:active {
+    transform: none;
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Tag/Tag.tsx b/src/web-ui/src/component-library/components/Tag/Tag.tsx
index bc87e1b4f2..47cfe54a51 100644
--- a/src/web-ui/src/component-library/components/Tag/Tag.tsx
+++ b/src/web-ui/src/component-library/components/Tag/Tag.tsx
@@ -12,6 +12,7 @@ export interface TagProps {
   title?: string;
   closable?: boolean;
   onClose?: () => void;
+  closeAriaLabel?: string;
   className?: string;
   style?: React.CSSProperties;
   rounded?: boolean;
@@ -24,6 +25,7 @@ export const Tag: React.FC<TagProps> = ({
   title,
   closable = false,
   onClose,
+  closeAriaLabel,
   className = '',
   style,
   rounded = false,
@@ -42,7 +44,12 @@ export const Tag: React.FC<TagProps> = ({
     <span className={classNames} title={title} style={style}>
       <span className="tag__content">{children}</span>
       {closable && (
-        <button className="tag__close" onClick={onClose}>
+        <button
+          type="button"
+          className="tag__close"
+          onClick={onClose}
+          aria-label={closeAriaLabel}
+        >
           ×
         </button>
       )}
diff --git a/src/web-ui/src/component-library/components/Textarea/Textarea.scss b/src/web-ui/src/component-library/components/Textarea/Textarea.scss
index f6fbc7215d..b07cde2ffd 100644
--- a/src/web-ui/src/component-library/components/Textarea/Textarea.scss
+++ b/src/web-ui/src/component-library/components/Textarea/Textarea.scss
@@ -37,9 +37,12 @@
     line-height: 1.5;
     color: var(--color-text-primary);
     background: var(--element-bg-subtle);
-    border: 1.5px solid var(--border-base);
-    border-radius: 4px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid var(--border-base);
+    border-radius: var(--size-radius-sm);
+    transition:
+      background-color var(--motion-fast) ease,
+      border-color var(--motion-fast) ease,
+      box-shadow var(--motion-fast) ease;
     resize: vertical;
     font-family: inherit;
 
@@ -52,15 +55,11 @@
       background: var(--color-accent-300);
     }
 
-    &:hover:not(:disabled) {
-      border-color: var(--border-medium);
-      background: var(--element-bg-soft);
-    }
-
     &:focus {
       outline: none !important;
-      border-color: var(--border-medium);
+      border-color: var(--color-accent-500);
       background: var(--element-bg-subtle);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 14%, transparent);
     }
 
     &:focus-visible {
@@ -127,10 +126,6 @@
     background: var(--element-bg-soft);
     border-color: transparent;
 
-    &:hover:not(:disabled) {
-      background: var(--element-bg-base);
-    }
-
     &:focus {
       background: var(--element-bg-soft);
       border-color: transparent;
@@ -139,17 +134,23 @@
 
   &--outlined &__field {
     background: transparent;
-    border-width: 1.5px;
+    border-width: 1px;
     border-color: var(--border-subtle);
 
-    &:hover:not(:disabled) {
-      border-color: var(--border-medium);
-      background: var(--element-bg-subtle);
-    }
-
     &:focus {
-      border-color: var(--border-medium);
+      border-color: var(--color-accent-500);
       background: var(--element-bg-subtle);
     }
   }
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-textarea__field:hover:not(:disabled) {
+    border-color: var(--border-medium);
+    background: var(--element-bg-soft);
+  }
+
+  .bitfun-textarea--filled .bitfun-textarea__field:hover:not(:disabled) {
+    background: var(--element-bg-base);
+  }
+}
diff --git a/src/web-ui/src/component-library/components/Textarea/Textarea.tsx b/src/web-ui/src/component-library/components/Textarea/Textarea.tsx
index 2a8fc9df1d..f6909c7710 100644
--- a/src/web-ui/src/component-library/components/Textarea/Textarea.tsx
+++ b/src/web-ui/src/component-library/components/Textarea/Textarea.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useCallback, useId } from 'react';
 import './Textarea.scss';
 
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -32,6 +32,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     },
     ref
   ) => {
+    const generatedId = useId();
+    const textareaId = props.id ?? `${generatedId}-textarea`;
+    const supportId = `${generatedId}-support`;
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const [charCount, setCharCount] = React.useState(0);
 
@@ -71,34 +74,39 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <div className={containerClass}>
         {label && (
-          <label className="bitfun-textarea__label">
+          <label className="bitfun-textarea__label" htmlFor={textareaId}>
             {label}
             {props.required && <span className="bitfun-textarea__required">*</span>}
           </label>
         )}
         <div className="bitfun-textarea__wrapper">
           <textarea
+            {...props}
             ref={textareaRef}
+            id={textareaId}
             className="bitfun-textarea__field"
             value={value}
             onChange={handleChange}
             maxLength={maxLength}
+            aria-invalid={error || undefined}
+            aria-describedby={(error && errorMessage) || (!error && hint) || showCount
+              ? supportId
+              : props['aria-describedby']}
             style={style}
-            {...props}
           />
         </div>
         {(hint || errorMessage || showCount) && (
-          <div className="bitfun-textarea__footer">
+          <div className="bitfun-textarea__footer" id={supportId}>
             <div className="bitfun-textarea__hint-wrapper">
               {error && errorMessage && (
-                <span className="bitfun-textarea__error-message">{errorMessage}</span>
+                <span className="bitfun-textarea__error-message" role="alert">{errorMessage}</span>
               )}
               {!error && hint && (
                 <span className="bitfun-textarea__hint">{hint}</span>
               )}
             </div>
             {showCount && (
-              <span className="bitfun-textarea__count">
+              <span className="bitfun-textarea__count" aria-live="polite">
                 {charCount}{maxLength && ` / ${maxLength}`}
               </span>
             )}
diff --git a/src/web-ui/src/component-library/components/Tooltip/Tooltip.scss b/src/web-ui/src/component-library/components/Tooltip/Tooltip.scss
index be52b06628..062ec2caff 100644
--- a/src/web-ui/src/component-library/components/Tooltip/Tooltip.scss
+++ b/src/web-ui/src/component-library/components/Tooltip/Tooltip.scss
@@ -9,15 +9,20 @@
   pointer-events: none;
   z-index: tokens.$z-tooltip;
 
-  transform: scale(0.98);
+  --tooltip-enter-x: 0;
+  --tooltip-enter-y: 0;
+
+  transform:
+    translate3d(var(--tooltip-enter-x), var(--tooltip-enter-y), 0)
+    scale(0.98);
   transition:
-    opacity 0.12s ease-out,
-    transform 0.12s ease-out;
+    opacity var(--motion-fast) ease,
+    transform var(--motion-fast) var(--easing-standard);
 
   &--visible {
     opacity: 1;
     pointer-events: none;
-    transform: scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   &--interactive.bitfun-tooltip--visible {
@@ -64,65 +69,28 @@
     }
   }
 
-  &--top.bitfun-tooltip--visible {
-    animation: bitfun-tooltip-fade-in-top 0.12s ease-out;
-  }
-
-  &--bottom.bitfun-tooltip--visible {
-    animation: bitfun-tooltip-fade-in-bottom 0.12s ease-out;
-  }
-
-  &--left.bitfun-tooltip--visible {
-    animation: bitfun-tooltip-fade-in-left 0.12s ease-out;
+  &--top {
+    --tooltip-enter-y: 3px;
+    transform-origin: center bottom;
   }
 
-  &--right.bitfun-tooltip--visible {
-    animation: bitfun-tooltip-fade-in-right 0.12s ease-out;
-  }
-}
-
-
-@keyframes bitfun-tooltip-fade-in-top {
-  from {
-    opacity: 0;
-    transform: translateY(3px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  &--bottom {
+    --tooltip-enter-y: -3px;
+    transform-origin: center top;
   }
-}
 
-@keyframes bitfun-tooltip-fade-in-bottom {
-  from {
-    opacity: 0;
-    transform: translateY(-3px);
+  &--left {
+    --tooltip-enter-x: 3px;
+    transform-origin: right center;
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
-@keyframes bitfun-tooltip-fade-in-left {
-  from {
-    opacity: 0;
-    transform: translateX(3px);
+  &--right {
+    --tooltip-enter-x: -3px;
+    transform-origin: left center;
   }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 
-@keyframes bitfun-tooltip-fade-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(-3px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
+  &[data-instant='true'] {
+    transition-duration: 0ms;
   }
 }
 
@@ -144,7 +112,6 @@
 
     &--visible {
       transform: none;
-      animation: none;
     }
   }
 }
diff --git a/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx b/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx
index d6362355e3..95c84c4ac5 100644
--- a/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx
+++ b/src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,12 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import './Tooltip.scss';
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 const DEFAULT_TOOLTIP_DELAY = 450;
 const INTERACTIVE_TOOLTIP_HIDE_DELAY = 400;
+const TOOLTIP_WARM_WINDOW = 300;
+let tooltipWarmUntil = 0;
 
 export interface TooltipProps {
   content: React.ReactNode;
@@ -154,6 +156,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   className = '',
   interactive = false,
 }) => {
+  const tooltipId = useId();
   const [visible, setVisible] = useState(false);
   // Single layout state (position + placement + ready) so one recalculation
   // commits at most one re-render instead of three.
@@ -170,6 +173,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestMousePositionRef = useRef<{ x: number; y: number } | null>(null);
   const recalcFrameRef = useRef<number | null>(null);
+  const instantRef = useRef(false);
 
   const gap = 8;
   const viewportPadding = 8;
@@ -228,6 +232,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
     if (followCursor && e) {
       latestMousePositionRef.current = { x: e.clientX, y: e.clientY };
     }
+    const resolvedDelay = trigger === 'hover' && Date.now() < tooltipWarmUntil ? 0 : delay;
+    instantRef.current = resolvedDelay === 0;
     timeoutRef.current = setTimeout(() => {
       timeoutRef.current = null;
       if (followCursor) {
@@ -235,7 +241,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       }
       setLayout(prev => (prev.ready ? { ...prev, ready: false } : prev));
       setVisible(true);
-    }, delay);
+    }, resolvedDelay);
   };
 
   const hideTooltip = useCallback(() => {
@@ -247,13 +253,16 @@ export const Tooltip: React.FC<TooltipProps> = ({
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
     }
+    if (visible) {
+      tooltipWarmUntil = Date.now() + TOOLTIP_WARM_WINDOW;
+    }
     setVisible(false);
     setLayout(prev => (prev.ready ? { ...prev, ready: false } : prev));
     if (followCursor) {
       latestMousePositionRef.current = null;
       setMousePosition(null);
     }
-  }, [followCursor]);
+  }, [followCursor, visible]);
 
   const scheduleHideTooltip = useCallback(() => {
     if (!interactive) {
@@ -391,6 +400,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
     onClick: handleClick,
     onFocus: handleFocus,
     onBlur: handleBlur,
+    'aria-describedby': visible && layout.ready
+      ? [childProps['aria-describedby'], tooltipId].filter(Boolean).join(' ')
+      : childProps['aria-describedby'],
   });
 
   const tooltipClass = [
@@ -407,7 +419,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
       {visible && createPortal(
         <div
           ref={tooltipRef}
+          id={tooltipId}
+          role="tooltip"
           className={tooltipClass}
+          data-instant={instantRef.current || undefined}
           onMouseEnter={interactive ? () => {
             if (hideTimeoutRef.current) {
               clearTimeout(hideTimeoutRef.current);
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
index 39f05f5bac..7062e5273c 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -343,9 +343,7 @@
   display: flex;
   flex-direction: column;
   transform: translateY(0);
-  transition:
-    max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
 
   // ─── Single-line capsule mode ─────────────────────────────────────────────
   &--capsule {
@@ -541,7 +539,7 @@
       box-shadow: none;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
-      transition: all 0.25s ease;
+      transition: none;
 
       &:hover {
         background: var(--color-bg-tertiary);
@@ -563,7 +561,7 @@
     .bitfun-chat-input__actions,
     .bitfun-chat-input__recommendations {
       opacity: 0.25;
-      transition: opacity 0.25s ease;
+      transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
     }
 
     &:hover,
@@ -623,28 +621,19 @@
     flex-direction: column;
     gap: 0;
     pointer-events: auto;
-    border: 1px solid var(--color-overlay-white-12);
-    border-radius: calc(var(--flowchat-card-radius) + 4px);
+    border: 1px solid var(--border-base);
+    border-radius: calc(var(--flowchat-card-radius) + 3px);
     padding: var(--flowchat-card-expanded-pad-x) var(--flowchat-card-expanded-pad-y) 0;
     background: var(--color-bg-scene);
     backdrop-filter: blur(16px) saturate(1.2);
     -webkit-backdrop-filter: blur(16px) saturate(1.2);
-    // `max-height` must never animate: the box height is `auto`, so an
-    // interpolating `max-height` clamps the border box below its own content
-    // while `overflow` stays visible (popovers need it) — the text and the
-    // action row then paint *outside* the rounded border for the length of the
-    // transition. Only `min-height` is animated: it can never fall below the
-    // content, so it smooths the collapse without ever clipping the card.
-    transition:
-      border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-      padding 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-      min-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-      box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-      border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+    // The composer changes shape as the user types. Keep this high-frequency
+    // keyboard path immediate instead of tweening layout properties.
+    transition: none;
     box-shadow: 
-      0 8px 24px rgba(var(--color-static-black-rgb), 0.35),
-      inset 0 1px 0 var(--color-overlay-white-08),
-      inset 0 -1px 0 var(--color-overlay-white-04);
+      0 10px 28px rgba(var(--color-static-black-rgb), 0.24),
+      0 2px 8px var(--color-overlay-black-12),
+      inset 0 1px 0 var(--color-overlay-white-08);
     cursor: default;
     
     &::before {
@@ -662,7 +651,7 @@
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       box-shadow:
-        0 8px 24px rgba(var(--color-static-black-rgb), 0.18),
+        0 8px 22px rgba(var(--color-static-black-rgb), 0.16),
         inset 0 1px 0 var(--color-overlay-white-08);
 
       &:hover {
@@ -671,7 +660,7 @@
         backdrop-filter: blur(12px);
         -webkit-backdrop-filter: blur(12px);
         box-shadow:
-          0 12px 30px rgba(var(--color-static-black-rgb), 0.24),
+          0 10px 26px rgba(var(--color-static-black-rgb), 0.2),
           inset 0 1px 0 var(--color-overlay-white-08);
       }
 
@@ -716,11 +705,11 @@
     }
     
     &:focus-within {
-      border-color: var(--border-base);
+      border-color: color-mix(in srgb, var(--color-accent-500) 46%, var(--border-base));
       box-shadow: 
-        0 12px 32px rgba(var(--color-static-black-rgb), 0.45),
-        inset 0 1px 0 var(--color-overlay-white-12),
-        inset 0 -1px 0 var(--color-overlay-white-04);
+        0 0 0 2px color-mix(in srgb, var(--color-accent-500) 12%, transparent),
+        0 12px 30px rgba(var(--color-static-black-rgb), 0.28),
+        inset 0 1px 0 var(--color-overlay-white-12);
     }
     
     & > * {
@@ -761,10 +750,19 @@
     font-weight: 400;
     border-radius: 5px;
     cursor: pointer;
-    transition: color 0.15s ease, background 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     white-space: nowrap;
     outline: none;
 
+    &:focus-visible {
+      box-shadow: inset 0 0 0 1px var(--border-accent);
+      color: var(--color-text-primary);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.97);
+    }
+
     &:hover:not(#{&}--active) {
       color: var(--color-text-secondary);
       background: var(--color-overlay-white-04);
@@ -862,7 +860,9 @@
     box-shadow: 0 1px 3px rgba(var(--color-static-black-rgb), 0.35);
     opacity: 0;
     transform: scale(0.85);
-    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
+    transition:
+      opacity 140ms ease,
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
     &:hover {
       background: var(--element-bg-hover);
@@ -887,7 +887,9 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition:
+      opacity 140ms ease,
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     padding: 0;
     opacity: 0.3;
     
@@ -902,7 +904,13 @@
     }
     
     &:active {
-      transform: scale(0.95);
+      transform: scale(0.97);
+    }
+
+    &:focus-visible {
+      opacity: 1;
+      outline: 2px solid var(--border-accent);
+      outline-offset: 1px;
     }
   }
 
@@ -982,12 +990,18 @@
     color: inherit;
     cursor: pointer;
     opacity: 0.9;
-    transition: opacity 0.15s ease, background 0.15s ease;
+    transition:
+      opacity 140ms ease,
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
     &:hover {
       opacity: 1;
       background: color-mix(in srgb, currentColor 14%, transparent);
     }
+
+    &:active {
+      transform: scale(0.97);
+    }
   }
 
   &__agent-boost-empty {
@@ -1026,12 +1040,21 @@
     cursor: pointer;
     user-select: none;
     border-radius: 4px;
-    transition: background 0.15s ease, color 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
     &:hover {
       background: var(--element-bg-medium);
       color: var(--color-text-primary);
     }
+
+    &:active {
+      transform: scale(0.985);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 1px var(--border-accent);
+    }
   }
 
   &__boost-context-icon {
@@ -1043,7 +1066,7 @@
   &__boost-submenu-host {
     position: relative;
     border-radius: 4px;
-    transition: background 0.15s ease;
+    transition: none;
 
     &:hover {
       background: var(--element-bg-medium);
@@ -1071,7 +1094,7 @@
     color: var(--color-text-secondary);
     cursor: pointer;
     user-select: none;
-    transition: color 0.15s ease;
+    transition: none;
   }
 
   &__boost-submenu-trigger-main {
@@ -1131,7 +1154,7 @@
     flex-direction: column;
     background: var(--color-bg-elevated);
     border: 1px solid var(--border-subtle);
-    border-radius: 8px;
+    border-radius: 10px;
     box-shadow:
       0 8px 32px rgba(var(--color-static-black-rgb), 0.35),
       0 4px 16px var(--color-overlay-black-20),
@@ -1140,7 +1163,20 @@
     backdrop-filter: blur(20px) saturate(1.2);
     -webkit-backdrop-filter: blur(20px) saturate(1.2);
     overflow: hidden;
-    animation: mentionPickerSlideUp 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
+    transform-origin: left top;
+    animation: mentionPickerSlideUp 180ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  &__boost-submenu-shell--left &__boost-submenu-panel {
+    transform-origin: right top;
+  }
+
+  &__boost-submenu-shell--up &__boost-submenu-panel {
+    transform-origin: left bottom;
+  }
+
+  &__boost-submenu-shell--left#{&}__boost-submenu-shell--up &__boost-submenu-panel {
+    transform-origin: right bottom;
   }
 
   &__boost-submenu-loading,
@@ -1189,12 +1225,21 @@
     color: var(--color-text-primary);
     cursor: pointer;
     user-select: none;
-    transition: background 0.15s ease, color 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
     &:hover {
       background: var(--element-bg-medium);
       color: var(--color-text-primary);
     }
+
+    &:active {
+      transform: scale(0.985);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 1px var(--border-accent);
+    }
   }
 
   &__boost-submenu-item-icon {
@@ -1224,18 +1269,22 @@
     cursor: pointer;
     text-align: center;
     user-select: none;
-    transition: background 0.15s ease, color 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
     &:hover {
       background: var(--element-bg-medium);
       color: color-mix(in srgb, var(--color-accent-500) 94%, var(--color-text-primary));
     }
+
+    &:active {
+      transform: scale(0.985);
+    }
   }
 
   @keyframes mentionPickerSlideUp {
     from {
       opacity: 0;
-      transform: translateY(8px) scale(0.98);
+      transform: translateY(4px) scale(0.98);
     }
     to {
       opacity: 1;
@@ -1261,7 +1310,7 @@
     min-width: 200px;
     background: var(--color-bg-elevated);
     border: 1px solid var(--color-overlay-white-12);
-    border-radius: 6px;
+    border-radius: 10px;
     overflow: hidden;
     backdrop-filter: blur(20px) saturate(1.2);
     -webkit-backdrop-filter: blur(20px) saturate(1.2);
@@ -1270,7 +1319,8 @@
       0 0 1px var(--color-overlay-white-12),
       inset 0 1px 0 var(--color-overlay-white-08);
     z-index: $z-dropdown;
-    animation: mode-dropdown-fade-in 0.15s ease-out;
+    transform-origin: left bottom;
+    animation: mode-dropdown-fade-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
 
     &--agent-boost {
       min-width: 228px;
@@ -1285,7 +1335,7 @@
     font-size: var(--flowchat-font-size-2xs);
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1296,6 +1346,16 @@
       color: var(--color-text-primary);
     }
 
+    &:focus-visible:not(&--disabled) {
+      outline: none;
+      background: var(--element-bg-soft);
+      box-shadow: inset 0 0 0 1px var(--border-accent);
+    }
+
+    &:active:not(&--disabled) {
+      transform: scale(0.985);
+    }
+
     &:hover:not(&--disabled),
     &:focus-within:not(&--disabled) {
       .bitfun-chat-input__mode-default-button:not(.bitfun-chat-input__mode-default-button--active) {
@@ -1366,7 +1426,7 @@
     font-size: var(--flowchat-font-size-2xs);
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     display: flex;
     align-items: center;
     gap: var(--flowchat-inline-gap);
@@ -1375,6 +1435,10 @@
       background: var(--color-overlay-white-04);
       color: var(--color-text-primary);
     }
+
+    &:active {
+      transform: scale(0.985);
+    }
     
     &--expanded {
       .bitfun-chat-input__mode-submenu-label {
@@ -1522,7 +1586,7 @@
     max-height: 280px;
     background: var(--color-bg-elevated);
     border: 1px solid var(--border-subtle);
-    border-radius: 6px;
+    border-radius: 10px;
     overflow: hidden;
     backdrop-filter: blur(20px) saturate(1.2);
     -webkit-backdrop-filter: blur(20px) saturate(1.2);
@@ -1531,7 +1595,8 @@
       0 0 1px var(--color-overlay-white-12),
       inset 0 1px 0 var(--color-overlay-white-08);
     z-index: $z-dropdown;
-    animation: mode-dropdown-fade-in 0.15s ease-out;
+    // Slash commands are opened by typing, so their keyboard path is instant.
+    animation: none;
   }
   
   &__slash-command-header {
@@ -1607,7 +1672,7 @@
     gap: var(--flowchat-control-gap);
     padding: var(--flowchat-inline-gap) var(--flowchat-card-expanded-pad-x);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     min-width: 0;
     
     &:hover {
@@ -1617,6 +1682,10 @@
     &--selected {
       background: var(--element-bg-medium);
     }
+
+    &:active {
+      transform: scale(0.99);
+    }
     
     &--active {
       .bitfun-chat-input__slash-command-name {
@@ -1774,12 +1843,8 @@
     justify-content: center;
     cursor: pointer;
     transition:
-      transform 0.18s ease,
-      filter 0.18s ease,
-      box-shadow 0.18s ease,
-      border-color 0.18s ease,
-      background 0.18s ease,
-      color 0.18s ease;
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease;
     flex-shrink: 0;
     
     &:not(:disabled) {
@@ -1819,7 +1884,7 @@
     }
     
     &:active:not(:disabled) {
-      transform: scale(0.96);
+      transform: scale(0.97);
       filter: none;
       box-shadow:
         0 0 0 1px var(--color-overlay-black-40),
@@ -1907,11 +1972,8 @@
     align-items: center;
     justify-content: center;
     transition:
-      transform 0.18s ease,
-      filter 0.18s ease,
-      box-shadow 0.18s ease,
-      background 0.18s ease,
-      border-color 0.18s ease;
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease;
     background: rgba(var(--private-chat-input-send-surface-rgb), 0.96);
     border: 1px solid transparent;
     box-shadow: none;
@@ -2058,14 +2120,10 @@
 @keyframes bitfun-breathing-pulse {
   0%, 100% {
     transform: scale(1);
-    box-shadow: 0 0 12px color-mix(in srgb, var(--color-warning) 50%, transparent);
     opacity: 1;
   }
   50% {
     transform: scale(1.15);
-    box-shadow:
-      0 0 20px color-mix(in srgb, var(--color-warning) 80%, transparent),
-      0 0 30px color-mix(in srgb, var(--color-warning) 40%, transparent);
     opacity: 0.9;
   }
 }
@@ -2073,13 +2131,9 @@
 @keyframes bitfun-breathing-pulse-fast {
   0%, 100% {
     transform: scale(1);
-    box-shadow: 0 0 12px color-mix(in srgb, var(--color-warning) 60%, transparent);
   }
   50% {
     transform: scale(1.2);
-    box-shadow:
-      0 0 24px color-mix(in srgb, var(--color-warning) 90%, transparent),
-      0 0 40px color-mix(in srgb, var(--color-warning) 50%, transparent);
   }
 }
 
@@ -2127,3 +2181,36 @@
     transform: translateY(0);
   }
 }
+
+@media (hover: none), (pointer: coarse) {
+  .bitfun-chat-input__send-button:hover:not(:disabled),
+  .bitfun-chat-input__send-button--breathing:hover .bitfun-chat-input__breathing-circle,
+  .bitfun-chat-input__voice-pill-action:not(:disabled):hover,
+  .bitfun-chat-input__voice-pill-send:not(:disabled):hover {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-chat-input,
+  .bitfun-chat-input__input-area,
+  .bitfun-chat-input__actions,
+  .bitfun-chat-input__recommendations,
+  .bitfun-chat-input__action-button,
+  .bitfun-chat-input__send-button,
+  .bitfun-chat-input__breathing-circle,
+  .bitfun-chat-input__mode-option,
+  .bitfun-chat-input__mode-default-button,
+  .bitfun-chat-input__slash-command-item,
+  .bitfun-chat-input__boost-submenu-shell,
+  .bitfun-chat-input__boost-submenu-chevron {
+    transition-duration: 0ms;
+  }
+
+  .bitfun-chat-input__mode-dropdown,
+  .bitfun-chat-input__boost-submenu-panel,
+  .bitfun-chat-input__loading-spinner,
+  .bitfun-chat-input__boost-submenu-spinner {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 62ea7adcb3..f91f26d5be 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -5352,7 +5352,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   )}
 
                   {modeState.dropdownOpen && (
-                    <div className="bitfun-chat-input__mode-dropdown bitfun-chat-input__mode-dropdown--agent-boost">
+                    <div
+                      className="bitfun-chat-input__mode-dropdown bitfun-chat-input__mode-dropdown--agent-boost"
+                      role="menu"
+                      aria-label={t('chatInput.addModeMenuTitle')}
+                    >
                       {canSwitchModes && (
                         <>
                           <div className="bitfun-chat-input__boost-section">
@@ -5375,11 +5379,21 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                                   <Tooltip key={modeOption.id} content={modeDescription} placement="left">
                                     <div
                                       className={`bitfun-chat-input__mode-option ${modeState.current === modeOption.id ? 'bitfun-chat-input__mode-option--active' : ''}${modeDisabled ? ' bitfun-chat-input__mode-option--disabled' : ''}`}
+                                      role="menuitemradio"
+                                      aria-checked={modeState.current === modeOption.id}
+                                      aria-disabled={modeDisabled}
+                                      tabIndex={modeDisabled ? -1 : 0}
                                       onClick={e => {
                                         e.stopPropagation();
                                         if (modeDisabled) return;
                                         requestModeChange(modeOption.id);
                                       }}
+                                      onKeyDown={e => {
+                                        if (modeDisabled || (e.key !== 'Enter' && e.key !== ' ')) return;
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        requestModeChange(modeOption.id);
+                                      }}
                                     >
                                       <span className="bitfun-chat-input__mode-option-name">{modeName}</span>
                                       <span className="bitfun-chat-input__mode-option-actions">
@@ -5414,33 +5428,45 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
                       <div className="bitfun-chat-input__boost-section">
                         <div
-                          role="button"
+                          role="menuitem"
                           tabIndex={0}
                           className="bitfun-chat-input__boost-context-row"
                           onClick={handleBoostOpenAtContext}
-                          onKeyDown={e => e.key === 'Enter' && handleBoostOpenAtContext(e)}
+                          onKeyDown={e => {
+                            if (e.key !== 'Enter' && e.key !== ' ') return;
+                            e.preventDefault();
+                            handleBoostOpenAtContext(e);
+                          }}
                         >
                           <Files size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />
                           <span>{t('chatInput.boostAddContext')}</span>
                         </div>
 
                         <div
-                          role="button"
+                          role="menuitem"
                           tabIndex={0}
                           className="bitfun-chat-input__boost-context-row"
                           onClick={handleBoostPickImage}
-                          onKeyDown={e => e.key === 'Enter' && handleBoostPickImage(e as any)}
+                          onKeyDown={e => {
+                            if (e.key !== 'Enter' && e.key !== ' ') return;
+                            e.preventDefault();
+                            handleBoostPickImage(e as any);
+                          }}
                         >
                           <Image size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />
                           <span>{t('input.addImage')}</span>
                         </div>
 
                         <div
-                          role="button"
+                          role="menuitem"
                           tabIndex={0}
                           className="bitfun-chat-input__boost-context-row"
                           onClick={handleOpenCreateCustomMode}
-                          onKeyDown={e => e.key === 'Enter' && handleOpenCreateCustomMode(e)}
+                          onKeyDown={e => {
+                            if (e.key !== 'Enter' && e.key !== ' ') return;
+                            e.preventDefault();
+                            handleOpenCreateCustomMode(e);
+                          }}
                         >
                           <BotMessageSquare size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />
                           <span>{t('chatInput.createCustomMode')}</span>
@@ -5454,11 +5480,22 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                             onMouseLeave={closeSkillsFlyout}
                           >
                             <div
-                              role="button"
+                              role="menuitem"
                               tabIndex={0}
                               className="bitfun-chat-input__boost-submenu-trigger"
                               aria-haspopup="menu"
                               aria-expanded={skillsFlyoutOpen}
+                              onKeyDown={e => {
+                                if (e.key === 'Escape') {
+                                  e.preventDefault();
+                                  clearSkillsTimer();
+                                  setSkillsFlyoutOpen(false);
+                                  return;
+                                }
+                                if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowRight') return;
+                                e.preventDefault();
+                                openSkillsFlyout();
+                              }}
                             >
                               <span className="bitfun-chat-input__boost-submenu-trigger-main">
                                 <Sparkles size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />
diff --git a/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss b/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss
index 8c1ff24d3f..0404c259d5 100644
--- a/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss
+++ b/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss
@@ -3,10 +3,11 @@
  */
 
 .bitfun-cowork-example-cards {
-  border: 1px solid var(--border-base);
+  border: 1px solid var(--border-subtle);
   border-radius: calc(var(--flowchat-card-radius) + 2px);
-  padding: var(--flowchat-card-expanded-pad-x) var(--flowchat-card-expanded-pad-x) var(--flowchat-card-expanded-pad-x) 0;
+  padding: var(--flowchat-card-expanded-pad-x);
   margin-bottom: var(--flowchat-card-gap);
+  background: color-mix(in srgb, var(--element-bg-subtle) 46%, transparent);
 
   &__header {
     display: flex;
@@ -37,11 +38,24 @@
   &__card {
     cursor: pointer;
     user-select: none;
-    min-height: 86px;
+    min-height: 82px;
     display: flex;
     flex-direction: column;
     gap: var(--flowchat-inline-gap);
     padding: var(--flowchat-card-expanded-pad-x);
+    border-color: var(--border-subtle);
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 140ms ease;
+
+    &:active {
+      transform: scale(0.985);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-accent);
+      outline-offset: 2px;
+    }
   }
 
   &__card-header {
@@ -81,6 +95,12 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-cowork-example-cards__card {
+    transition-duration: 0ms;
+  }
+}
+
 @media (max-width: 720px) {
   .bitfun-cowork-example-cards {
     &__grid {
diff --git a/src/web-ui/src/flow_chat/components/CoworkExampleCards.tsx b/src/web-ui/src/flow_chat/components/CoworkExampleCards.tsx
index 82d0836963..b3b78f02f6 100644
--- a/src/web-ui/src/flow_chat/components/CoworkExampleCards.tsx
+++ b/src/web-ui/src/flow_chat/components/CoworkExampleCards.tsx
@@ -98,6 +98,7 @@ export const CoworkExampleCards: React.FC<CoworkExampleCardsProps> = ({
       const title = t(`coworkExamples.items.${example.id}.title`);
       const description = t(`coworkExamples.items.${example.id}.description`);
       const prompt = t(`coworkExamples.items.${example.id}.prompt`);
+      const handleSelect = () => onSelectPrompt(prompt);
 
       return (
         <Card
@@ -105,7 +106,14 @@ export const CoworkExampleCards: React.FC<CoworkExampleCardsProps> = ({
           className="bitfun-cowork-example-cards__card"
           variant="subtle"
           interactive
-          onClick={() => onSelectPrompt(prompt)}
+          role="button"
+          tabIndex={0}
+          onClick={handleSelect}
+          onKeyDown={(event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') return;
+            event.preventDefault();
+            handleSelect();
+          }}
         >
           <div className="bitfun-cowork-example-cards__card-header">
             <div className="bitfun-cowork-example-cards__card-icon">
diff --git a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
index ca59a41496..4270d0dc45 100644
--- a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
+++ b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
@@ -92,25 +92,30 @@
     height: 26px;
     padding: 0.2rem;
     transition:
-      transform 0.15s ease,
-      opacity 0.2s ease;
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 140ms ease;
   }
 
   .markdown-renderer .code-block-wrapper .copy-button:hover {
     background: transparent;
     color: var(--color-text-muted);
-    transform: scale(1.08);
+    transform: scale(1.03);
   }
 
   .markdown-renderer .code-block-wrapper .copy-button:active {
     background: transparent;
     color: var(--color-text-muted);
-    transform: scale(1.02);
+    transform: scale(0.97);
   }
 
   .markdown-renderer .code-block-wrapper .copy-button.copy-success:hover {
     color: var(--color-success);
-    transform: scale(1.08);
+    transform: scale(1.03);
+  }
+
+  .markdown-renderer .code-block-wrapper .copy-button:focus-visible {
+    outline: 2px solid var(--border-accent);
+    outline-offset: 1px;
   }
 
   /* MermaidBlock.scss adds a heavy hover shadow; keep chat diagrams flat. */
@@ -151,6 +156,12 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .flow-text-block .markdown-renderer .code-block-wrapper .copy-button {
+    transition-duration: 0ms;
+  }
+}
+
 /* Light theme: copy button icon color (scoped to flow chat). */
 :root[data-theme='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button:hover,
 :root[data-theme-type='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button:hover,
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.scss b/src/web-ui/src/flow_chat/components/ModelSelector.scss
index 3b91061cf5..a6a517df90 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.scss
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.scss
@@ -22,18 +22,23 @@
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    height: 20px;
-    padding: 0 8px;
-    border-radius: 10px;
-    border: none;
-    background: transparent;
+    height: 26px;
+    padding: 0 7px;
+    border-radius: 7px;
+    border: 1px solid transparent;
+    background: color-mix(in srgb, var(--element-bg-subtle) 72%, transparent);
     color: var(--color-text-secondary);
     font-size: var(--flowchat-font-size-2xs);
-    font-weight: 400;
+    font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition:
+      color 140ms ease,
+      background-color 140ms ease,
+      border-color 140ms ease,
+      opacity 140ms ease,
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     outline: none;
-    opacity: 0.3;
+    opacity: 0.72;
     white-space: nowrap;
     letter-spacing: 0.3px;
     
@@ -47,9 +52,20 @@
       color: var(--color-text-primary);
       opacity: 1;
     }
+
+    &:active:not(:disabled) {
+      transform: scale(0.97);
+    }
+
+    &:focus-visible {
+      border-color: var(--border-accent);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-500) 20%, transparent);
+      opacity: 1;
+    }
     
     &--open {
       background: color-mix(in srgb, var(--color-accent-500) 15%, transparent);
+      border-color: color-mix(in srgb, var(--color-accent-500) 24%, transparent);
       color: var(--color-text-primary);
       opacity: 1;
     }
@@ -112,7 +128,7 @@
     color: var(--color-text-muted);
     opacity: 0.55;
     letter-spacing: 0.2px;
-    transition: color 0.3s ease, opacity 0.3s ease;
+    transition: opacity 160ms ease;
     flex-shrink: 0;
 
     &--warning {
@@ -147,7 +163,7 @@
     max-width: clamp(0px, 280px, calc(100vw - 16px));
     background: var(--color-bg-elevated);
     border: 1px solid var(--color-overlay-white-12);
-    border-radius: 6px;
+    border-radius: 10px;
     overflow: hidden;
     backdrop-filter: blur(20px) saturate(1.2);
     -webkit-backdrop-filter: blur(20px) saturate(1.2);
@@ -158,7 +174,16 @@
     // This menu is portaled to document.body, so it must clear overlay-hosted
     // surfaces such as FloatingMiniChat instead of inheriting their stack.
     z-index: $z-popover;
-    animation: bitfun-model-dropdown-fade-in 0.15s ease-out;
+    transform-origin: left bottom;
+    animation: bitfun-model-dropdown-fade-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
+
+    &[data-placement='bottom'] {
+      transform-origin: left top;
+    }
+
+    &[data-keyboard-open='true'] {
+      animation: none;
+    }
   }
   
   &__dropdown-header {
@@ -246,12 +271,33 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    padding: 7px 12px;
+    width: 100%;
+    min-height: 34px;
+    padding: 7px 10px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition:
+      background-color 140ms ease,
+      color 140ms ease,
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
     
-    &:hover {
+    &:hover,
+    &:focus-visible {
       background: var(--color-accent-100);
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 42%, transparent);
+    }
+
+    &:active {
+      transform: scale(0.985);
     }
     
     &--selected {
@@ -366,7 +412,7 @@
 @keyframes bitfun-model-dropdown-fade-in {
   from {
     opacity: 0;
-    transform: translateY(4px);
+    transform: translateY(4px) scale(0.98);
   }
   to {
     opacity: 1;
@@ -378,3 +424,16 @@
   0%, 100% { opacity: 0.8; }
   50%       { opacity: 1; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-model-selector__trigger,
+  .bitfun-model-selector__option,
+  .bitfun-model-selector__chevron {
+    transition-duration: 0ms;
+  }
+
+  .bitfun-model-selector__dropdown,
+  .bitfun-model-selector__ctx-usage--critical {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
index 5790d22f23..35c8c6b057 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -8,7 +8,7 @@
  * - Supports 'auto' | 'primary' | 'fast' | specific model IDs
  */
 
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useId, useRef, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { Brain, ChevronDown, Check, Zap } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -179,12 +179,15 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const [modeModel, setModeModel] = useState('auto');
   const [acpOptions, setAcpOptions] = useState<AcpSessionOptions | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [keyboardNavigationOpen, setKeyboardNavigationOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const acpRestoreToastShownRef = useRef<string | null>(null);
   const acpOptionsRef = useRef<AcpSessionOptions | null>(null);
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const portalDropdownRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuId = useId();
 
   useEffect(() => {
     onLoadingChange?.(loading);
@@ -610,6 +613,71 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     loading,
     sessionId,
   ]);
+
+  const handleTriggerKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setKeyboardNavigationOpen(true);
+      setDropdownOpen(true);
+      if (isAcpSession) {
+        void loadAcpOptions();
+      }
+      return;
+    }
+
+    if (event.key === 'Escape' && dropdownOpen) {
+      event.preventDefault();
+      setDropdownOpen(false);
+      setKeyboardNavigationOpen(false);
+    }
+  }, [dropdownOpen, isAcpSession, loadAcpOptions]);
+
+  const handleDropdownKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      setDropdownOpen(false);
+      setKeyboardNavigationOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      return;
+    }
+
+    const items = Array.from(
+      event.currentTarget.querySelectorAll<HTMLButtonElement>(
+        'button[role="menuitemradio"]:not(:disabled)',
+      ),
+    );
+    if (items.length === 0) return;
+
+    event.preventDefault();
+    const activeIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+    let nextIndex = activeIndex;
+    if (event.key === 'Home') nextIndex = 0;
+    if (event.key === 'End') nextIndex = items.length - 1;
+    if (event.key === 'ArrowDown') nextIndex = activeIndex < 0 ? 0 : (activeIndex + 1) % items.length;
+    if (event.key === 'ArrowUp') nextIndex = activeIndex < 0 ? items.length - 1 : (activeIndex - 1 + items.length) % items.length;
+    items[nextIndex]?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!dropdownOpen || !keyboardNavigationOpen) return;
+
+    const frameId = window.requestAnimationFrame(() => {
+      const menu = portalDropdownRef.current;
+      const selectedItem = menu?.querySelector<HTMLButtonElement>(
+        'button[role="menuitemradio"][aria-checked="true"]',
+      );
+      const firstItem = menu?.querySelector<HTMLButtonElement>(
+        'button[role="menuitemradio"]:not(:disabled)',
+      );
+      (selectedItem ?? firstItem)?.focus();
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, [dropdownOpen, keyboardNavigationOpen]);
   
   const tokenPercentage = useMemo(() => {
     if (!maxTokens || maxTokens <= 0 || !currentTokens) return 0;
@@ -649,13 +717,20 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       >
         <Tooltip content={acpTooltip}>
           <button
+            ref={triggerRef}
             data-testid="chat-model-selector-btn"
             className={`bitfun-model-selector__trigger ${dropdownOpen ? 'bitfun-model-selector__trigger--open' : ''}`}
-            onClick={() => {
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded={dropdownOpen}
+            aria-controls={dropdownOpen ? menuId : undefined}
+            onKeyDown={handleTriggerKeyDown}
+            onClick={(event) => {
               const nextOpen = !dropdownOpen;
+              setKeyboardNavigationOpen(nextOpen && event.detail === 0);
               setDropdownOpen(nextOpen);
               if (nextOpen) {
-                loadAcpOptions();
+                void loadAcpOptions();
               }
             }}
             disabled={loading}
@@ -677,10 +752,16 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
         {dropdownOpen && createPortal(
           <div
+            id={menuId}
             className="bitfun-model-selector__dropdown"
             ref={portalDropdownRef}
             style={dropdownStyle}
             data-testid="chat-model-selector-menu"
+            data-keyboard-open={keyboardNavigationOpen ? 'true' : 'false'}
+            data-placement={dropdownPlacement}
+            role="menu"
+            aria-label="ACP model"
+            onKeyDown={handleDropdownKeyDown}
           >
             <div className="bitfun-model-selector__dropdown-header">
               <span>ACP model</span>
@@ -695,7 +776,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
                 return (
                   <Tooltip key={model.id} content={model.id} placement="right">
-                    <div
+                    <button
+                      type="button"
+                      role="menuitemradio"
+                      aria-checked={isSelected}
                       data-testid="chat-model-selector-option"
                       data-model-id={model.id}
                       data-model-name={model.modelName}
@@ -711,7 +795,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       {isSelected && (
                         <Check size={14} className="bitfun-model-selector__option-check" />
                       )}
-                    </div>
+                    </button>
                   </Tooltip>
                 );
               })}
@@ -770,9 +854,19 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     >
       <Tooltip content={tooltipContent}>
         <button
+          ref={triggerRef}
           data-testid="chat-model-selector-btn"
           className={`bitfun-model-selector__trigger ${dropdownOpen ? 'bitfun-model-selector__trigger--open' : ''}`}
-          onClick={() => setDropdownOpen(!dropdownOpen)}
+          type="button"
+          aria-haspopup="menu"
+          aria-expanded={dropdownOpen}
+          aria-controls={dropdownOpen ? menuId : undefined}
+          onKeyDown={handleTriggerKeyDown}
+          onClick={(event) => {
+            const nextOpen = !dropdownOpen;
+            setKeyboardNavigationOpen(nextOpen && event.detail === 0);
+            setDropdownOpen(nextOpen);
+          }}
           disabled={loading}
         >
           <span className="bitfun-model-selector__name">
@@ -797,17 +891,26 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
       {dropdownOpen && createPortal(
         <div
+          id={menuId}
           className="bitfun-model-selector__dropdown"
           ref={portalDropdownRef}
           style={dropdownStyle}
           data-testid="chat-model-selector-menu"
+          data-keyboard-open={keyboardNavigationOpen ? 'true' : 'false'}
+          data-placement={dropdownPlacement}
+          role="menu"
+          aria-label={t('modelSelector.modelSelection')}
+          onKeyDown={handleDropdownKeyDown}
         >
           <div className="bitfun-model-selector__dropdown-header">
             <span>{t('modelSelector.modelSelection')}</span>
           </div>
 
           <Tooltip content={t('modelSelector.autoModelDesc')} placement="right">
-            <div
+            <button
+              type="button"
+              role="menuitemradio"
+              aria-checked={currentModelId === 'auto'}
               data-testid="chat-model-selector-option"
               data-model-id="auto"
               data-model-name="auto"
@@ -821,7 +924,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               {currentModelId === 'auto' && (
                 <Check size={14} className="bitfun-model-selector__option-check" />
               )}
-            </div>
+            </button>
           </Tooltip>
 
           {(() => {
@@ -834,7 +937,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               : t('modelSelector.autoModelDesc');
             return (
               <Tooltip content={primaryTooltip} placement="right">
-                <div
+                <button
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={currentModelId === 'primary'}
                   data-testid="chat-model-selector-option"
                   data-model-id="primary"
                   data-model-name={primaryModel?.model_name || 'primary'}
@@ -848,7 +954,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                   {currentModelId === 'primary' && (
                     <Check size={14} className="bitfun-model-selector__option-check" />
                   )}
-                </div>
+                </button>
               </Tooltip>
             );
           })()}
@@ -863,7 +969,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               : t('modelSelector.autoModelDesc');
             return (
               <Tooltip content={fastTooltip} placement="right">
-                <div
+                <button
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={currentModelId === 'fast'}
                   data-testid="chat-model-selector-option"
                   data-model-id="fast"
                   data-model-name={fastModel?.model_name || 'fast'}
@@ -877,7 +986,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                   {currentModelId === 'fast' && (
                     <Check size={14} className="bitfun-model-selector__option-check" />
                   )}
-                </div>
+                </button>
               </Tooltip>
             );
           })()}
@@ -890,7 +999,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
               return (
                 <Tooltip key={model.id} content={buildModelMetaText(model)} placement="right">
-                  <div
+                  <button
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={isSelected}
                     data-testid="chat-model-selector-option"
                     data-model-id={model.id}
                     data-model-name={model.modelName}
@@ -909,7 +1021,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                     {isSelected && (
                       <Check size={14} className="bitfun-model-selector__option-check" />
                     )}
-                  </div>
+                  </button>
                 </Tooltip>
               );
             })}
diff --git a/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss b/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
index 06eccb983c..c2ea813513 100644
--- a/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
+++ b/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
@@ -22,17 +22,17 @@
   flex-direction: column;
   gap: 4px;
   margin: 4px 0 2px;
-  padding: 6px 8px 8px;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--color-accent-400) 5%, var(--color-bg-scene));
-  border: 1px solid color-mix(in srgb, var(--color-accent-400) 20%, transparent);
+  padding: 7px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--element-bg-subtle) 62%, var(--color-bg-scene));
+  border: 1px solid color-mix(in srgb, var(--color-accent-400) 18%, var(--border-base));
   box-shadow:
-    0 1px 3px color-mix(in srgb, var(--color-accent-400) 10%, transparent),
-    inset 0 0 0 1px color-mix(in srgb, var(--color-accent-400) 6%, transparent);
+    0 8px 22px var(--color-overlay-black-12),
+    inset 0 1px 0 var(--color-overlay-white-04);
   max-height: 260px;
   overflow-y: auto;
   scrollbar-width: thin;
-  animation: bitfun-pending-queue-fade-in 180ms ease-out;
+  animation: bitfun-pending-queue-fade-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -87,17 +87,17 @@
     /* Match first text line, not the whole content stack (preview + status). */
     align-items: flex-start;
     gap: 8px;
-    padding: 4px 2px;
-    border-radius: 0;
+    padding: 5px 6px;
+    border-radius: 6px;
     background: transparent;
     border: none;
     box-shadow: none;
     transition: opacity 140ms ease;
-    animation: bitfun-pending-queue-fade-in 160ms ease-out;
+    animation: bitfun-pending-queue-fade-in 160ms cubic-bezier(0.23, 1, 0.32, 1);
     position: relative;
 
     &:hover {
-      background: transparent;
+      background: var(--element-bg-subtle);
       border: none;
       box-shadow: none;
 
@@ -106,6 +106,14 @@
       }
     }
 
+    &:focus-within {
+      background: var(--element-bg-subtle);
+
+      .bitfun-pending-queue-panel__actions {
+        opacity: 1;
+      }
+    }
+
     &--editing {
       align-items: center;
       background: transparent;
@@ -148,6 +156,12 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
     cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--border-accent);
+      outline-offset: 2px;
+      border-radius: 3px;
+    }
   }
 
   &__preview-empty {
@@ -192,8 +206,8 @@
 
     &:focus {
       outline: none;
-      border-color: color-mix(in srgb, var(--color-accent-400) 28%, transparent);
-      box-shadow: none;
+      border-color: color-mix(in srgb, var(--color-accent-400) 58%, transparent);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-400) 14%, transparent);
     }
   }
 
@@ -210,7 +224,7 @@
     flex: 0 0 auto;
     align-items: center;
     margin-top: 0;
-    opacity: 0.55;
+    opacity: 0.72;
     transition: opacity 140ms ease;
   }
 
@@ -231,9 +245,8 @@
   &__btn {
     color: var(--color-text-secondary);
     transition:
-      background 140ms ease,
-      color 140ms ease,
-      transform 120ms ease;
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 140ms ease;
 
     &:hover:not(:disabled) {
       background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
@@ -246,8 +259,7 @@
       &:hover:not(:disabled) {
         background: color-mix(in srgb, var(--color-accent-400) 16%, transparent);
         color: var(--color-accent-400);
-        box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-400) 30%, transparent);
-        transform: translateY(-1px);
+        box-shadow: none;
       }
     }
 
@@ -262,5 +274,27 @@
       opacity: 0.4;
       cursor: not-allowed;
     }
+
+    &:active:not(:disabled) {
+      transform: scale(0.97);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-accent);
+      outline-offset: 1px;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-pending-queue-panel,
+  .bitfun-pending-queue-panel__item,
+  .bitfun-pending-queue-panel__sending-label svg {
+    animation: none;
+  }
+
+  .bitfun-pending-queue-panel__actions,
+  .bitfun-pending-queue-panel__btn {
+    transition-duration: 0ms;
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/RichTextInput.scss b/src/web-ui/src/flow_chat/components/RichTextInput.scss
index 0ef3551ac0..7840ecfee5 100644
--- a/src/web-ui/src/flow_chat/components/RichTextInput.scss
+++ b/src/web-ui/src/flow_chat/components/RichTextInput.scss
@@ -12,7 +12,7 @@
   outline: none !important;
   color: var(--color-text-primary);
   font-size: var(--flowchat-font-size-base);
-  line-height: $line-height-base;
+  line-height: var(--flowchat-text-line-height);
   padding: 0;
   vertical-align: top;
   min-height: 24px;
@@ -24,6 +24,7 @@
   word-break: break-word;
   cursor: text;
   box-shadow: none !important;
+  caret-color: var(--color-accent-500);
 
   // Hide scrollbars while keeping scroll functionality
   scrollbar-width: none; // Firefox
@@ -85,7 +86,9 @@
   user-select: text;
   vertical-align: middle;
   line-height: var(--flowchat-support-line-height);
-  transition: all 0.2s ease;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 120ms ease;
   white-space: nowrap;
   
   &:hover {
@@ -104,10 +107,16 @@
     }
   }
   
-  &:focus {
+  &:focus,
+  &:focus-visible {
     outline: none;
     background: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
     border-color: color-mix(in srgb, var(--color-accent-500) 60%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-500) 18%, transparent);
+  }
+
+  &:active {
+    transform: scale(0.98);
   }
 }
 
@@ -141,7 +150,9 @@
   user-select: none;
   vertical-align: middle;
   line-height: var(--flowchat-support-line-height);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 120ms ease;
   
   &:hover {
     background: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
@@ -290,7 +301,9 @@
   line-height: 1;
   cursor: pointer;
   border-radius: 50%;
-  transition: all 0.2s ease;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 120ms ease;
   
   &:hover {
     background: var(--color-overlay-white-20);
@@ -298,6 +311,20 @@
   }
   
   &:active {
-    transform: scale(0.85);
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-accent);
+    outline-offset: 1px;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rich-text-placeholder,
+  .rich-text-tag-pill,
+  .rich-text-tag-pill__remove {
+    transition-duration: 0ms;
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
index 4a43aa0cf6..945f4555ad 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
+++ b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
@@ -11,50 +11,49 @@
   align-items: center;
   justify-content: center;
   
-  width: 40px;
-  height: 40px;
+  width: 34px;
+  height: 34px;
   padding: 0;
 
   // Theme-aware surface so the control separates from the transcript; icon uses primary text (SVG stroke)
   background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
   color: var(--color-text-primary);
 
-  border: 2px solid var(--color-text-primary);
-  border-radius: 10px;
+  border: 1px solid var(--border-medium);
+  border-radius: 50%;
 
   backdrop-filter: blur(14px) saturate(1.15);
   -webkit-backdrop-filter: blur(14px) saturate(1.15);
 
   box-shadow:
-    0 4px 18px rgba(var(--color-static-black-rgb), 0.38),
-    0 0 0 1px color-mix(in srgb, var(--color-text-primary) 28%, transparent),
-    inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 12%, transparent);
+    0 8px 20px rgba(var(--color-static-black-rgb), 0.24),
+    inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 10%, transparent);
   
   cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 140ms ease;
   
   z-index: 10;
 
   &:hover {
     background: color-mix(in srgb, var(--color-bg-elevated) 98%, transparent);
     color: var(--color-text-primary);
-    border-color: var(--color-text-primary);
-    transform: translateY(-2px);
+    border-color: var(--border-strong);
+    transform: translateY(-1px);
 
     box-shadow:
-      0 8px 22px rgba(var(--color-static-black-rgb), 0.42),
-      0 0 0 1px color-mix(in srgb, var(--color-text-primary) 40%, transparent),
+      0 10px 24px rgba(var(--color-static-black-rgb), 0.28),
       inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 16%, transparent);
   }
 
   &:active {
-    transform: translateY(0);
-    transition: all 0.1s ease;
+    transform: scale(0.97);
   }
 
   &:focus-visible {
-    outline: 3px solid var(--color-text-primary);
-    outline-offset: 3px;
+    outline: 2px solid var(--border-accent);
+    outline-offset: 2px;
   }
 
   .scroll-icon {
@@ -99,8 +98,13 @@
   .scroll-to-bottom-button {
     bottom: 60px; /* Closer to the bottom on mobile */
     right: 16px;
-    width: 40px;
-    height: 40px;
+    width: 34px;
+    height: 34px;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .scroll-to-bottom-button {
+    transition-duration: 0ms;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx
index 4896a0e938..9cb037d399 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx
+++ b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx
@@ -28,6 +28,7 @@ export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({
   return (
     <Tooltip content={t('scroll.toBottom')}>
       <button
+        type="button"
         className={`scroll-to-bottom-button ${className}`}
         onClick={onClick}
         aria-label={unreadCount ? t('scroll.toBottomWithCount', { count: unreadCount }) : t('scroll.toBottom')}
@@ -52,4 +53,3 @@ export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({
     </Tooltip>
   );
 };
-
diff --git a/src/web-ui/src/flow_chat/components/ScrollToLatestBar.scss b/src/web-ui/src/flow_chat/components/ScrollToLatestBar.scss
index cf4635e006..b2138ce3fa 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToLatestBar.scss
+++ b/src/web-ui/src/flow_chat/components/ScrollToLatestBar.scss
@@ -16,7 +16,8 @@
   // Active non-expanded: ~80px input + 4px gap + 6px clearance + 24px gradient ≈ 114px.
   height: 114px;
   
-  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  // Height follows live composer measurements; do not animate layout.
+  transition: none;
   
   // ========== ChatInput collapsed ==========
   &--input-collapsed {
@@ -62,7 +63,7 @@
     align-items: center;
     justify-content: center;
     
-    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+    transition: opacity 140ms ease;
   }
   
   // ========== Circle arrow button ==========
@@ -70,17 +71,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
-    border: 1.5px solid var(--border-base);
-    background: var(--color-bg-scene);
-    color: var(--color-text-muted);
+    border: 1px solid var(--border-medium);
+    background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
+    color: var(--color-text-secondary);
+    box-shadow: 0 6px 16px var(--color-overlay-black-15);
     cursor: pointer;
     pointer-events: none;
     padding: 0;
     
-    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease;
   }
   
   // ========== Hover state ==========
@@ -88,14 +92,14 @@
     .scroll-to-latest-bar__btn {
       border-color: var(--border-medium);
       color: var(--color-text-primary);
-      transform: translateY(1px);
+      transform: translateY(-1px);
     }
   }
   
   // ========== Active state ==========
   &:active {
     .scroll-to-latest-bar__btn {
-      transform: translateY(2px);
+      transform: scale(0.97);
     }
   }
   
@@ -110,6 +114,13 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .scroll-to-latest-bar__content,
+  .scroll-to-latest-bar__btn {
+    transition-duration: 0ms;
+  }
+}
+
 // ========== Responsive tweaks ==========
 @media (max-width: 768px) {
   .scroll-to-latest-bar {
diff --git a/src/web-ui/src/flow_chat/components/ScrollToLatestBar.tsx b/src/web-ui/src/flow_chat/components/ScrollToLatestBar.tsx
index 895c39b4c9..deaefa660c 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToLatestBar.tsx
+++ b/src/web-ui/src/flow_chat/components/ScrollToLatestBar.tsx
@@ -81,11 +81,11 @@ export const ScrollToLatestBar: React.FC<ScrollToLatestBarProps> = ({
       <div className="scroll-to-latest-bar__gradient" />
       
       <div className="scroll-to-latest-bar__content" style={contentStyle}>
-        <button className="scroll-to-latest-bar__btn" aria-hidden="true" tabIndex={-1}>
+        <span className="scroll-to-latest-bar__btn" aria-hidden="true">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M8 3.5V12.5M8 12.5L4 8.5M8 12.5L12 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
-        </button>
+        </span>
       </div>
     </div>
   );
diff --git a/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss b/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss
index 2cf16e9f21..ced7940e0a 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss
+++ b/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.scss
@@ -15,7 +15,7 @@
   height: 72px;
 
   opacity: 0;
-  transition: opacity 0.25s ease;
+  transition: opacity 140ms ease;
 
   // ========== Visible state ==========
   &--visible {
@@ -48,7 +48,7 @@
     align-items: center;
     justify-content: center;
 
-    transition: transform 0.15s ease;
+    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   // ========== Circle arrow button ==========
@@ -56,16 +56,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
-    border: 1.5px solid var(--border-base);
-    background: var(--color-bg-scene);
-    color: var(--color-text-muted);
+    border: 1px solid var(--border-medium);
+    background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
+    color: var(--color-text-secondary);
+    box-shadow: 0 6px 16px var(--color-overlay-black-15);
     cursor: pointer;
     padding: 0;
 
-    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease;
 
     &:hover {
       border-color: var(--border-medium);
@@ -74,17 +77,26 @@
     }
 
     &:active {
-      transform: translateY(-2px);
+      transform: scale(0.97);
     }
 
     &:focus-visible {
-      outline: none;
-      border-color: var(--border-strong);
+      outline: 2px solid var(--border-accent);
+      outline-offset: 2px;
+      border-color: var(--border-medium);
       color: var(--color-text-primary);
     }
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .scroll-to-turn-header-trigger,
+  .scroll-to-turn-header-trigger__content,
+  .scroll-to-turn-header-trigger__btn {
+    transition-duration: 0ms;
+  }
+}
+
 // ========== Responsive tweaks ==========
 @media (max-width: 768px) {
   .scroll-to-turn-header-trigger {
diff --git a/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.tsx b/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.tsx
index 4127aaacaf..53291f5c68 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.tsx
+++ b/src/web-ui/src/flow_chat/components/ScrollToTurnHeaderButton.tsx
@@ -33,6 +33,7 @@ export const ScrollToTurnHeaderButton: React.FC<ScrollToTurnHeaderButtonProps> =
       <div className="scroll-to-turn-header-trigger__content">
         <Tooltip content={turnLabel || t('scroll.toCurrentTurn')}>
           <button
+            type="button"
             className="scroll-to-turn-header-trigger__btn"
             onClick={onClick}
             aria-label={turnLabel || t('scroll.toCurrentTurn')}
diff --git a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss
index a19303afbd..c5f95057e0 100644
--- a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss
+++ b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.scss
@@ -15,7 +15,7 @@
   height: 60px;
 
   opacity: 0;
-  transition: opacity 0.25s ease;
+  transition: opacity 140ms ease;
 
   // ========== Visible state ==========
   &--visible {
@@ -48,7 +48,7 @@
     align-items: center;
     justify-content: center;
 
-    transition: transform 0.15s ease;
+    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   // ========== Task label button ==========
@@ -61,14 +61,17 @@
     padding: 0 10px;
     border-radius: 999px;
     border: 1px solid var(--border-base);
-    background: var(--color-bg-scene);
-    color: var(--color-text-muted);
+    background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
+    color: var(--color-text-secondary);
     cursor: pointer;
     font-size: var(--flowchat-font-size-xs);
     line-height: 1;
     white-space: nowrap;
 
-    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+    box-shadow: 0 6px 16px var(--color-overlay-black-15);
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease;
 
     &:hover {
       border-color: var(--border-medium);
@@ -77,14 +80,14 @@
     }
 
     &:active {
-      transform: translateY(-2px);
+      transform: scale(0.97);
     }
 
     &:focus-visible {
-      outline: none;
-      border-color: var(--border-strong);
+      outline: 2px solid var(--border-accent);
+      outline-offset: 2px;
+      border-color: var(--border-medium);
       color: var(--color-text-primary);
-      box-shadow: 0 0 0 1.5px var(--border-strong);
     }
   }
 
@@ -106,6 +109,14 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .sticky-task-indicator,
+  .sticky-task-indicator__content,
+  .sticky-task-indicator__btn {
+    transition-duration: 0ms;
+  }
+}
+
 // ========== Responsive tweaks ==========
 @media (max-width: 768px) {
   .sticky-task-indicator {
diff --git a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx
index f5d42f496e..ae46074437 100644
--- a/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx
+++ b/src/web-ui/src/flow_chat/components/StickyTaskIndicator.tsx
@@ -37,6 +37,7 @@ export const StickyTaskIndicator: React.FC<StickyTaskIndicatorProps> = ({
       <div className="sticky-task-indicator__content">
         <Tooltip content={tooltip} placement="bottom">
           <button
+            type="button"
             className="sticky-task-indicator__btn"
             onClick={onClick}
             aria-label={tooltip}
diff --git a/src/web-ui/src/flow_chat/components/ToolApprovalBar.scss b/src/web-ui/src/flow_chat/components/ToolApprovalBar.scss
index dbdd33c556..5823725f8e 100644
--- a/src/web-ui/src/flow_chat/components/ToolApprovalBar.scss
+++ b/src/web-ui/src/flow_chat/components/ToolApprovalBar.scss
@@ -5,11 +5,11 @@
   justify-content: flex-start;
   gap: 6px;
   margin: 0 0 var(--flowchat-card-gap);
-  padding: 7px var(--tool-card-expanded-pad-x);
-  border: 1px solid var(--color-warning);
-  border-radius: var(--flowchat-card-radius);
-  background: color-mix(in srgb, var(--color-warning) 7%, var(--color-bg-scene));
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 12%, transparent);
+  padding: 8px var(--tool-card-expanded-pad-x);
+  border: 1px solid color-mix(in srgb, var(--color-warning) 42%, var(--border-base));
+  border-radius: calc(var(--flowchat-card-radius) + 1px);
+  background: color-mix(in srgb, var(--color-warning) 6%, var(--color-bg-scene));
+  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-warning) 72%, transparent);
   box-sizing: border-box;
 }
 
@@ -83,13 +83,13 @@
   min-width: 0;
   height: 28px;
   padding: 0 8px;
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--border-base);
   border-radius: 6px;
   background: var(--color-bg-primary);
   color: var(--color-text-primary);
   font-size: var(--flowchat-font-size-sm);
   outline: none;
-  box-shadow: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 12%, transparent);
 }
 
 .tool-approval-bar__instruction-submit {
@@ -102,12 +102,26 @@
   color: var(--color-error);
   font-size: var(--flowchat-font-size-sm);
   cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .tool-approval-bar__instruction-submit:hover {
   background: color-mix(in srgb, var(--color-error) 16%, transparent);
 }
 
+.tool-approval-bar__instruction-submit:active:not(:disabled),
+.tool-approval-bar__icon-button:active:not(:disabled),
+.tool-approval-bar__auto-execute-button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.tool-approval-bar__instruction-submit:focus-visible,
+.tool-approval-bar__icon-button:focus-visible,
+.tool-approval-bar__auto-execute-button:focus-visible {
+  outline: 2px solid var(--border-accent);
+  outline-offset: 1px;
+}
+
 @media (max-width: 640px) {
   .tool-approval-bar__main,
   .tool-approval-bar__instruction {
@@ -120,3 +134,11 @@
     justify-content: flex-start;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-approval-bar__instruction-submit,
+  .tool-approval-bar__icon-button,
+  .tool-approval-bar__auto-execute-button {
+    transition-duration: 0ms;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.css b/src/web-ui/src/flow_chat/components/WelcomePanel.css
index 0c4edd8d32..3dfdefd1c1 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.css
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.css
@@ -9,19 +9,19 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: var(--size-gap-8) var(--size-gap-6);
+  padding: clamp(var(--size-gap-6), 6vh, var(--size-gap-10)) var(--size-gap-6);
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  animation: wp-fadeIn 0.35s ease-out;
+  animation: wp-fadeIn 220ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .welcome-panel__content {
   display: flex;
   flex-direction: column;
-  gap: var(--size-gap-6);
+  gap: var(--size-gap-5);
   width: 100%;
-  max-width: 520px;
+  max-width: 640px;
 }
 
 /* ── Greeting ── */
@@ -35,7 +35,7 @@
 .welcome-panel__greeting-inner {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
   gap: var(--size-gap-4);
 }
 
@@ -51,7 +51,7 @@
 .welcome-panel__panda {
   position: relative;
   flex-shrink: 0;
-  width: 88px;
+  width: 72px;
   user-select: none;
   image-rendering: pixelated;
   cursor: default;
@@ -86,17 +86,18 @@
 
 .welcome-panel__heading {
   margin: 0;
-  font-size: calc(var(--flowchat-font-size-3xl) + 4px);
-  font-weight: 700;
+  font-size: calc(var(--flowchat-font-size-3xl) + 2px);
+  font-weight: 650;
   color: var(--color-text-primary);
   line-height: var(--flowchat-compact-line-height);
   letter-spacing: -0.02em;
 }
 
 .welcome-panel__tagline {
-  margin: 6px 0 0;
-  font-size: var(--flowchat-font-size-lg);
-  color: var(--color-text-muted);
+  margin: 4px 0 0;
+  max-width: 52ch;
+  font-size: var(--flowchat-font-size-base);
+  color: var(--color-text-secondary);
   line-height: var(--flowchat-support-line-height);
 }
 
@@ -104,7 +105,7 @@
 
 .welcome-panel__divider {
   height: 1px;
-  background: var(--border-subtle);
+  background: linear-gradient(90deg, var(--border-base), transparent 82%);
 }
 
 /* ── Narrative ── */
@@ -115,7 +116,7 @@
 
 .welcome-panel__narrative-text {
   margin: 0;
-  font-size: var(--flowchat-font-size-lg);
+  font-size: var(--flowchat-font-size-base);
   line-height: var(--flowchat-text-line-height);
   color: var(--color-text-muted);
 }
@@ -137,7 +138,8 @@
   display: inline-flex;
   align-items: center;
   gap: 0.18rem;
-  padding: 0 5px;
+  min-height: 24px;
+  padding: 0 6px;
   margin: 0 1px;
   background: none;
   border: none;
@@ -149,7 +151,7 @@
   line-height: inherit;
   cursor: default;
   vertical-align: baseline;
-  transition: background 0.15s;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .welcome-panel__inline-btn--interactive {
@@ -160,6 +162,15 @@
   background: var(--element-bg-subtle);
 }
 
+.welcome-panel__inline-btn:focus-visible {
+  outline: 2px solid var(--border-accent);
+  outline-offset: 1px;
+}
+
+.welcome-panel__inline-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 .welcome-panel__inline-btn--active {
   background: var(--element-bg-subtle);
 }
@@ -232,10 +243,14 @@
   max-width: 300px;
   background: var(--color-bg-elevated);
   border: 1px solid var(--border-base);
-  border-radius: calc(var(--flowchat-card-radius) + 2px);
-  box-shadow: 0 8px 24px var(--color-overlay-black-15);
+  border-radius: calc(var(--flowchat-card-radius) + 3px);
+  box-shadow:
+    0 14px 34px var(--color-overlay-black-20),
+    0 2px 8px var(--color-overlay-black-12),
+    inset 0 1px 0 var(--color-overlay-white-08);
   overflow: hidden;
-  animation: wp-dropdownIn 0.15s ease-out;
+  transform-origin: left top;
+  animation: wp-dropdownIn 180ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .welcome-panel__dropdown-current {
@@ -272,7 +287,7 @@
   font-size: var(--flowchat-font-size-sm);
   text-align: left;
   cursor: pointer;
-  transition: background 0.12s, color 0.12s;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .welcome-panel__dropdown-item:hover {
@@ -280,6 +295,17 @@
   color: var(--color-text-primary);
 }
 
+.welcome-panel__dropdown-item:focus-visible {
+  outline: none;
+  background: var(--element-bg-soft);
+  box-shadow: inset 0 0 0 1px var(--border-accent);
+  color: var(--color-text-primary);
+}
+
+.welcome-panel__dropdown-item:active:not(:disabled) {
+  transform: scale(0.985);
+}
+
 .welcome-panel__dropdown-item:disabled {
   opacity: 0.45;
   cursor: default;
@@ -316,7 +342,7 @@
 }
 
 @keyframes wp-dropdownIn {
-  from { opacity: 0; transform: translateY(-4px); }
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
@@ -338,7 +364,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .welcome-panel {
+  .welcome-panel,
+  .welcome-panel__dropdown {
     animation: none;
   }
+
+  .welcome-panel__inline-btn,
+  .welcome-panel__dropdown-item,
+  .welcome-panel__inline-chevron {
+    transition-duration: 0ms;
+  }
 }
diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.tsx b/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
index ae7c5947fd..06876ceeb2 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.tsx
@@ -37,6 +37,7 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
   const [workspaceDropdownOpen, setWorkspaceDropdownOpen] = useState(false);
   const [isSelectingWorkspace, setIsSelectingWorkspace] = useState(false);
   const workspaceDropdownRef = useRef<HTMLDivElement>(null);
+  const workspaceTriggerRef = useRef<HTMLButtonElement>(null);
 
   const { switchLeftPanelTab } = useApp();
   const {
@@ -143,13 +144,23 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
 
   useEffect(() => {
     if (!workspaceDropdownOpen) return;
-    const handler = (e: MouseEvent) => {
+    const handlePointerDown = (e: MouseEvent) => {
       if (workspaceDropdownRef.current && !workspaceDropdownRef.current.contains(e.target as Node)) {
         setWorkspaceDropdownOpen(false);
       }
     };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.preventDefault();
+      setWorkspaceDropdownOpen(false);
+      workspaceTriggerRef.current?.focus();
+    };
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
   }, [workspaceDropdownOpen]);
 
   const handleSwitchWorkspace = useCallback(async (ws: WorkspaceInfo) => {
@@ -234,11 +245,14 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
                   <span className="welcome-panel__context-row">
                     <span className="welcome-panel__workspace-anchor" ref={workspaceDropdownRef}>
                       <button
+                        ref={workspaceTriggerRef}
                         type="button"
                         className={`welcome-panel__inline-btn welcome-panel__inline-btn--interactive${workspaceDropdownOpen ? ' welcome-panel__inline-btn--active' : ''}`}
                         onClick={() => setWorkspaceDropdownOpen(v => !v)}
                         disabled={isSelectingWorkspace}
                         title={currentWorkspace?.rootPath}
+                        aria-haspopup="menu"
+                        aria-expanded={workspaceDropdownOpen}
                       >
                         <FolderOpen size={13} className="welcome-panel__inline-icon" />
                         {currentWorkspace?.name || t('shared:features.workspace')}
@@ -248,9 +262,10 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
                         />
                       </button>
                       {workspaceDropdownOpen && (
-                        <div className="welcome-panel__dropdown">
+                        <div className="welcome-panel__dropdown" role="menu">
                           <button
                             type="button"
+                            role="menuitem"
                             className="welcome-panel__dropdown-item welcome-panel__dropdown-item--accent"
                             onClick={() => { void handleCreateWorkspace(); }}
                           >
@@ -272,6 +287,7 @@ export const WelcomePanel: React.FC<WelcomePanelProps> = ({
                                 <button
                                   key={ws.id}
                                   type="button"
+                                  role="menuitem"
                                   className="welcome-panel__dropdown-item"
                                   onClick={() => { void handleSwitchWorkspace(ws); }}
                                   title={ws.rootPath}
diff --git a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
index 5cf1e1ada8..13217903b9 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
@@ -11,7 +11,9 @@
    * view, and any animation keyed off `--streaming` → `--complete` replays when
    * the typewriter finishes. Both read as the whole chat refreshing.
    */
-  margin-bottom: 0;
+  box-sizing: border-box;
+  width: min(100%, 900px);
+  margin: 0 auto;
   padding: 0 var(--flowchat-content-inline-pad);
   position: relative;
   opacity: 1;
@@ -48,7 +50,8 @@
   flex-wrap: wrap;
   gap: var(--flowchat-inline-gap);
   padding: var(--flowchat-inline-gap) 0;
-  margin-top: var(--flowchat-inline-gap);
+  margin-top: calc(var(--flowchat-inline-gap) + 1px);
+  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 56%, transparent);
 
   // Reserve layout while typewriter catch-up finishes; reveal without resize.
   &--pending {
@@ -123,10 +126,21 @@
   font-size: 12px;
   line-height: 18px;
   cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
   &:hover {
     color: var(--color-text-primary);
   }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-accent);
+    outline-offset: 2px;
+    border-radius: 3px;
+  }
 }
 
 .model-round-item__retry-attempt {
@@ -252,7 +266,9 @@
   border-radius: 4px;
   color: var(--color-text-muted);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 140ms ease;
   opacity: 1;
   
   &:hover {
@@ -261,7 +277,12 @@
   }
 
   &:active {
-    transform: scale(0.95);
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-accent);
+    outline-offset: 1px;
   }
 
   svg {
@@ -301,9 +322,13 @@
   max-width: min(240px, calc(100vw - 24px));
   padding: 4px 0;
   border: 1px solid var(--border-subtle);
-  border-radius: 6px;
+  border-radius: 8px;
   background: var(--color-bg-elevated);
-  box-shadow: 0 4px 12px var(--color-overlay-black-30);
+  box-shadow:
+    0 12px 28px var(--color-overlay-black-30),
+    0 2px 8px var(--color-overlay-black-12);
+  transform-origin: right bottom;
+  animation: model-round-copy-menu-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .model-round-item__copy-menu-item {
@@ -320,12 +345,23 @@
   text-align: left;
   white-space: nowrap;
   cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
   &:hover {
     background: var(--color-overlay-white-08);
     color: var(--color-text-primary);
   }
+
+  &:focus-visible {
+    outline: none;
+    background: var(--color-overlay-white-08);
+    box-shadow: inset 0 0 0 1px var(--border-accent);
+    color: var(--color-text-primary);
+  }
+
+  &:active {
+    transform: scale(0.985);
+  }
 }
 
 .model-round-item__fork-btn {
@@ -366,6 +402,17 @@
   }
 }
 
+@keyframes model-round-copy-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 // ==================== Explore region adjustments ====================
 
 /* Focus highlight for programmatic "jump to marker" navigation. */
@@ -375,3 +422,15 @@
   border-radius: var(--flowchat-card-radius);
   box-shadow: var(--glow-shadow-blue);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .model-round-item__retry-toggle,
+  .model-round-item__action-btn,
+  .model-round-item__copy-menu-item {
+    transition-duration: 0ms;
+  }
+
+  .model-round-item__copy-menu {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/PermissionRequestPanel.scss b/src/web-ui/src/flow_chat/components/modern/PermissionRequestPanel.scss
index 0053672f71..cfe5329c27 100644
--- a/src/web-ui/src/flow_chat/components/modern/PermissionRequestPanel.scss
+++ b/src/web-ui/src/flow_chat/components/modern/PermissionRequestPanel.scss
@@ -23,13 +23,18 @@
   width: 100%;
   box-sizing: border-box;
   display: grid;
-  gap: 10px;
-  padding: 14px;
-  border: 1px solid var(--color-warning);
-  border-radius: 8px;
-  background: var(--color-bg-secondary);
-  box-shadow: var(--shadow-lg);
+  gap: 9px;
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--color-warning) 48%, var(--border-base));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--color-bg-elevated) 96%, var(--color-warning));
+  box-shadow:
+    0 16px 40px var(--color-overlay-black-30),
+    0 3px 10px var(--color-overlay-black-12),
+    inset 3px 0 0 color-mix(in srgb, var(--color-warning) 76%, transparent);
   color: var(--color-text-primary);
+  transform-origin: center bottom;
+  animation: permission-request-panel-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .permission-request-panel__heading {
@@ -82,6 +87,9 @@
   color: var(--color-warning);
   background: var(--color-bg-primary);
   cursor: pointer;
+  transition:
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 140ms ease;
 }
 
 .permission-request-panel__collapse {
@@ -102,6 +110,11 @@
   outline-offset: 2px;
 }
 
+.permission-request-panel__collapse:active,
+.permission-request-panel__collapsed-trigger:active {
+  transform: scale(0.97);
+}
+
 .permission-request-panel__collapsed-trigger {
   position: relative;
   width: 44px;
@@ -140,13 +153,15 @@
   gap: 3px;
   padding: 7px 9px;
   border: 1px solid var(--border-base);
-  border-radius: 5px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--element-bg-subtle) 58%, transparent);
   color: var(--color-text-secondary);
   font-size: var(--flowchat-font-size-sm);
 }
 
 .permission-request-panel__request--active {
-  border-color: var(--color-warning);
+  border-color: color-mix(in srgb, var(--color-warning) 58%, var(--border-base));
+  background: color-mix(in srgb, var(--color-warning) 7%, var(--element-bg-subtle));
   color: var(--color-text-primary);
 }
 
@@ -214,8 +229,8 @@
   width: 100%;
   resize: vertical;
   border: 1px solid var(--border-base);
-  border-radius: 4px;
-  padding: 7px;
+  border-radius: 6px;
+  padding: 7px 9px;
   color: var(--color-text-primary);
   background: var(--color-bg-primary);
 }
@@ -223,6 +238,7 @@
 .permission-request-panel textarea:focus {
   outline: none;
   border-color: var(--color-warning);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 14%, transparent);
 }
 
 .permission-request-panel__actions {
@@ -254,6 +270,7 @@
   color: var(--color-text-primary);
   background: var(--color-bg-primary);
   cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .permission-request-panel__single-actions button {
@@ -267,6 +284,20 @@
   color: var(--color-text-primary);
   background: var(--color-bg-primary);
   cursor: pointer;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.permission-request-panel__actions button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-primary));
+}
+
+.permission-request-panel__actions button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.permission-request-panel__actions button:focus-visible {
+  outline: 2px solid var(--color-warning);
+  outline-offset: 2px;
 }
 
 .permission-request-panel__actions button:disabled {
@@ -282,3 +313,26 @@
 .permission-request-panel .permission-request-panel__reject {
   color: var(--color-error);
 }
+
+@keyframes permission-request-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .permission-request-panel {
+    animation: none;
+  }
+
+  .permission-request-panel__collapse,
+  .permission-request-panel__collapsed-trigger,
+  .permission-request-panel__actions button {
+    transition-duration: 0ms;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss b/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss
index 27b4600ca6..0f6a610b5f 100644
--- a/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss
@@ -4,26 +4,16 @@
 
 .processing-indicator {
   width: 100%;
-  max-width: 1200px; /* Relaxed max width for larger screens */
+  max-width: 900px;
   /* Keep below the Virtuoso footer spacer; tight margin avoids a tall “dead” band above the input. */
   margin: 0 auto 0.35rem auto;
-  padding: 0 3rem;
+  padding: 0 var(--flowchat-content-inline-pad);
   box-sizing: border-box;
 
-  // Responsive: large screens
-  @media (max-width: 1400px) {
-    max-width: 1000px;
-  }
-
-  // Responsive: medium screens
-  @media (max-width: 1200px) {
-    max-width: 900px;
-  }
-
   // Responsive: small screens
   @media (max-width: 768px) {
     max-width: 100%;
-    padding: 0 1.5rem;
+    padding: 0 var(--flowchat-content-inline-pad-mobile);
   }
 }
 
@@ -31,8 +21,9 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
+  gap: var(--flowchat-control-gap);
+  min-height: 28px;
+  padding: 0.3rem 0;
 }
 
 // Hint text — use the same low-contrast breathe rhythm as active tool cards.
@@ -43,10 +34,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 320px;
-  // Fade in once, then breathe gently without making the whole row blink.
-  animation:
-    hint-fade-in 0.4s ease forwards,
-    hint-breathe 2.2s ease-in-out 0.4s infinite;
+  // Keep send feedback immediate; only the low-contrast opacity breath remains.
+  animation: hint-breathe 2.2s ease-in-out infinite;
 
   @media (max-width: 768px) {
     max-width: 200px;
@@ -73,3 +62,9 @@
     opacity: 0.68;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .processing-indicator__hint {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
index 53cf68d597..645c65e79b 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
@@ -5,17 +5,26 @@
 @use '../../../component-library/styles/tokens.scss' as tokens;
 
 .user-message-item {
-  padding: 0.32rem 0.75rem;
-  background: color-mix(in srgb, var(--element-bg-medium) 86%, var(--color-bg-scene));
-  border: 1px solid color-mix(in srgb, var(--border-subtle) 38%, transparent);
-  border-radius: var(--flowchat-card-radius);
+  box-sizing: border-box;
+  width: fit-content;
+  min-width: min(
+    18rem,
+    calc(100% - var(--flowchat-content-inline-pad) - var(--flowchat-content-inline-pad))
+  );
+  max-width: min(78%, 52rem);
+  padding: 0.46rem 0.68rem;
+  background: color-mix(in srgb, var(--element-bg-medium) 90%, var(--color-bg-scene));
+  border: 1px solid color-mix(in srgb, var(--border-base) 72%, transparent);
+  border-radius: calc(var(--flowchat-card-radius) + 2px);
   margin:
     0.06rem
     var(--flowchat-content-inline-pad)
     var(--flowchat-turn-gap)
-    var(--flowchat-content-inline-pad);
-  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-static-white) 4%, transparent) inset;
-  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+    auto;
+  box-shadow:
+    0 1px 0 color-mix(in srgb, var(--color-static-white) 5%, transparent) inset,
+    0 2px 8px var(--color-overlay-black-08);
+  transition: opacity 140ms ease;
   /*
    * No enter animation: the message list is virtualized, so a mount-triggered
    * slide-in replays every time a turn scrolls back into view and reads as the
@@ -40,10 +49,30 @@
       opacity: 0.35;
     }
   }
+
+  &:focus-within {
+    border-color: color-mix(in srgb, var(--border-accent) 68%, var(--border-base));
+
+    .user-message-item__copy-btn,
+    .user-message-item__rollback-btn {
+      opacity: 1;
+    }
+  }
   
   // Responsive: reduce margins on smaller screens.
   @media (max-width: 768px) {
-    margin-left: var(--flowchat-content-inline-pad-mobile);
+    min-width: min(
+      14rem,
+      calc(
+        100% - var(--flowchat-content-inline-pad-mobile) -
+          var(--flowchat-content-inline-pad-mobile)
+      )
+    );
+    max-width: calc(
+      100% - var(--flowchat-content-inline-pad-mobile) -
+        var(--flowchat-content-inline-pad-mobile)
+    );
+    margin-left: auto;
     margin-right: var(--flowchat-content-inline-pad-mobile);
   }
 }
@@ -58,7 +87,7 @@
 
 .user-message-item__main {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--flowchat-inline-gap);
 }
 
@@ -115,7 +144,7 @@
   min-width: 0; /* Ensures the content can shrink properly. */
   max-height: 4.75em; /* Collapsed: up to 3 compact lines. */
   user-select: text;
-  transition: all 0.2s ease;
+  transition: none;
 }
 
 .user-message-item__reference {
@@ -169,6 +198,11 @@
   border: none;
   box-shadow: none;
   padding-left: 0.35rem;
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  margin-left: var(--flowchat-content-inline-pad);
+  margin-right: var(--flowchat-content-inline-pad);
 
   .user-message-item__main {
     align-items: flex-start;
@@ -267,7 +301,9 @@
   border-radius: var(--size-radius-sm);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    opacity 140ms ease,
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
   opacity: 0;
   flex-shrink: 0;
   align-self: center;
@@ -281,7 +317,13 @@
   }
   
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: 2px solid var(--border-accent);
+    outline-offset: 1px;
   }
 
   &:disabled {
@@ -348,6 +390,7 @@
 
   &:focus-within {
     border-color: var(--color-accent-500);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-500) 14%, transparent);
   }
 }
 
@@ -370,7 +413,7 @@
   background: transparent;
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
   &:hover:not(:disabled) {
     color: var(--color-text-primary);
@@ -378,7 +421,12 @@
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-accent);
+    outline-offset: 1px;
   }
 
   &:disabled {
@@ -414,7 +462,9 @@
   border-radius: var(--size-radius-sm);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    opacity 140ms ease,
+    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
   opacity: 0;
   flex-shrink: 0;
   align-self: center;
@@ -428,7 +478,13 @@
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: 2px solid var(--border-accent);
+    outline-offset: 1px;
   }
 
   &:disabled {
@@ -472,7 +528,9 @@
   overflow: hidden;
   cursor: pointer;
   border: 1px solid var(--border-base);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 140ms ease;
 
   &:hover {
     transform: scale(1.03);
@@ -496,7 +554,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  animation: lightboxFadeIn 0.2s ease;
+  animation: lightboxFadeIn 180ms cubic-bezier(0.23, 1, 0.32, 1);
 
   img {
     max-width: 90vw;
@@ -521,11 +579,20 @@
   justify-content: center;
   color: var(--color-static-white);
   cursor: pointer;
-  transition: background 0.15s ease;
+  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
 
   &:hover {
     background: rgba(var(--color-static-white-rgb), 0.3);
   }
+
+  &:active {
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-static-white);
+    outline-offset: 2px;
+  }
 }
 
 @keyframes lightboxFadeIn {
@@ -543,3 +610,19 @@
     transform: translateY(0);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .user-message-item,
+  .user-message-item__copy-btn,
+  .user-message-item__edit-btn,
+  .user-message-item__rollback-btn,
+  .user-message-edit-composer__icon-button,
+  .user-message-item__image-thumb,
+  .user-message-item__lightbox-close {
+    transition-duration: 0ms;
+  }
+
+  .user-message-item__lightbox {
+    animation: none;
+  }
+}
diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss b/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss
index 48a18888e6..57c47482e9 100644
--- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss
@@ -315,7 +315,12 @@
     font-weight: $font-weight-medium;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
     white-space: nowrap;
     position: relative;
 
@@ -412,7 +417,12 @@
     background: transparent;
     border: 1px solid var(--border-base);
     border-radius: var(--size-radius-sm);
-    transition: all var(--motion-base) var(--easing-standard);
+    transition:
+      transform var(--motion-fast) var(--easing-standard),
+      background-color var(--motion-fast) var(--easing-standard),
+      border-color var(--motion-fast) var(--easing-standard),
+      color var(--motion-fast) var(--easing-standard),
+      box-shadow var(--motion-fast) var(--easing-standard);
     min-height: 36px;
 
     
@@ -483,7 +493,12 @@
     font-weight: $font-weight-medium;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
     white-space: nowrap;
     height: 32px;
 
@@ -637,7 +652,12 @@
     border: none;
     background: var(--element-bg-subtle);
     color: var(--color-text-muted);
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     
     &:hover {
@@ -787,7 +807,12 @@
     font-size: var(--font-size-sm);
     font-family: $font-family-sans;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     
     &:hover:not(:disabled) {
@@ -953,7 +978,12 @@
       color: var(--color-text-primary);
       font-size: var(--font-size-sm);
       font-family: $font-family-sans;
-      transition: all var(--motion-base) var(--easing-standard);
+      transition:
+        transform var(--motion-fast) var(--easing-standard),
+        background-color var(--motion-fast) var(--easing-standard),
+        border-color var(--motion-fast) var(--easing-standard),
+        color var(--motion-fast) var(--easing-standard),
+        box-shadow var(--motion-fast) var(--easing-standard);
       min-height: 36px;
 
       
@@ -1494,7 +1524,12 @@
     background: transparent;
     border-radius: var(--size-radius-sm);
     border: 1px solid var(--border-base);
-    transition: all var(--motion-base) var(--easing-standard);
+    transition:
+      transform var(--motion-fast) var(--easing-standard),
+      background-color var(--motion-fast) var(--easing-standard),
+      border-color var(--motion-fast) var(--easing-standard),
+      color var(--motion-fast) var(--easing-standard),
+      box-shadow var(--motion-fast) var(--easing-standard);
 
     &:hover {
       background: var(--element-bg-subtle);
@@ -1656,7 +1691,12 @@
 
   &__provider-card {
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
     border: 1px solid var(--border-base);
 
     &:hover {
@@ -1742,7 +1782,12 @@
 
   &__custom-option {
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
     border: 1px dashed var(--border-base);
 
     &:hover {
@@ -1799,7 +1844,12 @@
     color: var(--color-text-secondary);
     font-size: var(--font-size-sm);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     &:hover {
       color: var(--color-accent-500);
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceConfig.scss b/src/web-ui/src/infrastructure/config/components/AppearanceConfig.scss
index 93a7d7a058..4b75caae22 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceConfig.scss
@@ -37,9 +37,12 @@
     min-width: 140px;
     background: transparent;
     border: 1px solid var(--border-base);
-    border-radius: $size-radius-sm;
+    border-radius: $size-radius-base;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard;
     
     &:hover:not(:disabled):not(&--active) {
       background: var(--element-bg-subtle);
@@ -47,9 +50,13 @@
     }
     
     &--active {
-      background: transparent;
+      background: var(--color-accent-100);
       border-color: var(--color-accent-500);
     }
+
+    &:active:not(:disabled) {
+      transform: scale(0.985);
+    }
     
     &:disabled {
       opacity: $opacity-disabled;
@@ -144,9 +151,13 @@
   padding: $size-gap-2;
   background: transparent;
   border: 1px solid var(--border-base);
-  border-radius: $size-radius-sm;
+  border-radius: $size-radius-lg;
   cursor: pointer;
-  transition: all $motion-base $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard,
+    box-shadow $motion-fast $easing-standard;
   overflow: hidden;
   
   &:hover:not(&--disabled):not(&--active) {
@@ -155,8 +166,13 @@
   }
   
   &--active {
-    background: transparent;
+    background: var(--color-accent-100);
     border-color: var(--color-accent-500);
+    box-shadow: inset 0 1px 0 var(--color-overlay-white-08);
+  }
+
+  &:active:not(&--disabled) {
+    transform: scale(0.985);
   }
   
   &--disabled {
@@ -278,7 +294,15 @@
     border-radius: $size-radius-sm;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
+
+    &:active {
+      transform: scale(0.97);
+    }
     
     svg {
       width: 12px;
diff --git a/src/web-ui/src/infrastructure/config/components/ConfigForm.scss b/src/web-ui/src/infrastructure/config/components/ConfigForm.scss
index e3293ef65d..2720add4c4 100644
--- a/src/web-ui/src/infrastructure/config/components/ConfigForm.scss
+++ b/src/web-ui/src/infrastructure/config/components/ConfigForm.scss
@@ -244,7 +244,10 @@ $config-input-height: 32px;
   border-radius: 3px;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
-  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -259,7 +262,9 @@ $config-input-height: 32px;
     border-width: 0 1.5px 1.5px 0;
     transform: rotate(45deg) scale(0.8);
     opacity: 0;
-    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+    transition:
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 120ms ease;
   }
 }
 
@@ -584,4 +589,3 @@ $config-input-height: 32px;
   @extend .bitfun-config-form__section-description;
 }
 
-
diff --git a/src/web-ui/src/infrastructure/config/components/DebugConfig.scss b/src/web-ui/src/infrastructure/config/components/DebugConfig.scss
index b106ae8ffc..b9dd86310d 100644
--- a/src/web-ui/src/infrastructure/config/components/DebugConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/DebugConfig.scss
@@ -47,7 +47,11 @@
     box-shadow: none;
     background: transparent;
     color: var(--color-text-muted);
-    transition: all 0.2s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
 
     svg {
       width: 12px !important;
diff --git a/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss b/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss
index e097b4251c..bb3bc9fb53 100644
--- a/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss
@@ -183,7 +183,10 @@
     padding: $size-gap-2 0;
     background: transparent;
     border: none;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      opacity $motion-fast $easing-standard;
     
     &--configured {
       .default-model-config__capability-status {
@@ -249,7 +252,14 @@
     color: var(--color-text-secondary);
     font-size: var(--font-size-sm);
     font-weight: $font-weight-medium;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
+
+    &:active {
+      transform: scale(0.985);
+    }
     border-radius: $size-radius-sm;
     
     &:hover {
diff --git a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
index e7c238ba7f..4725f810fe 100644
--- a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
+++ b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
@@ -38,7 +38,10 @@
       border-radius: 6px;
       color: var(--color-text-primary);
       font-size: 0.9rem;
-      transition: all 0.2s ease;
+      transition:
+        border-color 150ms ease,
+        box-shadow 150ms ease,
+        background-color 150ms ease;
 
       &:focus {
         outline: none;
@@ -91,7 +94,10 @@
         padding: 1rem;
         cursor: pointer;
         border-bottom: 1px solid var(--border-base);
-        transition: all 0.2s ease;
+        transition:
+          background-color 150ms ease,
+          border-color 150ms ease,
+          color 150ms ease;
 
         &:hover {
           background: var(--color-bg-tertiary);
@@ -238,4 +244,3 @@
 }
 
 
-
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss b/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss
index c1cac58914..b466a11a7e 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSelectionRadio.scss
@@ -53,7 +53,10 @@
     padding: $size-gap-2 $size-gap-3;
     border-radius: $size-radius-sm;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      transform $motion-fast $easing-standard;
     background: transparent;
     border: none;
     
@@ -95,7 +98,10 @@
     border: 2px solid var(--color-text-muted);
     border-radius: 50%;
     background: transparent;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     &:checked {
       border-color: var(--color-accent-500);
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
index 1377a54a24..d776f6574b 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
@@ -6,8 +6,15 @@
 
 .bitfun-config-page-header {
   flex-shrink: 0;
-  padding: 48px 0 0;
-  margin-bottom: var(--size-gap-6);
+  position: sticky;
+  top: 0;
+  z-index: $z-header;
+  padding: 32px 0 20px;
+  margin-bottom: var(--size-gap-5);
+  background: color-mix(in srgb, var(--color-bg-scene) 94%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 76%, transparent);
+  backdrop-filter: blur(16px) saturate(1.08);
+  -webkit-backdrop-filter: blur(16px) saturate(1.08);
 }
 
 .bitfun-config-page-header__inner {
@@ -36,8 +43,8 @@
 }
 
 .bitfun-config-page-header__title {
-  margin: 0 0 4px 0;
-  font-size: calc(var(--font-size-xl) * 1.5);
+  margin: 0 0 3px;
+  font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   line-height: var(--line-height-tight);
@@ -119,7 +126,7 @@
 
 @container config-panel (max-width: 520px) {
   .bitfun-config-page-header {
-    padding-top: var(--size-gap-5);
+    padding: var(--size-gap-4) 0 var(--size-gap-3);
   }
 
   .bitfun-config-page-header__inner {
@@ -156,3 +163,11 @@
     margin: var(--size-gap-3) auto;
   }
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .bitfun-config-page-header {
+    background: var(--color-bg-scene);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
index 39a90beb85..3ad09076d1 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
@@ -22,7 +22,7 @@
   /* Shared layout contract for settings pages in wide scenes. */
   --config-page-content-bottom-padding: 48px;
   /* Vertical gap between top-level sections (ConfigPageSection blocks) inside ConfigPageContent. */
-  --config-page-section-gap: 40px;
+  --config-page-section-gap: 32px;
   container-type: inline-size;
   container-name: config-panel;
 }
@@ -68,7 +68,7 @@
 .bitfun-config-page-section {
   display: flex;
   flex-direction: column;
-  gap: var(--size-gap-4);
+  gap: var(--size-gap-3);
 }
 
 .bitfun-config-page-section__header {
@@ -93,7 +93,7 @@
 
 .bitfun-config-page-section__title {
   margin: 0;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   line-height: var(--line-height-tight);
@@ -115,10 +115,11 @@
 
 .bitfun-config-page-section__body {
   min-width: 0;
-  background: var(--element-bg-subtle);
+  background: color-mix(in srgb, var(--color-bg-elevated) 78%, var(--element-bg-subtle));
   border: 1px solid var(--border-subtle);
-  border-radius: var(--size-radius-md);
+  border-radius: var(--size-radius-lg);
   overflow: visible;
+  box-shadow: inset 0 1px 0 var(--color-overlay-white-04);
 }
 
 .bitfun-config-page-row {
@@ -126,13 +127,20 @@
   display: grid;
   grid-template-columns: var(--row-grid-cols);
   gap: var(--size-gap-4);
-  padding: var(--size-gap-4);
+  padding: 14px var(--size-gap-4);
+  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .bitfun-config-page-row + .bitfun-config-page-row {
   border-top: 1px solid var(--border-subtle);
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .bitfun-config-page-row:hover {
+    background: var(--color-overlay-white-04);
+  }
+}
+
 .bitfun-config-page-row--center {
   align-items: center;
 }
@@ -232,3 +240,9 @@
     justify-self: stretch;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-config-page-row {
+    transition: none;
+  }
+}
diff --git a/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss b/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss
index 77e149fdc6..cca8c3dae9 100644
--- a/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/config-page-layout.tokens.scss
@@ -1,2 +1,2 @@
-$config-page-content-inline-padding: clamp(16px, 2.2vw, 28px);
-$config-page-content-max-width: 600px;
+$config-page-content-inline-padding: clamp(20px, 3vw, 40px);
+$config-page-content-max-width: 760px;
diff --git a/src/web-ui/src/tools/editor/components/CodeEditor.scss b/src/web-ui/src/tools/editor/components/CodeEditor.scss
index dd36ef8d58..118cf0e7d9 100644
--- a/src/web-ui/src/tools/editor/components/CodeEditor.scss
+++ b/src/web-ui/src/tools/editor/components/CodeEditor.scss
@@ -99,7 +99,11 @@ $_editor-padding-desktop: 32px;
     font-size: var(--font-size-xs);
     font-family: $font-family-mono;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     
     &:hover {
       color: var(--color-text-secondary);
diff --git a/src/web-ui/src/tools/editor/components/DiffEditor.scss b/src/web-ui/src/tools/editor/components/DiffEditor.scss
index 8ca4dbc75f..10ec3cbb01 100644
--- a/src/web-ui/src/tools/editor/components/DiffEditor.scss
+++ b/src/web-ui/src/tools/editor/components/DiffEditor.scss
@@ -46,7 +46,9 @@ $_diff-error-max-width: 400px;
   flex-shrink: 0;
   height: $_diff-toolbar-height;
   min-height: $_diff-toolbar-height;
-  transition: all $motion-base $easing-standard;
+  transition:
+    background-color $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard;
 
   &__info {
     display: flex;
@@ -113,7 +115,12 @@ $_diff-error-max-width: 400px;
     font-size: var(--font-size-lg);
     line-height: 1;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     &:hover:not(:disabled) {
       background: var(--element-bg-medium);
@@ -359,7 +366,9 @@ $_diff-error-max-width: 400px;
       background-color: var(--color-overlay-white-04) !important;
       border-left: 1px dashed var(--border-medium) !important;
       border-right: 1px dashed var(--border-medium) !important;
-      transition: all 0.2s ease;
+      transition:
+        background-color 150ms ease,
+        border-color 150ms ease;
       
       &:hover {
         background-color: var(--color-overlay-white-08) !important;
diff --git a/src/web-ui/src/tools/editor/components/EditorStatusBar.scss b/src/web-ui/src/tools/editor/components/EditorStatusBar.scss
index a761bfaaf5..cb578c4d5a 100644
--- a/src/web-ui/src/tools/editor/components/EditorStatusBar.scss
+++ b/src/web-ui/src/tools/editor/components/EditorStatusBar.scss
@@ -42,7 +42,10 @@ $_section-gap: 12px;
     gap: $_item-gap;
     padding: 2px 6px;
     border-radius: 3px;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      color 140ms ease;
     white-space: nowrap;
     
     &--clickable {
diff --git a/src/web-ui/src/tools/editor/components/MarkdownEditor.scss b/src/web-ui/src/tools/editor/components/MarkdownEditor.scss
index 65e45d6abc..70c4cbc529 100644
--- a/src/web-ui/src/tools/editor/components/MarkdownEditor.scss
+++ b/src/web-ui/src/tools/editor/components/MarkdownEditor.scss
@@ -142,7 +142,12 @@
       cursor: pointer;
       font-size: var(--font-size-sm);
       font-weight: $font-weight-medium;
-      transition: all $motion-base $easing-standard;
+      transition:
+        transform $motion-fast $easing-standard,
+        background-color $motion-fast $easing-standard,
+        border-color $motion-fast $easing-standard,
+        color $motion-fast $easing-standard,
+        box-shadow $motion-fast $easing-standard;
       backdrop-filter: blur(8px);
 
       &:hover {
@@ -208,7 +213,7 @@
   a {
     color: var(--color-accent-500);
     text-decoration: none;
-    transition: all $motion-fast $easing-standard;
+    transition: color $motion-fast $easing-standard;
 
     &:hover {
       color: var(--color-accent-600);
diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.scss b/src/web-ui/src/tools/editor/components/PlanViewer.scss
index 14dde6da07..2bad145148 100644
--- a/src/web-ui/src/tools/editor/components/PlanViewer.scss
+++ b/src/web-ui/src/tools/editor/components/PlanViewer.scss
@@ -48,7 +48,11 @@
         border: 1px solid var(--border-base);
         border-radius: 6px;
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition:
+          transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+          background-color 140ms ease,
+          border-color 140ms ease,
+          color 140ms ease;
 
         &:hover {
           background: var(--element-bg-hover);
@@ -96,7 +100,9 @@
         color: var(--color-text-muted);
         border-radius: 4px;
         background: var(--color-overlay-white-04);
-        transition: all 0.15s ease;
+        transition:
+          background-color 140ms ease,
+          color 140ms ease;
 
         svg {
           transition: transform 0.15s ease;
@@ -165,7 +171,11 @@
         border: 1px solid transparent;
         border-radius: 4px;
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition:
+          transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+          background-color 140ms ease,
+          border-color 140ms ease,
+          color 140ms ease;
 
         &:hover {
           color: var(--color-text-primary);
@@ -200,7 +210,11 @@
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      color 140ms ease,
+      box-shadow 140ms ease;
     box-shadow: 0 1px 2px var(--color-overlay-black-12);
 
     &:hover:not(:disabled) {
@@ -268,7 +282,11 @@
         border: 1px solid transparent;
         border-radius: 4px;
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition:
+          transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+          background-color 140ms ease,
+          border-color 140ms ease,
+          color 140ms ease;
 
         &:hover {
           color: var(--color-text-primary);
@@ -395,7 +413,11 @@
         background: transparent;
         color: var(--color-text-muted);
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition:
+          transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+          background-color 140ms ease,
+          border-color 140ms ease,
+          color 140ms ease;
 
         &:hover {
           color: var(--color-error);
@@ -489,4 +511,3 @@
 .animate-spin {
   animation: spin 1s linear infinite;
 }
-
diff --git a/src/web-ui/src/tools/file-system/components/FileSearchResults.scss b/src/web-ui/src/tools/file-system/components/FileSearchResults.scss
index 9958ce4efc..a4e39123b7 100644
--- a/src/web-ui/src/tools/file-system/components/FileSearchResults.scss
+++ b/src/web-ui/src/tools/file-system/components/FileSearchResults.scss
@@ -84,7 +84,10 @@ $_icon-size: 16px;
     border: none;
     border-radius: $size-radius-sm;
     background: transparent;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     color: var(--color-text-secondary);
     text-align: left;
     font: inherit;
@@ -148,7 +151,10 @@ $_icon-size: 16px;
     background: var(--git-color-branch-bg);
     color: var(--git-color-branch);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
     user-select: none;
     appearance: none;
 
@@ -190,7 +196,10 @@ $_icon-size: 16px;
   padding: $size-gap-1 $size-gap-2;
   margin: 0;
   cursor: pointer;
-  transition: all $motion-base $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
   border: none;
   border-radius: $size-radius-sm;
   min-height: 24px;
@@ -252,7 +261,10 @@ $_icon-size: 16px;
   color: var(--color-text-muted);
   font-size: var(--font-size-xs);
   cursor: pointer;
-  transition: all $motion-base $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
   user-select: none;
 
   &:hover {
@@ -269,4 +281,3 @@ $_icon-size: 16px;
     opacity: 0.6;
   }
 }
-
diff --git a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
index 374c574cb1..55bf17411a 100644
--- a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
+++ b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
@@ -85,7 +85,9 @@ $_indent-width: 8px;
   );
   overflow: hidden;
   
-  transition: all 0.15s ease-out;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease;
 }
 
 .bitfun-file-explorer__breadcrumb-separator {
@@ -102,7 +104,9 @@ $_indent-width: 8px;
   max-width: 100px;
   padding: 2px 2px 3px;
   border-radius: 3px;
-  transition: all $motion-fast $easing-standard;
+  transition:
+    background-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
   
   &--clickable {
     cursor: pointer;
@@ -143,7 +147,10 @@ $_indent-width: 8px;
   position: relative;
   
   background: transparent;
-  transition: all $motion-base $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
   color: var(--color-text-secondary);
   
   &:focus {
@@ -220,7 +227,9 @@ $_indent-width: 8px;
 .bitfun-file-explorer__icon {
   @include mixins.flex-layout(row, center, center, 0);
   flex-shrink: 0;
-  transition: all $motion-fast $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
   min-width: $_icon-size;
 
   &--folder {
@@ -393,7 +402,10 @@ $_indent-width: 8px;
   color: var(--color-text-muted);
   cursor: pointer;
   text-align: left;
-  transition: all $motion-base $easing-standard;
+  transition:
+    transform $motion-fast $easing-standard,
+    background-color $motion-fast $easing-standard,
+    color $motion-fast $easing-standard;
 
   &:hover:not(:disabled) {
     background: var(--element-bg-base);
diff --git a/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss b/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss
index 8926d3f32c..6e6d1b21fe 100644
--- a/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss
+++ b/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss
@@ -54,7 +54,10 @@
     border-radius: $size-radius-sm;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover:not(:disabled) {
       background: var(--element-bg-base);
@@ -136,7 +139,10 @@
     color: var(--color-text-primary);
     font-family: $font-family-mono;
     font-size: var(--font-size-sm);
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     &:focus {
       outline: none;
@@ -286,4 +292,3 @@
     margin: $size-gap-4;
   }
 }
-
diff --git a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss
index 5b25c196f4..050ae4c5dd 100644
--- a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss
+++ b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss
@@ -40,7 +40,11 @@
       cursor: pointer;
       font-size: 13px;
       font-weight: 500;
-      transition: all 0.2s ease;
+      transition:
+        transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+        background-color 140ms ease,
+        color 140ms ease,
+        opacity 140ms ease;
 
       &:hover {
         opacity: 0.9;
@@ -294,7 +298,10 @@
     background: var(--color-bg-tertiary);
     border-radius: 3px;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      color 140ms ease;
     font-size: 10px;
 
     &:hover {
@@ -333,7 +340,11 @@
     color: var(--color-text-muted);
     cursor: pointer;
     border-radius: 4px;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      color 140ms ease,
+      opacity 140ms ease;
     flex-shrink: 0;
     opacity: 0;
 
diff --git a/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss b/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
index 6e73ac8ca4..b79fc03b72 100644
--- a/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
+++ b/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
@@ -168,7 +168,9 @@ $_diff-padding-desktop: 32px;
           width: 1px;
           background: var(--border-medium);
           border-left: 1px dashed var(--border-medium);
-          transition: all 0.2s ease;
+          transition:
+            background-color 150ms ease,
+            border-color 150ms ease;
         }
         
         &:hover::before {
@@ -272,7 +274,7 @@ $_diff-padding-desktop: 32px;
     padding: $_diff-padding-desktop;
     text-align: center;
     flex: 1;
-    animation: git-diff-editor-fade-in 0.3s ease-out;
+    animation: git-diff-editor-fade-in 200ms ease-out;
   }
 
   &__completed-icon {
@@ -283,7 +285,7 @@ $_diff-padding-desktop: 32px;
     height: $_diff-icon-size;
     border-radius: $size-radius-full;
     margin-bottom: $size-gap-6;
-    animation: git-diff-editor-scale-bounce 0.5s $easing-standard;
+    animation: git-diff-editor-scale-bounce 220ms cubic-bezier(0.23, 1, 0.32, 1);
     box-shadow: 0 8px 24px var(--color-overlay-black-30);
 
     &--accepted {
@@ -319,14 +321,14 @@ $_diff-padding-desktop: 32px;
     font-family: $font-family-mono;
     color: var(--color-text-primary);
     margin-bottom: $size-gap-4;
-    animation: git-diff-editor-slide-up 0.4s ease-out 0.1s both;
+    animation: git-diff-editor-slide-up 220ms cubic-bezier(0.23, 1, 0.32, 1) 40ms both;
   }
 
   &__completed-details {
     display: flex;
     flex-direction: column;
     gap: $size-gap-2;
-    animation: git-diff-editor-slide-up 0.4s ease-out 0.2s both;
+    animation: git-diff-editor-slide-up 220ms cubic-bezier(0.23, 1, 0.32, 1) 70ms both;
 
     .git-diff-editor__file-path {
       font-size: var(--font-size-base);
@@ -380,12 +382,9 @@ $_diff-padding-desktop: 32px;
 
 @keyframes git-diff-editor-scale-bounce {
   0% {
-    transform: scale(0);
+    transform: scale(0.94);
     opacity: 0;
   }
-  50% {
-    transform: scale(1.1);
-  }
   100% {
     transform: scale(1);
     opacity: 1;
@@ -395,7 +394,7 @@ $_diff-padding-desktop: 32px;
 @keyframes git-diff-editor-slide-up {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(6px);
   }
   to {
     opacity: 1;
diff --git a/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss b/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss
index 54d214dbfd..f8b6b7cda9 100644
--- a/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss
+++ b/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss
@@ -63,7 +63,10 @@ $opacity-high: 0.8 !default;
     font-family: $font-family-sans;
     font-weight: $font-weight-medium;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-base);
@@ -112,7 +115,11 @@ $opacity-high: 0.8 !default;
     color: var(--color-text-secondary);
     font-size: var(--font-size-xs);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-medium);
@@ -183,7 +190,9 @@ $opacity-high: 0.8 !default;
     background: var(--color-bg-primary);
     border-radius: $size-radius-base;
     overflow: hidden;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard;
   }
 
   &__file-header {
@@ -194,7 +203,7 @@ $opacity-high: 0.8 !default;
     background: var(--element-bg-subtle);
     cursor: pointer;
     user-select: none;
-    transition: all $motion-base $easing-standard;
+    transition: background-color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-base);
@@ -464,7 +473,10 @@ $opacity-high: 0.8 !default;
     font-size: var(--font-size-sm);
     line-height: 1.6;
     resize: vertical;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      box-shadow $motion-fast $easing-standard;
 
     &:focus {
       outline: none;
diff --git a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
index a7d516e252..aed25c10f6 100644
--- a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
+++ b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
@@ -121,7 +121,10 @@
     border-radius: 4px;
     color: var(--color-text-secondary);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      color 140ms ease;
 
     &:hover:not(:disabled) {
       background: var(--element-bg-hover);
@@ -385,4 +388,3 @@
     transform: scaleY(1);
   }
 }
-
diff --git a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss
index b05be42c24..ee36072577 100644
--- a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss
+++ b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss
@@ -126,7 +126,9 @@ $opacity-high: 0.8 !default;
     color: var(--color-text-primary);
     font-size: var(--font-size-sm);
     font-family: $font-family-mono;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard;
 
     &:focus {
       outline: none;
@@ -152,7 +154,10 @@ $opacity-high: 0.8 !default;
     color: var(--color-text-primary);
     font-size: var(--font-size-sm);
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:focus {
       outline: none;
@@ -223,7 +228,9 @@ $opacity-high: 0.8 !default;
     border: 1px solid var(--border-base);
     border-radius: $size-radius-base;
     margin-bottom: $size-gap-3;
-    transition: all $motion-base $easing-standard;
+    transition:
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-base);
@@ -306,7 +313,10 @@ $opacity-high: 0.8 !default;
     border: 1px solid var(--border-base);
     border-radius: $size-radius-base;
     cursor: pointer;
-    transition: all $motion-base $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      border-color $motion-fast $easing-standard;
     margin-top: $size-gap-4;
 
     &:hover {
diff --git a/src/web-ui/src/tools/git/components/PushButton/PushButton.scss b/src/web-ui/src/tools/git/components/PushButton/PushButton.scss
index 3e9fbe71da..3523710845 100644
--- a/src/web-ui/src/tools/git/components/PushButton/PushButton.scss
+++ b/src/web-ui/src/tools/git/components/PushButton/PushButton.scss
@@ -86,7 +86,12 @@
     border: 1px solid var(--color-overlay-white-15);
     border-radius: 6px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition:
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease,
+      box-shadow 140ms ease;
     color: rgb(var(--private-git-push-menu-text-rgb));
     text-align: left;
     outline: none;
@@ -202,4 +207,3 @@
     transform: translateY(0) scale(1);
   }
 }
-
diff --git a/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.scss b/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.scss
index 3094dec559..ef156e0589 100644
--- a/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.scss
+++ b/src/web-ui/src/tools/lsp/components/LspPluginList/LspPluginList.scss
@@ -270,7 +270,10 @@
     font-size: var(--font-size-xs);
     font-family: $font-family-mono;
     color: var(--color-text-primary);
-    transition: all $motion-fast $easing-standard;
+    transition:
+      transform $motion-fast $easing-standard,
+      background-color $motion-fast $easing-standard,
+      color $motion-fast $easing-standard;
 
     &:hover {
       background: var(--element-bg-medium);
diff --git a/src/web-ui/src/tools/lsp/components/ReferencesPanel/ReferencesPanel.scss b/src/web-ui/src/tools/lsp/components/ReferencesPanel/ReferencesPanel.scss
index a0915d6501..dd1df96d12 100644
--- a/src/web-ui/src/tools/lsp/components/ReferencesPanel/ReferencesPanel.scss
+++ b/src/web-ui/src/tools/lsp/components/ReferencesPanel/ReferencesPanel.scss
@@ -101,7 +101,10 @@
   border-radius: $size-radius-sm;
   color: var(--color-text-muted);
   cursor: pointer;
-  transition: all $motion-fast ease;
+  transition:
+    transform $motion-fast cubic-bezier(0.23, 1, 0.32, 1),
+    background-color $motion-fast ease,
+    color $motion-fast ease;
 
   &:hover {
     background: var(--element-bg-base);
@@ -195,7 +198,11 @@
   margin: 1px 0;
   border-radius: $size-radius-sm;
   cursor: pointer;
-  transition: all $motion-instant ease;
+  transition:
+    transform $motion-instant cubic-bezier(0.23, 1, 0.32, 1),
+    background-color $motion-instant ease,
+    color $motion-instant ease,
+    box-shadow $motion-instant ease;
   user-select: none;
   position: relative;
   min-height: 32px;
@@ -238,7 +245,10 @@
   justify-content: center;
   color: var(--color-text-muted);
   opacity: 0.7;
-  transition: all $motion-instant ease;
+  transition:
+    transform $motion-instant ease,
+    color $motion-instant ease,
+    opacity $motion-instant ease;
 }
 
 .references-panel__reference-line {
@@ -320,4 +330,3 @@
   outline-offset: -2px;
   border-radius: $size-radius-sm;
 }
-
diff --git a/src/web-ui/src/tools/terminal/components/Terminal.scss b/src/web-ui/src/tools/terminal/components/Terminal.scss
index fc2188dab9..74088ae80a 100644
--- a/src/web-ui/src/tools/terminal/components/Terminal.scss
+++ b/src/web-ui/src/tools/terminal/components/Terminal.scss
@@ -91,7 +91,11 @@
       color: var(--color-text-secondary);
       font-size: 13px;
       cursor: pointer;
-      transition: all 0.2s;
+      transition:
+        transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+        background-color 140ms ease,
+        border-color 140ms ease,
+        color 140ms ease;
 
       &:hover {
         background: var(--element-bg-base);
@@ -141,7 +145,10 @@
       border-radius: 4px;
       color: var(--color-text-muted);
       cursor: pointer;
-      transition: all 0.15s;
+      transition:
+        transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+        background-color 140ms ease,
+        color 140ms ease;
 
       &:hover {
         background: var(--element-bg-soft);
@@ -221,4 +228,3 @@
     }
   }
 }
-
diff --git a/src/web-ui/src/tools/workspace/components/WorkspaceManager.css b/src/web-ui/src/tools/workspace/components/WorkspaceManager.css
index c82f6d9afa..7dc91103a2 100644
--- a/src/web-ui/src/tools/workspace/components/WorkspaceManager.css
+++ b/src/web-ui/src/tools/workspace/components/WorkspaceManager.css
@@ -1,404 +1,333 @@
-/* Workspace manager layout */
+/* Workspace manager: dense, neutral desktop list with one semantic accent. */
 .workspace-manager {
   display: flex;
   flex-direction: column;
   gap: 24px;
   max-height: 70vh;
   overflow-y: auto;
+  padding-right: 2px;
 }
 
-/* Error banner with glassmorphism */
 .error-message {
-  padding: 12px 16px;
-  background: linear-gradient(135deg,
-    var(--color-error-bg) 0%,
-    var(--glass-red-subtle) 100%);
+  padding: 10px 12px;
+  background: var(--color-error-bg);
   color: var(--color-error);
-  border-radius: 12px;
-  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
-  backdrop-filter: blur(12px) saturate(1.05);
-  -webkit-backdrop-filter: blur(12px) saturate(1.05);
-  box-shadow: 
-    0 8px 32px color-mix(in srgb, var(--color-error) 12%, transparent),
-    0 4px 16px var(--color-overlay-black-08),
-    inset 0 1px 0 var(--color-overlay-white-12);
+  border: 1px solid var(--color-error-border);
+  border-radius: var(--size-radius-md);
+  font-size: var(--font-size-sm);
 }
 
-/* Section headings */
 .workspace-manager h3 {
-  margin: 0 0 16px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--color-accent-500);
   display: flex;
   align-items: center;
   gap: 8px;
+  margin: 0 0 10px;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
 }
 
-/* Glassmorphism workspace card */
 .workspace-card {
   position: relative;
-  border: 1px solid var(--color-accent-200);
-  border-radius: 16px;
-  padding: 20px 24px;
-  background: linear-gradient(135deg,
-    var(--color-accent-100) 0%,
-    color-mix(in srgb, var(--color-accent-600) 4%, transparent) 50%,
-    color-mix(in srgb, var(--color-accent-500) 6%, transparent) 100%);
-  backdrop-filter: blur(12px) saturate(1.05);
-  -webkit-backdrop-filter: blur(12px) saturate(1.05);
-  box-shadow: 
-    0 8px 32px color-mix(in srgb, var(--color-accent-500) 12%, transparent),
-    0 4px 16px var(--color-overlay-black-08),
-    inset 0 1px 0 var(--color-overlay-white-12),
-    inset 0 -1px 0 var(--color-overlay-white-08);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: slideInUp 0.4s ease-out;
-}
-
-.workspace-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg,
-    var(--color-overlay-white-04) 0%,
-    transparent 50%,
-    color-mix(in srgb, var(--color-static-white) 1%, transparent) 100%);
-  pointer-events: none;
-  border-radius: 16px;
-  z-index: 1;
+  padding: 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--size-radius-lg);
+  background: var(--element-bg-subtle);
+  color: var(--color-text-primary);
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease;
 }
 
 .workspace-card.current {
-  border-color: var(--color-accent-300);
-  background: linear-gradient(135deg,
-    var(--color-accent-200) 0%,
-    var(--glass-blue-subtle) 50%,
-    color-mix(in srgb, var(--color-accent-500) 12%, transparent) 100%);
-  box-shadow: 
-    0 8px 32px var(--color-accent-200),
-    0 4px 16px var(--color-overlay-black-08),
-    0 2px 8px var(--color-overlay-black-08),
-    inset 0 1px 0 var(--color-overlay-white-15),
-    inset 0 -1px 0 var(--color-overlay-white-08);
+  border-color: var(--border-accent-subtle);
+  background: color-mix(in srgb, var(--color-accent-500) 7%, var(--element-bg-subtle));
+  box-shadow: inset 2px 0 0 var(--color-accent-500);
 }
 
 .workspace-card.recent {
   cursor: pointer;
 }
 
-.workspace-card.recent:hover {
-  border-color: var(--color-accent-300);
-  background: linear-gradient(135deg,
-    color-mix(in srgb, var(--color-accent-500) 12%, transparent) 0%,
-    color-mix(in srgb, var(--color-accent-600) 6%, transparent) 50%,
-    var(--color-accent-100) 100%);
-  transform: translateY(-2px);
-  box-shadow: 
-    0 12px 40px var(--color-accent-200),
-    0 6px 20px var(--color-overlay-black-08),
-    inset 0 1px 0 var(--color-overlay-white-15),
-    inset 0 -1px 0 var(--color-overlay-white-08);
+@media (hover: hover) and (pointer: fine) {
+  .workspace-card.recent:hover {
+    border-color: var(--border-medium);
+    background: var(--element-bg-soft);
+  }
+}
+
+.workspace-card.recent:active {
+  transform: scale(0.992);
+}
+
+.workspace-card.recent:focus-visible {
+  outline: 2px solid var(--color-accent-500);
+  outline-offset: 2px;
 }
 
 .workspace-header {
   position: relative;
   display: flex;
   align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 16px;
-  z-index: 2;
+  gap: 12px;
 }
 
 .workspace-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
-  color: var(--color-static-white);
-  border-radius: 12px;
+  width: 36px;
+  height: 36px;
   flex-shrink: 0;
-  box-shadow: 
-    0 4px 16px var(--color-accent-300),
-    inset 0 1px 0 var(--color-overlay-white-20);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--size-radius-base);
+  background: var(--element-bg-medium);
+  color: var(--color-text-secondary);
 }
 
-.workspace-icon:hover {
-  transform: scale(1.05);
-  box-shadow: 
-    0 6px 20px color-mix(in srgb, var(--color-accent-500) 30%, transparent),
-    inset 0 1px 0 color-mix(in srgb, var(--color-static-white) 25%, transparent);
+.workspace-card.current .workspace-icon {
+  border-color: var(--border-accent-subtle);
+  background: var(--color-accent-100);
+  color: var(--color-accent-500);
 }
 
 .workspace-info {
   flex: 1;
   min-width: 0;
-  z-index: 2;
 }
 
 .workspace-name {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--color-accent-500);
-  margin-bottom: 6px;
-  word-break: break-all;
-  line-height: 1.3;
+  margin-bottom: 4px;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.35;
+  overflow-wrap: anywhere;
 }
 
 .workspace-name__ssh-host {
-  font-weight: 500;
-  color: color-mix(in srgb, var(--color-static-white) 55%, transparent);
   margin-right: 2px;
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-medium);
 }
 
 .workspace-path {
-  font-size: 14px;
-  color: color-mix(in srgb, var(--color-static-white) 70%, transparent);
-  margin-bottom: 12px;
-  word-break: break-all;
-  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
-  background: var(--color-overlay-black-20);
-  padding: 4px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--color-accent-100);
+  padding: 5px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--size-radius-sm);
+  background: var(--color-overlay-black-12);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  user-select: text;
 }
 
 .workspace-meta {
   display: flex;
   align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.workspace-identity {
-  display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 10px;
+  margin-top: 8px;
 }
 
+.workspace-type,
 .workspace-identity__item {
   display: inline-flex;
   align-items: center;
+  gap: 5px;
+  min-height: 22px;
+  padding: 2px 7px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--size-radius-sm);
+  background: var(--element-bg-soft);
+}
+
+.workspace-type {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-transform: capitalize;
+}
+
+.workspace-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.workspace-identity {
+  display: flex;
+  flex-wrap: wrap;
   gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  background: var(--color-accent-100);
-  border: 1px solid var(--color-accent-200);
+  margin-top: 8px;
 }
 
 .workspace-identity__label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  color: color-mix(in srgb, var(--color-static-white) 55%, transparent);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-medium);
 }
 
 .workspace-identity__value {
-  font-size: 12px;
-  color: var(--color-accent-500);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
 }
 
 .workspace-related-paths {
-  margin-top: 12px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
+  margin-top: 10px;
 }
 
 .workspace-related-paths__label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  color: rgba(var(--color-static-white-rgb), 0.55);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-semibold);
 }
 
 .workspace-related-paths__list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
 }
 
 .workspace-related-paths__item,
 .workspace-related-paths__more {
-  padding: 8px 10px;
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--color-accent-500) 6%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-accent-500) 12%, transparent);
+  padding: 7px 9px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--size-radius-base);
+  background: var(--color-overlay-white-04);
 }
 
 .workspace-related-paths__path {
   display: block;
-  font-size: 12px;
-  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
-  color: var(--color-accent-500);
-  word-break: break-all;
-}
-
-.workspace-related-paths__desc {
-  display: block;
-  margin-top: 4px;
-  font-size: 12px;
-  color: color-mix(in srgb, var(--color-static-white) 72%, transparent);
-  line-height: 1.45;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
 }
 
+.workspace-related-paths__desc,
 .workspace-related-paths__more {
-  font-size: 12px;
-  color: color-mix(in srgb, var(--color-static-white) 62%, transparent);
-}
-
-.workspace-type {
-  font-size: 12px;
-  padding: 2px 8px;
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  border-radius: 4px;
-  text-transform: capitalize;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  line-height: 1.45;
 }
 
-.workspace-time {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--color-text-muted);
+.workspace-related-paths__desc {
+  display: block;
+  margin-top: 3px;
 }
 
 .workspace-actions {
+  position: relative;
   display: flex;
-  gap: 12px;
   flex-wrap: wrap;
-  margin-top: 8px;
-  z-index: 2;
-  position: relative;
+  gap: 8px;
+  margin-top: 12px;
+  padding-left: 48px;
 }
 
-/* Stats grid */
 .workspace-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 16px;
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid var(--color-accent-200);
-  position: relative;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 14px;
+  margin-left: 48px;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .stat-item {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 12px 16px;
-  background: linear-gradient(135deg,
-    var(--color-accent-50) 0%,
-    color-mix(in srgb, var(--color-accent-600) 2%, transparent) 100%);
-  border-radius: 8px;
-  border: 1px solid var(--color-accent-100);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  gap: 3px;
+  min-width: 0;
+  padding: 12px;
 }
 
-.stat-item:hover {
-  background: linear-gradient(135deg,
-    var(--color-accent-100) 0%,
-    color-mix(in srgb, var(--color-accent-600) 4%, transparent) 100%);
-  border-color: var(--color-accent-200);
-  transform: translateY(-1px);
+.stat-item + .stat-item {
+  border-left: 1px solid var(--border-subtle);
 }
 
 .stat-label {
-  font-size: 12px;
-  color: var(--color-overlay-white-60);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-medium);
 }
 
 .stat-value {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-accent-500);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  overflow-wrap: anywhere;
 }
 
-/* Empty states */
 .no-workspace,
 .no-recent {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 48px 20px;
+  min-height: 112px;
+  padding: 24px 18px;
+  border: 1px dashed var(--border-subtle);
+  border-radius: var(--size-radius-lg);
+  background: var(--color-overlay-white-04);
+  color: var(--color-text-muted);
   text-align: center;
-  color: var(--color-overlay-white-60);
-  background: linear-gradient(135deg,
-    color-mix(in srgb, var(--color-accent-500) 3%, transparent) 0%,
-    color-mix(in srgb, var(--color-accent-600) 1%, transparent) 100%);
-  border-radius: 12px;
-  border: 1px dashed color-mix(in srgb, var(--color-accent-500) 20%, transparent);
 }
 
 .no-workspace svg {
-  margin-bottom: 20px;
-  color: var(--color-accent-400);
-  opacity: 0.8;
+  margin-bottom: 10px;
+  color: var(--color-text-muted);
 }
 
 .no-workspace p,
 .no-recent p {
   margin: 0;
-  font-size: 16px;
-  font-weight: 500;
+  font-size: var(--font-size-sm);
 }
 
 .workspace-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-}
-
-/* Entry animation */
-@keyframes slideInUp {
-  0% {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+  gap: 8px;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .workspace-manager {
-    gap: 16px;
+    gap: 18px;
   }
-  
-  .workspace-header {
-    gap: 12px;
+
+  .workspace-card {
+    padding: 14px;
   }
-  
-  .workspace-icon {
-    width: 40px;
-    height: 40px;
+
+  .workspace-actions,
+  .workspace-stats {
+    margin-left: 0;
+    padding-left: 0;
   }
-  
+
   .workspace-stats {
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
+    grid-template-columns: 1fr;
   }
-  
-  .workspace-actions {
-    gap: 8px;
+
+  .stat-item + .stat-item {
+    border-top: 1px solid var(--border-subtle);
+    border-left: 0;
   }
-  
+}
+
+@media (prefers-reduced-motion: reduce) {
   .workspace-card {
-    padding: 16px 20px;
+    transition: none;
   }
 }
diff --git a/src/web-ui/src/tools/workspace/components/WorkspaceManager.tsx b/src/web-ui/src/tools/workspace/components/WorkspaceManager.tsx
index c0e7ff7d02..f5ea0c8952 100644
--- a/src/web-ui/src/tools/workspace/components/WorkspaceManager.tsx
+++ b/src/web-ui/src/tools/workspace/components/WorkspaceManager.tsx
@@ -106,6 +106,15 @@ const WorkspaceManager: React.FC<WorkspaceManagerProps> = ({
     }
   };
 
+  const handleWorkspaceCardKeyDown = (
+    event: React.KeyboardEvent<HTMLDivElement>,
+    workspace: WorkspaceInfo
+  ) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    void handleWorkspaceSelect(workspace);
+  };
+
   const handleCloseWorkspace = async () => {
     try {
       await closeWorkspace();
@@ -254,7 +263,11 @@ const WorkspaceManager: React.FC<WorkspaceManagerProps> = ({
                 <div
                   key={workspace.id}
                   className="workspace-card recent"
-                  onClick={() => handleWorkspaceSelect(workspace)}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={getWorkspaceDisplayName(workspace)}
+                  onClick={() => void handleWorkspaceSelect(workspace)}
+                  onKeyDown={(event) => handleWorkspaceCardKeyDown(event, workspace)}
                 >
                   <div className="workspace-header">
                     <div className="workspace-icon">
@@ -306,7 +319,11 @@ const WorkspaceManager: React.FC<WorkspaceManagerProps> = ({
                 <div
                   key={workspace.id}
                   className="workspace-card recent"
-                  onClick={() => handleWorkspaceSelect(workspace)}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={getWorkspaceDisplayName(workspace)}
+                  onClick={() => void handleWorkspaceSelect(workspace)}
+                  onKeyDown={(event) => handleWorkspaceCardKeyDown(event, workspace)}
                 >
                   <div className="workspace-header">
                     <div className="workspace-icon">

From a524b943468a6dc7e8aa460820e1eeecba758ed0 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Wed, 29 Jul 2026 05:54:03 -0700
Subject: [PATCH 2/2] fix(web): preserve FlowChat welcome heading scale

---
 src/web-ui/src/flow_chat/components/WelcomePanel.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.css b/src/web-ui/src/flow_chat/components/WelcomePanel.css
index 3dfdefd1c1..363095fd6c 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.css
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.css
@@ -86,7 +86,7 @@
 
 .welcome-panel__heading {
   margin: 0;
-  font-size: calc(var(--flowchat-font-size-3xl) + 2px);
+  font-size: calc(var(--flowchat-font-size-3xl) + 4px);
   font-weight: 650;
   color: var(--color-text-primary);
   line-height: var(--flowchat-compact-line-height);