#flash-messages {
  position: fixed;
  top: var(--block-space);
  right: var(--block-space);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  max-width: min(80ch, 90vw);
}

.flash-message {
  display: flex;
  align-items: center;
  gap: var(--inline-space);
  padding: var(--block-space) var(--inline-space);
  border-radius: var(--global-radius);
  background: var(--panel-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: flash-in 0.3s ease-out;
}

.flash-message.success {
  background: oklch(from var(--color-green) l c h / 0.9);
}

.flash-message.error {
  background: oklch(from var(--color-red) l c h / 0.9);
}

.flash-message.notice {
  background: oklch(from var(--color-blue) l c h / 0.9);
}

.flash-content {
  flex: 1;
}

.flash-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.flash-dismiss:hover {
  opacity: 1;
}

.flash-message.dismissing {
  animation: flash-out 0.3s ease-in forwards;
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flash-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}