/* ==========================================================================
   overlays.css — shared surface for menus and popovers
   --------------------------------------------------------------------------
   These rules style popovers owned by five different sheets (sidebar, search-
   select, command palette, chat, landing). They lived in quiet.css because a
   subtraction layer was the only place that could reach across components;
   folding them "into the component" would mean copying the same declarations
   five times, each still needing to beat desk.css.

   So they get a home of their own instead: one shared surface primitive,
   loaded at the same cascade position the override layer occupied. Phase 4
   turns this into a real panel/drawer/popover primitive.
   ========================================================================== */


/* ==========================================================================
   Menu and popover surfaces — folded out of quiet.css (Phase 1, css_fold.py)
   Moved verbatim, included, so the cascade result is unchanged;
   the CSSOM guard verifies that. The component owns these rules now.
   ========================================================================== */
/* Shell menus stay hairline. Chatbox menus are restyled below (Grok). */
.oc-pop,
.user-menu,
.lang-pop-menu,
.theme-pop-menu,
.oc-ss-popup,
.oc-dd__menu,
.oc-cmdp__panel,
.persona-popover,
.ticker-ac-dropdown,
.rn-link-hits {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (min-width: 881px) {
  .an-root--desk .an-persona-section,
    html.page-analysts .an-persona-section.oc-pop {
      --chat-menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
      background: color-mix(in srgb, var(--bg-elevated) 82%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
      border-radius: 14px !important;
      box-shadow:
        0 18px 50px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
      backdrop-filter: blur(22px) saturate(1.25) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
      padding: 6px;
    }
}



/* ==========================================================================
   Phase 4 — the overlay primitive
   --------------------------------------------------------------------------
   Opt in with data-oc-overlay="menu|sheet|modal|drawer". The rules below only
   bite once overlay.js has taken ownership (.oc-ov-bound), so adding the
   attribute to markup is safe on its own and a half-migrated overlay is never
   left invisible.

   Two paths, one vocabulary:
     - class-driven — overlay.js adds .oc-ov-open / .oc-ov-leaving, and asks
       getAnimations() how long the exit takes rather than restating it;
     - CSS-driven — @starting-style plus transition-behavior: allow-discrete
       animate an element that is only shown and hidden by [hidden] or the
       popover attribute, with no JS at all.
   ========================================================================== */

[data-oc-overlay] {
  --oc-ov-enter: var(--dur-pop, 480ms) var(--ease-ios-bounce, var(--ease-spring));
  --oc-ov-exit: var(--dur-pop, 480ms) var(--ease-ios, var(--ease-out));
  --oc-ov-rise: 18px;
  --oc-ov-scale: 0.92;
}

/* Resting (closed) geometry — the state both the enter and the exit read. */
[data-oc-overlay].oc-ov-bound {
  opacity: 0;
  transform: translateY(calc(var(--oc-ov-rise) * -1)) scale(var(--oc-ov-scale));
  transition:
    opacity var(--oc-ov-exit),
    transform var(--oc-ov-exit);
  transition-behavior: allow-discrete;
  will-change: transform, opacity;
}

[data-oc-overlay].oc-ov-bound.oc-ov-open {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--oc-ov-enter),
    transform var(--oc-ov-enter);
}

/* An overlay at rest should cost nothing: no compositor layer held open for a
   menu nobody has touched since the page loaded. */
[data-oc-overlay].oc-ov-bound:not(.oc-ov-open):not(.oc-ov-leaving) {
  will-change: auto;
}

/* The CSS-only path: display and overlay are discrete properties, so the exit
   needs allow-discrete to keep the element painted while it fades. */
@supports (transition-behavior: allow-discrete) {
  [data-oc-overlay].oc-ov-bound {
    transition-property: opacity, transform, display, overlay;
  }
  @starting-style {
    [data-oc-overlay].oc-ov-bound.oc-ov-open {
      opacity: 0;
      transform: translateY(calc(var(--oc-ov-rise) * -1)) scale(var(--oc-ov-scale));
    }
  }
}

/* --- variants ------------------------------------------------------------ */

/* A menu drops out of its trigger, so it grows downward from the top edge. */
[data-oc-overlay="menu"].oc-ov-bound { transform-origin: top center; }
/* User menu is pinned above the sidebar footer (portaled, position:fixed). */
body > #user-menu[data-oc-overlay="menu"].oc-ov-bound {
  transform-origin: bottom left;
  will-change: auto;
}

/* A sheet is a surface arriving from the bottom of the viewport; fading it
   would read as a mistake, and scaling it as a modal. */
[data-oc-overlay="sheet"].oc-ov-bound {
  --oc-ov-enter: var(--dur-sheet) var(--ease-ios-bounce, var(--ease-sheet));
  --oc-ov-exit: var(--dur-sheet) var(--ease-ios, var(--ease-sheet));
  opacity: 1;
  transform: translateY(100%);
}
[data-oc-overlay="sheet"].oc-ov-bound.oc-ov-open { transform: translateY(0); }
@supports (transition-behavior: allow-discrete) {
  @starting-style {
    [data-oc-overlay="sheet"].oc-ov-bound.oc-ov-open {
      opacity: 1;
      transform: translateY(100%);
    }
  }
}

[data-oc-overlay="modal"].oc-ov-bound {
  --oc-ov-scale: 0.9;
  --oc-ov-rise: -16px;
  transform-origin: center;
}

[data-oc-overlay="drawer"].oc-ov-bound {
  --oc-ov-enter: var(--dur-sheet) var(--ease-ios-bounce, var(--ease-sheet));
  --oc-ov-exit: var(--dur-sheet) var(--ease-ios, var(--ease-sheet));
  opacity: 1;
  transform: translateX(100%);
}
[data-oc-overlay="drawer"].oc-ov-bound.oc-ov-open { transform: translateX(0); }

/* --- reduced motion ------------------------------------------------------ */

/* Reduced motion is handled once, app-wide, in reduced_motion.css: it
   collapses every duration to 0.01ms rather than cancelling the transition,
   so the overlay lands on its open state instantly and settle() still has an
   event to wait for. Nothing overlay-specific is needed here. */

/* --- 4.4 anchor positioning ---------------------------------------------- */

/* Chromium ties the overlay to its trigger with no scroll listener and no
   reflow on our side; overlay.js sets the anchor-name/position-anchor pair and
   every other engine keeps the JS positioning it already had. */
@supports (anchor-name: --oc-a) and (position-area: bottom) {
  /* Keyed on the attribute alone: an overlay can take the positioning without
     also taking the motion, which is how the chat menus adopt it. */
  [data-oc-anchored] {
    /* Only the two properties no component sheet declares live here. The
       geometry (position-area, inset, margin, max-height) is set inline by
       overlay.js: a popover's own sheet uses id and class selectors that would
       beat any attribute selector, and the alternative was another !important.
       Inline is also where the old hand-computed left/top lived, so this is
       strictly fewer inline properties than before, not more. */
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    position-visibility: anchors-visible;
  }
}

/* ---------- Optional card expand (graphs, market timeline, desk panes) ---- */
.oc-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-md);
  cursor: pointer;
  flex: none;
  transition: color var(--dur-ui, 0.16s) var(--ease-out, ease),
              background var(--dur-ui, 0.16s) var(--ease-out, ease);
}
.oc-expand-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.oc-expand-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.oc-expand-btn:active { transform: scale(0.98); }
.oc-expand-btn .oc-ico { width: 14px; height: 14px; }
.ck-topbar .oc-expand-btn {
  width: 32px;
  height: 32px;
}
.oc-expand-btn__out { display: none; }
.oc-expand-btn[aria-pressed="true"] .oc-expand-btn__in,
.ck-shell.is-fullscreen .oc-expand-btn__in,
[data-oc-expand].is-expanded .oc-expand-btn__in { display: none; }
.oc-expand-btn[aria-pressed="true"] .oc-expand-btn__out,
.ck-shell.is-fullscreen .oc-expand-btn__out,
[data-oc-expand].is-expanded .oc-expand-btn__out { display: inline-block; }

html.oc-expand-lock,
html.oc-expand-lock body {
  overflow: hidden !important;
  height: 100% !important;
}

[data-oc-expand].is-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 15000;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-base) !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-pop, 480ms) var(--ease-ios, var(--ease-out)),
    transform var(--dur-pop, 480ms) var(--ease-ios, var(--ease-out));
}
[data-oc-expand].is-expanded.is-expand-on {
  opacity: 1;
  transform: none;
}
[data-oc-expand].is-expanded.is-expand-leave {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-ui, 0.2s) var(--ease-ios, var(--ease-out)),
    transform var(--dur-ui, 0.2s) var(--ease-ios, var(--ease-out));
}
[data-oc-expand].is-expanded > .dash-tl-body,
[data-oc-expand].is-expanded > .mkt-timeline__body,
[data-oc-expand].is-expanded > .desk-pane__body {
  flex: 1 1 auto;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-oc-expand].is-expanded,
  [data-oc-expand].is-expanded.is-expand-leave {
    transition: none;
    transform: none;
  }
}