@layer components {
  dialog.alert-dialog {
    border: none;
    border-radius: var(--radius-xl);
    background: var(--background);
    color: var(--foreground);
    padding: 0;
    max-width: 28rem;
    width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg);
    margin: auto;
    position: fixed;
    inset: 0;

    /* Entry/exit animation */
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition:
        all 200ms ease,
        display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }

    /* Block Escape key - user must choose an action */
    &::backdrop {
      pointer-events: auto;
    }
  }

  @starting-style {
    dialog.alert-dialog[open] {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.98);
    }
    dialog.alert-dialog[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Scroll lock ------------------------------------------- */
  /* Page behind stays put while the alert is modal (see dialog.css):
     `:modal` + overflow:hidden freezes the viewport at its current offset. */
  html:has(dialog.alert-dialog:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .alert-dialog-content {
    padding: 1.5rem;
  }

  /* -- Density ------------------------------------------------
     data-density on the .alert-dialog root scales the content padding
     (0.75 / 1 / 1.25 of the 1.5rem default); comfortable matches the
     unsized default. */
  .alert-dialog:where([data-density="compact"]) .alert-dialog-content {
    padding: 1rem;
  }
  .alert-dialog:where([data-density="comfortable"]) .alert-dialog-content {
    padding: 1.5rem;
  }
  .alert-dialog:where([data-density="spacious"]) .alert-dialog-content {
    padding: 2rem;
  }

  .alert-dialog-header {
    margin-bottom: 1.25rem;
  }

  .alert-dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .alert-dialog-description {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .alert-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .alert-dialog,
    .alert-dialog *,
    .alert-dialog::before,
    .alert-dialog::after,
    .alert-dialog *::before,
    .alert-dialog *::after,
    .alert-dialog::backdrop,
    .alert-dialog-content,
    .alert-dialog-content *,
    .alert-dialog-content::before,
    .alert-dialog-content::after,
    .alert-dialog-content *::before,
    .alert-dialog-content *::after,
    .alert-dialog-content::backdrop,
    .alert-dialog-header,
    .alert-dialog-header *,
    .alert-dialog-header::before,
    .alert-dialog-header::after,
    .alert-dialog-header *::before,
    .alert-dialog-header *::after,
    .alert-dialog-header::backdrop,
    .alert-dialog-title,
    .alert-dialog-title *,
    .alert-dialog-title::before,
    .alert-dialog-title::after,
    .alert-dialog-title *::before,
    .alert-dialog-title *::after,
    .alert-dialog-title::backdrop,
    .alert-dialog-description,
    .alert-dialog-description *,
    .alert-dialog-description::before,
    .alert-dialog-description::after,
    .alert-dialog-description *::before,
    .alert-dialog-description *::after,
    .alert-dialog-description::backdrop,
    .alert-dialog-footer,
    .alert-dialog-footer *,
    .alert-dialog-footer::before,
    .alert-dialog-footer::after,
    .alert-dialog-footer *::before,
    .alert-dialog-footer *::after,
    .alert-dialog-footer::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}