/* ============================================
   Flash Messages Component - BEM
   ============================================ */
@layer components {
  /* Flash animation timing */
  :root {
    --flash-enter: 200ms;
    --flash-stay: 4s;
    --flash-fade: 400ms;
  }

  /* Block: flash-container */
  .flash-container {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 1000;
    pointer-events: none; /* allow clicks through except on messages */
  }

  /* Block: flash */
  .flash {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 280px;
    max-width: 420px;

    /* animation: slide-in then fade-out */
    opacity: 0;
    transform: translateY(-8px);
    animation-name: flash-enter, flash-leave;
    animation-duration: var(--flash-enter), var(--flash-fade);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.4, 0, 1, 1);
    animation-delay: 0s, var(--flash-stay);
    animation-fill-mode: forwards, forwards;

    pointer-events: auto;
  }

  /* Remove margins when stacked in floating container */
  .flash-container .flash {
    margin: 0;
  }

  /* Pause auto-dismiss while hovered */
  .flash:hover {
    animation-play-state: paused;
  }

  @keyframes flash-enter {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes flash-leave {
    to {
      opacity: 0;
      transform: translateY(-6px);
      visibility: hidden;
      pointer-events: none;
    }
  }

  /* Modifier: notice (success) */
  .flash--notice,
  .flash-notice,
  .notice {
    background-color: #d1fae5;
    border-color: var(--color-success);
    color: #065f46;
  }

  /* Modifier: alert (error/danger) */
  .flash--alert,
  .flash-alert,
  .alert {
    background-color: #fee2e2;
    border-color: var(--color-danger);
    color: #991b1b;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .flash {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}