/*
  Wortic macOS UI Kit — Popover
  wm-popover — painel flutuante ancorado a um trigger. Base
  compartilhada por Dropdown Menu, Context Menu, Color Picker etc.
  Liquid Glass: vidro denso (blur alto + saturação), sombra de
  flutuação em camadas e borda interna clara.
*/

@layer components {
  .wm-popover {
    /* Knobs locais do material — sobrescritos no dark abaixo. */
    --_glass-bg: var(--wm-material-popover-bg);
    --_glass-blur: var(--wm-material-blur-heavy, 44px);
    --_glass-saturate: var(--wm-material-saturate-heavy, 2);
    --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.05),
      0 24px 60px -12px rgba(0, 0, 0, 0.28);

    position: fixed;
    z-index: var(--wm-z-popover);
    min-width: 200px;
    max-width: 340px;
    background: var(--_glass-bg);
    backdrop-filter: blur(var(--_glass-blur)) saturate(var(--_glass-saturate));
    -webkit-backdrop-filter: blur(var(--_glass-blur))
      saturate(var(--_glass-saturate));
    border: none;
    border-radius: var(--wm-radius-panel);
    box-shadow: var(--_inner-light), var(--_float-shadow);
    padding: var(--wm-space-3);
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transform-origin: var(--wm-popover-origin, top center);
    pointer-events: none;
    transition: opacity var(--wm-duration-fast) var(--wm-ease-emphasized),
      transform var(--wm-duration-normal) var(--wm-ease-spring);
  }

  .wm-popover[data-open="true"] {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }

  .wm-popover__header {
    padding: var(--wm-space-3) var(--wm-space-4) var(--wm-space-2);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }

  .wm-popover__body {
    padding: var(--wm-space-2) var(--wm-space-4) var(--wm-space-3);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-secondary);
  }

  .wm-popover__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: rotate(45deg);
  }

  /* Backdrop opcional para popovers "modais" em mobile/touch */
  .wm-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--wm-z-popover) - 1);
    background: transparent;
  }

  /* Dark: borda interna bem mais discreta, sombra mais profunda. */
  :root[data-theme="dark"] .wm-popover {
    --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.35),
      0 28px 70px -12px rgba(0, 0, 0, 0.65);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wm-popover {
      --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 28px 70px -12px rgba(0, 0, 0, 0.65);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-popover {
      transition: none;
    }
  }
}