/*
 * Pop-up notes for the sign-in pages and other standalone pages (assets/js/uq-toast.js).
 * Class names are prefixed: Bootstrap, loaded on these pages, has its own .toast.
 */

/* Message areas whose text is shown as a toast instead. */
.uq-toast-source { display: none !important; }

.uq-toasts {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  translate: -50% 0;
  pointer-events: none;
}

.uq-toast {
  --uq-toast-tone: #b9a8ff;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 14px;
  background: #1b1733;
  color: #f4f3fa;
  box-shadow: inset 3px 0 0 var(--uq-toast-tone), 0 18px 44px -14px rgba(0, 0, 0, 0.55);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  animation: uq-toast-in 0.4s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.uq-toast-error { --uq-toast-tone: #ff8a78; }
.uq-toast-success { --uq-toast-tone: #5fd4c4; }
.uq-toast-info { --uq-toast-tone: #b9a8ff; }

.uq-toast .uq-toast-icon { flex: none; margin-top: 2px; color: var(--uq-toast-tone); font-size: 1rem; }
.uq-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.uq-toast .uq-toast-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -3px -6px -3px 2px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.uq-toast .uq-toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.uq-toast .uq-toast-close:focus-visible { outline: 2px solid #b9a8ff; outline-offset: 1px; opacity: 1; }

.uq-toast.is-leaving { animation: uq-toast-out 0.3s ease both; }

@keyframes uq-toast-in {
  from { opacity: 0; translate: 0 -14px; scale: 0.97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes uq-toast-out {
  to { opacity: 0; translate: 0 -10px; scale: 0.98; }
}

@media (prefers-reduced-motion: reduce) {
  .uq-toast, .uq-toast.is-leaving { animation-duration: 0.01ms; }
}