/* -- Toast component ------------------------------------------- */

@layer components {
  /* -- Container ------------------------------------------------ */
  .toast-container {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 100vh;
    pointer-events: none;

    &[data-position="bottom-right"] { bottom: 0; right: 0; }
    &[data-position="bottom-left"]  { bottom: 0; left: 0; }
    &[data-position="top-right"]    { top: 0; right: 0; flex-direction: column; }
    &[data-position="top-left"]     { top: 0; left: 0; flex-direction: column; }
    &[data-position="top-center"]   { top: 0; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; }
    &[data-position="bottom-center"]{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
  }

  /* -- Toast ---------------------------------------------------- */
  .toast {
    /* Top layer (popover="manual") bypasses the container's flex layout - the
       UA sheet would CENTER every toast (inset:0 + margin:auto). Pin each toast
       to its container's corner instead and stack via --toast-stack, which the
       component JS measures (toast.ts stackToasts) since heights vary. */
    position: fixed;
    inset: auto;
    margin: 0;
    /* the UA popover sheet clips (overflow: auto) - the pile badge sits on the edge */
    overflow: visible;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-width: 20rem;
    max-width: 26rem;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 200ms ease, transform 200ms ease;

    &:popover-open {
      opacity: 1;
      transform: translateY(0);
    }

    /* -- Corner placement (top layer - see note above) ------------
       --toast-stack: measured px offset of the stack below this toast;
       the first toast is 0, so default bottom-right lands at the edge. */
    [data-position="bottom-right"] & { bottom: calc(1rem + var(--toast-stack, 0px)); right: 1rem; }
    [data-position="bottom-left"] & { bottom: calc(1rem + var(--toast-stack, 0px)); left: 1rem; }
    [data-position="top-right"] & { top: calc(1rem + var(--toast-stack, 0px)); right: 1rem; }
    [data-position="top-left"] & { top: calc(1rem + var(--toast-stack, 0px)); left: 1rem; }
    [data-position="top-center"] & { top: calc(1rem + var(--toast-stack, 0px)); left: 50%; translate: -50% 0; }
    [data-position="bottom-center"] & { bottom: calc(1rem + var(--toast-stack, 0px)); left: 50%; translate: -50% 0; }

    /* -- Sizes + Density ------------------------------------------
       data-size scales the toast's width envelope (sm/md/lg, md == the
       unsized default); data-density is the whitespace policy - padding and
       the content gap at the shared 0.75 / 1 / 1.25 ratio, comfortable ==
       the unsized default. Both live on the .toast element itself. */
    &[data-size="sm"] { min-width: 16rem; max-width: 20rem; }
    &[data-size="md"] { min-width: 20rem; max-width: 26rem; }
    &[data-size="lg"] { min-width: 24rem; max-width: 32rem; }

    &[data-density="compact"]    { padding: 0.75rem; & .toast-content { gap: 0.5rem; } }
    &[data-density="comfortable"] { padding: 1rem; }
    &[data-density="spacious"]   { padding: 1.25rem; & .toast-content { gap: 1rem; } }

    /* -- Variants ------------------------------------------------- */
    &[data-variant="destructive"] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);
      border-color: var(--destructive);

      & .toast-description {
        color: var(--destructive-foreground);
        opacity: 0.85;
      }
    }

    /* -- Semantic variants (border + icon color) ----------------- */
    &[data-variant="success"] {
      border-color: oklch(0.65 0.2 145);

      & .toast-icon { color: oklch(0.65 0.2 145); }
    }

    &[data-variant="warning"] {
      border-color: oklch(0.75 0.18 75);

      & .toast-icon { color: oklch(0.75 0.18 75); }
    }

    &[data-variant="info"] {
      border-color: oklch(0.6 0.15 250);

      & .toast-icon { color: oklch(0.6 0.15 250); }
    }
  }

  @starting-style {
    .toast:popover-open {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }


  /* -- Named animations (options.animation) ------------------------
     df$.anim plays the entrance / exit; the CSS fade stands down. */
  .toast[data-anim] {
    transition: bottom 220ms ease, top 220ms ease, scale 220ms ease, opacity 220ms ease;

    &:popover-open { opacity: 1; transform: none; }
  }
  @starting-style {
    .toast[data-anim]:popover-open { opacity: 1; transform: none; }
  }

  /* -- Pile (df$.shadcn.toast.configure({ stack: 'pile' })) ----------
     The newest toast is in front and wears the shapes.css stack-* sheets
     (added by toast.js); the older ones wait behind it, hidden, and fan out
     into a list while the pointer or focus is inside the pile. A "+n" badge
     counts the hidden ones. */
  .toast-container[data-stack="pile"] .toast {
    transition: opacity 200ms ease, transform 200ms ease, bottom 220ms cubic-bezier(0.2, 0.8, 0.2, 1), top 220ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 220ms ease;
  }
  .toast[data-piled] {
    opacity: 0 !important;
    scale: 0.94;
    pointer-events: none;
  }
  .toast[data-more]:not([data-more="0"])::after {
    content: "+" attr(data-more);
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-start: -0.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.375rem;
    border-radius: 9999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
  }
  .toast-container[data-position^="top"] .toast[data-more]::after { inset-block-start: auto; inset-block-end: -0.5rem; }

  /* -- Aura (options.aura) ------------------------------------------
     The toast is the ring of light (shapes.css .aura), its content sits on
     an inner surface with the toast's own colors and padding. */
  .toast[data-aura] {
    --shape-round: var(--radius-lg);
    border: 0;
    background-color: transparent;
    box-shadow: 0 8px 28px -6px color-mix(in oklch, var(--foreground) 30%, transparent);
  }
  .toast-surface {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    color: var(--popover-foreground);

    .toast[data-variant="destructive"] > & { background-color: var(--destructive); color: var(--destructive-foreground); }
  }

  /* -- Inner elements ------------------------------------------- */
  .toast-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .toast-text {
    flex: 1;
    min-width: 0;
  }

  .toast-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
  }

  .toast-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.125rem 0 0;
    line-height: 1.5;
  }

  .toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: calc(var(--radius) * 0.5);
    transition: color 150ms, background 150ms;

    &:hover {
      color: var(--foreground);
      background: var(--accent);
    }
  }

  .toast-icon {
    /* explicit size: SVGs without width/height render at a ~300px intrinsic
       default, which blew up the whole toast */
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
  }

  .toast-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
}

/* 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 {
    .toast-container,
    .toast-container *,
    .toast-container::before,
    .toast-container::after,
    .toast-container *::before,
    .toast-container *::after,
    .toast-container::backdrop,
    .toast,
    .toast *,
    .toast::before,
    .toast::after,
    .toast *::before,
    .toast *::after,
    .toast::backdrop,
    .toast-description,
    .toast-description *,
    .toast-description::before,
    .toast-description::after,
    .toast-description *::before,
    .toast-description *::after,
    .toast-description::backdrop,
    .toast-icon,
    .toast-icon *,
    .toast-icon::before,
    .toast-icon::after,
    .toast-icon *::before,
    .toast-icon *::after,
    .toast-icon::backdrop,
    .toast-content,
    .toast-content *,
    .toast-content::before,
    .toast-content::after,
    .toast-content *::before,
    .toast-content *::after,
    .toast-content::backdrop,
    .toast-text,
    .toast-text *,
    .toast-text::before,
    .toast-text::after,
    .toast-text *::before,
    .toast-text *::after,
    .toast-text::backdrop,
    .toast-title,
    .toast-title *,
    .toast-title::before,
    .toast-title::after,
    .toast-title *::before,
    .toast-title *::after,
    .toast-title::backdrop,
    .toast-close,
    .toast-close *,
    .toast-close::before,
    .toast-close::after,
    .toast-close *::before,
    .toast-close *::after,
    .toast-close::backdrop,
    .toast-actions,
    .toast-actions *,
    .toast-actions::before,
    .toast-actions::after,
    .toast-actions *::before,
    .toast-actions *::after,
    .toast-actions::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}