@layer popover {
  .popover {
    position: fixed;
    width: var(--popover-width);
    max-height: var(--popover-max-height);
    overflow: hidden;
    background: var(--color-surface-raised);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-popover);
    pointer-events: none;
    z-index: var(--z-popover);
  }

  /* Gradient overlay that fades the bottom edge of overflowing content.
     Using ::after rather than mask-image so the box-shadow is not masked —
     mask-image composites the entire element layer including its shadow. */
  .popover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--popover-fade);
    background: linear-gradient(to bottom, transparent, var(--color-surface-raised));
    pointer-events: none;
  }

  .popover[hidden] { display: none; }

  .popover-content {
    padding: var(--space-md);
    font-size: 0.8em;
  }
}