fix(sidebar): animate the sidebar toggle instead of snapping

The global .hidden utility (display: none) also matches #sidebar.hidden,
so the collapsed sidebar was removed from layout before its width/opacity
transition could run, and opening and closing both snapped in one frame.

Keep the collapsed sidebar rendered and take it out of interaction once
closed: .sidebar.hidden stays display: flex, gains pointer-events: none,
and visibility: hidden that is transitioned so it only flips after the
collapse finishes (keeping the closed sidebar out of the tab order).

On desktop the icon rail now tucks under the sidebar and slides out as it
collapses, so the combined width eases instead of jumping by 48px when
the two swap. On mobile the drawer keeps its width while off so it slides
out as well as in, and switching it to the right edge before opening no
longer animates it across the screen. Transitions are disabled under
prefers-reduced-motion, and the auto-collapse restore measures the chat
width with the transition suppressed.

Re-record the computed-style snapshot baseline for the sidebar and icon
rail.

static/css/01-agent-chat.css

@@ -315,7 +315,7 @@ body.bg-pattern-ascii-fireflies {
       width: 240px;
       background: var(--sidebar-bg, var(--panel));
       border-right: 1px solid var(--border);
-      transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
+      transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, visibility 0.25s;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -361,12 +361,23 @@ body.bg-pattern-ascii-fireflies {
       /* !important so it beats the inline width init.js restores from storage —
          otherwise the width never changes and only opacity animates, making the
          collapse look instant. With this, width animates from the inline value
-         down to 0 via the .sidebar width transition. */
+         down to 0 via the .sidebar width transition.
+         display overrides the global .hidden utility, which would otherwise
+         remove the box before any transition can run. visibility (transitioned
+         on .sidebar) flips to hidden only once the collapse has finished,
+         taking the closed sidebar out of the tab order. */
+      display: flex;
       width: 0 !important;
       padding: 0 !important;
       border: none;
       overflow: hidden;
       opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+    /* IDs so this also beats the mobile drawer's !important transition. */
+    @media (prefers-reduced-motion: reduce) {
+      #sidebar, #icon-rail { transition: none !important; }
     }
     /* ===== Sidebar User Bar ===== */
     .sidebar-user-bar {
@@ -449,10 +460,6 @@ body.bg-pattern-ascii-fireflies {
     }
 
 
-    .sidebar.hidden .sidebar-user-bar {
-      display: none;
-    }
-
     /* Sticky sidebar header — logo, never scrolls */
     .sidebar-header {
       display: flex;
@@ -673,6 +680,24 @@ body.bg-pattern-ascii-fireflies {
         margin-bottom: calc(-1 * var(--safe-bottom));
         padding-bottom: calc(8px + var(--safe-bottom));
       }
+      /* Tuck the rail under the sidebar (which paints above it) and slide it
+         out as the sidebar collapses, so the combined width eases instead of
+         jumping by the rail's 48px when the two swap. */
+      .icon-rail,
+      .icon-rail.right-side {
+        margin-inline-end: -48px;
+        transition: margin-inline-end 0.25s ease, display 0.25s allow-discrete;
+      }
+      body.sidebar-collapsed:not(.hamburger-only) .icon-rail,
+      html.ody-sidebar-mini .icon-rail {
+        margin-inline-end: 0;
+      }
+      @starting-style {
+        body.sidebar-collapsed:not(.hamburger-only) .icon-rail,
+        html.ody-sidebar-mini .icon-rail {
+          margin-inline-end: -48px;
+        }
+      }
     }
     .icon-rail-divider {
       width: 24px;
@@ -5116,7 +5141,7 @@ body.bg-pattern-ascii-fireflies {
         width: 80% !important;
         max-width: 340px;
         box-shadow: 4px 0 20px rgba(0,0,0,0.5);
-        transition: transform 0.25s ease, opacity 0.25s ease !important;
+        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s !important;
         opacity: 1 !important;
         overflow: visible !important;
         /* Force opaque background — Firefox mobile renders the
@@ -5147,6 +5172,7 @@ body.bg-pattern-ascii-fireflies {
       }
       html.ody-sidebar-off .sidebar,
       html.ody-mobile-startup-sidebar-hidden .sidebar {
+        width: 80% !important;
         transform: translateX(-100%) !important;
         pointer-events: none !important;
         opacity: 0 !important;

static/js/sidebar-layout.js

@@ -170,6 +170,15 @@ export function initSidebarLayout(Storage, opts) {
     syncRailSide();
   }
 
+  // Move the closed drawer to the other edge without transitioning its
+  // transform across the screen, so it then slides in from the edge it opens on.
+  function _setSidebarSideInstantly(sidebar, right) {
+    sidebar.style.setProperty('transition', 'none', 'important');
+    sidebar.classList.toggle('right-side', right);
+    void sidebar.offsetWidth;
+    sidebar.style.removeProperty('transition');
+  }
+
   // Deliberate "open the sidebar" used by the mobile swipe gesture (wired at
   // module scope). It MUST set _userToggledSidebar so the auto-collapse
   // MutationObserver doesn't immediately re-hide it (the swipe was opening it,
@@ -189,7 +198,7 @@ export function initSidebarLayout(Storage, opts) {
     if (side === 'left' || side === 'right') {
       const wantRight = side === 'right';
       if (sidebar.classList.contains('right-side') !== wantRight) {
-        sidebar.classList.toggle('right-side', wantRight);
+        _setSidebarSideInstantly(sidebar, wantRight);
         // Swipe-selected sides are temporary on compact/mobile layouts. Do
         // not overwrite the user's desktop sidebar preference.
         if (window.innerWidth >= 768) {
@@ -227,7 +236,7 @@ export function initSidebarLayout(Storage, opts) {
           // Mobile: the hamburger always opens the sidebar from the RIGHT.
           // (Not persisted — keeps the desktop side preference untouched.)
           if (!sidebar.classList.contains('right-side')) {
-            sidebar.classList.add('right-side');
+            _setSidebarSideInstantly(sidebar, true);
             if (documentModule && documentModule.swapSide) { try { documentModule.swapSide(); } catch (_) {} }
           }
           // Opening sidebar — blur keyboard first, then open after layout settles
@@ -312,7 +321,9 @@ export function initSidebarLayout(Storage, opts) {
       _wasAutoCollapsed = true;
       syncRailSide();
     } else if (window.innerWidth >= AUTO_COLLAPSE_WIDTH && isHidden && _wasAutoCollapsed) {
-      // Only restore if chat won't be too narrow
+      // Only restore if chat won't be too narrow. Suppress the width
+      // transition so the reflow measures the sidebar at its full width.
+      sidebar.style.transition = 'none';
       sidebar.classList.remove('hidden');
       void document.body.offsetWidth; // reflow
       if (chatContainer && chatContainer.offsetWidth < MIN_CHAT_WIDTH) {
@@ -320,6 +331,8 @@ export function initSidebarLayout(Storage, opts) {
       } else {
         _wasAutoCollapsed = false;
       }
+      void document.body.offsetWidth;
+      sidebar.style.transition = '';
       syncRailSide();
     }
   }

tests/css_snapshot/baseline.json

@@ -1,5 +1,5 @@
 {
- "digest": "f7e60e4a567c46dc",
+ "digest": "5282a075729cc246",
  "elements": {
   "app-shell": {
    "app-loader": "f04ad5bf6312d53f",
@@ -17,7 +17,7 @@
    "export-dropdown-item": "d90f6f513d06a6f7",
    "export-dropdown-menu": "0793e06a6aae6a7a",
    "hamburger-btn": "34714f6eef3734d8",
-   "icon-rail": "e3f72205260a4a5f",
+   "icon-rail": "c800b4ef07f5f1f0",
    "icon-rail-btn": "54ffb10e056ebf44",
    "incognito-btn": "ee42bd3f6a32576b",
    "input-icon-btn": "3d1c773acd84a825",
@@ -59,7 +59,7 @@
    "settings-row": "de568724268cec6e",
    "settings-select": "a96e8430b0ec6668",
    "settings-sidebar-toggle": "6be9025ab24bc434",
-   "sidebar": "77ec42a646a8db66",
+   "sidebar": "0dbf510da61afa07",
    "sidebar-brand": "d3d7ef4b21514e80",
    "sidebar-new-chat": "567fae30048b7ff3",
    "sidebar-resize-handle": "6607b819ee45409d",
@@ -488,7 +488,7 @@
    ".hwfit-serve-topline .hwfit-serve-runtime-note": "15b3fef4e5ceaffc",
    ".hwfit-serve-topline .hwfit-serve-runtime-text": "57c6822b0d13147d",
    ".hwfit-spec-group .hwfit-spec-method": "5d1c329116272cf1",
-   ".icon-rail": "e3f72205260a4a5f",
+   ".icon-rail": "c800b4ef07f5f1f0",
    ".icon-rail-btn": "a5f207c3be15401e",
    ".incognito-btn": "9833a2e86fab6a94",
    ".incognito-indicator": "b3945c46844c7278",
@@ -617,15 +617,15 @@
    ".settings-sidebar.settings-sidebar-collapsed": "d9d8f25df95d9ad8",
    ".settings-sidebar.settings-sidebar-collapsed .settings-sidebar-content": "608e51170864586a",
    ".settings-system-logs-tab": "d0d90a13ff327ace",
-   ".sidebar": "77ec42a646a8db66",
+   ".sidebar": "0dbf510da61afa07",
    ".sidebar .section": "37fc733d59519a08",
    ".sidebar-brand-title": "2b20f75768b50346",
    ".sidebar-header": "0d58816ca65b7216",
    ".sidebar-inner": "ad5e28fedbfeb5db",
    ".sidebar-notif-dot": "2673e215d0cd84a6",
    ".sidebar-user-bar": "b77372dbdcb069ef",
-   ".sidebar.hidden": "0df301b638e2f93f",
+   ".sidebar.hidden": "9021ec7e4e052131",
-   ".sidebar.right-side": "2b6bcc7d59f7b6bd",
+   ".sidebar.right-side": "bb6ed4427d07657e",
    ".skill-card > .skill-card-header": "e2408e762818d2fb",
    ".skill-card-tags": "a327c85e053e6d3f",
    ".skill-card-textcol": "f1059ed37c120b60",
@@ -686,56 +686,56 @@
  },
  "variants": {
   "app-shell": {
-   "desktop-dark-comfortable": "0c9123117135e362",
+   "desktop-dark-comfortable": "a401d90436a5ca64",
-   "desktop-dark-compact": "c694f5d5118ac0e2",
+   "desktop-dark-compact": "207348542b2e4e0f",
-   "desktop-dark-spacious": "90a67613e8cfdf5d",
+   "desktop-dark-spacious": "cf93e41d494c2fdc",
-   "desktop-light-comfortable": "17727a9945ccc77b",
+   "desktop-light-comfortable": "e080e0286a12ad19",
-   "desktop-light-compact": "2a887c30d231e357",
+   "desktop-light-compact": "5ecb27fdc079e051",
-   "desktop-light-spacious": "94b4666734b87625",
+   "desktop-light-spacious": "97eeb23477e3ac77",
-   "laptop-dark-comfortable": "26d334b139b653f2",
+   "laptop-dark-comfortable": "c3142729689b9c36",
-   "laptop-dark-compact": "fea30bad6824357d",
+   "laptop-dark-compact": "2d0bd3f5e3075c14",
-   "laptop-dark-spacious": "4fdb28deaaaec870",
+   "laptop-dark-spacious": "4c9a7ddc3fa236e4",
-   "laptop-light-comfortable": "c7fc986a7e70aac8",
+   "laptop-light-comfortable": "234d92df9bed6f4c",
-   "laptop-light-compact": "147645431229ddff",
+   "laptop-light-compact": "a619f09b8b9e33e5",
-   "laptop-light-spacious": "d513c285d30c8289",
+   "laptop-light-spacious": "5dea4413f33a9002",
-   "phone-dark-comfortable": "551761344bec8d09",
+   "phone-dark-comfortable": "86f8033e0a23b873",
-   "phone-dark-compact": "293d66518c3ec994",
+   "phone-dark-compact": "2df6fce436ebbaac",
-   "phone-dark-spacious": "551761344bec8d09",
+   "phone-dark-spacious": "86f8033e0a23b873",
-   "phone-light-comfortable": "cb41acd3f9af3578",
+   "phone-light-comfortable": "0067d466b77774f5",
-   "phone-light-compact": "dbef6e9e373e9c10",
+   "phone-light-compact": "8c82bcc55dd57b63",
-   "phone-light-spacious": "cb41acd3f9af3578",
+   "phone-light-spacious": "0067d466b77774f5",
-   "tablet-dark-comfortable": "0f682621b4ead393",
+   "tablet-dark-comfortable": "dfeed4c65fea98a1",
-   "tablet-dark-compact": "e6f3fece5e716a2c",
+   "tablet-dark-compact": "cbdb84a6edc362bf",
-   "tablet-dark-spacious": "0f682621b4ead393",
+   "tablet-dark-spacious": "dfeed4c65fea98a1",
-   "tablet-light-comfortable": "6e398df9ca69c58b",
+   "tablet-light-comfortable": "7399146b3d437f7f",
-   "tablet-light-compact": "dca75981c8675bfa",
+   "tablet-light-compact": "be6bf69a5215b052",
-   "tablet-light-spacious": "6e398df9ca69c58b"
+   "tablet-light-spacious": "7399146b3d437f7f"
   },
   "bench": {
-   "desktop-dark-comfortable": "a9709cb47eec7544",
+   "desktop-dark-comfortable": "477394268d56dab4",
-   "desktop-dark-compact": "bfab96cb72fd6faf",
+   "desktop-dark-compact": "cdb2a994f2347d9a",
-   "desktop-dark-spacious": "25469178b443428a",
+   "desktop-dark-spacious": "44a0286474f509bc",
-   "desktop-light-comfortable": "2166794d643fae4c",
+   "desktop-light-comfortable": "b4991b72e1629a7e",
-   "desktop-light-compact": "81d8ab64407b1d9a",
+   "desktop-light-compact": "4b31438b6cf29191",
-   "desktop-light-spacious": "d6d19f33476665af",
+   "desktop-light-spacious": "6d2bb1699acb8ba1",
-   "laptop-dark-comfortable": "57169e64e1fb5324",
+   "laptop-dark-comfortable": "6b8df96c7323bd57",
-   "laptop-dark-compact": "6ac903cd8a711bcf",
+   "laptop-dark-compact": "9af052dd3ee47593",
-   "laptop-dark-spacious": "a47535332e9c5de7",
+   "laptop-dark-spacious": "7d031596ee98a11f",
-   "laptop-light-comfortable": "1e2b381de3556fac",
+   "laptop-light-comfortable": "352a8564ecebd3dd",
-   "laptop-light-compact": "6dbfb465121949c1",
+   "laptop-light-compact": "c038f51edaf78a6b",
-   "laptop-light-spacious": "1b8bfcd4bc4ed214",
+   "laptop-light-spacious": "232cfb9c427a156d",
-   "phone-dark-comfortable": "67ca3c78e6b9495a",
+   "phone-dark-comfortable": "1f66ccc3d46e3d59",
-   "phone-dark-compact": "ad6f3a9f5c8d81cd",
+   "phone-dark-compact": "14802a927af47d2a",
-   "phone-dark-spacious": "1e6f66e56519ba5d",
+   "phone-dark-spacious": "3b48b91c9f218777",
-   "phone-light-comfortable": "ef876073cc2dc45e",
+   "phone-light-comfortable": "191dd9704ea10245",
-   "phone-light-compact": "2ef6f5dc7a646be9",
+   "phone-light-compact": "2f659a85548fd8d6",
-   "phone-light-spacious": "b0d4cd9bd0361966",
+   "phone-light-spacious": "ece925a707889ec4",
-   "tablet-dark-comfortable": "58922240b216e786",
+   "tablet-dark-comfortable": "7075293d10d618b5",
-   "tablet-dark-compact": "3991c22f99a394e0",
+   "tablet-dark-compact": "792f8efb8de95a25",
-   "tablet-dark-spacious": "9848c3b7debac974",
+   "tablet-dark-spacious": "b7ec70ad523b5a2e",
-   "tablet-light-comfortable": "12dfbad36172de20",
+   "tablet-light-comfortable": "bdf9d78bf3cd5ced",
-   "tablet-light-compact": "80d4843e622f1353",
+   "tablet-light-compact": "990bb4d23e0fbac9",
-   "tablet-light-spacious": "c420b8d46c991a44"
+   "tablet-light-spacious": "53c5142d2fca6fc1"
   },
   "login": {
    "desktop-dark-comfortable": "3cf4809db0f8e119",