diff --git a/apps/desktop/src/components/layout/SidebarShell.tsx b/apps/desktop/src/components/layout/SidebarShell.tsx
index 45fdd484..96806dce 100644
--- a/apps/desktop/src/components/layout/SidebarShell.tsx
+++ b/apps/desktop/src/components/layout/SidebarShell.tsx
@@ -137,7 +137,7 @@ function SidebarTabButton({
                     ? "0 1px 2px rgb(0 0 0 / 0.12)"
                     : "none",
                 transition:
-                    "background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease",
+                    "background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 140ms ease-out",
             }}
         >
             <SidebarTabIcon view={view} />
diff --git a/apps/desktop/src/features/ai/AgentsSidebarPanel.tsx b/apps/desktop/src/features/ai/AgentsSidebarPanel.tsx
index 5c798f01..bf5a60f8 100644
--- a/apps/desktop/src/features/ai/AgentsSidebarPanel.tsx
+++ b/apps/desktop/src/features/ai/AgentsSidebarPanel.tsx
@@ -741,12 +741,13 @@ export function AgentsSidebarPanel() {
                         }}
                         title="New chat"
                         aria-label="New chat"
-                        className="flex h-5 w-5 items-center justify-center rounded"
+                        className="ub-chrome-btn flex h-5 w-5 cursor-pointer items-center justify-center rounded"
                         style={{
                             width: metrics.actionButtonSize,
                             height: metrics.actionButtonSize,
                             color: "var(--text-secondary)",
                             background: "transparent",
+                            border: "1px solid transparent",
                         }}
                     >
                         <svg
@@ -765,10 +766,11 @@ export function AgentsSidebarPanel() {
                         type="button"
                         onClick={() => openChatHistoryInWorkspace()}
                         title="Open chat history"
-                        className="rounded px-1.5 py-0.5 text-[10.5px]"
+                        className="ub-chrome-btn cursor-pointer rounded px-1.5 py-0.5 text-[10.5px]"
                         style={{
                             color: "var(--text-secondary)",
                             background: "transparent",
+                            border: "1px solid transparent",
                             fontSize: metrics.summaryFontSize,
                         }}
                     >
diff --git a/apps/desktop/src/features/ai/components/AIChatAgentControls.tsx b/apps/desktop/src/features/ai/components/AIChatAgentControls.tsx
index 5415c037..d4c5d4d2 100644
--- a/apps/desktop/src/features/ai/components/AIChatAgentControls.tsx
+++ b/apps/desktop/src/features/ai/components/AIChatAgentControls.tsx
@@ -144,24 +144,13 @@ function DropdownField({
                     rememberFocusedElement();
                     setOpen(true);
                 }}
-                className="flex items-center gap-1 rounded-md px-2 py-1 text-xs"
+                className="nw-control-trigger flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs"
+                data-open={open ? "true" : undefined}
                 style={{
                     color: "var(--text-secondary)",
                     backgroundColor: "transparent",
                     border: "none",
                     opacity: isDisabled ? 0.45 : 1,
-                    transition: "background-color 100ms ease, color 100ms ease",
-                }}
-                onMouseEnter={(e) => {
-                    if (isDisabled) return;
-                    e.currentTarget.style.backgroundColor =
-                        "color-mix(in srgb, var(--bg-tertiary) 80%, transparent)";
-                    e.currentTarget.style.color = "var(--text-primary)";
-                }}
-                onMouseLeave={(e) => {
-                    if (isDisabled) return;
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.color = "var(--text-secondary)";
                 }}
                 title={label}
                 disabled={isDisabled}
diff --git a/apps/desktop/src/features/ai/components/AIChatComposer.tsx b/apps/desktop/src/features/ai/components/AIChatComposer.tsx
index 93b616e9..63240389 100644
--- a/apps/desktop/src/features/ai/components/AIChatComposer.tsx
+++ b/apps/desktop/src/features/ai/components/AIChatComposer.tsx
@@ -1082,6 +1082,12 @@ export function AIChatComposer({
     const stopTransitionLabel = hasPendingSubmitAfterStop
         ? "Sending next message after stop..."
         : "Stopping previous run...";
+    const stopButtonVisible = isStreaming || isStopping;
+    const stopButtonOpacity = !stopButtonVisible
+        ? 0
+        : disabled || isStopping
+          ? 0.4
+          : 1;
 
     const closeMentionPicker = () => setMentionState(EMPTY_MENTION_STATE);
     const closeSlashPicker = () => setSlashState(EMPTY_SLASH_STATE);
@@ -1672,8 +1678,12 @@ export function AIChatComposer({
                             stroke="currentColor"
                             strokeWidth="1.6"
                             strokeLinecap="round"
+                            strokeLinejoin="round"
                         >
-                            <path d="M1 5V1h4M9 13h4V9M1 1l4 4M13 13l-4-4" />
+                            {/* Collapse: inner brackets at (5,5) and (9,9)
+                                with diagonals out to the outer corners — reads
+                                as arrows pulling inward toward the centre. */}
+                            <path d="M5 1V5H1M9 13V9H13M5 5L1 1M9 9L13 13" />
                         </svg>
                     ) : (
                         <svg
@@ -1684,7 +1694,11 @@ export function AIChatComposer({
                             stroke="currentColor"
                             strokeWidth="1.6"
                             strokeLinecap="round"
+                            strokeLinejoin="round"
                         >
+                            {/* Expand: outer brackets at the corners with
+                                diagonals pushing outward — arrows reaching
+                                toward the corners. */}
                             <path d="M9 1h4v4M5 13H1V9M13 1l-5 5M1 13l5-5" />
                         </svg>
                     )}
@@ -1945,24 +1959,91 @@ export function AIChatComposer({
                         minHeight: expanded ? 42 : undefined,
                     }}
                 >
-                    <div className="min-w-0 flex-1">
-                        {isStopTransitionActive ? (
-                            <div
-                                className="truncate px-1 pb-1 text-xs"
-                                style={{
-                                    color: "var(--text-secondary)",
-                                }}
-                            >
-                                {stopTransitionLabel}
-                            </div>
-                        ) : null}
-                        {footer}
+                    <div
+                        className="relative min-w-0 flex-1"
+                        // Footer and transition label share the same slot via
+                        // an opacity crossfade. Both are always mounted so the
+                        // dropdowns do not flash on/off when the user stops a
+                        // run or queues a follow-up message. minHeight matches
+                        // the footer so the row never grows vertically.
+                        style={{ minHeight: 24 }}
+                    >
+                        <div
+                            style={{
+                                opacity: isStopTransitionActive ? 0 : 1,
+                                pointerEvents: isStopTransitionActive
+                                    ? "none"
+                                    : "auto",
+                                transition: "opacity 160ms ease-out",
+                            }}
+                            aria-hidden={isStopTransitionActive || undefined}
+                        >
+                            {footer}
+                        </div>
+                        <div
+                            className="pointer-events-none absolute inset-0 flex items-center truncate px-1 text-xs"
+                            style={{
+                                color: "var(--text-secondary)",
+                                opacity: isStopTransitionActive ? 1 : 0,
+                                transition: "opacity 160ms ease-out",
+                            }}
+                            aria-hidden={!isStopTransitionActive || undefined}
+                        >
+                            {stopTransitionLabel}
+                        </div>
                     </div>
+                    {/* Stop is rendered unconditionally and placed before
+                        Send in DOM order so Send stays anchored to the right
+                        edge regardless of streaming state. Visibility toggles
+                        via opacity + pointer-events for a smooth fade with no
+                        layout shift. */}
+                        <button
+                            type="button"
+                            onClick={onStop}
+                            disabled={!stopButtonVisible || disabled || isStopping}
+                            aria-hidden={!stopButtonVisible || undefined}
+                            tabIndex={stopButtonVisible ? 0 : -1}
+                            className="nw-composer-action flex shrink-0 cursor-pointer items-center justify-center rounded-full"
+                            style={{
+                                width: 28,
+                                height: 28,
+                                color: "#fff",
+                                backgroundColor: "#b91c1c",
+                                border: "none",
+                                opacity: stopButtonOpacity,
+                                pointerEvents: stopButtonVisible
+                                    ? "auto"
+                                    : "none",
+                                // No overshoot on transform: the bouncy ease
+                                // used elsewhere would briefly grow the button
+                                // past scale 1 while it is also fading out,
+                                // which reads as a flash. Smooth ease-out keeps
+                                // the press feel without that interaction.
+                                transition:
+                                    "transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 120ms ease-out, box-shadow 120ms ease-out, background-color 150ms ease, opacity 180ms ease-out",
+                            }}
+                            aria-label={isStopping ? "Stopping" : "Stop"}
+                            title={isStopping ? "Stopping" : "Stop"}
+                        ><svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 14 14"
+                            fill="currentColor"
+                        >
+                            <rect
+                                x="2"
+                                y="2"
+                                width="10"
+                                height="10"
+                                rx="2"
+                            />
+                        </svg>
+                    </button>
                     <button
                         type="button"
                         onClick={onSubmit}
                         disabled={!canSubmit}
-                        className="flex shrink-0 items-center justify-center rounded-full"
+                        className="nw-composer-action flex shrink-0 cursor-pointer items-center justify-center rounded-full"
                         style={{
                             width: 28,
                             height: 28,
@@ -1972,7 +2053,8 @@ export function AIChatComposer({
                                 : "var(--accent)",
                             border: "none",
                             opacity: canSubmit ? 1 : 0.4,
-                            transition: "all 0.15s ease",
+                            transition:
+                                "transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 120ms ease-out, box-shadow 120ms ease-out, background-color 150ms ease, color 150ms ease, opacity 150ms ease",
                         }}
                         aria-label={
                             hasPendingSubmitAfterStop
@@ -2002,40 +2084,6 @@ export function AIChatComposer({
                             <path d="M8 12V4M4 7l4-3 4 3" />
                         </svg>
                     </button>
-                    {(isStreaming || isStopping) && (
-                        <button
-                            type="button"
-                            onClick={onStop}
-                            disabled={disabled || isStopping}
-                            className="flex shrink-0 items-center justify-center rounded-full"
-                            style={{
-                                width: 28,
-                                height: 28,
-                                color: "#fff",
-                                backgroundColor: "#b91c1c",
-                                border: "none",
-                                opacity: disabled || isStopping ? 0.4 : 1,
-                                transition: "all 0.15s ease",
-                            }}
-                            aria-label={isStopping ? "Stopping" : "Stop"}
-                            title={isStopping ? "Stopping" : "Stop"}
-                        >
-                            <svg
-                                width="14"
-                                height="14"
-                                viewBox="0 0 14 14"
-                                fill="currentColor"
-                            >
-                                <rect
-                                    x="2"
-                                    y="2"
-                                    width="10"
-                                    height="10"
-                                    rx="2"
-                                />
-                            </svg>
-                        </button>
-                    )}
                 </div>
                 <AIChatMentionPicker
                     open={mentionState.open}
diff --git a/apps/desktop/src/features/ai/components/AIChatSessionView.tsx b/apps/desktop/src/features/ai/components/AIChatSessionView.tsx
index 95379a53..2e10c202 100644
--- a/apps/desktop/src/features/ai/components/AIChatSessionView.tsx
+++ b/apps/desktop/src/features/ai/components/AIChatSessionView.tsx
@@ -642,6 +642,7 @@ export function AIChatSessionView({ paneId }: AIChatSessionViewProps) {
                         chatActions.attachFolder(folderPath, name, sessionId);
                     }}
                     onSubmit={() => {
+                        setComposerExpanded(false);
                         void chatActions.sendMessage(sessionId);
                     }}
                     onStop={() => {
diff --git a/apps/desktop/src/features/editor/EditorPaneBar.tsx b/apps/desktop/src/features/editor/EditorPaneBar.tsx
index 184d79af..54161b03 100644
--- a/apps/desktop/src/features/editor/EditorPaneBar.tsx
+++ b/apps/desktop/src/features/editor/EditorPaneBar.tsx
@@ -788,6 +788,9 @@ export function EditorPaneBar({ paneId, isFocused }: EditorPaneBarProps) {
                                                         width: 20,
                                                         height: 20,
                                                         color: "var(--text-secondary)",
+                                                        // Match UnifiedBar tab close: sit closer to the
+                                                        // right edge of the tab.
+                                                        marginRight: -6,
                                                     }}
                                                 >
                                                     <svg
diff --git a/apps/desktop/src/features/editor/UnifiedBar.tsx b/apps/desktop/src/features/editor/UnifiedBar.tsx
index a9b01ef8..8bbf5767 100644
--- a/apps/desktop/src/features/editor/UnifiedBar.tsx
+++ b/apps/desktop/src/features/editor/UnifiedBar.tsx
@@ -1380,6 +1380,10 @@ export function UnifiedBar({ windowMode }: UnifiedBarProps) {
                                                         style={{
                                                             width: tabLayout.closeButtonSize,
                                                             height: tabLayout.closeButtonSize,
+                                                            // Eat into the tab's right padding so the
+                                                            // close button sits closer to the right edge
+                                                            // without losing its clickable area.
+                                                            marginRight: -6,
                                                         }}
                                                     >
                                                         <svg
diff --git a/apps/desktop/src/features/settings/SettingsPanel.tsx b/apps/desktop/src/features/settings/SettingsPanel.tsx
index 3ec32482..c38d86d6 100644
--- a/apps/desktop/src/features/settings/SettingsPanel.tsx
+++ b/apps/desktop/src/features/settings/SettingsPanel.tsx
@@ -83,7 +83,9 @@ function Toggle({
         <button
             role="switch"
             aria-checked={value}
+            disabled={disabled}
             onClick={() => !disabled && onChange(!value)}
+            className="nw-settings-toggle"
             style={{
                 width: 36,
                 height: 20,
@@ -93,7 +95,6 @@ function Toggle({
                 backgroundColor: value ? "var(--accent)" : "var(--bg-tertiary)",
                 position: "relative",
                 flexShrink: 0,
-                transition: "background-color 150ms",
                 opacity: disabled ? 0.4 : 1,
             }}
         >
@@ -139,6 +140,8 @@ function SegmentedControl<T extends string | number>({
                     <button
                         key={String(opt.value)}
                         onClick={() => onChange(opt.value)}
+                        data-active={active || undefined}
+                        className="nw-settings-segment"
                         style={{
                             padding: "3px 10px",
                             borderRadius: 5,
@@ -156,7 +159,6 @@ function SegmentedControl<T extends string | number>({
                                 ? "0 1px 3px rgba(0,0,0,0.1)"
                                 : "none",
                             fontWeight: active ? 500 : 400,
-                            transition: "all 100ms",
                         }}
                     >
                         {opt.label}
@@ -256,6 +258,8 @@ function SelectField<T extends string | number | null>({
                 type="button"
                 disabled={disabled}
                 onClick={() => setOpen((v) => !v)}
+                data-open={open ? "true" : undefined}
+                className="nw-settings-select"
                 style={{
                     display: "flex",
                     alignItems: "center",
@@ -345,6 +349,7 @@ function SelectField<T extends string | number | null>({
                                             onChange(opt.value);
                                             setOpen(false);
                                         }}
+                                        className="nw-settings-select-item"
                                         style={{
                                             display: "block",
                                             width: "100%",
@@ -362,14 +367,6 @@ function SelectField<T extends string | number | null>({
                                             cursor: "pointer",
                                             whiteSpace: "nowrap",
                                         }}
-                                        onMouseEnter={(e) => {
-                                            e.currentTarget.style.backgroundColor =
-                                                "var(--bg-tertiary)";
-                                        }}
-                                        onMouseLeave={(e) => {
-                                            e.currentTarget.style.backgroundColor =
-                                                "transparent";
-                                        }}
                                     >
                                         {opt.label}
                                     </button>
@@ -419,18 +416,23 @@ function NumberStepper({
             }}
         >
             <button
+                type="button"
+                aria-label="Decrement"
+                disabled={value <= min}
                 onClick={() => onChange(Math.max(min, value - step))}
+                className="nw-settings-stepper-btn"
                 style={{
                     width: 24,
                     height: 26,
                     border: "none",
                     background: "transparent",
-                    cursor: "pointer",
+                    cursor: value <= min ? "not-allowed" : "pointer",
                     color: "var(--text-secondary)",
                     fontSize: 14,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
+                    opacity: value <= min ? 0.45 : 1,
                 }}
             >
                 −
@@ -459,6 +461,7 @@ function NumberStepper({
                         inputRef.current?.blur();
                     }
                 }}
+                className="nw-settings-stepper-input"
                 style={{
                     width: 34,
                     textAlign: "center",
@@ -471,18 +474,23 @@ function NumberStepper({
                 }}
             />
             <button
+                type="button"
+                aria-label="Increment"
+                disabled={value >= max}
                 onClick={() => onChange(Math.min(max, value + step))}
+                className="nw-settings-stepper-btn"
                 style={{
                     width: 24,
                     height: 26,
                     border: "none",
                     background: "transparent",
-                    cursor: "pointer",
+                    cursor: value >= max ? "not-allowed" : "pointer",
                     color: "var(--text-secondary)",
                     fontSize: 14,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
+                    opacity: value >= max ? 0.45 : 1,
                 }}
             >
                 +
@@ -595,6 +603,8 @@ function ThemePicker({
                     <button
                         key={name}
                         onClick={() => onChange(name)}
+                        data-active={active || undefined}
+                        className="nw-settings-theme-tile"
                         style={{
                             display: "flex",
                             flexDirection: "column",
@@ -607,7 +617,6 @@ function ThemePicker({
                                 : "2px solid var(--border)",
                             background: "var(--bg-secondary)",
                             cursor: "pointer",
-                            transition: "border-color 150ms",
                         }}
                     >
                         {/* Color preview */}
diff --git a/apps/desktop/src/features/vault/VaultSwitcher.tsx b/apps/desktop/src/features/vault/VaultSwitcher.tsx
index a3d080cd..a4d4cd99 100644
--- a/apps/desktop/src/features/vault/VaultSwitcher.tsx
+++ b/apps/desktop/src/features/vault/VaultSwitcher.tsx
@@ -86,16 +86,12 @@ export function VaultSwitcher({
         <button
             key={label}
             onClick={action}
-            className="w-full text-left px-3 py-1.5 text-xs rounded flex items-center gap-2"
+            className="nw-vault-menu-item w-full cursor-pointer text-left px-3 py-1.5 text-xs rounded flex items-center gap-2"
             style={{
                 color: muted ? "var(--text-secondary)" : "var(--text-primary)",
+                background: "transparent",
+                border: "none",
             }}
-            onMouseEnter={(e) =>
-                (e.currentTarget.style.backgroundColor = "var(--bg-tertiary)")
-            }
-            onMouseLeave={(e) =>
-                (e.currentTarget.style.backgroundColor = "transparent")
-            }
         >
             <span style={{ width: 12, flexShrink: 0, color: "var(--accent)" }}>
                 {checked ? "✓" : ""}
@@ -126,14 +122,14 @@ export function VaultSwitcher({
                     style={{
                         position: "absolute",
                         bottom: "100%",
-                        left: 0,
-                        right: 0,
+                        left: 8,
+                        right: 8,
                         marginBottom: 4,
                         zIndex: 9999,
                         borderRadius: 8,
                         backgroundColor: "var(--bg-secondary)",
                         border: "1px solid var(--border)",
-                        boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                        boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
                         padding: 4,
                     }}
                 >
@@ -301,15 +297,28 @@ export function VaultSwitcher({
                         payload: { path: vaultPath },
                     });
                 }}
-                className="w-full flex items-center gap-2 px-3 py-3 text-xs"
-                style={{ color: "var(--text-secondary)" }}
+                data-open={isOpen ? "true" : undefined}
+                className="nw-vault-trigger flex w-full cursor-pointer items-center gap-2 text-xs"
+                style={{
+                    margin: "4px 8px",
+                    width: "calc(100% - 16px)",
+                    padding: "4px 8px",
+                    borderRadius: 7,
+                    border: "1px solid color-mix(in srgb, var(--border) 70%, transparent)",
+                    background: "color-mix(in srgb, var(--bg-tertiary) 38%, transparent)",
+                    color: "var(--text-secondary)",
+                }}
             >
                 <svg
+                    aria-hidden="true"
                     width="13"
                     height="13"
                     viewBox="0 0 16 16"
                     fill="none"
-                    style={{ flexShrink: 0 }}
+                    style={{
+                        flexShrink: 0,
+                        color: "var(--text-secondary)",
+                    }}
                 >
                     <rect
                         x="2"
@@ -334,11 +343,13 @@ export function VaultSwitcher({
                     {vaultName}
                 </span>
                 <svg
+                    className="nw-vault-trigger-chevron"
                     width="10"
                     height="10"
                     viewBox="0 0 16 16"
                     fill="none"
-                    style={{ flexShrink: 0 }}
+                    style={{ flexShrink: 0, opacity: 0.65 }}
+                    aria-hidden="true"
                 >
                     <path
                         d="M5 6l3-3 3 3M5 10l3 3 3-3"
diff --git a/apps/desktop/src/index.css b/apps/desktop/src/index.css
index e6db7cce..116188fc 100644
--- a/apps/desktop/src/index.css
+++ b/apps/desktop/src/index.css
@@ -865,10 +865,10 @@ body.dragging-tab * {
     ) !important;
 }
 
-/* Sidebar shell tabs. Mirrors Comando's `.sidebar-git-scope-trigger:hover`
-   feel — subtle background/border shift plus a 1px lift so the pill
-   "jumps" forward under the cursor. Works for both inactive and active
-   tabs; active tabs keep their accent-aware border intact. */
+/* Sidebar shell tabs. A small physical-button feel: lift + soft shadow on
+   hover, then a snappy press-down with inset shadow on :active so the pill
+   tangibly depresses under the cursor. Active tabs share the same press
+   behaviour while keeping their accent-aware border intact. */
 .ub-sidebar-tab:hover:not([data-active]) {
     background-color: color-mix(
         in srgb,
@@ -882,9 +882,27 @@ body.dragging-tab * {
     );
     color: var(--text-primary);
     transform: translateY(-1px);
+    box-shadow:
+        0 2px 6px color-mix(in srgb, black 18%, transparent),
+        inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
 }
 .ub-sidebar-tab[data-active]:hover {
     transform: translateY(-1px);
+    box-shadow:
+        0 2px 6px color-mix(in srgb, black 22%, transparent),
+        0 1px 2px color-mix(in srgb, black 10%, transparent);
+}
+.ub-sidebar-tab:active:not(:disabled),
+.ub-sidebar-tab[data-active]:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow:
+        inset 0 1px 2px color-mix(in srgb, black 28%, transparent),
+        inset 0 0 0 1px color-mix(in srgb, black 6%, transparent);
+    transition-duration: 60ms;
+}
+.ub-sidebar-tab:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 1px;
 }
 
 .ub-nav-btn {
@@ -914,6 +932,310 @@ body.dragging-tab * {
     filter: brightness(0.95);
 }
 
+/* ── Settings panel primitives ─────────────────────────────────
+   Toggle switches, segmented controls, select dropdowns, +/- steppers
+   and theme tiles all share the same tactile press feel as the rest of
+   the UI so the settings panel doesn't feel "dead" compared to the chat
+   surfaces. */
+
+.nw-settings-toggle {
+    transition:
+        background-color 150ms ease,
+        opacity 150ms ease,
+        box-shadow 150ms ease,
+        transform 150ms ease;
+}
+.nw-settings-toggle:hover:not(:disabled) {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.nw-settings-toggle:active:not(:disabled) {
+    transform: scale(0.96);
+    transition-duration: 70ms;
+}
+.nw-settings-toggle:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 2px;
+}
+
+.nw-settings-segment {
+    transition:
+        background-color 120ms ease,
+        color 120ms ease,
+        box-shadow 120ms ease,
+        transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.nw-settings-segment:not([data-active="true"]):hover:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--bg-secondary) 50%,
+        transparent
+    ) !important;
+    color: var(--text-primary) !important;
+}
+.nw-settings-segment:active:not(:disabled) {
+    transform: scale(0.96);
+    transition-duration: 60ms;
+}
+.nw-settings-segment:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 1px;
+}
+
+.nw-settings-select {
+    transition:
+        background-color 120ms ease-out,
+        border-color 120ms ease-out,
+        box-shadow 120ms ease-out,
+        transform 120ms ease-out;
+}
+.nw-settings-select:hover:not(:disabled) {
+    border-color: color-mix(
+        in srgb,
+        var(--text-primary) 22%,
+        var(--border)
+    ) !important;
+    background-color: color-mix(
+        in srgb,
+        var(--bg-tertiary) 80%,
+        var(--bg-secondary)
+    ) !important;
+}
+.nw-settings-select[data-open="true"]:not(:disabled) {
+    border-color: color-mix(
+        in srgb,
+        var(--accent) 48%,
+        var(--border)
+    ) !important;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.nw-settings-select:active:not(:disabled) {
+    transform: scale(0.985);
+    transition-duration: 60ms;
+}
+.nw-settings-select:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 1px;
+}
+
+.nw-settings-select-item {
+    transition:
+        background-color 80ms ease-out,
+        color 80ms ease-out;
+}
+.nw-settings-select-item:hover {
+    background-color: var(--bg-tertiary) !important;
+}
+.nw-settings-select-item:active {
+    background-color: color-mix(
+        in srgb,
+        var(--accent) 18%,
+        var(--bg-tertiary)
+    ) !important;
+}
+
+.nw-settings-stepper-btn {
+    transition:
+        background-color 100ms ease-out,
+        color 100ms ease-out,
+        transform 80ms ease-out;
+}
+.nw-settings-stepper-btn:hover:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--text-primary) 10%,
+        transparent
+    ) !important;
+    color: var(--text-primary) !important;
+}
+.nw-settings-stepper-btn:active:not(:disabled) {
+    transform: scale(0.9);
+    background-color: color-mix(
+        in srgb,
+        var(--text-primary) 18%,
+        transparent
+    ) !important;
+    transition-duration: 50ms;
+}
+.nw-settings-stepper-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: -1px;
+}
+
+.nw-settings-stepper-input:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: -2px;
+    border-radius: 4px;
+}
+
+.nw-settings-theme-tile {
+    transition:
+        border-color 140ms ease-out,
+        transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
+        box-shadow 140ms ease-out;
+}
+.nw-settings-theme-tile:hover:not([data-active="true"]) {
+    transform: translateY(-1px);
+    border-color: color-mix(
+        in srgb,
+        var(--text-primary) 28%,
+        var(--border)
+    ) !important;
+    box-shadow: 0 4px 12px color-mix(in srgb, black 22%, transparent);
+}
+.nw-settings-theme-tile[data-active="true"]:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px
+        color-mix(in srgb, var(--accent) 28%, transparent);
+}
+.nw-settings-theme-tile:active:not(:disabled) {
+    transform: scale(0.985);
+    transition-duration: 70ms;
+}
+.nw-settings-theme-tile:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 2px;
+}
+
+/* Vault switcher trigger (sidebar footer). A real-looking button with a
+   tinted icon chip, hover lift, pressed-in open state, and tactile click
+   feedback. */
+.nw-vault-trigger {
+    transition:
+        background-color 140ms ease-out,
+        border-color 140ms ease-out,
+        box-shadow 140ms ease-out,
+        transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.nw-vault-trigger:hover:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--bg-tertiary) 70%,
+        transparent
+    ) !important;
+    border-color: color-mix(
+        in srgb,
+        var(--text-primary) 14%,
+        transparent
+    ) !important;
+    transform: translateY(-0.5px);
+    box-shadow:
+        0 2px 8px color-mix(in srgb, black 22%, transparent),
+        inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
+}
+.nw-vault-trigger[data-open="true"] {
+    background-color: color-mix(
+        in srgb,
+        var(--accent) 10%,
+        var(--bg-tertiary)
+    ) !important;
+    border-color: color-mix(
+        in srgb,
+        var(--accent) 36%,
+        var(--border)
+    ) !important;
+    box-shadow: inset 0 1px 2px color-mix(in srgb, black 18%, transparent);
+}
+.nw-vault-trigger:active:not(:disabled) {
+    transform: scale(0.985) translateY(0);
+    box-shadow: inset 0 1px 2px color-mix(in srgb, black 30%, transparent);
+    transition-duration: 70ms;
+}
+.nw-vault-trigger:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 2px;
+}
+.nw-vault-trigger .nw-vault-trigger-chevron {
+    transition:
+        opacity 140ms ease-out,
+        color 140ms ease-out;
+}
+.nw-vault-trigger[data-open="true"] .nw-vault-trigger-chevron {
+    color: var(--accent);
+    opacity: 1 !important;
+}
+
+/* Vault switcher menu items. */
+.nw-vault-menu-item {
+    transition: background-color 80ms ease-out, color 80ms ease-out;
+}
+.nw-vault-menu-item:hover:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--bg-tertiary) 95%,
+        transparent
+    ) !important;
+}
+.nw-vault-menu-item:active:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--accent) 14%,
+        var(--bg-tertiary)
+    ) !important;
+}
+
+/* Composer agent-control dropdown triggers (Approval preset, Model,
+   Reasoning effort, …). Hover lifts background subtly, the open state
+   stays pressed-in until the menu closes, and a press scales down with
+   an inset shadow for a tactile click. */
+.nw-control-trigger {
+    transition:
+        background-color 120ms ease-out,
+        color 120ms ease-out,
+        box-shadow 120ms ease-out,
+        transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.nw-control-trigger:hover:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--bg-tertiary) 82%,
+        transparent
+    ) !important;
+    color: var(--text-primary) !important;
+}
+.nw-control-trigger[data-open="true"]:not(:disabled) {
+    background-color: color-mix(
+        in srgb,
+        var(--bg-tertiary) 94%,
+        transparent
+    ) !important;
+    color: var(--text-primary) !important;
+    box-shadow: inset 0 1px 2px color-mix(in srgb, black 18%, transparent);
+}
+.nw-control-trigger:active:not(:disabled) {
+    transform: scale(0.96);
+    background-color: color-mix(
+        in srgb,
+        var(--bg-tertiary) 96%,
+        transparent
+    ) !important;
+    box-shadow: inset 0 1px 2px color-mix(in srgb, black 28%, transparent);
+    transition-duration: 60ms;
+}
+.nw-control-trigger:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 1px;
+}
+
+/* Composer send/stop pill buttons. The press should feel like a physical
+   button depressing: shrink slightly, dim, and gain an inset shadow that
+   replaces the lifted drop shadow. */
+.nw-composer-action {
+    transform: translateZ(0);
+}
+.nw-composer-action:hover:not(:disabled) {
+    filter: brightness(1.08);
+    box-shadow: 0 2px 6px color-mix(in srgb, black 24%, transparent);
+}
+.nw-composer-action:active:not(:disabled) {
+    transform: scale(0.9);
+    filter: brightness(0.9);
+    box-shadow: inset 0 2px 4px color-mix(in srgb, black 36%, transparent);
+}
+.nw-composer-action:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+    outline-offset: 2px;
+}
+
 .ub-tab:not([data-active="true"]):hover {
     background-color: color-mix(
         in srgb,