userChrome.css

/*==============================================================================================*

  FoxOne — A minimalist one-line Firefox theme
  Based on Cascade by Andreas Grafen (https://github.com/andreasgrafen/cascade)
  Inspired by LittleFox (https://github.com/biglavis/LittleFox)
  MIT License

*==============================================================================================*/


/* ==========================================================================
   CONFIG
   ========================================================================== */

:root {
  /* Color palette — change these five values to retheme FoxOne */
  --uc-color-base:    #282828;   /* main background (toolbar, frame) */
  --uc-color-surface: #3c3836;   /* elevated surfaces (panels, popups) */
  --uc-color-accent:  #fabd2f;   /* accent color (active tab, focus ring) */
  --uc-color-text:    #FFFFFF;   /* primary text */
  --uc-color-hover:   #7c6f64;   /* hover / highlight backgrounds */

  /* Global Border Radius — applied to all UI elements */
  --uc-border-radius: 8px;

  /* Statuspanel distance from window border (0 = corner) */
  --uc-status-panel-spacing: 12px;

  /* Personal Toolbar position (0 = top, 4 = bottom) */
  --uc-toolbar-position: 4;

  /* URL Bar width (min applied normally, max on focus) */
  --uc-urlbar-min-width: 35vw;
  --uc-urlbar-max-width: 50vw;

  /* URL Bar position (1 = tabs right, 3 = tabs left) */
  --uc-urlbar-position: 1;

  /* Vertical URL Bar spacing adjustment */
  --uc-urlbar-top-spacing: 1px;

  /* Dynamic tab widths. The inactive ceiling is intentionally lower than the
     active one: inactive tabs cap sooner, freeing strip space for the active
     tab to grow visibly larger. Raise it back toward the active ceiling and the
     active-tab size advantage only appears at very wide strips (issue #7).

     These are the narrow-window defaults (< 1710px). At and above 1710px
     (~2/3 of WQHD) the ceilings are widened back to the pre-#7 pair so the
     strip distributes evenly and tabs read uniformly again — see the
     min-width: 1710px override below the :root block. */
  --uc-active-tab-width: clamp(100px, 30vw, 190px);
  --uc-inactive-tab-width: clamp(100px, 20vw, 120px);
  /* Tab min width (opt-in): 76px = Firefox default (browser.tabs.tabMinWidth).
     Lower it (e.g. 36px) to allow narrower tabs / fit more before overflow scroll */
  --uc-tab-min-width: 76px;

  /* Inactive tab hover title color (issue #16) */
  --uc-tab-hover-text: #ffda85;

  /* Tab close button (none = hidden, -moz-inline-block = visible) */
  --show-tab-close-button: none;
  --show-tab-close-button-hover: -moz-inline-block;

  /* Context menu: "Open Link in Split View" (none = hidden, -moz-box = visible) */
  --uc-show-context-splitview: none;

  /* All-tabs button (none = hidden, -moz-box = visible) */
  --uc-show-all-tabs-button: none;

  /* Container tab indicator */
  --container-tabs-indicator-margin: 10px;
  --uc-identity-glow: 0 1px 10px 1px;

  /* Windows control button width. Fallback only: on non-macOS the hamburger
     auto-tracks the real window-control box via CSS anchor positioning, so
     this value is used just on macOS and on Firefox builds without anchor
     support. No need to measure it by hand on a modern build. */
  --uc-window-buttons-width: 138px;

  /* Hamburger button width — reserved in tab bar to prevent overlap */
  --uc-hamburger-width: 44px;

  /* Extra toolbar button width (extensions, uBlock etc.) */
  --uc-toolbar-button-width: 36px;
  
  /* Standalone new-tab button width (set to 0 if removed from toolbar) */
  --uc-newtab-width: 36px;

  /* Drag space — grab zone after the tabs for moving the window. Kept small;
     it is functional space, not just a gap, so don't drop it to 0. */
  --uc-drag-space: 20px;

  /* Findbar — floating search bar */
  --findbar-top: 8px;
  --findbar-right: 8px;
  --findbar-width: 360px;

  /* Show/Hide Find Bar Options
   * Show: 1
   * Hide: 0
   */
  --show-highlight-all:    1;
  --show-match-case:       1;
  --show-match-diacritics: 1;
  --show-whole-words:      1;

  /* Find Bar Options Position */
  --highlight-all-position:    0;
  --match-case-position:       1;
  --match-diacritics-position: 2;
  --whole-words-position:      3;

  /* URL bar background (base = blends with toolbar, surface = distinct) */
  --uc-urlbar-background: var(--uc-color-base);

  /* Rounded corners on URL bar and findbar (1 = rounded, 0 = square) */
  --uc-urlbar-rounded: 0;

  /* Tab loading progress bar (1 = show, 0 = hide) */
  --uc-show-loading-progress: 0;

  /* Navigation buttons — auto-hide with hover reveal (0 = always show, 1 = reveal with hover and focus, 2 = reveal with hover) */
  --uc-autohide-nav-buttons: 0;

  /* Navigation buttons — remove back/forward/reload for mouse button and shortcut users (1 = hide, 0 = show) */
  --uc-hide-nav-buttons: 0;

  /* URL-bar clutter icons — fully hide shield (tracking protection), reader
   * mode, translations, bookmark star and add-to-taskbar so they can't be
   * misclicked when aiming for the URL bar (1 = hide all, 0 = default reveal) */
  --uc-hide-urlbar-buttons: 0;

  /* Pinned toolbar extension icons — hide and reveal on hamburger hover, to
   * keep the one-line layout clean (1 = hide + hover-reveal, 0 = always show) */
  --uc-hide-extension-icons: 1;

  /* Active tab highlight (combine or use individually)
   * Background: set a hex color to enable (e.g. #3c3836), transparent = off
   * Underline: colored bar below active tab (1 = show, 0 = hide) */
  --uc-active-tab-background: transparent;
  --uc-active-tab-underline: 0;

}

/* Wide-window tab widths (>= 1710px physical, ~2/3 of WQHD). Restores the
   pre-#7 ceilings: inactive caps near the active one, so flex distributes strip
   space evenly and tabs look uniform — the everyday-comfortable behaviour.
   Below that the narrow defaults above keep the active tab visibly larger.

   The catch: `width` is CSS pixels, which DPI scaling shrinks (1920 physical
   at 125% = 1536 CSS px), so a plain `min-width: 1710px` never fires on a
   scaled display. CSS can't read the scale factor as a number, but it can
   match it via `resolution` (dppx == OS scale). So the threshold is tiered per
   scale, each set to 1710 / scale CSS px, all writing the SAME wide values —
   overlap between tiers is harmless. The highest dppx tier <= the current
   scale wins, giving a constant ~1710 *physical*-px trigger at any scaling.
     100%  -> 1710 / 1.00 = 1710     150%  -> 1710 / 1.50 = 1140
     125%  -> 1710 / 1.25 = 1368     175%  -> 1710 / 1.75 =  977
                                     200%  -> 1710 / 2.00 =  855 */
@media (min-width: 1710px) {
  :root {
    --uc-active-tab-width: clamp(100px, 30vw, 250px);
    --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
  }
}
@media (min-resolution: 1.2dppx) and (min-width: 1368px) {
  :root {
    --uc-active-tab-width: clamp(100px, 30vw, 250px);
    --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
  }
}
@media (min-resolution: 1.45dppx) and (min-width: 1140px) {
  :root {
    --uc-active-tab-width: clamp(100px, 30vw, 250px);
    --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
  }
}
@media (min-resolution: 1.7dppx) and (min-width: 977px) {
  :root {
    --uc-active-tab-width: clamp(100px, 30vw, 250px);
    --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
  }
}
@media (min-resolution: 1.95dppx) and (min-width: 855px) {
  :root {
    --uc-active-tab-width: clamp(100px, 30vw, 250px);
    --uc-inactive-tab-width: clamp(100px, 20vw, 200px);
  }
}


/* ==========================================================================
   COLOR THEME — Gruvbox Dark
   Replaces the standalone ColorTheme.xpi. Only applies in dark mode.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* ----------------------------------------------------------------------
     Dynamic-theme compatibility (issue #5)

     Firefox applies a lightweight theme's colours as inline custom properties
     on :root. Author !important rules beat those inline values, so FoxOne's
     forced surface colours used to override extensions like Adaptive Tab Bar
     Colour, which retints the chrome to match each page. The surface overrides
     below are therefore scoped to :root:not([lwtheme]): when any dynamic theme
     is active FoxOne steps back and lets it drive frame, toolbar, URL field,
     popups and sidebar. The accent/identity cues stay unconditional so FoxOne
     remains recognisable, and a small :root[lwtheme] block keeps FoxOne's own
     helper tokens following the theme instead of drifting to Nova defaults.
     FoxOne itself sets no lightweight theme, so without such an extension
     :root:not([lwtheme]) always matches and behaviour is unchanged.
     (Firefox sets lwtheme="" on the root; the old :-moz-lwtheme pseudo-class
     was removed, so attribute selectors are the way now.)
     ---------------------------------------------------------------------- */

  /* Chrome surfaces – yielded to a dynamic theme when one is active */
  :root:not([lwtheme]) {
    /* Frame & toolbar */
    --lwt-accent-color: var(--uc-color-base) !important;
    --toolbar-bgcolor: var(--uc-color-base) !important;
    --toolbar-color: var(--uc-color-text) !important;
    --lwt-text-color: var(--uc-color-text) !important;
    /* Nova renamed the toolbar/toolbox colour tokens (--toolbar-bgcolor →
       --toolbar-background-color, plus --toolbox-background-color for
       chrome-blocks). FoxOne's old override misses them, so the bookmarks
       bar and sidebar drifted to #2b2a33. Pin both to base. */
    --toolbar-background-color: var(--uc-color-base) !important;
    --toolbox-background-color: var(--uc-color-base) !important;

    /* URL bar */
    --toolbar-field-background-color: var(--uc-urlbar-background) !important;
    --toolbar-field-color: var(--uc-color-text) !important;
    --toolbar-field-focus-color: var(--uc-color-text) !important;
    --toolbar-field-focus-background-color: var(--uc-color-surface) !important;

    /* Popups & panels */
    --arrowpanel-background: var(--uc-color-surface) !important;
    --arrowpanel-color: var(--uc-color-text) !important;
    --arrowpanel-border-color: var(--uc-color-base) !important;
    --panel-item-hover-bgcolor: var(--uc-color-hover) !important;

    /* Sidebar */
    --lwt-sidebar-background-color: var(--uc-color-base) !important;
    --lwt-sidebar-text-color: var(--uc-color-text) !important;
    --lwt-sidebar-border-color: var(--uc-color-surface) !important;
    --sidebar-highlight-background-color: var(--uc-color-hover) !important;
  }

  /* Accent & identity – always applied, including under a dynamic theme, so
     FoxOne stays recognisable: the selected-tab line/text, focus ring, the
     attention icon fill, and the deliberate transparent tab-hover (issue #16). */
  :root {
    --lwt-tab-line-color: var(--uc-color-accent) !important;
    --tab-selected-textcolor: var(--uc-color-accent) !important;
    /* Kill native grey hover background – hover is a title-colour cue (issue #16).
       Nova renamed the token to --tab-background-color-hover (word order
       flipped, tab.tokens.css); override both names. */
    --tab-hover-background-color: transparent !important;
    --tab-background-color-hover: transparent !important;
    --lwt-toolbarbutton-icon-fill-attention: var(--uc-color-accent) !important;
    --toolbarbutton-icon-fill-attention: var(--uc-color-accent) !important;
    --toolbar-field-focus-border-color: var(--uc-color-accent) !important;
  }

  /* Toolbox background – forced to base only when no dynamic theme is active;
     otherwise Firefox paints it from the theme frame colour. The per-theme
     surface collapse lives outside this dark-mode block (a theme can set the
     chrome to light, switching these rules off) – see DYNAMIC-THEME COMPAT. */
  :root:not([lwtheme]) #navigator-toolbox {
    background: var(--uc-color-base) !important;
  }

  /* Selected tab text */
  .tabbrowser-tab[selected] {
    color: var(--uc-color-accent) !important;
  }

  /* Inactive tab hover — dimmed-accent title instead of background (issue #16) */
  .tabbrowser-tab:not([selected]):hover {
    color: var(--uc-tab-hover-text) !important;
  }

  /* URL bar results — accent-tinted selection highlight (full row) */
  .urlbarView-row[selected] {
    background: color-mix(in srgb, var(--uc-color-accent) 15%, transparent) !important;
  }
  .urlbarView-row[selected] > .urlbarView-row-inner {
    color: var(--uc-color-text) !important;
    background: transparent !important;
  }
}


/* ==========================================================================
   DYNAMIC-THEME COMPATIBILITY (issue #5) – scheme-independent

   Lives OUTSIDE the dark-mode block on purpose. A theme extension (e.g.
   Adaptive Tab Bar Colour) sets the chrome colour scheme per page, and can
   report a LIGHT scheme even while the OS is dark – which switches FoxOne's
   @media (prefers-color-scheme: dark) rules off entirely. The per-page compat
   must therefore not depend on them.

   ATBC paints frame, toolbar and URL field as three different tones for a
   layered look; FoxOne is one flat surface, so that layering shows up as a box
   around the URL field. Collapse them onto the frame tone (--lwt-accent-color,
   the tab-strip colour that sits behind FoxOne's transparent nav-bar). In Nova
   --toolbar-bgcolor is unset (renamed to --toolbar-background-color); revive it
   here too so FoxOne's own consumers (splitters, sound-overlay icons, bookmarks
   bar) keep resolving under a theme.
   ========================================================================== */

:root[lwtheme] {
  --toolbar-bgcolor: var(--lwt-accent-color) !important;
  --toolbar-background-color: var(--lwt-accent-color) !important;
  --toolbox-background-color: var(--lwt-accent-color) !important;
  --toolbar-field-background-color: var(--lwt-accent-color) !important;
}

/* Nova paints the URL field fill on .urlbar-input-container (the legacy
   .urlbar-background is transparent), so back the variable override above with
   a direct paint of the element to the frame tone. */
:root[lwtheme] .urlbar-input-container,
:root[lwtheme] #urlbar-input-container {
  background-color: var(--lwt-accent-color) !important;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

#toolbar-menubar {
  &[autohide] {
    &[inactive]:not([customizing]) {
      width: 0px;
    }
  }
}

#main-window,
#toolbar-menubar,
#TabsToolbar,
#navigator-toolbox,
#sidebar-box,
#sidebar-main,
sidebar-main,
#sidebar,
#nav-bar {
  box-shadow: none !important;
}

#main-window,
#toolbar-menubar,
#TabsToolbar,
#PersonalToolbar,
#navigator-toolbox,
#sidebar-box,
#sidebar-main,
sidebar-main,
#sidebar,
#nav-bar {
  border: none !important;
}

.titlebar-spacer {
  display: none !important;
}

/* fix Shield Icon padding — Nova moved urlbar-input-container from id to
   class, so match both. */
#urlbar-input-container[pageproxystate="valid"]
  > #tracking-protection-icon-container
  > #tracking-protection-icon-box
  > #tracking-protection-icon,
.urlbar-input-container[pageproxystate="valid"]
  > #tracking-protection-icon-container
  > #tracking-protection-icon-box
  > #tracking-protection-icon {
  padding-bottom: 1px;
}

/* Nova added #trust-icon (site-info/security icon) inside the new
   #trust-icon-container, sitting next to a flex #trust-label. The icon box
   is a symmetric 16x16 (no margin/padding), yet Nova renders it ~2px too
   high relative to the other urlbar icons. Nudge it down to align. */
#trust-icon {
  margin-top: 2px !important;
}

/* The EME / DRM-content indicator (#eme-notification-icon, in
   #notification-popup-box) pops up next to the shield during DRM playback and
   hits the same Nova quirk: it renders ~2px too high relative to the other
   urlbar icons. Same nudge as the shield above. Sibling notification icons
   (geo, camera, mic) likely share this if they ever surface. */
#eme-notification-icon {
  margin-top: 2px !important;
}

#TabsToolbar { order: 2; }
#nav-bar { order: 3; }

#PersonalToolbar {
  padding: 6px !important;
  box-shadow: inset 0 0 50vh rgba(0, 0, 0, var(--uc-darken-toolbar)) !important;
  order: var(--uc-toolbar-position);
  width: 100%;
}
/* Bookmarks bar background. Nova sets it directly (#2b2a33, the default dark
   toolbar colour) instead of inheriting --toolbar-bgcolor, so it drifts from
   the navbar. Pin it to base when no dynamic theme is active; under one (e.g.
   Adaptive Tab Bar Colour) follow --toolbar-bgcolor like the rest of the
   chrome so it retints with the page (issue #5). */
:root:not([lwtheme]) #PersonalToolbar {
  background-color: var(--uc-color-base) !important;
}
:root[lwtheme] #PersonalToolbar {
  background-color: var(--toolbar-bgcolor) !important;
}

#statuspanel #statuspanel-label {
  border: none !important;
  border-radius: var(--uc-border-radius) !important;
  margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important;
}


/* ==========================================================================
   ONE-LINE LAYOUT – urlbar shares the toolbar row with the tabs.
   Always on, at every window width. When urlbar + tabs no longer fit
   comfortably, tabs shrink to their min-width and the strip scrolls
   (native arrowscrollbox). Deliberately no width breakpoint: switching the
   toolbox flex layout on resize leaves the urlbar's paint layer stale until
   a repaint (Ctrl+L / tab switch), so the structure stays constant.
   ========================================================================== */

#navigator-toolbox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Prevent notifications toolbar from becoming a 1px flex column —
   force it to its own row so it collapses when empty. */
#notifications-toolbar {
  width: 100% !important;
  order: 99 !important;
}

#nav-bar {
  order: var(--uc-urlbar-position);
  width: var(--uc-urlbar-min-width);
  /* !important required: Firefox overrides our transition with
     :root[sessionrestored][lwtheme] #nav-bar { transition-property:
     background-color } when any lwtheme (Alpenglow, custom) is active. */
  transition: width 0.25s ease !important;
  &.browser-titlebar {
    width: 100%;
  }
}

#nav-bar #urlbar-container {
  min-width: 0px !important;
  width: auto !important;
}

#titlebar {
  width: calc(100vw - var(--uc-urlbar-min-width) - 1px);
  transition: width 0.25s ease !important;
}

#TabsToolbar {
  width: 100%;
}

#tabbrowser-tabs:not([orient="vertical"]) {
  max-width: calc(100% - var(--uc-hamburger-width) - var(--uc-toolbar-button-width) - var(--uc-drag-space) - var(--uc-newtab-width)) !important;
}

#navigator-toolbox:focus-within #nav-bar {
  width: var(--uc-urlbar-max-width);
  &.browser-titlebar {
    width: 100%;
  }
}
#navigator-toolbox:focus-within #titlebar {
  width: calc(100vw - var(--uc-urlbar-max-width) - 1px);
}

/* Vertical tabs — toolbar layout override.
   Tabs live in the sidebar, so the toolbar only holds URL bar + buttons.
   Uses :has() to detect vertical mode reliably in userChrome.css. */
:root:has(#tabbrowser-tabs[orient="vertical"]) #nav-bar {
  flex: 1 !important;
  width: auto !important;
}

:root:has(#tabbrowser-tabs[orient="vertical"]) #titlebar {
  width: auto !important;
}

:root:has(#tabbrowser-tabs[orient="vertical"]) #PanelUI-button {
  position: static !important;
}


/* ==========================================================================
   macOS — left-side window controls (traffic lights).
   Restore the pre-tabs spacer that reserves room for close/minimize/
   fullscreen and zero out the right-side window-button offset since
   macOS has no controls there.
   ========================================================================== */

@media (-moz-platform: macos) {
  :root {
    /* No right-side window controls on macOS */
    --uc-window-buttons-width: 0px;

    /* Width reserved for macOS traffic light buttons */
    --uc-traffic-light-width: 80px;
  }

  /* Position traffic lights at the left edge of the toolbar, vertically
     centred.  absolute (not fixed) so the buttons track the toolbox,
     not the viewport — gives the correct macOS inset. */
  #navigator-toolbox {
    position: relative !important;
  }

  .titlebar-buttonbox-container {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    z-index: 1000 !important;
    display: block !important;
  }

  /* Reserve left-side space — box-sizing ensures padding stays within
     the nav-bar's flex width instead of overflowing the layout.
     Drops in fullscreen where macOS hides the traffic lights. */
  :root:not([inFullscreen]) #nav-bar {
    box-sizing: border-box !important;
    padding-inline-start: var(--uc-traffic-light-width) !important;
  }
}


/* ==========================================================================
   NAV BAR
   ========================================================================== */

/* Toolbox fill is the frame tone (base), NOT the URL-field colour. Feeding
   --toolbar-field-background-color in here leaked --uc-urlbar-background onto the
   whole top panel (issue #28); the field itself is painted at #urlbar below. */
:root:not([lwtheme]) #navigator-toolbox {
  background: var(--uc-color-base) !important;
}

/* kill toolbar–content separator (covers all known Firefox versions) */
#navigator-toolbox::after,
#navigator-toolbox::before {
  display: none !important;
  height: 0 !important;
  border: none !important;
}

:root {
  --chrome-content-separator-color: transparent !important;
}

#navigator-toolbox {
  border-bottom: 0 solid transparent !important;
}

/* Nova frames every .chrome-block container (toolbox, sidebar, content) with
   a 4px margin and an 8px radius (--chrome-block-radius), letting the window
   background show through as a border and leaving panels floating inset.
   #navigator-toolbox, #sidebar-main and others all carry class="chrome-block".
   FoxOne is edge-to-edge, so flatten them all at the source. Side effects:
   removes the toolbox 4px top margin (realigns #PanelUI-button, fixed top:0),
   the sidebar side gaps, and the AI-panel height/strip mismatch. */
.chrome-block {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Nova insets the web content on #browser (the flex hbox wrapping sidebar +
   content): padding pushed the page off the window edge, and a 4px flex gap
   (column + row) left strips between content and sidebar and a height/strip
   mismatch on the AI panel. Remove both — the 2px #sidebar-splitter still
   divides content from sidebar. */
#browser {
  padding: 0 !important;
  gap: 0 !important;
}

#browser,
#appcontent,
#tabbrowser-tabbox,
/* Nova draws the 1px chrome-content separator on .browserContainer too,
   which the old list missed — it pushed the web content 1px below the AI
   sidebar. */
.browserContainer {
  border-top: none !important;
}

#nav-bar {
  padding-block-start: 0px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


#urlbar,
#urlbar * {
  outline: none !important;
  box-shadow: none !important;
}

#urlbar,
#urlbar *,
#urlbar-background,
#urlbar-input-container,
#urlbar-container {
  border-radius: calc(var(--uc-urlbar-rounded) * var(--uc-border-radius)) !important;
}

/* Nova rebuilt the urlbar as <moz-urlbar> and moved its internals from
   id to class (.urlbar-background, .urlbar-input-container). The new
   .urlbar-input-container carries a 1px deemphasized border
   (urlbar-searchbar.css). Reset both the legacy id and the Nova classes
   so the field keeps blending into the toolbar across channels. */
#urlbar-background,
.urlbar-background,
.urlbar-input-container {
  border: none !important;
}

#urlbar[focused="true"] > #urlbar-background,
#urlbar[focused="true"] > .urlbar-background,
#urlbar:not([open]) > #urlbar-background,
#urlbar:not([open]) > .urlbar-background {
  /* The field tone (issue #28): --uc-urlbar-background normally, --lwt-accent-color
     under a dynamic theme, both resolved via --toolbar-field-background-color. */
  background: var(--toolbar-field-background-color) !important;
}

#urlbar[open] > #urlbar-background,
#urlbar[open] > .urlbar-background {
  background: var(--toolbar-field-background-color) !important;
  /* Nova ships the open results panel without the border/shadow that used
     to separate it, so it blends into the page. Restore a 1px outline.
     Higher specificity (id+class) than the global border:none reset, so it
     only applies while the dropdown is open; the closed field stays flush. */
  border: 1px solid var(--uc-color-surface) !important;
}

.urlbarView-row:hover > .urlbarView-row-inner {
  background: var(--toolbar-field-focus-background-color) !important;
}

/* result-menu button ([...]) — show dots, drop frame around them.
   Two-pronged attack:
   1. Override the CSS variables Firefox feeds into background-color across
      hover/selected states (kills the grey at the source, regardless of
      which rule consumes the var).
   2. Brute-force transparent on button + wrapper selectors as defense.
   background-color (not background!) keeps the dot icon (bg-image) intact. */
.urlbarView,
#urlbar {
  --button-background-color: transparent !important;
  --urlbarView-result-button-hover-background-color: transparent !important;
  --urlbarView-result-button-selected-background-color: transparent !important;
  --urlbarView-result-button-background-opacity: 0 !important;
  --urlbarView-action-button-background-color: transparent !important;
  --urlbarView-action-button-hover-background-color: transparent !important;
  --urlbarView-hover-background: transparent !important;
}

.urlbarView-row-buttons,
.urlbarView-button,
.urlbarView-button:hover,
.urlbarView-button:active,
.urlbarView-button-menu,
.urlbarView-button-menu:hover,
.urlbarView-button-result-menu,
.urlbarView-button-result-menu:hover,
.urlbarView-button-result-menu:active,
.urlbarView-row-button-menu,
.urlbarView-row[selected] :is(.urlbarView-row-buttons, .urlbarView-button-menu, .urlbarView-button-result-menu),
.urlbarView-row:hover :is(.urlbarView-row-buttons, .urlbarView-button-menu, .urlbarView-button-result-menu) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.urlbarView-button-result-menu:hover,
.urlbarView-button-menu:hover,
.urlbarView-row:hover .urlbarView-button-result-menu:hover {
  fill: var(--uc-color-accent) !important;
}

.urlbar-icon,
#urlbar-go-button {
  margin: auto;
}

/* Nova's search-mode switcher (the engine icon) is a moz-button; its
   visible button lives in the shadow DOM (part="button") and draws a violet
   frame (#d4c1ff in dark mode) from the design tokens. Rather than fight to
   remove it, recolour it to FoxOne's accent so it reads as an on-brand
   search-mode indicator. Cover the host tokens (incl. the full
   --focus-outline shorthand, missed earlier) and the exposed part, since
   the exact channel resisted isolation. */
.searchmode-switcher {
  --focus-outline: 2px solid var(--uc-color-accent) !important;
  --focus-outline-color: var(--uc-color-accent) !important;
  --button-border: 1px solid var(--uc-color-accent) !important;
  --button-border-color: var(--uc-color-accent) !important;
  --button-border-color-active: var(--uc-color-accent) !important;
  --button-border-color-hover: var(--uc-color-accent) !important;
  --button-border-color-selected: var(--uc-color-accent) !important;
  --border-color-selected: var(--uc-color-accent) !important;
}
.searchmode-switcher::part(button) {
  border-color: var(--uc-color-accent) !important;
  outline-color: var(--uc-color-accent) !important;
}

.urlbar-page-action {
  padding: 0 inherit !important;
}


/* ==========================================================================
   LOADING PROGRESS BAR — active tab bottom indicator.
   Animated glow bar at the bottom of the selected tab while loading.
   Same visual style as the pinned-tab indicator (::after), using ::before
   to avoid conflicts.
   Note: transform must NOT be !important — animations can't override it.
   ========================================================================== */

/* Bottom bar — hidden default on ALL tabs */
.tabbrowser-tab .tab-background::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: var(--container-tabs-indicator-margin) !important;
  right: var(--container-tabs-indicator-margin) !important;
  height: 1px !important;
  background: var(--tab-selected-textcolor, #fabd2f) !important;
  box-shadow: var(--uc-identity-glow) var(--tab-selected-textcolor, #fabd2f) !important;
  transform-origin: left !important;
  transform: scaleX(0);
  opacity: 0 !important;
  transition: opacity 0.3s ease 0.15s !important;
  pointer-events: none !important;
}

/* Bottom bar — animated on ALL busy tabs */
.tabbrowser-tab[busy] .tab-background::before {
  opacity: var(--uc-show-loading-progress) !important;
  transition: none !important;
  animation: uc-progress 2.5s cubic-bezier(0.2, 0.6, 0.4, 1) forwards !important;
}

/* Inactive busy tabs — white to match tab text color */
.tabbrowser-tab[busy]:not([selected]) .tab-background::before {
  background: var(--toolbar-color, #FFFFFF) !important;
  box-shadow: var(--uc-identity-glow) var(--toolbar-color, #FFFFFF) !important;
}

/* Top glow — all busy tabs (no base state = no pinned indicator conflict) */
.tabbrowser-tab[busy] .tab-background::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: var(--container-tabs-indicator-margin) !important;
  right: var(--container-tabs-indicator-margin) !important;
  height: 1px !important;
  background: var(--tab-selected-textcolor, #fabd2f) !important;
  box-shadow: var(--uc-identity-glow) var(--tab-selected-textcolor, #fabd2f) !important;
  transform-origin: left !important;
  opacity: var(--uc-show-loading-progress) !important;
  animation: uc-progress 2.5s cubic-bezier(0.2, 0.6, 0.4, 1) forwards !important;
  pointer-events: none !important;
}

/* Top glow — inactive tabs use white */
.tabbrowser-tab[busy]:not([selected]) .tab-background::after {
  background: var(--toolbar-color, #FFFFFF) !important;
  box-shadow: var(--uc-identity-glow) var(--toolbar-color, #FFFFFF) !important;
}

@keyframes uc-progress {
  0%   { transform: scaleX(0); }
  15%  { transform: scaleX(0.35); }
  40%  { transform: scaleX(0.65); }
  70%  { transform: scaleX(0.82); }
  100% { transform: scaleX(0.95); }
}


/* ==========================================================================
   SIDEBAR (incl. AI sidebar revamp) — kill panel border & splitter line
   ========================================================================== */

:root {
  --sidebar-border-color: transparent !important;
}

/* splitter between content and sidebar — thin 2px line, still draggable.
   Use --toolbar-bgcolor (not the hardcoded dark base) so it blends in both
   colour schemes: dark mode resolves it to base via FoxOne's override, light
   mode to the system toolbar tone. Without this the dark splitter shows as a
   black bar next to light content. */
#sidebar-splitter {
  border: none !important;
  background: var(--toolbar-bgcolor) !important;
  appearance: none !important;
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
}

/* sidebar panel header (the "Anthropic Claude" bar) — hide entirely */
#sidebar-header,
.sidebar-panel-header {
  display: none !important;
}

/* drop the 6px padding-bottom that leaves a strip below the chat panel */
#sidebar-box {
  padding: 0 !important;
}

/* square corners on all browser surfaces (Win 2000 vibe).
   --browser-area-border-radius is the official knob (FF 138+).
   Selectors below are a safety net in case Firefox bypasses the var. */
:root {
  --browser-area-border-radius: 0 !important;
}

.browserStack,
#tabbrowser-tabbox,
#sidebar-box,
#sidebar-main,
sidebar-main,
.sidebar-panel,
.sidebar-browser-stack,
.browserContainer,
browser[type="content"],
#sidebar {
  border-radius: 0 !important;
}


/* AI chatbot chrome — everything but the chat iframe lives inside
   chrome://browser/content/genai/chat.html, not browser.xhtml.
   #header = provider dropdown + settings/close buttons
   #message-container = permission/error notifications (hidden = silent)
   #summarize-btn-container = "Seite zusammenfassen" strip */
@-moz-document url-prefix(chrome://browser/content/genai/) {
  #header,
  #message-container,
  #summarize-btn-container {
    display: none !important;
  }

  /* fill the panel — drop body padding & ensure container expands */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }
  #browser-container,
  #browser-container browser {
    flex: 1 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}


/* ==========================================================================
   HIDDEN ELEMENTS
   ========================================================================== */

/* Permanent hide — takes precedence over autohide */
@container style(--uc-hide-nav-buttons: 1) {
  #back-button,
  #forward-button,
  #reload-button,
  #stop-reload-button {
    display: none !important;
  }
}

/* Navigation buttons — auto-hide with hover reveal */
/* Mode 1 and 2 apply hidden state */
@container style(--uc-autohide-nav-buttons: 1), style(--uc-autohide-nav-buttons: 2) {
  #back-button,
  #forward-button,
  #reload-button,
  #stop-reload-button {
    opacity: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
  }
  /* Hover reveal applies to both modes — revert restores native button widths */
  #nav-bar:hover :is(
    #back-button,
    #forward-button,
    #reload-button,
    #stop-reload-button
  ) {
    opacity: 1 !important;
    width: revert !important;
    min-width: revert !important;
    max-width: 60px !important;
    padding-inline: revert !important;
  }
  /* Back button has extra native leading padding (8px left vs 2px); revert misses it */
  #nav-bar:hover #back-button {
    padding-inline-start: 8px !important;
  }
  /* Disabled back/forward stay visible but dimmed, like native */
  #nav-bar:hover :is(#back-button, #forward-button)[disabled] {
    opacity: 0.4 !important;
  }
}

/* Mode 1 also reveals on focus */
@container style(--uc-autohide-nav-buttons: 1) {
  #nav-bar:focus-within :is(
    #back-button,
    #forward-button,
    #reload-button,
    #stop-reload-button
  ) {
    opacity: 1 !important;
    width: revert !important;
    min-width: revert !important;
    max-width: 60px !important;
    padding-inline: revert !important;
  }
  #nav-bar:focus-within #back-button {
    padding-inline-start: 8px !important;
  }
  #nav-bar:focus-within :is(#back-button, #forward-button)[disabled] {
    opacity: 0.4 !important;
  }
}

#pageActionButton { display: none !important; }
#urlbar-go-button { display: none !important; }

/* Context menu: hide "Open Link in Split View" (toggle in CONFIG) */
#context-openlinkinsplitview { display: var(--uc-show-context-splitview) !important; }

#identity-permission-box {
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  transition: max-width 0.2s ease, opacity 0.2s ease,
              margin-inline 0.2s ease, padding-inline 0.2s ease !important;
}

#urlbar:hover #identity-permission-box,
#urlbar[focused="true"] #identity-permission-box {
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-inline: revert !important;
  padding-inline: revert !important;
}

/* Always show active permissions (granted camera/mic/location) and sharing
   icons (active stream) — security indicator should not depend on focus.
   Firefox sets [hasPermissions] also for blocked-only permissions (e.g.
   autoplay), so we exclude those via :not(:has(.blocked-permission-icon))
   to keep blocked icons hover/focus-revealed like the rest of FoxOne. */
#identity-permission-box[hasPermissions]:not(:has(.blocked-permission-icon)),
#identity-permission-box[hasSharingIcon] {
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-inline: revert !important;
  padding-inline: revert !important;
}

#identity-box.extensionPage { display: none !important; }

/* Container indicator — hide by default, reveal on hover/focus */
#userContext-label,
#userContext-indicator {
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: max-width 0.2s ease, opacity 0.2s ease,
              padding 0.2s ease, margin 0.2s ease !important;
}

#urlbar:hover #userContext-indicator,
#urlbar[focused="true"] #userContext-indicator {
  max-width: 200px !important;
  opacity: 1 !important;
  margin-inline: 2px !important;
}

#urlbar:hover #userContext-label,
#urlbar[focused="true"] #userContext-label {
  max-width: 200px !important;
  opacity: 1 !important;
  margin-inline-start: 2px !important;
}

/* Hide unwanted page action icons — reveal on hover/focus */
#reader-mode-button,
#taskbar-tabs-button,
#translations-button,
#pageAction-urlbar-_testpilot-containers,
#pageAction-urlbar-_e26226b8-5263-4b42-9789-504fde4443b3_ {
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: max-width 0.2s ease, opacity 0.2s ease,
              padding 0.2s ease, margin 0.2s ease !important;
}

#urlbar:hover #reader-mode-button,
#urlbar:hover #taskbar-tabs-button,
#urlbar:hover #translations-button,
#urlbar:hover #pageAction-urlbar-_testpilot-containers,
#urlbar:hover #pageAction-urlbar-_e26226b8-5263-4b42-9789-504fde4443b3_,
#urlbar[focused="true"] #reader-mode-button,
#urlbar[focused="true"] #taskbar-tabs-button,
#urlbar[focused="true"] #translations-button,
#urlbar[focused="true"] #pageAction-urlbar-_testpilot-containers,
#urlbar[focused="true"] #pageAction-urlbar-_e26226b8-5263-4b42-9789-504fde4443b3_ {
  max-width: 30px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 6px !important;
  margin: 0 !important;
}

/* Opt-in: fully hide URL-bar clutter icons, no hover/focus reveal.
   display:none removes them regardless of the reveal rules above, so misclicks
   while aiming for the URL bar are impossible. The shield/security indicator
   (Nova: #trust-icon-container; pre-Nova: #tracking-protection-icon-container)
   and #star-button-box are otherwise always visible; this is the only thing
   that hides them. (Issue #21) */
@container style(--uc-hide-urlbar-buttons: 1) {
  #trust-icon-container,
  #tracking-protection-icon-container,
  #reader-mode-button,
  #taskbar-tabs-button,
  #translations-button,
  #star-button-box {
    display: none !important;
  }
}

/* Hide private browsing indicator */
.private-browsing-indicator-with-label { display: none !important; }

/* Hide secondary tab label (e.g. playing indicator text) */
.tab-secondary-label { display: none !important; }

/* Hide vertical tabs new tab button */
#vertical-tabs-newtab-button { display: none !important; }

/* Hide all-tabs button */
#alltabs-button { display: var(--uc-show-all-tabs-button) !important; }


/* ==========================================================================
   HAMBURGER MENU — fixed position next to the window control buttons.
   Base rule uses the --uc-window-buttons-width fallback; non-macOS overrides
   it below with CSS anchor positioning so it tracks the real box width.
   ========================================================================== */

#PanelUI-button {
  position: fixed !important;
  right: var(--uc-window-buttons-width) !important;
  top: 0 !important;
  height: 44px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
}

/* Non-macOS (Windows, Linux): anchor the hamburger's right edge to the left
   edge of the real window-control box, so it auto-adapts to display scaling,
   custom titlebar themes and per-DE control widths with no hand-set value.
   The anchor() fallback keeps the old --uc-window-buttons-width behaviour on
   Firefox builds without anchor positioning, so there is no regression.
   Excluded on macOS, where the control box sits on the LEFT (traffic lights)
   and would fling the hamburger to the wrong edge. (Issue #9) */
@media not (-moz-platform: macos) {
  .titlebar-buttonbox-container {
    anchor-name: --uc-winbtns !important;
  }
  #PanelUI-button {
    right: anchor(--uc-winbtns left, var(--uc-window-buttons-width)) !important;
  }
}

/* ==========================================================================
   TOOLBAR EXTENSION BUTTONS — push to right, next to hamburger.
   Only targets <toolbarbutton> and <toolbaritem> children of #TabsToolbar
   that are NOT known built-in elements. Adjust --uc-toolbar-button-width
   in CONFIG for multiple buttons (36px per button).
   ========================================================================== */

#TabsToolbar-customization-target > toolbaritem {
  margin-inline: 0 !important;
}
/* Only the first item gets the auto start-margin, so the whole group shifts
   right as one cluster instead of each item claiming its own slice of free
   space (which split a second icon off toward the middle). */
#TabsToolbar-customization-target > toolbaritem:first-of-type {
  margin-inline-start: auto !important;
}
/* Only the last item clears the fixed hamburger; intermediate items stay snug. */
#TabsToolbar-customization-target > toolbaritem:last-of-type {
  margin-inline-end: var(--uc-hamburger-width) !important;
}

/* Opt-in: hide the pinned extension icons and reveal them on hamburger hover.
   The hamburger is position:fixed in a separate toolbar, so there is no plain
   combinator to the icons; the reveal is driven via :root:has(). The second
   reveal selector (an extension item's own :hover) is the bridge that keeps
   the icons open while the pointer travels from the hamburger onto them. It
   must target the toolbaritems specifically, not the customization-target,
   which spans the whole tab strip and would reveal on any tab hover. (#13) */
@container style(--uc-hide-extension-icons: 1) {
  #TabsToolbar-customization-target > toolbaritem {
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
    transition: max-width 0.2s ease, opacity 0.2s ease,
                padding-inline 0.2s ease, margin-inline 0.2s ease !important;
  }
  /* collapsed last item drops the hamburger clearance so no gap is reserved */
  #TabsToolbar-customization-target > toolbaritem:last-of-type {
    margin-inline-end: 0 !important;
  }

  /* Reveal: hovering the hamburger, or an extension item itself (the bridge). */
  :root:has(#PanelUI-button:hover) #TabsToolbar-customization-target > toolbaritem,
  :root:has(#TabsToolbar-customization-target > toolbaritem:hover) #TabsToolbar-customization-target > toolbaritem {
    max-width: 60px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-inline: revert !important;
  }
  /* Hamburger clearance on the revealed cluster's last item as PADDING, not
     margin, so the 44px lives inside the item's own hover box. That closes the
     dead zone between the last icon and the fixed hamburger: the toolbaritem
     :hover bridge now spans the whole gap, so the icons stay open while the
     pointer travels from the hamburger onto them. max-width grows by the same
     amount so the icon is not squeezed by the padding (border-box). (#13) */
  :root:has(#PanelUI-button:hover) #TabsToolbar-customization-target > toolbaritem:last-of-type,
  :root:has(#TabsToolbar-customization-target > toolbaritem:hover) #TabsToolbar-customization-target > toolbaritem:last-of-type {
    max-width: calc(60px + var(--uc-hamburger-width)) !important;
    padding-inline-end: var(--uc-hamburger-width) !important;
  }
}


/* ==========================================================================
   TABS
   ========================================================================== */

/* remove gap after pinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: 0 !important;
}

/* remove tab shadow */
.tabbrowser-tab > .tab-stack > .tab-background {
  box-shadow: none !important;
}

/* multi tab selection */
:root[lwtheme] #tabbrowser-tabs:not([noshadowfortests])
  .tabbrowser-tab:is([multiselected])
  > .tab-stack
  > .tab-background {
  outline-color: var(--toolbarseparator-color) !important;
}

/* tab close button: hidden by default, visible on hover */
.tabbrowser-tab:not([pinned]) .tab-close-button {
  display: var(--show-tab-close-button) !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  display: var(--show-tab-close-button-hover) !important;
}

/* adaptive tab width */
.tabbrowser-tab[selected][fadein]:not([pinned]):not(tab-group[collapsed] .tabbrowser-tab) {
  max-width: var(--uc-active-tab-width) !important;
}
.tabbrowser-tab[fadein]:not([selected]):not([pinned]):not(tab-group[collapsed] .tabbrowser-tab) {
  max-width: var(--uc-inactive-tab-width) !important;
}
.tabbrowser-tab[fadein]:not([pinned]):not(tab-group[collapsed] .tabbrowser-tab) {
  min-width: var(--uc-tab-min-width) !important;
}

/* active pinned tab — bottom glow indicator (mirrors container-line style) */
.tabbrowser-tab[pinned][selected] .tab-background::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: var(--container-tabs-indicator-margin) !important;
  right: var(--container-tabs-indicator-margin) !important;
  height: 1px !important;
  background: var(--tab-selected-textcolor, #fabd2f) !important;
  box-shadow: 0 -1px 10px 1px var(--tab-selected-textcolor, #fabd2f) !important;
}

/* container tabs indicator */
#TabsToolbar .tab-context-line {
  margin: 2px var(--container-tabs-indicator-margin) 0
    var(--container-tabs-indicator-margin) !important;
  height: 1px !important;
}
.tab-context-line {
  box-shadow: var(--uc-identity-glow) var(--identity-tab-color) !important;
}

/* show favicon when media is playing but tab is hovered */
.tab-icon-image:not([pinned]) {
  opacity: 1 !important;
}

/* speaker icon — always visible when tab is playing */
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
  top: 5px !important;
  z-index: 1 !important;
  padding: 1.5px !important;
  inset-inline-end: -8px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 10px !important;
}

.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  stroke: transparent !important;
  background: transparent !important;
  opacity: 1 !important;
  fill-opacity: 0.8 !important;
  color: currentColor !important;
  stroke: var(--toolbar-bgcolor) !important;
  background-color: var(--toolbar-bgcolor) !important;
}

.tabbrowser-tab[selected]
  .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  stroke: var(--toolbar-bgcolor) !important;
  background-color: var(--toolbar-bgcolor) !important;
}

.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  margin-inline-end: 9.5px !important;
}

.tabbrowser-tab:not([image])
  .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
  top: 0 !important;
  padding: 0 !important;
  margin-inline-end: 5.5px !important;
  inset-inline-end: 0 !important;
}

/* speaker icon hover */
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: currentColor !important;
  stroke: var(--toolbar-color) !important;
  background-color: var(--toolbar-color) !important;
  fill-opacity: 0.95 !important;
}

.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover,
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: currentColor !important;
  stroke: var(--toolbar-color) !important;
  background-color: var(--toolbar-color) !important;
  fill-opacity: 0.95 !important;
}

/* speaker icon colour fix */
#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying],
#TabsToolbar .tab-icon-overlay:not([crashed])[muted],
#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] {
  color: var(--toolbar-color) !important;
}

#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover,
#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  color: var(--toolbar-bgcolor) !important;
}

/* selected tab background + configurable highlight */
.tabbrowser-tab[selected] .tab-background {
  background-color: var(--uc-active-tab-background) !important;
  /* Nova paints a gradient "border" on the active tab via a layered
     background-image (--tab-border-color-accent). FoxOne marks the active
     tab with accent text + optional underline, so kill the gradient. */
  background-image: none !important;
  box-shadow: inset 0 calc(var(--uc-active-tab-underline) * -2px) 0 0
    var(--tab-selected-textcolor, #fabd2f) !important;
  outline: none !important;
}
.tab-background {
  margin: 0px !important;
  border-radius: 0px !important;
}

/* vertical tabs — stretch to fill sidebar width */
#tabbrowser-tabs[orient="vertical"] {
  flex: 1 !important;
}

#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: none !important;
}


/* tab group labels — replace the FF152 inflated pastel pill with a compact,
   saturated filled chip: the group's full colour (--tab-group-color, never the
   pale "invert") with light text. One rule covers both the expanded label and
   the collapsed group button, so the two stay consistent.
   Nova inserted a .tab-group-label-hover-highlight wrapper between the container
   and the label, so a direct-child (>) combinator no longer matches; use a
   descendant combinator to step over it. White text is used deliberately: it
   stays legible on every group colour, where the pale token would not. */
.tab-group-label-container .tab-group-label {
  outline: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1.6 !important;
  padding-block: 1px !important;
  padding-inline: 8px !important;
  border-radius: var(--uc-border-radius) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: #fff !important;
  background-color: var(--tab-group-color) !important;
  transform: translateY(1px) !important; /* centre the pill on the label text (was 8px top / 6px bottom) */
}


/* ==========================================================================
   FINDBAR — floating search bar (based on LittleFox)
   ========================================================================== */

:root {
  --show-margin: round(up, calc((var(--show-highlight-all) + var(--show-match-case) + var(--show-match-diacritics) + var(--show-whole-words)) / 4));
  --options-width: calc(34px*var(--show-highlight-all) + 34px*var(--show-match-case) + 34px*var(--show-match-diacritics) + 34px*var(--show-whole-words) + 4px*var(--show-margin));

  --findbar-min-width: calc(500px - 2 * var(--findbar-right));
  --findbar-min-width-expanded: calc(var(--findbar-min-width) + var(--options-width));
  --findbar-max-width: calc(100vw - 2 * var(--findbar-right));
  --findbar-width-use: clamp(var(--findbar-min-width-expanded), var(--findbar-width), var(--findbar-max-width));

  --textbox-min-width: calc(var(--findbar-min-width) - 116px);
  --textbox-width: calc(var(--findbar-width-use) - 116px - var(--options-width));
}

findbar {
  position: absolute !important;
  top: var(--findbar-top) !important;
  left: var(--findbar-right) !important;
  right: var(--findbar-right) !important;
  width: var(--findbar-width-use) !important;
  max-width: var(--findbar-max-width) !important;
  margin-left: auto !important;
  border: none !important;
  border-radius: calc(var(--uc-urlbar-rounded) * var(--uc-border-radius)) !important;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) !important;
}

findbar {
  opacity: 1 !important;
  transform-origin: top !important;
  transform: scaleY(1) translateY(0px) !important;
  transition: opacity 100ms ease-out, transform 100ms ease-out, visibility 0s step-end !important;
}
findbar[hidden] {
  opacity: 0 !important;
  transform: scaleY(0.96) translateY(-4px) !important;
  transition-delay: 0s, 0s, 100ms !important;
}

.findbar-textbox {
  width: var(--textbox-width) !important;
  min-width: var(--textbox-min-width) !important;
  border: none !important;
  border-radius: calc(var(--uc-urlbar-rounded) * var(--uc-border-radius)) !important;
  outline: none !important;
  box-shadow: none !important;
}
.findbar-textbox:not([status]) {
  background-color: transparent !important;
}
.findbar-textbox:not(:focus, [status]):hover {
  background-color: var(--toolbar-field-background-color) !important;
}

label.found-matches {
  position: absolute !important;
  right: calc(100% - var(--textbox-width)) !important;
  text-align: right !important;
  margin: 0px !important;
}

.findbar-label:not(.found-matches) {
  display: none !important;
}

.findbar-container > checkbox {
  display: grid !important;
  justify-items: center !important;
  margin-left: 0px !important;
  overflow: hidden !important;
}
.findbar-container > checkbox *{
  display: none !important;
}

.findbar-highlight {
  order: var(--highlight-all-position) !important;
  width: calc(30px * var(--show-highlight-all)) !important;
  height: calc(24px * var(--show-highlight-all)) !important;
  margin-right: calc(4px * var(--show-highlight-all)) !important;
}
.findbar-case-sensitive {
  order: var(--match-case-position) !important;
  width: calc(30px * var(--show-match-case)) !important;
  height: calc(24px * var(--show-match-case)) !important;
  margin-right: calc(4px * var(--show-match-case)) !important;
}
.findbar-match-diacritics {
  order: var(--match-diacritics-position) !important;
  width: calc(30px * var(--show-match-diacritics)) !important;
  height: calc(24px * var(--show-match-diacritics)) !important;
  margin-right: calc(4px * var(--show-match-diacritics)) !important;
}
.findbar-entire-word {
  order: var(--whole-words-position) !important;
  width: calc(30px * var(--show-whole-words)) !important;
  height: calc(24px * var(--show-whole-words)) !important;
  margin-right: calc(4px * var(--show-whole-words)) !important;
}
.findbar-highlight::before {
  content: "[ab]";
  font-weight: bold;
  color: var(--toolbar-color);
}
.findbar-case-sensitive::before {
  content: "Aa";
  font-weight: bold;
  color: var(--toolbar-color);
}
.findbar-match-diacritics::before {
  content: "aá";
  font-weight: bold;
  color: var(--toolbar-color);
}
.findbar-entire-word::before {
  content: "ab";
  font-weight: bold;
  color: var(--toolbar-color);
  grid-row: 1;
  grid-column: 1;
}
.findbar-entire-word::after {
  content: "";
  width: 1.3em;
  height: 0.2em;
  margin-bottom: -1em;
  border-left: 2px solid var(--toolbar-color);
  border-right: 2px solid var(--toolbar-color);
  border-bottom: 1px solid var(--toolbar-color);
  grid-row: 1;
  grid-column: 1;
}

.findbar-container > checkbox:not([checked]):hover {
  background-color: var(--toolbarbutton-hover-background) !important;
  border-radius: 4px !important;
}
.findbar-container > checkbox[checked] {
  background-color: var(--toolbarbutton-active-background) !important;
  border-radius: 4px !important;
}

.findbar-closebutton {
  margin-left: calc(4px * var(--show-margin)) !important;
}


/* ==========================================================================
   FLOATING PANEL
   ========================================================================== */

#statuspanel #statuspanel-label {
  margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important;
}

/* ==========================================================================
   SPLIT VIEW
   ========================================================================== */

tab-split-view-wrapper {
    --tab-max-width: 300px!important;
}

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      .deck-selected > & {
        outline: 1px solid #fabd2f !important;
      }
    }
  }
}

.split-view-splitter {
  border: none !important;
  /* same adaptive splitter colour as #sidebar-splitter — blends in light
     and dark instead of a hardcoded dark base */
  background: var(--toolbar-bgcolor) !important;
  appearance: none !important;
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
}


/* ==========================================================================
   TASKBAR TABS — "Pin to taskbar" PWA-like windows.
   These use html[id^="taskbartab"] instead of #main-window.
   Hide the navbar entirely for a clean app-like experience.
   ========================================================================== */

html[id^="taskbartab"] #urlbar-container {
  display: none !important;
}