/* ============================================================================
   Adaptive matte — glass-over-glass text protection.

   Liquid Glass over Liquid Glass reads beautifully over a wallpaper and falls
   apart the moment there is text behind text. Every window therefore carries a
   frosted matte plane behind its own content: blurred backdrop plus a tint of
   the app's own body colour, so whatever sits behind dissolves into a wash.

   The tint strength is not fixed. `--gg-matte-alpha` is written per window by
   WindowManager.syncAdaptiveMatte() and scales with how much readable content
   (other windows, desktop widgets) actually sits behind that window:
   nothing behind → --gg-matte-default, crowded → --gg-matte-max.

   Pressed and active controls punch a real hole through the matte via
   `--gg-matte-clip`, so a clicked button shows completely clear glass.
   ========================================================================== */

:root {
  --gg-matte-default: 0.30;
  --gg-matte-max: 0.40;
  --gg-matte-blur: 26px;
  --gg-matte-sat: 1.65;
}

html.gg-liq-live .window {
  --gg-matte-alpha: var(--gg-matte-default);
  --gg-matte-rgb: var(--gg-body-rgb, 246, 246, 248);
}

html.gg-liq-live .window:not([data-opaque-body])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(var(--gg-matte-blur)) saturate(var(--gg-matte-sat));
  -webkit-backdrop-filter: blur(var(--gg-matte-blur)) saturate(var(--gg-matte-sat));
  /* Frosted at the chrome, thinning as it meets the app's opaque content. */
  background:
    linear-gradient(
      100deg,
      rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) * 0.30)) 0%,
      rgba(var(--gg-matte-rgb), 0) 42%
    ),
    linear-gradient(
      180deg,
      rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) * 1.16)) 0px,
      rgba(var(--gg-matte-rgb), var(--gg-matte-alpha)) 58px,
      rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) * 0.70)) 52%,
      rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) * 0.46)) 100%
    );
  clip-path: var(--gg-matte-clip, none);
  transition: background 0.28s ease;
}

/* Scenic apps keep a titlebar-only strip so their artwork stays untouched. */
html.gg-liq-live .window[data-opaque-body]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52px;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(var(--gg-matte-blur)) saturate(var(--gg-matte-sat));
  -webkit-backdrop-filter: blur(var(--gg-matte-blur)) saturate(var(--gg-matte-sat));
  background: linear-gradient(
    180deg,
    rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) * 1.16)) 0,
    rgba(var(--gg-matte-rgb), calc(var(--gg-matte-alpha) * 0.55)) 100%
  );
  clip-path: var(--gg-matte-clip, none);
}

/* Chrome sits above the matte; the matte sits above the desktop. */
html.gg-liq-live .window > .window-toolbar { position: relative; z-index: 3; }
html.gg-liq-live .window > .window-body { position: relative; z-index: 2; }
html.gg-liq-live .window > .resize-handle { position: absolute; z-index: 4; }

/* Toolbar controls read as clear glass pills once the matte is behind them. */
html.gg-liq-live .window .window-toolbar :is(button, .gg-tool-btn, .gg-icon-btn) {
  position: relative;
  z-index: 1;
}

html.gg-liq-live .window .window-toolbar :is(button, .gg-tool-btn, .gg-icon-btn):is(
  :active, .active, .on, [aria-pressed="true"]
) {
  /* The matte is cut away underneath — do not re-fog it. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.72),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.24),
    0 1px 3px rgba(12, 20, 38, 0.16) !important;
}

/* Overlay chrome that floats free of any window gets the same protection.
   Control Centre is excluded — it carries its own, heavier material. */
html.gg-liq-live :is(.dropdown-menu, .app-menu-panel, .spotlight-panel, .spotlight-folder):not(.hidden)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  backdrop-filter: blur(calc(var(--gg-matte-blur) * 0.85)) saturate(var(--gg-matte-sat));
  -webkit-backdrop-filter: blur(calc(var(--gg-matte-blur) * 0.85)) saturate(var(--gg-matte-sat));
  background: linear-gradient(
    180deg,
    rgba(250, 250, 252, calc(var(--gg-matte-default) * 0.92)) 0,
    rgba(250, 250, 252, calc(var(--gg-matte-default) * 0.62)) 100%
  );
}

html.gg-liq-live :is(.dropdown-menu, .app-menu-panel, .spotlight-panel, .spotlight-folder) > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"].gg-liq-live :is(.dropdown-menu, .app-menu-panel, .spotlight-panel, .spotlight-folder):not(.hidden)::before {
  background: linear-gradient(
    180deg,
    rgba(28, 30, 36, calc(var(--gg-matte-default) * 1.30)) 0,
    rgba(28, 30, 36, calc(var(--gg-matte-default) * 0.95)) 100%
  );
}

/* Reduce Transparency turns the matte into a solid surface. */
html.gg-reduce-transparency .window::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgb(var(--gg-matte-rgb)) !important;
  clip-path: none !important;
}