/* Flash messages — floating toast stack, top-right.
 *
 * Wired up by `flash_controller.js`, which sets the
 * `--flash-timer-duration` custom property from its `delayValue` and
 * toggles `animation-play-state` on hover. The CSS owns the actual
 * shrink animation. */

#flash-messages {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080; /* above tabler modal (1055), below tooltips (1090) */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

#flash-messages > .alert {
  margin: 0;
  pointer-events: auto;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  animation: flash-slide-in 0.25s ease-out;
}

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

.alert.flash-with-timer {
  position: relative;
  overflow: hidden;
}

.flash-timer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  animation: flash-timer-shrink var(--flash-timer-duration, 6s) linear forwards;
}

@keyframes flash-timer-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .flash-timer { display: none; }
  #flash-messages > .alert { animation: none; }
}