/* -- 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;
    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; }

    /* -- 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);
    }
  }

  /* -- 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.25rem;
    height: 1.25rem;
    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;
    }
  }
}