@layer components {
  .flash {
    position: fixed;
    inset: auto var(--space-3) calc(84px + env(safe-area-inset-bottom));
    z-index: 20;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--ink);
    color: var(--surface);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: 0 8px 24px rgb(16 24 40 / 0.2);
    animation: flash-out 0.3s 6s forwards;
  }

  .flash--alert { background: var(--danger); color: #ffffff; }

  @keyframes flash-out { to { opacity: 0; visibility: hidden; } }

  @media (width >= 1024px) {
    .flash { inset: var(--space-5) var(--space-5) auto auto; max-width: 400px; }
  }
}