diff --git a/.prettierignore b/.prettierignore
index 82e333ac..9ecc5ffd 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -22,7 +22,7 @@ docs/issue-metrics/*.md
 
 # Some CSS files are preprocessed and prettier doesn't handle them well
 # We also dont want to format the CSS files that are generated by the build
-src/zen/tabs/zen-tabs/vertical-tabs.css
+src/zen/tabs/zen-tabs.css
 src/zen/compact-mode/zen-compact-mode.css
 src/zen/common/ZenEmojies.mjs
 
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 8e3de8d3..bd4e8aab 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -51,8 +51,8 @@
         content/browser/zen-components/ZenTabUnloader.mjs                       (../../zen/tabs/ZenTabUnloader.mjs)
         content/browser/zen-components/ZenPinnedTabsStorage.mjs                 (../../zen/tabs/ZenPinnedTabsStorage.mjs)
         content/browser/zen-components/ZenPinnedTabManager.mjs                  (../../zen/tabs/ZenPinnedTabManager.mjs)
-        content/browser/zen-styles/zen-tabs.css                                 (../../zen/tabs/zen-tabs.css)
-*       content/browser/zen-styles/zen-tabs/vertical-tabs.css                   (../../zen/tabs/zen-tabs/vertical-tabs.css)
+*       content/browser/zen-styles/zen-tabs.css                                 (../../zen/tabs/zen-tabs.css)
+        content/browser/zen-styles/zen-tabs/vertical-tabs.css                   (../../zen/tabs/zen-tabs/vertical-tabs.css)
 
         content/browser/zen-components/ZenGlanceManager.mjs                     (../../zen/glance/ZenGlanceManager.mjs)
         content/browser/zen-styles/zen-glance.css                               (../../zen/glance/zen-glance.css)
diff --git a/src/zen/tabs/zen-tabs.css b/src/zen/tabs/zen-tabs.css
index 5ddb9c65..e8f15ccd 100644
--- a/src/zen/tabs/zen-tabs.css
+++ b/src/zen/tabs/zen-tabs.css
@@ -16,3 +16,100 @@
     display: none !important;
   }
 }
+
+/* ==========================================================================
+   Single Toolbar Mode - Top Bar Handling (Includes External CSS)
+   ========================================================================== */
+:root[zen-single-toolbar='true']:not([customizing]) {
+  #zen-appcontent-navbar-container {
+    display: flex;
+    -moz-window-dragging: drag; /* Allow dragging the window via this bar */
+    min-height: var(--zen-element-separation);
+    height: var(--zen-element-separation);
+
+    /* Ensure Personal Toolbar takes available width */
+    & #PersonalToolbar {
+      width: -moz-available;
+    }
+
+    /* Include styles for the top bar under certain conditions:
+      * - Bookmarks toolbar is visible OR
+      * - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
+      */
+    &:has(#PersonalToolbar[collapsed='false']) {
+%include zen-tabs/vertical-tabs-topbar.inc.css
+    }
+    &[should-hide='true'] {
+%include zen-tabs/vertical-tabs-topbar.inc.css
+    }
+
+    /* Hide the top bar completely in fullscreen mode */
+    :root[inDOMFullscreen='true'] & {
+      max-height: 0 !important;
+      min-height: unset !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+  }
+}
+
+
+/* ==========================================================================
+  Very Special Occasions - Complex Layout Fixes
+  ========================================================================== */
+
+/* Exclude these complex fixes if in compact mode */
+:root:not([zen-compact-mode='true']) {
+
+  /* --- Fix: Right Sidebar + Collapsed + Standard Window Buttons --- */
+  &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
+    /* Push toolbox down below the top toolbar */
+    & #navigator-toolbox {
+      margin-top: var(--zen-toolbar-height) !important;
+    }
+    /* Pull window buttons container leftwards over the collapsed sidebar */
+    & .titlebar-buttonbox-container {
+      margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
+    }
+    /* Allow overflow for the button box */
+    & #zen-appcontent-wrapper {
+      overflow-x: visible;
+    }
+    /* Reset padding for top buttons */
+    & #zen-sidebar-top-buttons-customization-target {
+      padding-top: 0;
+    }
+    /* Add padding to the left of the nav container */
+    & #zen-appcontent-navbar-container {
+      padding-left: var(--zen-element-separation);
+    }
+    /* Include common fixes for this top-button scenario */
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
+  }
+
+  /* --- Fix: Left Sidebar + Collapsed + Reversed Window Buttons --- */
+  &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
+    /* Push toolbox down below the top toolbar */
+    & #navigator-toolbox {
+      margin-top: var(--zen-toolbar-height) !important;
+    }
+    /* Pull window buttons container rightwards over the collapsed sidebar */
+    & .titlebar-buttonbox-container {
+      margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
+    }
+    /* Allow overflow for the button box */
+    & #zen-appcontent-wrapper {
+      overflow-x: visible;
+    }
+    /* Reset padding for top buttons */
+    & #zen-sidebar-top-buttons-customization-target {
+      padding-top: 0;
+    }
+    /* Add padding to the right of the nav container */
+    & #zen-appcontent-navbar-container {
+      padding-right: var(--zen-element-separation);
+    }
+    /* Include common fixes for this top-button scenario */
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
+  }
+}
\ No newline at end of file
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 5e1edd0e..3d115ea7 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -4,306 +4,342 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+/* ==========================================================================
+   Initial Setup & Layout Changes for Vertical Tabs
+   ========================================================================== */
+
+/* Ensure tabs, toolbar, and titlebar stack vertically */
 #tabbrowser-tabs,
 #TabsToolbar,
 #titlebar,
 #TabsToolbar-customization-target {
   flex-direction: column;
-  height: 100%;
+  height: 100%; /* Make sure they take up full height */
 }
 
+/* ==========================================================================
+   Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
+   ========================================================================== */
 :root[zen-single-toolbar='true'] {
+  /* Define and apply a smaller toolbar height for single toolbar mode */
   & #zen-appcontent-navbar-container,
   & #zen-sidebar-top-buttons {
     --zen-toolbar-height: 32px;
     height: var(--zen-toolbar-height);
   }
 
+  /* Specific styling for macOS when the three-dot menu is hidden */
   @media (-moz-platform: macos) and (not -moz-pref('zen.view.mac.show-three-dot-menu')) {
+    /* Hide the PanelUI (hamburger) button when not customizing or open */
     &:not([customizing]) #PanelUI-button:not([open]):not([panelopen]) {
-      position: absolute;
+      position: absolute; /* Remove from layout flow */
       opacity: 0;
-      pointer-events: none;
+      pointer-events: none; /* Make it unclickable */
     }
   }
 
-  & #zen-sidebar-top-buttons .toolbarbutton-1 {
-    & > .toolbarbutton-icon {
-      padding: 4px;
-    }
+  /* Adjust padding for top sidebar buttons */
+  & #zen-sidebar-top-buttons .toolbarbutton-1 > .toolbarbutton-icon {
+    padding: 4px;
   }
 
+  /* Make the separator take full width */
   & #zen-sidebar-top-buttons-separator {
     width: 100%;
   }
 }
 
+/* ==========================================================================
+   Vertical Tabs Mode Specific Styles (`zen.tabs.vertical` pref)
+   ========================================================================== */
 @media -moz-pref('zen.tabs.vertical') {
   :root:not([zen-window-buttons-reversed='true']) {
+    /* Align window controls to the right by default */
     & .titlebar-buttonbox-container {
       margin-left: auto;
       width: fit-content;
     }
 
+    /* Specific adjustments for window controls when sidebar is on the right */
     &:root[zen-right-side='true'] #zen-sidebar-top-buttons .titlebar-buttonbox-container {
-      /* Must have the #zen-sidebar-top-buttons so we target it only when it's on the sidebar */
-      margin-right: calc(-1 * var(--zen-toolbox-padding));
-      margin-top: -10px /*Make sure this stays synced with the top buttons' margin!*/;
-      height: calc(4px + var(--zen-toolbar-height)) !important;
+      /* Selector ensures this only applies when buttons are in the sidebar */
+      margin-right: calc(-1 * var(--zen-toolbox-padding)); /* Pull slightly outside */
+      margin-top: -10px /* Align vertically with top buttons */;
+      height: calc(4px + var(--zen-toolbar-height)) !important; /* Adjust height */
 
       & .titlebar-button {
-        align-items: end;
+        align-items: end; /* Align button content to the bottom */
       }
     }
   }
 
+  /* Ensure arrow scrollbox takes minimum necessary height */
   #tabbrowser-arrowscrollbox {
     min-height: fit-content !important;
   }
 }
 
+/* Alignreversed window controls to the left */
 :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
   margin-right: auto;
   width: fit-content;
 }
 
+/* Center items within the TabsToolbar */
 #TabsToolbar > * {
   justify-content: center;
 }
 
+/* ==========================================================================
+   Toolbox Padding & Variables
+   ========================================================================== */
 #browser {
-  --zen-min-toolbox-padding: .4rem;
+  /* Define base padding with platform-specific overrides */
+  --zen-min-toolbox-padding: 0.4rem;
   @media (-moz-platform: macos) {
-    --zen-min-toolbox-padding: .52rem;
+    --zen-min-toolbox-padding: 0.52rem;
   }
   @media (-moz-platform: linux) {
-    --zen-min-toolbox-padding: .35rem;
+    --zen-min-toolbox-padding: 0.35rem;
   }
+  /* Actual padding used, ensuring it's at least min padding or based on element separation */
   --zen-toolbox-padding: max(var(--zen-min-toolbox-padding), calc(var(--zen-element-separation) / 1.5));
 }
 
+/* ==========================================================================
+   Single Toolbar Mode - Further Layout Adjustments
+   ========================================================================== */
 :root[zen-single-toolbar='true'] {
+  /* Make URL bar container take available width */
   #urlbar-container {
     width: -moz-available !important;
   }
 
+  /* Center identity icons vertically */
   #identity-icon-box,
   #identity-permission-box {
     margin-top: auto;
     margin-bottom: auto;
-    padding: 6px !important;
+    padding: 6px !important; /* Add padding */
   }
 
+  /* Adjust height for floating URL bar */
   & #urlbar-container[breakout='true']:has([zen-floating-urlbar='true']) {
     --urlbar-container-height: 36px !important;
     --urlbar-height: 38px !important;
   }
 
   & #nav-bar {
+    /* Add bottom margin */
     margin-bottom: var(--zen-toolbox-padding);
 
+    /* Hide flexible spaces */
     & toolbarspring {
       display: none;
     }
   }
 
+  /* Add vertical margins to the top sidebar buttons area */
   & #zen-sidebar-top-buttons {
     margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
   }
 
+  /* Remove padding from PanelUI button */
   & #PanelUI-menu-button {
     padding: 0 !important;
   }
 }
 
+/* ==========================================================================
+   Pinned Tabs Separator
+   ========================================================================== */
 .vertical-pinned-tabs-container-separator {
   background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
-  margin: 8px auto;
+  margin: 8px auto; /* Center horizontally */
   border: none;
   height: 1px;
   max-height: 1px;
-  width: 98%;
-  transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
+  width: 98%; /* Slightly less than full width */
+  transition:
+    margin 0.2s ease-in-out,
+    background 0.2s ease-in-out,
+    max-height 0.2s ease-in-out;
 
+  /* Hide separator when specified by parent container attribute */
   #vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & {
     max-height: 0;
-    margin: 0 auto;
+    margin: 0 auto; /* Collapse margins */
   }
 }
 
+/* ==========================================================================
+   Navigator Toolbox (Main Sidebar Container) Base Styles
+   ========================================================================== */
 #navigator-toolbox {
+  /* Define theme variables, including platform specifics for native look */
   --border-radius-medium: 10px;
   --tab-border-radius: 6px;
-  --zen-toolbox-min-width: 1px;
+  --zen-toolbox-min-width: 1px; /* Default minimum width (used when collapsed) */
 
   @media (-moz-platform: windows) {
-    /* More native look */
     --border-radius-medium: 8px;
     --tab-border-radius: 6px;
   }
 
   @media (-moz-platform: macos) {
-    /* More native look */
     --border-radius-medium: 12px;
     --tab-border-radius: 10px;
   }
 
+  /* Define tab hover background color */
   --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
 
   min-width: var(--zen-toolbox-min-width);
-  margin-top: 0 !important; /* Fix full screen mode */
-
-  border: none;
-  order: 0 !important;
-
-  display: flex;
+  margin-top: 0 !important; /* Fix potential issues in full screen mode */
+  border: none; /* Remove default borders */
+  order: 0 !important; /* Default order (can be changed for right-side) */
+  display: flex; /* Use flex layout */
 }
 
+/* Hide default titlebar spacers */
 .titlebar-spacer[type='pre-tabs'],
 .titlebar-spacer[type='post-tabs'] {
   display: none;
 }
 
-:root[zen-single-toolbar='true']:not([customizing]) {
-  #zen-appcontent-navbar-container {
-    display: flex;
-    -moz-window-dragging: drag;
-    min-height: var(--zen-element-separation);
-    height: var(--zen-element-separation);
-
-    & #PersonalToolbar {
-      width: -moz-available;
-    }
-
-    /* We enable this trick IF we follow any of theses conditions:
-      * - We are supposed to hide the window controls (e.g. left sidebar, windows like layouts)
-      *    - This also involves linux's reverse GTK window controls, we'll need to handle that a bit differently
-      * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
-      */
-    &:has(#PersonalToolbar[collapsed='false']) {
-%include vertical-tabs-topbar.inc.css
-    }
-
-    &[should-hide='true'] {
-%include vertical-tabs-topbar.inc.css
-    }
-
-    :root[inDOMFullscreen='true'] & {
-      max-height: 0 !important;
-      min-height: unset !important;
-      opacity: 0 !important;
-      pointer-events: none !important;
-    }
-  }
-}
-
+/* ==========================================================================
+   Tabs Toolbar Customization Target
+   ========================================================================== */
 #TabsToolbar-customization-target {
-  position: relative;
+  position: relative; /* For pseudo-element positioning */
   max-width: 100%;
-  gap: 0;
+  gap: 0; /* Remove default gap */
+
+  /* Add a separator line at the bottom */
   &::after {
     content: '';
     display: block;
     height: 1px;
-
     margin: 0 auto;
     width: 80%;
     left: 50%;
     transform: translateX(-50%);
     position: absolute;
-    bottom: calc(-1 * var(--zen-toolbox-padding));
+    bottom: calc(-1 * var(--zen-toolbox-padding)); /* Position below the target */
   }
 
+  /* Remove top borders from direct children */
   & > * {
     border-top-width: 0 !important;
   }
 }
 
+/* Style the new tab button specifically */
 #vertical-tabs-newtab-button {
+  /* Transparent background unless active */
   &:hover,
   &:not(:is(:hover, :active)) .toolbarbutton-icon {
     background: transparent !important;
   }
 }
 
+/* ==========================================================================
+   Tab Container (#tabbrowser-tabs) Base Styles
+   ========================================================================== */
 #tabbrowser-tabs {
   margin-inline-start: 0 !important;
   padding-inline-start: 0 !important;
-  overflow-y: unset !important; /* DO NOT CHANGE THIS: Firefox renders badly workspace changes */
-  overflow-x: clip;
-  overflow-clip-margin: var(--zen-toolbox-padding);
+  overflow-y: unset !important; /* Critical: Prevents rendering issues on workspace changes */
+  overflow-x: clip; /* Clip horizontal overflow */
+  overflow-clip-margin: var(--zen-toolbox-padding); /* Add margin to clipping area */
 
   @media (-moz-platform: macos) {
-    font-size: 1.1rem;
+    font-size: 1.1rem; /* Slightly larger font on macOS */
   }
 
-  --tab-inner-inline-margin: 0;
+  --tab-inner-inline-margin: 0; /* Reset default inner margin */
 
   position: relative;
-  border-bottom: 0px solid transparent !important;
+  border-bottom: 0px solid transparent !important; /* Remove default bottom border */
 
+  /* Define tab variables */
   --tab-block-margin: 2px;
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
   --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important;
-  grid-gap: 0 !important;
+  grid-gap: 0 !important; /* Reset grid gap */
 
+  /* Hide default overflow indicators and the provided separator */
   &[overflow]::after,
-  #vertical-tabs-newtab-button,
-  #vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */
-    /* Hide separator they give us, eww */
+  #vertical-tabs-newtab-button, /* Assuming this is a button *within* #tabbrowser-tabs, but it looks like it's outside */
+  #vertical-pinned-tabs-container-separator {
+    /* Selector targets the specific separator ID */
     display: none !important;
   }
 
+  /* ========================================================================
+     Individual Tab Styles (.tabbrowser-tab within #tabbrowser-tabs)
+     ======================================================================== */
   & .tabbrowser-tab {
+    /* Add smooth scaling transition */
     &,
     & .tab-content > image {
       transition: scale 0.07s ease;
     }
 
+    /* Hide specific empty tabs (likely placeholders) */
     &[zen-empty-tab] {
       display: none;
     }
 
+    /* Scale down tab slightly on active press (but not when dragging or clicking images) */
     #tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) {
-      scale: var(--zen-active-tab-scale);
+      scale: var(--zen-active-tab-scale); /* Requires --zen-active-tab-scale to be defined elsewhere */
     }
 
+    /* Scale down icon/image specifically on active press */
     #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
       scale: 0.92;
     }
 
+    /* Fallback icon for broken/missing favicons */
     & .tab-icon-image {
       &:not([src]),
       &:-moz-broken {
+        /* Use an empty SVG as placeholder */
         content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
+        /* Semi-transparent background based on primary color */
         background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
       }
     }
 
-    max-width: unset;
-    padding: 0 !important;
-
-    position: relative;
+    max-width: unset; /* Allow tabs to take full width */
+    padding: 0 !important; /* Remove default padding */
+    position: relative; /* For absolute positioning of children */
 
+    /* Tab Background Styles */
     & .tab-background {
-      overflow: hidden;
+      overflow: hidden; /* Hide overflowing content/pseudo-elements */
 
+      /* Context line (usually for container tabs) styling */
       & .tab-context-line {
-        margin: 0 0px !important;
-        width: 3px !important;
+        margin: 0 0px !important; /* Reset margin */
+        width: 3px !important; /* Set specific width */
       }
     }
 
+    /* Dim pending tabs if preference is enabled */
     @media -moz-pref('zen.tabs.dim-pending') {
       &[pending='true'] .tab-icon-image {
         opacity: 0.5;
       }
     }
 
-    /* We have a tab inside a tab, this means, it's a glance tab */
+    /* --- Glance Tab Styles (Nested .tabbrowser-tab) --- */
+    /* Styles for a tab nested within another tab (representing a "glance"?) */
     & .tabbrowser-tab {
-      pointer-events: none;
-      margin: 0 0 0 4px;
+      pointer-events: none; /* Disable interaction */
+      margin: 0 0 0 4px; /* Add left margin */
+      /* Reset/override variables for smaller size */
       --toolbarbutton-inner-padding: 0;
       --border-radius-medium: 8px;
       width: 24px;
@@ -311,22 +347,25 @@
       --tab-min-height: 24px;
       --tab-min-width: 24px;
 
+      /* Style glance tab background */
       & .tab-background {
         background: var(--zen-toolbar-element-bg) !important;
         margin-block: 0 !important;
         margin-inline: 0 !important;
         box-shadow: none !important;
       }
+      /* Adjust padding for content */
       & .tab-content {
         padding: 0 5px;
       }
-      & label { display: none !important; }
+      /* Hide label and buttons */
+      & label,
       & .tab-close-button,
       & .tab-reset-button,
       & .tab-reset-pin-button {
         display: none !important;
       }
-
+      /* Style glance tab icon */
       & .tab-icon-image {
         --toolbarbutton-inner-padding: 0 !important;
         width: 14px;
@@ -334,18 +373,21 @@
       }
     }
 
-    /* On essentials, glance tabs are floating */
+    /* --- Essentials Glance Tab Specifics (Floating) --- */
+    /* Additional styles for glance tabs in "essential" mode */
     &[zen-essential='true'] .tabbrowser-tab {
-      position: absolute;
+      position: absolute; /* Position absolutely relative to parent tab */
       top: 0px;
       right: 0px;
+      /* Define variables for size */
       --tab-collapsed-width: 34px;
       --tab-min-height: 16px;
       width: var(--tab-collapsed-width) !important;
-      z-index: 1;
-      pointer-events: none;
+      z-index: 1; /* Ensure it's above parent tab content */
+      pointer-events: none; /* Still non-interactive */
+
+      /* Specific background and border for floating effect */
       & .tab-background {
-        /* Solid colors because we don't want to show the background */
         background: light-dark(rgb(249, 249, 249), rgb(63, 63, 63)) !important;
         border: 2px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
       }
@@ -353,110 +395,144 @@
   }
 }
 
+/* ==========================================================================
+   Sidebar Bottom Buttons Area
+   ========================================================================== */
 #zen-sidebar-bottom-buttons {
   background: transparent;
-  gap: 5px;
-  align-items: center;
-
-  padding-top: var(--zen-element-separation);
-  --toolbarbutton-inner-padding: 5px;
+  gap: 5px; /* Spacing between buttons */
+  align-items: center; /* Center vertically */
+  padding-top: var(--zen-element-separation); /* Add padding above */
+  --toolbarbutton-inner-padding: 5px; /* Define inner padding for buttons */
 
+  /* Remove padding from direct children (except workspaces button) */
   & > toolbarbutton:not(#zen-workspaces-button) {
     padding: 0 !important;
   }
 }
 
+/* Hide the default new tab button container */
 #newtab-button-container {
   display: none !important;
 }
 
+/* ==========================================================================
+   Tab Arrow Scrollbox Adjustments
+   ========================================================================== */
 #tabbrowser-arrowscrollbox {
+  /* Remove gap within the scrollbox part */
   &::part(scrollbox) {
     gap: 0px !important;
   }
 
+  /* Hide default overflow indicators */
   &::part(overflow-start-indicator),
   &::part(overflow-end-indicator) {
     display: none !important;
   }
 }
 
+/* ==========================================================================
+   Custom Tab Wrapper & Container Styles
+   ========================================================================== */
+
+/* Wrapper for vertical tabs, enabling scrolling */
 #zen-tabs-wrapper {
   min-height: fit-content;
-  overflow-y: auto;
-  height: 100%;
-  scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
+  overflow-y: auto; /* Allow vertical scrolling */
+  height: 100%; /* Take full available height */
+  scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; /* Custom scrollbar */
 
-  /* Only do this hack if we have workspaces enabled */
+  /* Negative margin hack for workspace transitions (only if workspaces are enabled) */
   :root[zen-workspace-id] & {
     margin-left: calc(-1 * var(--zen-toolbox-padding));
     width: calc(100% + var(--zen-toolbox-padding) * 2);
   }
 }
 
+/* Container for browser tabs within the sidebar */
 #zen-browser-tabs-container {
-  overflow-x: clip !important; /* might break custom css with new design, so let's force it */
-  position: relative;
+  overflow-x: clip !important; /* Force horizontal clipping */
+  position: relative; /* Positioning context */
 }
 
+/* ==========================================================================
+   Pinned Tabs Container Specific Styles
+   ========================================================================== */
 #vertical-pinned-tabs-container {
-  padding-inline-end: 0 !important;
-  display: flex !important;
-  flex-direction: column;
+  padding-inline-end: 0 !important; /* Remove end padding */
+  display: flex !important; /* Use flex layout */
+  flex-direction: column; /* Stack pinned tabs vertically */
   min-height: fit-content !important;
-  overflow-x: clip;
-  overflow-y: visible;
-  max-height: unset !important;
+  overflow-x: clip; /* Clip horizontal overflow */
+  overflow-y: visible; /* Allow vertical overflow (for menus etc.) */
+  max-height: unset !important; /* Allow it to grow */
 
+  /* Make non-selected, non-hovered pinned tab backgrounds transparent */
   & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
     background: transparent;
   }
 
+  /* Center content within pinned tabs */
   & .tabbrowser-tab .tab-content {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
+  /* Ensure glance tabs within pinned container fit their content */
   .tabbrowser-tab[zen-glance-tab='true'] {
     width: fit-content !important;
   }
 }
 
+/* Styling for the label shown when hovering the reset-pin button */
 .tab-reset-pin-label {
-  pointer-events: none;
-  transition: opacity 0.1s ease-in-out, margin 0.1s ease-in-out, max-height 0.1s ease-in-out;
-  max-height: 0px;
+  pointer-events: none; /* Non-interactive */
+  transition:
+    opacity 0.1s ease-in-out,
+    margin 0.1s ease-in-out,
+    max-height 0.1s ease-in-out;
+  max-height: 0px; /* Hidden by default */
   opacity: 0;
-  transform: translateY(-5px);
+  transform: translateY(-5px); /* Slight offset */
   font-size: x-small;
   margin: 0;
 }
 
-/* Mark: toolbox as expanded */
+/* ==========================================================================
+   Mark: EXPANDED Sidebar Styles (`zen-sidebar-expanded='true'`)
+   ========================================================================== */
 #navigator-toolbox[zen-sidebar-expanded='true'] {
+  /* Set width to fit content when expanded */
   --zen-toolbox-min-width: fit-content;
 
-  --tab-icon-end-margin: 8.5px;
+  /* Define margin for tab icons */
+  --tab-icon-end-margin: 8.5px; /* Used later? Not directly applied here */
   padding: var(--zen-toolbox-padding);
-  padding-left: 0;
-  padding-top: 0;
+  padding-left: 0; /* Reset left padding (adjusted later based on side) */
+  padding-top: 0; /* Reset top padding */
 
+  /* Ensure Personal Toolbar has no left padding when expanded */
   #PersonalToolbar:not([collapsed='true']) {
     padding-left: 0 !important;
   }
 
+  /* Set a minimum width for the titlebar area */
   & #titlebar {
     min-width: 150px;
   }
 
+  /* Add margin to the new tab button area */
   & #tabbrowser-arrowscrollbox-periphery {
     margin-inline: var(--tab-block-margin);
   }
 
+  /* Adjust nav-bar padding */
   & #nav-bar {
-    padding-right: 0;
+    padding-right: 0; /* Reset right padding */
 
+    /* Specific padding for URL bar input in single toolbar mode */
     :root[zen-single-toolbar='true'] & {
       & #urlbar:not([breakout-extend='true']):not([pageproxystate='invalid']) .urlbar-input-container {
         padding-left: 8px;
@@ -465,155 +541,170 @@
     }
   }
 
+  /* Remove top margin from nav-bar */
   & #nav-bar {
     margin-top: 0;
   }
 
+  /* Hide workspace indicator icon if it has no specific icon set */
   & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
 
+  /* Hide workspace button icon if it has no specific icon set */
   & #zen-workspaces-button {
     & .zen-workspace-sidebar-icon[no-icon='true'] {
       display: none;
     }
   }
 
+  /* Style pinned tabs container when it has visible tabs */
   & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
     position: relative;
 
+    /* Make pinned tabs take full width */
     & .tabbrowser-tab {
       width: 100%;
     }
   }
 
+  /* Style bottom buttons area when expanded */
   & #zen-sidebar-bottom-buttons {
     display: flex;
-    /* Make sure the icons take most of the space, smartly */
-    flex-direction: row;
-    justify-content: space-between;
-
+    flex-direction: row; /* Arrange buttons horizontally */
+    justify-content: space-between; /* Distribute space */
     width: 100%;
     position: relative;
   }
 
+  /* Set min height for tabs in the essentials wrapper */
   & #zen-essentials-wrapper {
     --tab-min-height: 44px;
   }
 
-  /* Mark: Fix separator paddings */
+  /* Adjust padding based on sidebar side */
   &[zen-right-side='true'] {
-    padding-left: 0;
+    padding-left: 0; /* No padding on the inside edge (left) */
   }
-
   &:not([zen-right-side='true']) {
-    padding-right: 0;
-    padding-left: var(--zen-toolbox-padding);
+    padding-right: 0; /* No padding on the inside edge (right) */
+    padding-left: var(--zen-toolbox-padding); /* Add padding on the outside edge (left) */
   }
 
+  /* Style the customization target and its contents when expanded */
   & #TabsToolbar-customization-target {
+    /* Make separator full width */
     &::after {
       width: 100%;
       bottom: calc(-0.5 * var(--zen-toolbox-padding));
     }
 
+    /* Style toolbar items (buttons, etc.) */
     & > :is(toolbaritem, toolbarbutton):not(#search-container):not(#zen-workspaces-button),
     & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
-      width: 100% !important;
-      border-radius: var(--border-radius-medium) !important;
-
-      padding-left: var(--toolbarbutton-inner-padding) !important;
+      /* Target new tab button too */
+      width: 100% !important; /* Full width */
+      border-radius: var(--border-radius-medium) !important; /* Apply border radius */
+      padding-left: var(--toolbarbutton-inner-padding) !important; /* Apply padding */
       padding-right: var(--toolbarbutton-inner-padding) !important;
 
+      /* Ensure label takes full width */
       & label {
         display: flex;
         width: 100%;
       }
 
+      /* Standardize icon size */
       & image {
         height: 16px;
         width: 16px;
         padding: 0 !important;
       }
 
+      /* Style for active/checked state */
       &:is([open], [checked]) {
         background: var(--toolbarbutton-active-background) !important;
-
         & image,
         label {
           background: transparent !important;
-        }
+        } /* Ensure children are transparent */
       }
 
+      /* Style for hover state */
       &:hover {
         background: var(--toolbarbutton-hover-background);
-
         & image,
         label {
           background: transparent !important;
-        }
+        } /* Ensure children are transparent */
       }
     }
   }
 
+  /* Style tabs container when expanded */
   & #tabbrowser-tabs {
-    --tab-inline-padding: 8px;
-    & .tabbrowser-tab {
+    --tab-inline-padding: 8px; /* Define padding for tab content */
 
+    & .tabbrowser-tab {
+      /* Show tab label */
       & .tab-label-container {
         display: flex;
       }
 
+      /* Adjust tab background margin and width */
       & .tab-background {
         margin-inline: var(--tab-block-margin);
-        width: -moz-available;
+        width: -moz-available; /* Take available width */
       }
 
+      /* --- Pinned Tab Icon Repositioning & Reset Button --- */
+      /* Reposition icon stack absolutely when tab is pinned (and not essential) */
       &[zen-pinned-changed='true']:not([zen-essential]) > .tab-stack > .tab-content > .tab-icon-stack {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        /* 16px divided by 2, it's the icon size */
-        left: 8px;
+        left: 8px; /* Position near the start */
         margin: 0 !important;
-        pointer-events: none;
+        pointer-events: none; /* Icon stack itself is not interactive */
 
+        /* Allow interaction with elements inside the stack (e.g., overlays) */
         & > *:not(.tab-icon-image) {
           pointer-events: all;
         }
       }
 
+      /* Hide the reset-pin image by default */
       &[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button image {
         opacity: 0;
       }
 
+      /* Show reset-pin interactions on hover */
       &[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button:hover {
+        /* Show the helper label */
         & ~ .tab-label-container .tab-reset-pin-label {
           max-height: 10px;
           opacity: 0.6;
         }
-
-        & ~ .tab-label-container .tab-reset-pin-label {
-          max-height: 10px;
-          opacity: 0.6;
-        }
-
-
+        /* Fade out the original tab icon */
         & ~ .tab-icon-stack .tab-icon-image {
           opacity: 0;
         }
-
+        /* Show the reset-pin button image */
         & image {
           opacity: 1;
         }
       }
+      /* --- End Pinned Tab --- */
 
+      /* Show close button on hover or when selected */
       &:is(:hover, [visuallyselected]) .tab-close-button {
         display: block;
-        --tab-inline-padding: 0; /* Avoid weird padding */
+        /* Reset padding for close button positioning */
+        --tab-inline-padding: 0;
         margin-inline-end: 0;
       }
 
+      /* Adjust margins for various tab icon states/overlays */
       .tab-throbber,
       .tab-icon-pending,
       .tab-icon-image,
@@ -626,118 +717,166 @@
   }
 }
 
+/* ==========================================================================
+   Mark: COLLAPSED Sidebar Styles (`:not([zen-sidebar-expanded='true'])`)
+   ========================================================================== */
+
+/* Define fixed width and padding for collapsed state */
 :root:not([zen-sidebar-expanded='true']) {
   --tab-min-width: 36px !important;
   --zen-toolbox-padding: 6px !important;
   --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
 }
 
-/* Mark: collapsed sidebar */
 #navigator-toolbox:not([zen-sidebar-expanded='true']) {
+  /* Force fixed width */
   max-width: var(--zen-toolbox-max-width) !important;
   min-width: var(--zen-toolbox-max-width) !important;
-  padding-bottom: var(--zen-toolbox-padding);
+  padding-bottom: var(--zen-toolbox-padding); /* Apply bottom padding */
+
+  /* Hide text labels */
   & .zen-current-workspace-indicator-name,
   & .toolbarbutton-text {
     display: none !important;
   }
+
+  /* Center and dim workspace indicator */
   & .zen-current-workspace-indicator {
     padding-left: 0;
     padding-right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: .4;
-    align-items: center;
+    opacity: 0.4;
   }
+
+  /* Center items in essentials container */
   & .zen-essentials-container {
     justify-content: center;
   }
+
+  /* Style new tab button when collapsed */
   & #vertical-tabs-newtab-button {
     padding: 0 !important;
     background: transparent !important;
   }
+
+  /* Ensure bottom buttons container fits content during customization */
   :root[customizing] & #zen-sidebar-bottom-buttons {
     min-width: unset !important;
   }
+
+  /* Center top buttons container */
   & #zen-sidebar-top-buttons {
     justify-content: center;
-    max-height: unset !important;
+    max-height: unset !important; /* Allow natural height */
     height: fit-content !important;
   }
+
+  /* Adjust titlebar layout for collapsed state */
   & #titlebar {
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto 1fr; /* Allow content below button box */
   }
+
+  /* Style top buttons customization target */
   & #zen-sidebar-top-buttons-customization-target {
-    flex-direction: column;
+    flex-direction: column; /* Stack items vertically */
     padding-top: var(--zen-element-separation);
   }
+
+  /* Style bottom buttons area when collapsed */
   & #zen-sidebar-bottom-buttons {
     display: flex;
-    flex-direction: column;
+    flex-direction: column; /* Stack vertically */
     padding-top: var(--zen-element-separation);
-    align-items: center;
+    align-items: center; /* Center horizontally */
   }
+
+  /* Style new tab button area */
   & #tabbrowser-arrowscrollbox-periphery {
     & > toolbarbutton {
-      margin: 0 auto !important;
-      padding: 0 !important;
+      margin: 0 auto !important; /* Center the button */
+      padding: 0 !important; /* Remove padding */
     }
+    /* Adjust separator */
     &::before {
       width: 90% !important;
     }
   }
-  & #EssentialsToolbar {
-    display: none !important;
-  }
+
+  /* Hide optional elements */
+  & #EssentialsToolbar,
   & #essentials-accordion-header {
     display: none !important;
   }
+
+  /* Style pinned tabs container */
   & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
     position: relative;
+    /* Constrain pinned tab width */
     & .tabbrowser-tab {
       max-width: var(--tab-min-width);
     }
   }
+
+  /* Adjust customization target padding and separator */
   & #TabsToolbar-customization-target {
     padding-bottom: var(--zen-toolbox-padding);
     &::after {
-      bottom: -1px !important;
+      bottom: -1px !important; /* Position separator correctly */
     }
   }
+
+  /* Style tabs container when collapsed */
   & #tabbrowser-tabs {
-    margin-top: -2px;
+    margin-top: -2px; /* Minor visual adjustment */
+
     & .tabbrowser-tab {
-      margin: 0 auto;
+      margin: 0 auto; /* Center tabs horizontally */
+
+      /* Center background */
       & .tab-background {
         margin-inline: auto !important;
       }
+
+      /* Hide reset buttons */
       & .tab-reset-button,
       & .tab-reset-pin-button {
         display: none !important;
       }
+
+      /* Center tab content and hide label */
       & .tab-content {
         display: flex;
         align-content: center;
         justify-content: center;
-        padding: 0 !important;
+        padding: 0 !important; /* Remove padding */
+
         & .tab-label-container {
-          display: none !important;
+          display: none !important; /* Hide label */
         }
+
+        /* Reset icon end margin */
         & .tab-icon-image,
         & .tab-icon-pending {
           margin-inline-end: 0 !important;
         }
-        /* Hide glances */
+
+        /* Hide nested glance tabs completely */
         & .tabbrowser-tab {
           display: none !important;
         }
       }
     }
+
+    /* Optionally hide mute button overlay on non-selected tabs when collapsed */
     @media -moz-pref('zen.view.sidebar-collapsed.hide-mute-button') {
       & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
         display: none !important;
+
+        /* Complex selectors to ensure indicators still show correctly in specific density/hover states */
+        /* This part seems overly complex and might need review/simplification if possible */
         :is(
             :root[uidensity='compact'],
             #tabbrowser-tabs[secondarytext-unsupported],
@@ -749,10 +888,12 @@
           #tabbrowser-tabs:not([secondarytext-unsupported])
           .tabbrowser-tab:not(:hover)
           &[indicator-replaces-favicon] {
-          opacity: 1 !important;
+          opacity: 1 !important; /* Ensure full opacity */
         }
       }
     }
+
+    /* Reset end margins for all icon types when collapsed */
     & .tab-throbber,
     & .tab-icon-pending,
     & .tab-icon-image,
@@ -761,46 +902,59 @@
       margin-inline-end: 0 !important;
     }
   }
+
+  /* Stack workspace button content vertically */
   & #zen-workspaces-button {
     flex-direction: column;
   }
 }
 
+/* Hide splitter when sidebar is collapsed */
 :root:not([zen-sidebar-expanded='true']) #zen-sidebar-splitter {
   display: none !important;
 }
 
-/* Mark: Separator styling */
+/* ==========================================================================
+   Mark: Sidebar Splitter Styling
+   ========================================================================== */
 #zen-sidebar-splitter {
-  opacity: 0;
-  max-width: var(--zen-toolbox-padding) !important;
+  opacity: 0; /* Hidden by default, maybe shown on hover/drag? */
+  max-width: var(--zen-toolbox-padding) !important; /* Width based on padding */
   min-width: var(--zen-toolbox-padding) !important;
   height: 100%;
   transition: opacity 0.2s ease-in-out;
-  background: var(--zen-colors-border);
-  appearance: none;
-  position: relative !important;
-  order: 0;
+  background: var(--zen-colors-border); /* Use theme border color */
+  appearance: none; /* Remove default styling */
+  position: relative !important; /* Ensure positioning context */
+  order: 0; /* Default order */
 }
 
-/* Mark: Move sidebar to the right */
+/* ==========================================================================
+   Mark: Move Sidebar to the Right (`zen-right-side='true'`)
+   ========================================================================== */
 :root[zen-right-side='true'] {
+  /* Move the main toolbox (sidebar) to the right */
   & #navigator-toolbox {
-    order: 10 !important;
+    order: 10 !important; /* High order value */
   }
 
+  /* Move the splitter just before the toolbox */
   & #zen-sidebar-splitter {
     order: 9 !important;
   }
 }
 
-/* Mark: Override the default tab close button */
+/* ==========================================================================
+   Mark: Override Default Tab Close/Reset Button Behavior
+   ========================================================================== */
 #tabbrowser-tabs {
   & .tabbrowser-tab {
+    /* Hide standard close button on pinned tabs (except pending) */
     &[pinned]:not([pending='true']) .tab-close-button {
       display: none !important;
     }
 
+    /* Show custom reset (unpin) button on hover/selection for non-essential pinned tabs */
     &[pinned]:not([pending='true']):not([zen-essential]) {
       &:hover .tab-reset-button,
       &[visuallyselected] .tab-reset-button {
@@ -808,70 +962,80 @@
       }
     }
 
+    /* Hide the reset-pin button if tab isn't marked as changed */
     &:not([zen-pinned-changed='true']) .tab-reset-pin-button {
       display: none;
     }
 
+    /* Never show reset buttons on essential tabs */
     &[zen-essential] .tab-reset-button,
     &[zen-essential] .tab-reset-pin-button {
       display: none;
     }
 
+    /* Hide reset button unless pinned and selected/hovered */
     &:not([pinned][visuallyselected]) .tab-reset-button {
       display: none;
     }
 
+    /* Ensure selected tab background border is transparent */
     &[selected] .tab-background {
       border-color: transparent;
     }
   }
 }
 
-.tab-reset-button,
+/* ==========================================================================
+   Custom Reset/Unpin Button Styles
+   ========================================================================== */
+.tab-reset-button, /* Standard unpin button */
 .tab-reset-pin-button {
-  display: none;
-  -moz-context-properties: fill, fill-opacity;
+  /* Button shown when pinning state changes */
+  display: none; /* Hidden by default, shown conditionally above */
+  -moz-context-properties: fill, fill-opacity; /* Inherit fill properties */
   border-radius: var(--tab-border-radius);
   color: inherit;
   fill: currentColor;
-  padding: var(--tab-close-button-padding);
-  width: 24px;
+  padding: var(--tab-close-button-padding); /* Use standard close button padding */
+  width: 24px; /* Fixed size */
   height: 24px;
-  outline: var(--toolbarbutton-outline);
+  outline: var(--toolbarbutton-outline); /* Use standard outline */
 
+  /* Hover/active outline styles */
   &:hover {
     outline-color: var(--toolbarbutton-hover-outline-color);
   }
-
   &:hover:active {
     outline-color: var(--toolbarbutton-active-outline-color);
   }
 }
 
+/* Specific styling for the alternative reset-pin button */
 .tab-reset-pin-button {
-  display: flex;
-  position: relative;
-  height: calc(100% - var(--tab-block-margin) * 2);
-  margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin));
+  display: flex; /* Use flex for alignment */
+  position: relative; /* For pseudo-element positioning */
+  height: calc(100% - var(--tab-block-margin) * 2); /* Adjust height based on margins */
+  margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin)); /* Overlap slightly */
   margin-right: 8px;
-  padding: 0 calc(var(--toolbarbutton-inner-padding) - 2px) 0 calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px);
-  border-radius: 0;
-  border-top-left-radius: var(--border-radius-medium);
-  width: unset;
+  padding: 0 calc(var(--toolbarbutton-inner-padding) - 2px) 0
+    calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px); /* Custom padding */
+  border-radius: 0; /* Remove general radius */
+  border-top-left-radius: var(--border-radius-medium); /* Apply radius only to left corners */
+  width: unset; /* Auto width */
   border-bottom-left-radius: var(--border-radius-medium);
   align-items: center;
   justify-content: center;
 
+  /* Style the image inside (uses original tab icon) */
   & > image {
-    list-style-image: var(--zen-original-tab-icon);
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    width: 16px;
+    list-style-image: var(--zen-original-tab-icon); /* Expects variable set elsewhere */
+    width: 16px; /* Fixed size */
     height: 16px;
-    border-radius: 4px;
+    pointer-events: none;
+    border-radius: 4px; /* Slightly rounded */
   }
 
+  /* Add a decorative vertical line */
   &::after {
     content: '';
     display: block;
@@ -882,32 +1046,36 @@
     right: 0;
     top: 50%;
     border-radius: 2px;
-    transform: rotate(15deg) translateY(-50%);
+    transform: rotate(15deg) translateY(-50%); /* Tilted line */
   }
 
+  /* Hide the line on hover (reveals icon change) */
   &:hover::after {
     opacity: 0;
   }
 }
 
-.reset-icon,
+/* Remove default appearance for custom buttons */
+.reset-icon, /* Assuming this is used within .tab-reset-button */
 .tab-reset-pin-button {
   appearance: none;
 }
 
+/* Background color changes on hover/active (for non-forced-colors mode) */
 @media not (forced-colors) {
   .tab-reset-button:hover,
   .tab-reset-pin-button:hover {
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    background-color: color-mix(in srgb, currentColor 10%, transparent); /* Slight tint */
   }
 
   .tab-reset-button:hover:active,
   .tab-reset-pin-button:hover:active {
-    background-color: color-mix(in srgb, currentColor 20%, transparent);
+    background-color: color-mix(in srgb, currentColor 20%, transparent); /* Darker tint */
   }
 }
 
-.tab-reset-button> .button-icon,
+/* Ensure icons within reset buttons have no margin */
+.tab-reset-button > .button-icon,
 .tab-reset-button > .button-box > .button-icon,
 .tab-reset-button > .toolbarbutton-icon,
 .tab-reset-pin-button > .button-icon,
@@ -916,6 +1084,7 @@
   margin: 0;
 }
 
+/* Hide text labels within reset buttons */
 .tab-reset-button > .button-box > .button-text,
 .tab-reset-button > .toolbarbutton-text,
 .tab-reset-pin-button > .button-box > .button-text,
@@ -923,134 +1092,158 @@
   display: none;
 }
 
-
-/* Customization mode */
-
+/* ==========================================================================
+   Customization Mode Adjustments
+   ========================================================================== */
 :root[customizing] #TabsToolbar > *,
 :root[customizing] #TabsToolbar-customization-target {
-  min-width: unset !important;
+  min-width: unset !important; /* Allow shrinking during customization */
 }
 
-/* Mark: Sidebar top buttons */
+/* ==========================================================================
+   Mark: Sidebar Top Buttons Area Styles
+   ========================================================================== */
 #zen-sidebar-top-buttons {
-  order: -1;
-
-  min-width: unset !important;
+  order: -1; /* Ensure it appears at the top */
+  min-width: unset !important; /* Allow shrinking */
 
+  /* Adjust inner padding based on sidebar state */
   :root[zen-sidebar-expanded='true'] & {
-    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; /* Use theme variable */
   }
-
   :root[zen-single-toolbar='true'] & {
-    --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
+    --toolbarbutton-inner-padding: calc(
+      var(--zen-toolbar-button-inner-padding) - 2px
+    ) !important; /* Slightly less in single toolbar */
 
+    /* Reorder buttons in single toolbar mode */
     & #PanelUI-button {
-      order: -2;
+      order: -2; /* Hamburger first */
     }
-
     & #unified-extensions-button {
-      order: -1;
+      order: -1; /* Extensions next */
     }
   }
 
+  /* Style the customization target within the top buttons area */
   & #zen-sidebar-top-buttons-customization-target {
-    height: 100%;
-    align-items: center;
+    height: 100%; /* Full height */
+    align-items: center; /* Center items vertically */
 
+    /* Adjust start padding based on state and side */
     :root:not([zen-sidebar-expanded='true']):not([zen-right-side='true']) {
       padding-inline-start: var(--zen-toolbox-padding);
     }
-
     #nav-bar & {
+      /* If nested in nav-bar, use outer padding */
       padding-inline-start: var(--toolbarbutton-outer-padding);
     }
-
     :root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) {
-      padding-inline-end: var(--zen-toolbox-padding);
+      padding-inline-end: var(--zen-toolbox-padding); /* Add end padding for right sidebar */
     }
 
+    /* Standardize height and padding for toolbar buttons (excluding titlebar buttons) */
     & toolbarbutton:not(.titlebar-button) {
-      height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-      padding: 0 var(--toolbarbutton-outer-padding) !important;
+      height: calc(2 * var(--toolbarbutton-inner-padding) + 16px); /* Calculate height based on padding + icon */
+      padding: 0 var(--toolbarbutton-outer-padding) !important; /* Apply outer padding */
     }
 
+    /* Hide flexible space when collapsed */
     :root:not([zen-sidebar-expanded='true']) & toolbarspring {
       display: none;
     }
   }
 
+  /* Style specific action buttons (likely icon-only) */
   & .zen-sidebar-action-button {
-    padding: 0 !important;
-
+    padding: 0 !important; /* Remove padding */
     & label {
-      display: none !important;
+      display: none !important; /* Hide label */
     }
   }
 }
 
+/* ==========================================================================
+   Vertical New Tab Button (Optional Feature)
+   ========================================================================== */
+
+/* Hide the button wrapper by default */
 #tabs-newtab-button {
   display: none;
-  opacity: 0.5;
-  -moz-user-focus: ignore !important;
+  opacity: 0.5; /* Dimmed by default */
+  -moz-user-focus: ignore !important; /* Prevent focus */
 }
 
+/* Show and style the button if preference `zen.tabs.show-newtab-vertical` is enabled */
 @media -moz-pref('zen.tabs.show-newtab-vertical') {
   #tabs-newtab-button {
-    display: flex !important;
-    transition: scale 0.1s ease;
+    display: flex !important; /* Show the button */
+    transition: scale 0.1s ease; /* Add scale transition */
+
+    /* Style text within the button */
     & .toolbarbutton-text {
       align-items: center;
       padding-top: 0;
     }
 
+    /* Scale down slightly on press */
     &:active,
     &[open] {
       scale: 0.98;
     }
 
+    /* Style when placed "in urlbar" (likely a state/attribute) */
     &[in-urlbar] {
       background: var(--tab-selected-bgcolor) !important;
-      opacity: 1 !important;
-      box-shadow: var(--tab-selected-shadow);
+      opacity: 1 !important; /* Full opacity */
+      box-shadow: var(--tab-selected-shadow); /* Apply selected tab shadow */
     }
   }
 
+  /* Style the container ("periphery") holding the new tab button */
   #tabbrowser-arrowscrollbox-periphery {
+    /* Conditional border color for light mode */
     @media not (prefers-color-scheme: dark) {
-      --zen-colors-border: var(--zen-colors-tertiary);
+      --zen-colors-border: var(--zen-colors-tertiary); /* Use tertiary color */
     }
 
+    /* Move button to the top if preference is set */
     @media -moz-pref('zen.view.show-newtab-button-top') {
       order: -1;
     }
 
+    /* Add a separator line above the button if preferences are set and there are tabs */
     @media -moz-pref('zen.view.show-newtab-button-border-top') and (not -moz-pref('zen.view.show-newtab-button-top')) {
-    #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
-      margin-top: 15px;
-      position: relative;
-      &::before {
-        content: '';
-        display: block;
-        height: 1px;
-        background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
-        width: 98%;
-        position: absolute;
-        top: -8px;
-        left: 50%;
-        transform: translateX(-50%);
+      #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
+        /* Only if tabs exist */
+        margin-top: 15px; /* Space above */
+        position: relative; /* For pseudo-element */
+        &::before {
+          content: '';
+          display: block;
+          height: 1px;
+          background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)); /* Separator color */
+          width: 98%; /* Near full width */
+          position: absolute;
+          top: -8px; /* Position above the button */
+          left: 50%;
+          transform: translateX(-50%); /* Center horizontally */
+        }
       }
     }
   }
-  }
 }
 
+/* ==========================================================================
+   Mark: Essentials Toolbar / Section Styles
+   ========================================================================== */
 
-/* Mark: Essentials Toolbar */
 #zen-essentials-wrapper {
   margin-left: calc(-1 * var(--zen-toolbox-padding));
   min-width: calc(100% + var(--zen-toolbox-padding) * 2);
 }
 
+/* Container for essential items (often pinned/favorite tabs) */
 .zen-essentials-container {
   padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
@@ -1058,30 +1251,39 @@
   transition: max-height 0.3s ease-out;
   opacity: 1;
   grid-template-columns: repeat(auto-fit, minmax(49px, auto));
-  overflow: hidden;
+  &[data-hack-type] {
+    &[data-hack-type='3'] {
+      --zen-hack-type: 3;
+    }
+    &[data-hack-type='4'] {
+      --zen-hack-type: 4;
+    }
+    grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--zen-hack-type) - 1%), auto));
+  }
   scrollbar-width: thin;
   min-width: calc(100% + var(--zen-toolbox-padding) * 2);
   padding: 0 var(--zen-toolbox-padding);
-
   display: grid;
 }
 
+/* Style tabs within the Essentials container (and a related welcome sidebar) */
 .zen-essentials-container > .tabbrowser-tab,
 #zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab {
-  --toolbarbutton-inner-padding: 0;
-  max-width: unset;
-  width: 100% !important;
+  --toolbarbutton-inner-padding: 0; /* Reset padding */
+  max-width: unset; /* Allow stretching */
+  width: 100% !important; /* Force full width of grid cell */
 
+  /* Style background */
   & .tab-background {
-    border-radius: var(--border-radius-medium) !important;
-    transition: background 0.1s ease-in-out;
+    border-radius: var(--border-radius-medium) !important; /* Use medium radius */
+    transition: background 0.1s ease-in-out; /* Smooth background transition */
   }
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
-  &:not([visuallyselected], [multiselected="true"]) .tab-background {
-    background: var(--zen-toolbar-element-bg);
-    border: none;
+  &:not([visuallyselected], [multiselected='true']) .tab-background {
+    background: var(--zen-toolbar-element-bg); /* Use generic element background */
+    border: none; /* No border */
   }
 
   & .tab-content {
@@ -1089,10 +1291,7 @@
     justify-content: center;
   }
 
-  & .tab-label-container {
-    display: none !important;
-  }
-
+  & .tab-label-container,
   & .tab-close-button {
     display: none !important;
   }
@@ -1106,123 +1305,88 @@
     background: var(--tab-selected-bgcolor);
   }
 
+  /* Optional blurred favicon background effect (if pref `zen.theme.essentials-favicon-bg` is enabled) */
   @media -moz-pref('zen.theme.essentials-favicon-bg') {
     &[visuallyselected] > .tab-stack > .tab-background {
+      /* Create a blurred background pseudo-element using the tab icon */
       &::after {
-        content: "";
-        inset: -50%;
-        filter: blur(20px);
+        content: '';
+        inset: -50%; /* Extend beyond bounds */
+        filter: blur(20px); /* Apply blur */
         position: absolute;
         background-size: contain;
         background-clip: padding-box;
-        background-image: var(--zen-tab-icon);
-        z-index: -1;
+        background-image: var(--zen-tab-icon); /* Use tab icon variable */
+        z-index: -1; /* Place behind content */
         background-position: center;
       }
 
-      background: transparent;
-      overflow: hidden;
-      position: relative;
-      --zen-essential-bg-margin: 2px;
+      background: transparent; /* Make main background transparent */
+      overflow: hidden; /* Clip pseudo-elements */
+      position: relative; /* Positioning context */
+      --zen-essential-bg-margin: 2px; /* Margin for inner layer */
 
+      /* Create an inner background layer for contrast */
       &::before {
         background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85));
-        margin: var(--zen-essential-bg-margin);
-        border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin));
+        margin: var(--zen-essential-bg-margin); /* Apply margin */
+        border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin)); /* Adjust radius */
         position: absolute;
         inset: 0;
-        z-index: 0;
-        content: "";
-        transition: background 0.1s ease-in-out;
+        z-index: 0; /* Position above ::after, below content */
+        content: '';
+        transition: background 0.1s ease-in-out; /* Smooth transition */
       }
     }
 
+    /* Slightly fade inner background on hover */
     &[visuallyselected]:hover .tab-background::before {
-      background: light-dark(rgba(255, 255, 255, 0.80), rgba(68, 64, 64, 0.75));
+      background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.75));
     }
   }
 }
 
-
-/* Very special occasions */
-
-/* Mark: Right side windows controls with collapsed sidebar */
-:root:not([zen-compact-mode='true']) {
-  &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
-    & #navigator-toolbox {
-      margin-top: var(--zen-toolbar-height) !important;
-    }
-
-    & .titlebar-buttonbox-container {
-      margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
-    }
-
-    & #zen-appcontent-wrapper {
-      overflow-x: visible;
-    }
-
-    & #zen-sidebar-top-buttons-customization-target {
-      padding-top: 0;
-    }
-
-    & #zen-appcontent-navbar-container {
-      padding-left: var(--zen-element-separation);
-    }
-
-%include vertical-tabs-topbuttons-fix.css
-  }
-
-  &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
-    & #navigator-toolbox {
-      margin-top: var(--zen-toolbar-height) !important;
-    }
-
-    & .titlebar-buttonbox-container {
-      margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
-    }
-
-    & #zen-appcontent-wrapper {
-      overflow-x: visible;
-    }
-
-    & #zen-sidebar-top-buttons-customization-target {
-      padding-top: 0;
-    }
-
-    & #zen-appcontent-navbar-container {
-      padding-right: var(--zen-element-separation);
-    }
-
-%include vertical-tabs-topbuttons-fix.css
-  }
-}
-
-/* Vertical tabs reordering indicators */
+/* ==========================================================================
+   Vertical Tabs Reordering Drag Indicator
+   ========================================================================== */
 #zen-drag-indicator {
+  /* Define indicator variables */
   --zen-drag-indicator-height: 2px;
-  --zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%);
-  position: fixed;
-  z-index: 1000;
-  background: var(--zen-drag-indicator-bg);
-  pointer-events: none;
-  border-radius: 5px;
+  --zen-drag-indicator-bg: color-mix(
+    in srgb,
+    var(--zen-primary-color) 50%,
+    light-dark(rgba(0, 0, 0, 0.85), rgba(255, 255, 255, 0.95)) 50%
+  );
 
+  position: fixed; /* Position relative to viewport */
+  z-index: 1000; /* Ensure it's on top */
+  background: var(--zen-drag-indicator-bg);
+  pointer-events: none; /* Non-interactive */
+  border-radius: 5px; /* Rounded ends */
+
+  /* Add a circle at the start of the indicator */
   &::before {
-    content: "";
+    content: '';
     position: absolute;
-    height: calc(2 * var(--zen-drag-indicator-height));
+    height: calc(2 * var(--zen-drag-indicator-height)); /* Circle diameter */
     width: calc(2 * var(--zen-drag-indicator-height));
-    border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
-    border-radius: 50%;
-    background: transparent;
+    border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg); /* Thick border */
+    border-radius: 50%; /* Make it a circle */
+    background: transparent; /* Hollow circle */
   }
 
+  /* Styles for horizontal drag indicator (e.g., between workspaces?) */
   &[orientation='horizontal'] {
+    /* Position and size based on external CSS variables */
     left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
     width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
     height: var(--zen-drag-indicator-height);
-    transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out;
+    transition:
+      top 0.1s ease-out,
+      left 0.1s ease-out,
+      width 0.1s ease-out;
 
+    /* Position the circle at the left end */
     &::before {
       left: calc(-2 * var(--zen-drag-indicator-height));
       top: 50%;
@@ -1230,12 +1394,18 @@
     }
   }
 
+  /* Styles for vertical drag indicator (between tabs) */
   &[orientation='vertical'] {
+    /* Position and size based on external CSS variables */
     top: calc(var(--indicator-top) + 2 * var(--zen-drag-indicator-height) + 4px);
     height: calc(var(--indicator-height) - 2 * var(--zen-drag-indicator-height) - 4px);
     width: var(--zen-drag-indicator-height);
-    transition: top 0.1s ease-out, left 0.1s ease-out, height 0.1s ease-out;
+    transition:
+      top 0.1s ease-out,
+      left 0.1s ease-out,
+      height 0.1s ease-out;
 
+    /* Position the circle at the top end */
     &::before {
       top: calc(-2 * var(--zen-drag-indicator-height));
       left: 50%;
@@ -1244,7 +1414,10 @@
   }
 }
 
-/* Renaming tabs */
+/* ==========================================================================
+   Renaming Tabs Input Styles
+   ========================================================================== */
+
 .tab-label-container-editing {
   display: none !important;
 }
@@ -1258,20 +1431,27 @@
   padding: 0;
 }
 
-/* Section: tab workspaces stylings */
-.zen-workspace-tabs-section {
-  position: absolute;
-  transform: translateX(-100%);
+/* ==========================================================================
+   Section: Tab Workspaces Stylings
+   ========================================================================== */
 
+/* Style for individual workspace tab sections */
+.zen-workspace-tabs-section {
+  position: absolute; /* Position absolutely for transitions */
+  transform: translateX(-100%); /* Initially off-screen to the left */
+
+  /* Apply flex layout unless it's the essentials container */
   &:not(.zen-essentials-container) {
     display: flex;
-    min-width: calc(100% - var(--zen-toolbox-padding) * 2);
+    min-width: calc(100% - var(--zen-toolbox-padding) * 2); /* Set width based on padding */
   }
 
+  /* Apply horizontal margins unless it's the indicator or essentials */
   &:not(.zen-current-workspace-indicator):not(.zen-essentials-container) {
     margin: 0 var(--zen-toolbox-padding);
   }
 
+  /* Hide section visually and disable interaction when hidden attribute is present */
   &[hidden='true'] {
     visibility: hidden;
     pointer-events: none;
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 676fd4b5..72bf7e2a 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -2386,6 +2386,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         );
         const workspaceObject = this.getWorkspaceFromId(workspaceId);
         const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
+        const essentialNumChildren = essentialContainer.children.length;
+        let essentialHackType = 0;
+        if (essentialNumChildren % 3 === 0) {
+          essentialHackType = 3;
+        } else if (essentialNumChildren % 4 === 0 || essentialNumChildren % 4 === 3) {
+          essentialHackType = 4;
+        }
+        if (essentialHackType > 0) {
+          essentialContainer.setAttribute('data-hack-type', essentialHackType);
+        } else {
+          essentialContainer.removeAttribute('data-hack-type');
+        }
         this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
         this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
       }