/* Modern UI Elements — MIT License.
 * Tested against Zen 1.22b / Gecko 155.
 * Keep the native popover, identity icon, localization and exit action.
 */

:root {
  --mui-surface: rgb(27 30 35 / 94%);
  --mui-solid-surface: #1b1e23;
  --mui-text: #f1f3f5;
  --mui-muted-text: #b8bfc9;
  --mui-border: rgb(255 255 255 / 12%);
  --mui-shadow: 0 8px 28px rgb(0 0 0 / 24%), 0 2px 6px rgb(0 0 0 / 16%);
  --mui-button-background: rgb(255 255 255 / 8%);
  --mui-button-hover: rgb(255 255 255 / 14%);
  --mui-button-active: rgb(255 255 255 / 19%);
  --mui-focus-color: #a9c7ff;
  --mui-radius: 18px;
  --mui-font-size: 13px;
}

/* Fullscreen notification */

/* Explicit false disables styling; a missing preference preserves manual installs. */
@media not (-moz-pref("mod.modern-ui-elements.fullscreen-toast", false)) {
#fullscreen-warning {
  --mft-background: var(--mui-surface);
  --mft-padding: 8px 12px;
  --mft-font-size: var(--mui-font-size);

  box-sizing: border-box !important;
  width: max-content !important;
  max-width: calc(100% - 32px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  inset-inline: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  padding: var(--mft-padding) !important;
  gap: 10px !important;
  align-items: center !important;

  color-scheme: dark !important;
  color: var(--mui-text) !important;
  background: var(--mft-background) !important;
  border: 1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  font: 400 var(--mft-font-size) / 1.5 system-ui, sans-serif !important;
  text-shadow: none !important;

  /* Gecko hides the popover on transitionend/transitioncancel. Never use
   * transition: none here, including with reduced motion enabled.
   * A percentage also hides a tall, wrapped notification completely.
   */
  translate: 0 calc(-100% - 24px) !important;
  opacity: 0 !important;
  transition:
    translate 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 180ms ease !important;
}

#fullscreen-warning:is([onscreen], [ontop]) {
  translate: 0 24px !important;
  opacity: 1 !important;
}

/* Leave room for the macOS menu bar when it is revealed. */
:root[macOSNativeFullscreen] #fullscreen-warning[ontop] {
  translate: 0 80px !important;
}

@starting-style {
  #fullscreen-warning:is([onscreen], [ontop]) {
    translate: 0 calc(-100% - 24px) !important;
    opacity: 0 !important;
  }
}

/* Retain Gecko's security / broken-security artwork and identity logic. */
#fullscreen-warning::before {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

#fullscreen-warning :is(.pointerlockfswarning-domain-text, .pointerlockfswarning-generic-text) {
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  font: inherit !important;
  color: inherit !important;
  text-shadow: none !important;
}

#fullscreen-warning .pointerlockfswarning-domain {
  font-weight: 600 !important;
}

#fullscreen-warning #fullscreen-exit-button {
  appearance: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid rgb(255 255 255 / 9%) !important;
  border-radius: 10px !important;
  background: var(--mui-button-background) !important;
  color: var(--mui-text) !important;
  font: 500 12px / 1.5 system-ui, sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: normal !important;
  max-width: 48% !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
  /* Descendant transition events bubble to Gecko's warning controller. */
  transition: none !important;
}

#fullscreen-warning #fullscreen-exit-button:hover {
  background: rgb(255 255 255 / 14%) !important;
}

#fullscreen-warning #fullscreen-exit-button:active {
  background: rgb(255 255 255 / 19%) !important;
}

#fullscreen-warning #fullscreen-exit-button:focus-visible {
  outline: 2px solid var(--mui-focus-color) !important;
  outline-offset: 2px !important;
}

@media (-moz-pref("mod.modern-fullscreen-toast.roomy")) {
  #fullscreen-warning {
    --mft-padding: 12px 16px;
    --mft-font-size: 14px;
  }
}

@media (-moz-pref("mod.modern-fullscreen-toast.opaque")), (prefers-reduced-transparency: reduce) {
  #fullscreen-warning {
    --mft-background: #1b1e23;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fullscreen-warning {
    transition-duration: 1ms !important;
  }
}

@media (forced-colors: active) {
  #fullscreen-warning {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #fullscreen-warning #fullscreen-exit-button {
    background: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
  }

  #fullscreen-warning #fullscreen-exit-button:focus-visible {
    outline-color: Highlight !important;
  }
}

}

/* Background-tab notification.
 * Select by the stable localization ID, not by the translated text.
 * Other Zen toasts retain their original styles and positioning.
 */
@media not (-moz-pref("mod.modern-ui-elements.background-tab-toast", false)) {
#zen-toast-container > .zen-toast:has([data-l10n-id="zen-background-tab-opened-toast"]) {
  --mtt-background: var(--mui-surface);
  --mtt-padding: 8px 12px;
  --mtt-font-size: var(--mui-font-size);

  box-sizing: border-box !important;
  width: max-content !important;
  max-width: calc(100vw - 48px) !important;
  min-width: 0 !important;
  min-height: 50px !important;
  max-height: none !important;
  padding: var(--mtt-padding) !important;
  gap: 10px !important;
  align-items: center !important;
  top: calc(24px - var(--zen-toast-spacing)) !important;
  right: calc(24px - var(--zen-toast-spacing)) !important;
  left: auto !important;
  translate: none !important;
  transform-origin: top right !important;

  color-scheme: dark !important;
  color: var(--mui-text) !important;
  background: var(--mtt-background) !important;
  border: 1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  font: 400 var(--mtt-font-size) / 1.5 system-ui, sans-serif !important;
  text-shadow: none !important;

  :root[zen-right-side="true"] & {
    left: calc(24px - var(--zen-toast-spacing)) !important;
    right: auto !important;
    transform-origin: top left !important;
  }

  & > vbox {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  & label {
    display: block !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font: inherit !important;
    color: inherit !important;
    text-shadow: none !important;
  }

  & #zen-open-background-tab-button {
    appearance: none !important;
    box-sizing: border-box !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid rgb(255 255 255 / 9%) !important;
    border-radius: 10px !important;
    background: var(--mui-button-background) !important;
    color: var(--mui-text) !important;
    fill: currentColor !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background-color 120ms ease !important;

    &:hover {
      background: rgb(255 255 255 / 14%) !important;
    }

    &:active {
      background: rgb(255 255 255 / 19%) !important;
    }

    &:focus-visible {
      outline: 2px solid var(--mui-focus-color) !important;
      outline-offset: 2px !important;
    }

    & .button-icon {
      width: 16px !important;
      height: 16px !important;
      opacity: 1 !important;
    }
  }

  @media (-moz-pref("mod.modern-tab-toast.roomy")) {
    --mtt-padding: 12px 16px;
    --mtt-font-size: 14px;
  }

  @media (-moz-pref("mod.modern-tab-toast.opaque")), (prefers-reduced-transparency: reduce) {
    --mtt-background: #1b1e23;
    backdrop-filter: none !important;
  }

  /* Zen drives the toast lifecycle with Web Animations. Suppress spatial
   * motion without replacing opacity, timers or its animation promises.
   */
  @media (prefers-reduced-motion: reduce) {
    transform: none !important;

    & #zen-open-background-tab-button {
      transition: none !important;
    }
  }

  @media (forced-colors: active) {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    & #zen-open-background-tab-button {
      background: ButtonFace !important;
      color: ButtonText !important;
      border-color: ButtonText !important;

      &:focus-visible {
        outline-color: Highlight !important;
      }
    }
  }
}

}

/* Non-error action confirmations. Keep this allowlist narrow: warnings and
 * unrelated extensions' notifications must retain their semantic styling.
 */
@media (-moz-pref("mod.modern-ui-elements.action-toasts")) {
  #zen-toast-container > .zen-toast:has([data-l10n-id]:is(
    [data-l10n-id="zen-copy-current-url-confirmation"],
    [data-l10n-id="zen-copy-current-url-as-markdown-confirmation"],
    [data-l10n-id="zen-tabs-renamed"],
    [data-l10n-id="zen-pinned-tab-replaced"],
    [data-l10n-id="zen-pinned-tab-url-edited"],
    [data-l10n-id="zen-space-routing-tab-routed-toast"]
  )) {
    box-sizing: border-box !important;
    max-width: calc(100vw - 48px) !important;
    min-height: 50px !important;
    max-height: none !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    color-scheme: dark !important;
    color: var(--mui-text) !important;
    background: var(--mui-surface) !important;
    border: 1px solid var(--mui-border) !important;
    border-radius: var(--mui-radius) !important;
    box-shadow: var(--mui-shadow) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
    font: 400 var(--mui-font-size) / 1.5 system-ui, sans-serif !important;

    & > vbox {
      min-width: 0 !important;
    }

    & label {
      margin: 0 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      font: inherit !important;
    }

    & .description {
      color: var(--mui-muted-text) !important;
      opacity: 1 !important;
    }

    & label span {
      color: inherit !important;
      background: var(--mui-button-background) !important;
      padding: 2px 5px !important;
      font: inherit !important;
    }

    & button {
      appearance: none !important;
      flex-shrink: 0 !important;
      min-height: 32px !important;
      border: 1px solid var(--mui-border) !important;
      border-radius: 10px !important;
      outline: none !important;
      background: var(--mui-button-background) !important;
      color: var(--mui-text) !important;
      box-shadow: none !important;

      &:hover { background: var(--mui-button-hover) !important; }
      &:active { background: var(--mui-button-active) !important; }
      &:focus-visible {
        outline: 2px solid var(--mui-focus-color) !important;
        outline-offset: 2px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      transform: none !important;
    }

    @media (prefers-reduced-transparency: reduce) {
      background: var(--mui-solid-surface) !important;
      backdrop-filter: none !important;
    }

    @media (forced-colors: active) {
      background: Canvas !important;
      color: CanvasText !important;
      border-color: CanvasText !important;
      box-shadow: none !important;
      backdrop-filter: none !important;

      & button {
        background: ButtonFace !important;
        color: ButtonText !important;
        border-color: ButtonText !important;
      }
    }
  }
}

@media (-moz-pref("mod.modern-ui-elements.link-status")) {
  #statuspanel {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }

  #statuspanel #statuspanel-label {
    color-scheme: dark !important;
    color: var(--mui-text) !important;
    background: var(--mui-solid-surface) !important;
    border: 1px solid var(--mui-border) !important;
    border-radius: 10px !important;
    padding: 5px 9px !important;
    font: 400 12px / 1.5 system-ui, sans-serif !important;
    text-shadow: none !important;

    @media (forced-colors: active) {
      background: Canvas !important;
      color: CanvasText !important;
      border-color: CanvasText !important;
    }
  }
}

@media (-moz-pref("mod.modern-ui-elements.pointer-lock")) {
  #pointerlock-warning {
    box-sizing: border-box !important;
    min-height: 50px !important;
    max-width: calc(100% - 32px) !important;
    padding: 12px !important;
    gap: 10px !important;
    color-scheme: dark !important;
    color: var(--mui-text) !important;
    background: var(--mui-surface) !important;
    border: 1px solid var(--mui-border) !important;
    border-radius: var(--mui-radius) !important;
    box-shadow: var(--mui-shadow) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
    font: 400 var(--mui-font-size) / 1.5 system-ui, sans-serif !important;
    translate: 0 calc(-100% - 24px) !important;
    opacity: 0 !important;
    transition: translate 180ms ease, opacity 180ms ease !important;

    &:is([onscreen], [ontop]) {
      translate: 0 24px !important;
      opacity: 1 !important;
    }

    &::before {
      width: 16px !important;
      height: 16px !important;
      flex-shrink: 0 !important;
    }

    & :is(.pointerlockfswarning-domain-text, .pointerlockfswarning-generic-text) {
      margin: 0 !important;
      overflow-wrap: anywhere !important;
    }

    @media (prefers-reduced-motion: reduce) {
      /* The native controller still needs transitionend to hide the popover. */
      transition-duration: 1ms !important;
    }

    @media (prefers-reduced-transparency: reduce) {
      background: var(--mui-solid-surface) !important;
      backdrop-filter: none !important;
    }

    @media (forced-colors: active) {
      color: CanvasText !important;
      background: Canvas !important;
      border-color: CanvasText !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
  }

  :root[macOSNativeFullscreen] #pointerlock-warning[ontop] {
    translate: 0 80px !important;
  }

  @starting-style {
    #pointerlock-warning:is([onscreen], [ontop]) {
      translate: 0 calc(-100% - 24px) !important;
      opacity: 0 !important;
    }
  }
}

/* Panel tokens are local to this popup, including its native shadow content. */
@media (-moz-pref("mod.modern-ui-elements.downloads")) and (not (forced-colors: active)) {
  #downloadsPanel {
    --panel-background-color: var(--mui-solid-surface) !important;
    --panel-background-color-dimmed: #23272e !important;
    --panel-text-color: var(--mui-text) !important;
    --panel-border-color: var(--mui-border) !important;
    --panel-border-radius: var(--mui-radius) !important;
    --panel-separator-color: var(--mui-border) !important;
    color-scheme: dark !important;

    & #downloadsListBox > richlistitem {
      border-radius: 10px !important;
    }

    & #downloadsListBox .downloadTarget {
      color: var(--mui-text) !important;
      font-weight: 500 !important;
    }

    & #downloadsListBox .download-state[state="1"] .downloadDetails {
      color: var(--mui-muted-text) !important;
    }

    & #downloadsListBox .downloadButton {
      border-radius: 10px !important;
      --button-background-color-hover: var(--mui-button-hover) !important;
      --button-background-color-active: var(--mui-button-active) !important;
      --button-hover-color: var(--mui-text) !important;
      --button-active-color: var(--mui-text) !important;

      &:focus-visible {
        outline: 2px solid var(--mui-focus-color) !important;
        outline-offset: -2px !important;
      }
    }

    & #downloadsFooter {
      color: var(--mui-text) !important;
    }

    & #downloadsHistory {
      border-radius: 10px !important;
    }
  }
}

/* Appearance-only layer. No width/height, position, display, visibility,
 * padding, transforms or transitions: works with stock findbar and layout mods.
 * Root scoping also wins over Better Find Bar regardless of import order.
 */
@media (-moz-pref("mod.modern-ui-elements.findbar")) and (not (forced-colors: active)) {
  :root findbar {
    color-scheme: dark !important;
    color: var(--mui-text) !important;
    background: var(--mui-solid-surface) !important;
    border-color: var(--mui-border) !important;
    border-radius: 12px !important;
    --toolbarbutton-icon-fill: var(--mui-text) !important;
    --toolbarbutton-background-color-hover: var(--mui-button-hover) !important;
    --toolbarbutton-background-color-active: var(--mui-button-active) !important;
    --toolbar-field-background-color-focus: #303640 !important;
    --toolbar-field-border-color-focus: var(--mui-focus-color) !important;
    --lwt-toolbar-field-highlight: #a9c7ff !important;
    --lwt-toolbar-field-highlight-text: #10151d !important;

    & .findbar-textbox {
      color: var(--mui-text) !important;
      border-color: var(--mui-border) !important;
      border-radius: 8px !important;

      &:not([status="notfound"], [flash="true"]) {
        background: #252a32 !important;
      }

      &:focus {
        outline: 2px solid var(--mui-focus-color) !important;
        outline-offset: -2px !important;
      }
    }

    & :is(.findbar-find-previous, .findbar-find-next, .findbar-closebutton) {
      color: var(--mui-text) !important;
      fill: var(--mui-text) !important;
      border-radius: 8px !important;

      &:not([disabled]):hover { background: var(--mui-button-hover) !important; }
      &:not([disabled]):active { background: var(--mui-button-active) !important; }
      &:focus-visible {
        outline: 2px solid var(--mui-focus-color) !important;
        outline-offset: -2px !important;
      }
    }
  }
}