Firefox userchrome

 /*---------------------------------*/
/* 1. Force Tabs to Bottom */
#TabsToolbar {
  order: 100 !important;
}

/*---------------------------------*/
/* 2. Dedicated Toolbar for Window Buttons */
#titlebar {
  display: block !important;
  position: relative !important;
  height: 40px !important; /* Height of your toolbar */
  -moz-window-dragging: drag !important; /* Drag space */
  background: #232323 !important; /* Toolbar color */
}
/* Position buttons at the top-right */
#titlebar-buttonbox-container {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 40px !important;
  padding: 8px 12px !important; /* Spacing for buttons */
  z-index: 9999 !important;
  -moz-window-dragging: no-drag !important; /* Allow clicking */
}
/*---------------------------------*/
/* 3. Prevent Overlap with Content */
#navigator-toolbox {
  padding-top: 40px !important; /* Match toolbar height */
}


/*---------------------------------*/
/* Move Window Buttons to Dedicated Toolbar */
#titlebar-buttonbox-container {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important; /* macOS uses right-aligned buttons */
  height: 40px !important; /* Match macOS traffic light buttons */
  padding: 8px 12px !important; /* Spacing around buttons */
  background: var(--toolbar-bgcolor) !important;
  z-index: 9999 !important; /* Ensure buttons stay above other elements */
  -moz-window-dragging: no-drag !important; /* Allow clicking */
  display: flex !important; /* Proper button alignment */
}

/* Hide buttons in the tab bar */
#TabsToolbar .titlebar-button {
  display: none !important;
}

/*---------------------------------*/
/* Move Window Buttons to Dedicated Toolbar */
#titlebar-buttonbox-container {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important; /* macOS uses right-aligned buttons */
  height: 40px !important; /* Match macOS traffic light buttons */
  padding: 8px 12px !important; /* Spacing around buttons */
  background: var(--toolbar-bgcolor) !important;
  z-index: 9999 !important; /* Ensure buttons stay above other elements */
  -moz-window-dragging: no-drag !important; /* Allow clicking */
  display: flex !important; /* Proper button alignment */
}

/* Hide default buttons in the tab bar */
#TabsToolbar .titlebar-button {
  display: none !important;
}

/* Create space for the new toolbar */
#navigator-toolbox {
  padding-top: 40px !important; /* Match toolbar height */
}



/* Modify these values to match your preferences
These reserve extra space on both sides of the nav-bar to be able to drag the window */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 30px; /* left side*/
  --uc-window-drag-space-post: 30px; /* right side*/
}

:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

/* Default width - used on Windows10+ */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px;
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8){
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}
/* On linux set width based on number of caption buttons.
One button */
@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 28px;
  }
}
/* Two buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
       (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
       (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 56px;
  }
}
/* Three buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}



@media (-moz-platform: macos){
  :root:is([tabsintitlebar]) {
    --uc-window-control-width: 72px;
  }
  :root:is([tabsintitlebar][sizemode="fullscreen"]) {
    --uc-window-control-width: 0;
  }
}

.titlebar-buttonbox{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{ height: 32px }

#nav-bar{
  border-inline: var(--uc-window-drag-space-pre,0px) solid transparent;
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
  background-clip: border-box !important;
}


/* Rules for window controls on left layout */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  :root[tabsintitlebar="true"] #nav-bar{
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{ right: unset }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
  position: fixed;
  display: block;
  top: -10px;
  right:0;
  height: 40px;
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  .titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
  order: 2;
  -moz-appearance: none !important;
  --tabs-navbar-shadow-size: 0px;
  --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
}

#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){
  .titlebar-button{
    flex-direction: column;
  }
}