@layer components {
/* flash.css — Flash message components */

.flash {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: var(--z-toast);
  max-width: 28rem;
  animation: slideInRight 0.3s ease-out;
  cursor: pointer;
}

.flash__body {
  position: relative;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: oklch(1 0 0);
}

.flash--notice .flash__body {
  background: var(--color-positive);
}

.flash--alert .flash__body {
  background: var(--color-negative);
}


[data-theme="dark"] .flash--notice .flash__body {
  background: oklch(0.5 0.16 145);
}

[data-theme="dark"] .flash--alert .flash__body {
  background: oklch(0.5 0.18 25);
}

.flash__text {
  font-size: var(--text-sm);
  font-weight: 500;
}

.flash__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  animation: shrinkWidth 5s linear forwards;
}

/* ============================================================================
   Toast Notifications (JS-generated collaboration notifications)
   ============================================================================ */

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: oklch(1 0 0);
  box-shadow: var(--shadow-lg);
  animation: slideInRight 0.3s ease-out;
  max-width: 24rem;
}

.toast--info {
  background: var(--color-link);
}

.toast--success {
  background: var(--color-positive);
}

.toast--warning {
  background: var(--color-warning);
  color: var(--color-ink);
}

.toast--error {
  background: var(--color-negative);
}
}