/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.flash-stack {
  position: fixed;
  z-index: 1000;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  display: grid;
  width: min(calc(100vw - 32px), 440px);
  gap: 8px;
  pointer-events: none;
}

.flash-message {
  margin: 0;
  border: 1px solid;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 18px 46px rgb(16 24 40 / 18%);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.45;
  pointer-events: auto;
  backdrop-filter: blur(18px);
}

.flash-message--notice {
  border-color: rgb(110 231 183 / 76%);
  background: rgb(236 253 245 / 94%);
  color: rgb(6 95 70);
}

.flash-message--alert {
  border-color: rgb(252 165 165 / 82%);
  background: rgb(254 242 242 / 94%);
  color: rgb(127 29 29);
}

@media (prefers-reduced-motion: no-preference) {
  .flash-message {
    animation: flash-toast-in 180ms ease-out;
  }

  @keyframes flash-toast-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 640px) {
  .flash-stack {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
  }
}