.app-toast-stack {
  max-height: calc(100dvh - var(--toast-footer-offset, 0px) - 1rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.app-notice-source { display: none !important; }

#toastContainer {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

body.app-body .app-toast {
  --notice-accent: #60a5fa;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
  width: 100%;
  padding: 1rem .85rem;
  overflow: hidden;
  color: #f1f5f9;
  background: #111c30;
  border: 1px solid var(--notice-accent);
  border-radius: .8rem;
  box-shadow: 0 .5rem 1.75rem rgb(0 0 0 / 25%);
}

body.app-body .app-toast--success { --notice-accent: #4ade80; }
body.app-body .app-toast--warning { --notice-accent: #fbbf24; }
body.app-body .app-toast--danger { --notice-accent: #f87171; }
.app-toast__icon { color: var(--notice-accent); font-size: 1.2rem; line-height: 1.4; }
.app-toast .toast-body { min-width: 0; padding: 0; }
.app-toast__title { display: block; margin-bottom: .2rem; }
.app-toast__message { overflow-wrap: anywhere; white-space: pre-line; }
.app-toast__close { margin-top: .15rem; }
.app-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--notice-accent);
  transform-origin: left;
  animation: app-toast-countdown linear forwards;
}

@keyframes app-toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }