/* Shared liquid-gl renderer with a lightweight native-material fallback. */

:root.bxw-liquid-glass-ready {
  --bxw-lg-pane: rgba(248, 248, 250, .55);
  --bxw-lg-edge: rgba(60, 60, 67, .15);
  --bxw-lg-highlight: rgba(255, 255, 255, .72);
  --bxw-lg-shadow: rgba(0, 0, 0, .14);
}

:root.dark-theme.bxw-liquid-glass-ready,
:root.bxw-liquid-glass-ready body.dark-theme {
  --bxw-lg-pane: rgba(38, 38, 40, .55);
  --bxw-lg-edge: rgba(255, 255, 255, .14);
  --bxw-lg-highlight: rgba(255, 255, 255, .13);
  --bxw-lg-shadow: rgba(0, 0, 0, .42);
}

/* Avoid Safari's fixed-plus-transform compositor split on the entire tab bar. */
:root.bxw-liquid-glass-attached-proxies #bxw-root {
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* The app's own DOM remains untouched and paints above the glass layers. */
.bxw-liquid-glass-surface {
  z-index: 10000 !important;
  isolation: isolate;
  opacity: 1 !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

/* liquid-gl mutates only these invisible body-level lens proxies. */
.bxw-liquid-glass-lens-proxy {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  contain: strict;
}

.bxw-liquid-glass-proxy-root {
  position: fixed;
  z-index: 9998;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  overflow: visible;
  isolation: isolate;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bxw-liquid-glass-proxy-root > .bxw-liquid-glass-render-proxy,
.bxw-liquid-glass-proxy-root > .bxw-liquid-glass-material-proxy {
  position: absolute;
}

.bxw-liquid-glass-component-root {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Keep WebKit's glass capture behind the live interface without a negative layer. */
.bxw-liquid-glass-surface > :not(.bxw-liquid-glass-component-root) {
  z-index: 1;
}

#bxw-page.bxw-liquid-glass-page-repaint {
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.bxw-liquid-glass-component-root > .bxw-liquid-glass-render-proxy,
.bxw-liquid-glass-component-root > .bxw-liquid-glass-material-proxy {
  position: absolute;
}

/* Stable per-surface copies keep the full-screen WebGL buffer off the compositor. */
.bxw-liquid-glass-render-proxy {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background: transparent;
}

/* The 55% material sits above the refracted canvas and below UI content. */
.bxw-liquid-glass-material-proxy {
  --bxw-lg-x: 50%;
  --bxw-lg-y: 0%;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  background: var(--bxw-lg-pane) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  box-shadow:
    0 10px 28px var(--bxw-lg-shadow),
    inset 0 0 0 .5px var(--bxw-lg-edge),
    inset 0 1px 0 var(--bxw-lg-highlight);
}

/* Safari keeps each fixed proxy pinned while the visual viewport rubber-bands. */
:root.bxw-liquid-glass-safari .bxw-liquid-glass-lens-proxy,
:root.bxw-liquid-glass-safari .bxw-liquid-glass-render-proxy,
:root.bxw-liquid-glass-safari .bxw-liquid-glass-material-proxy {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bxw-liquid-glass-material-proxy::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    164px 98px at var(--bxw-lg-x) var(--bxw-lg-y),
    rgba(255, 255, 255, .46),
    rgba(255, 255, 255, .12) 46%,
    transparent 78%
  );
  opacity: 0;
  transition: opacity 120ms cubic-bezier(.23, 1, .32, 1);
}

.bxw-liquid-glass-material-proxy.bxw-liquid-glass-pressed::after {
  opacity: .82;
}

.bxw-liquid-glass-material-progress {
  background: rgba(255, 149, 0, .55) !important;
  --bxw-lg-edge: rgba(255, 255, 255, .24);
  --bxw-lg-highlight: rgba(255, 255, 255, .48);
  --bxw-lg-shadow: rgba(127, 61, 0, .18);
  transition-property: background-color, box-shadow;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
}

:root.bxw-liquid-glass-webgl .bxw-liquid-glass-material-proxy {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 0 0 .5px var(--bxw-lg-edge),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Never expose a snapshot captured in the previous color scheme. */
:root.bxw-liquid-glass-theme-refresh .bxw-liquid-glass-render-proxy {
  opacity: 0 !important;
}

:root.bxw-liquid-glass-theme-refresh .bxw-liquid-glass-material-proxy {
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  box-shadow:
    0 10px 28px var(--bxw-lg-shadow),
    inset 0 0 0 .5px var(--bxw-lg-edge),
    inset 0 1px 0 var(--bxw-lg-highlight) !important;
}

/* Long library feeds use the same material without a full-document WebGL snapshot. */
:root.bxw-liquid-glass-native-route .bxw-liquid-glass-render-proxy {
  display: none !important;
}

:root.bxw-liquid-glass-native-route .bxw-liquid-glass-material-proxy {
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  box-shadow:
    0 10px 28px var(--bxw-lg-shadow),
    inset 0 0 0 .5px var(--bxw-lg-edge),
    inset 0 1px 0 var(--bxw-lg-highlight) !important;
}

/* The library route skips WebGL capture, so its toggle owns the native blur. */
:root.bxw-liquid-glass-native-route #bxw-root #bxw-second-mode-toggle.bxw-liquid-glass-surface {
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
}

canvas[data-liquid-ignore]:not(.bxw-liquid-glass-source-canvas) {
  opacity: 1 !important;
  z-index: 9998 !important;
}

canvas.bxw-liquid-glass-source-canvas {
  z-index: -1 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

#bxw-root .bxw-pills.bxw-liquid-glass-surface,
#bxw-root .bxw-panel-toggle.bxw-liquid-glass-surface,
#bxw-root .bxw-search.bxw-liquid-glass-surface,
#bxw-root #bxw-location-button.bxw-liquid-glass-surface,
#bxw-root [aria-label="Диктовка"].bxw-liquid-glass-surface,
#bxw-root [data-bxw-action="dictation"].bxw-liquid-glass-surface {
  background: transparent !important;
  border-color: transparent !important;
}

#bxw-root .bxw-search.bxw-liquid-glass-surface > .bxw-search-bg,
#bxw-root #bxw-location-button.bxw-liquid-glass-surface > .bxw-search-bg {
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

#bxw-root .bxw-panel-toggle.bxw-liquid-glass-surface > .toggle-container {
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

#bxw-root .bxw-panel-toggle.bxw-liquid-glass-surface .toggle-slider,
#bxw-root .bxw-panel-toggle.bxw-liquid-glass-surface .bxw-meet-toggle-slider {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The selected Bible segment is its own moving glass surface. */
#bxw-root #bxw-second-mode-toggle .toggle-slider.bxw-liquid-glass-surface {
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#bxw-root #bxw-second-mode-toggle .toggle-slider.bxw-liquid-glass-surface > .bxw-liquid-glass-component-root {
  inset: 0;
  border-radius: inherit;
}

#bxw-root #bxw-second-mode-toggle[data-active-second-mode="daily"]
  .toggle-slider.bxw-liquid-glass-surface .bxw-liquid-glass-material-proxy,
#bxw-root #bxw-second-mode-toggle[data-active-second-mode="source"]
  .toggle-slider.bxw-liquid-glass-surface .bxw-liquid-glass-material-proxy {
  --bxw-lg-pane: rgba(219, 234, 254, .48);
  --bxw-lg-edge: rgba(96, 165, 250, .46);
  --bxw-lg-highlight: rgba(255, 255, 255, .92);
  --bxw-lg-shadow: rgba(29, 78, 216, .14);
  background: var(--bxw-lg-pane) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) brightness(1.04) !important;
  backdrop-filter: blur(24px) saturate(185%) brightness(1.04) !important;
  box-shadow:
    0 7px 18px var(--bxw-lg-shadow),
    inset 0 0 0 .75px var(--bxw-lg-edge),
    inset 0 1px 0 var(--bxw-lg-highlight),
    inset 1px 0 0 rgba(255, 255, 255, .44),
    inset 0 -1px 0 rgba(29, 78, 216, .10) !important;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider.bxw-liquid-glass-surface .bxw-liquid-glass-material-proxy {
  --bxw-lg-pane: rgba(30, 64, 175, .38);
  --bxw-lg-edge: rgba(191, 219, 254, .30);
  --bxw-lg-highlight: rgba(255, 255, 255, .30);
  --bxw-lg-shadow: rgba(0, 0, 0, .24);
}

#bxw-root .bxw-search > .bxw-stack,
#bxw-root #bxw-location-button > .bxw-stack {
  z-index: 3 !important;
}

#bxw-root .bxw-active-indicator {
  z-index: 1 !important;
  background: rgba(118, 118, 128, .16) !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 .5px 0 rgba(255, 255, 255, .66),
    0 1px 6px rgba(0, 0, 0, .035) !important;
}

:root.dark-theme #bxw-root .bxw-active-indicator,
body.dark-theme #bxw-root .bxw-active-indicator {
  background: rgba(118, 118, 128, .28) !important;
}

#lg-progress.bxw-liquid-glass-surface {
  z-index: 10001 !important;
  background: transparent !important;
  background-image: none !important;
}

#lg-progress #logo,
#lg-progress #logo-copy,
#lg-progress #logo-title,
#lg-progress #logo-subtitle,
#lg-progress #community-bubble-online {
  color: rgba(255, 255, 255, .96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .96) !important;
  text-shadow: 0 1px 3px rgba(66, 32, 0, .28) !important;
}

#lg-progress #logo-title,
#lg-progress #logo-subtitle {
  background: none !important;
}

#lg-progress #logo-icon,
#lg-progress #community-bubble-icon,
#lg-progress #call-toggle img {
  filter: brightness(0) saturate(100%) invert(1) !important;
  opacity: .92 !important;
}

@media (prefers-reduced-motion: reduce) {
  .bxw-liquid-glass-material-proxy::after {
    transition-duration: 100ms;
  }

  .bxw-liquid-glass-material-progress {
    transition-duration: 140ms;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .bxw-liquid-glass-material-proxy,
  #bxw-root .bxw-active-indicator {
    background: rgba(250, 250, 252, .96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  :root.dark-theme .bxw-liquid-glass-material-proxy,
  :root.dark-theme #bxw-root .bxw-active-indicator,
  body.dark-theme .bxw-liquid-glass-material-proxy,
  body.dark-theme #bxw-root .bxw-active-indicator {
    background: rgba(40, 40, 44, .97) !important;
  }

  .bxw-liquid-glass-material-proxy::after {
    display: none;
  }
}

@media (prefers-contrast: more) {
  .bxw-liquid-glass-material-proxy,
  #bxw-root .bxw-active-indicator {
    box-shadow: inset 0 0 0 1px currentColor !important;
  }
}