buzz/desktop/src/shared/styles/globals/utilities.css

@layer utilities {
  /*
   * Skips rendering (layout, paint) for offscreen rows while keeping them in
   * the DOM — unlike windowing, in-DOM state (open `<details>`, drag-and-drop,
   * deep-link `querySelector`) survives. The intrinsic size is a height
   * placeholder so the scrollbar stays stable before a row is first rendered.
   */
  .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  /* The conversation scroller owns its reading position through the JS
     compensation writer in `useAnchoredScroll` (same-frame `scrollBy` on
     realization/reflow deltas). Native scroll anchoring must be OFF so it
     can't double-correct the same delta behind the writer's back: the shipped
     WKWebView has no `overflow-anchor` at all, while Chromium does — leaving it
     on means CI (Chromium) and macOS users (WKWebView) run different scroll
     contracts, which is how the jitter shipped unseen. Forcing it off makes the
     writer the single scroll authority on every engine. See L-A/L-C findings. */
  [data-buzz-conversation-scroll] {
    overflow-anchor: none;
  }

  /* Timeline rows re-pin by measured offset on prepend; the 200px fallback
     over-reserves the common row and shifts that anchor, so reserve low. */
  .timeline-row-cv {
    content-visibility: auto;
    contain-intrinsic-size: auto 60px;
  }

  /* paint containment clips the action bar's upward bleed; un-pause the active row */
  .timeline-row-cv:is(:hover, :focus-within) {
    content-visibility: visible;
  }

  .content-visibility-auto-interactive {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  .content-visibility-auto-interactive:is(:hover, :focus-within) {
    content-visibility: visible;
  }

  /* Compact variant for short single-line rows (sidebar channels, etc). */
  .content-visibility-auto-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 2rem;
  }

  .buzz-huddle-tooltip {
    --primary: var(
      --huddle-tooltip-surface,
      var(--huddle-control-surface, 0 0% 20%)
    );
    --primary-foreground: var(
      --huddle-tooltip-foreground,
      var(--huddle-control-foreground, 0 0% 98%)
    );

    background: hsl(var(--primary));
    border: 1px solid
      hsl(
        var(
          --huddle-control-chevron-hover-surface,
          var(--huddle-control-chevron-surface, 0 0% 22%)
        ) /
        0.72
      );
    box-shadow: 0 10px 22px rgb(0 0 0 / 35%);
    color: hsl(var(--primary-foreground));
  }

  .buzz-huddle-drawer .buzz-huddle-control-button,
  .buzz-huddle-drawer .buzz-huddle-split-main {
    background: hsl(var(--huddle-control-surface, var(--secondary)));
  }

  .buzz-huddle-drawer .buzz-huddle-control-button:hover,
  .buzz-huddle-drawer .buzz-huddle-split-main:hover {
    background: hsl(
      var(
        --huddle-control-hover-surface,
        var(--huddle-control-surface, var(--secondary))
      )
    );
  }

  .buzz-huddle-drawer .buzz-huddle-split-chevron {
    background: hsl(var(--huddle-control-chevron-surface, var(--secondary)));
  }

  .buzz-huddle-drawer .buzz-huddle-split-chevron:hover {
    background: hsl(
      var(
        --huddle-control-chevron-hover-surface,
        var(--huddle-control-chevron-surface, var(--secondary))
      )
    );
  }

  /*
   * Clamp HDR (gain-map) images to the standard SDR range. Some uploaded
   * avatars carry HDR gain maps, which capable displays render brighter than
   * SDR white — making the avatar glow relative to the rest of the UI. This
   * pins their luminance to the SDR envelope so they sit at the same level as
   * everything else. `dynamic-range-limit` is the purpose-built CSS property
   * (Chromium 133+, WebKit/Safari 26+); on engines that don't support it the
   * declaration is simply ignored (avatars render as before), so it's a safe
   * progressive enhancement.
   */
  .avatar-sdr-clamp {
    dynamic-range-limit: standard;
  }
}