/* =========================
   Toast container
   ========================= */

.toast-wrap{
  position:fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  z-index: 9999;

  display:flex;
  flex-direction:column;
  gap: 10px;

  pointer-events:none;
}

/* =========================
   Toast
   ========================= */

.toast{
  pointer-events:auto;

  background: rgba(2,6,23,0.92);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;

  box-shadow: 0 10px 34px rgba(2,6,23,0.65);
  font-weight: 700;

  border-left: 4px solid var(--brand);

  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

.toast.warn{
  border-left-color: #ff6b6b;
}

/* =========================
   Desktop placement
   ========================= */

@media (min-width: 920px){
  .toast-wrap{
    left:auto;
    right: 18px;
    bottom:auto;
    top: 18px;
    width: 360px;
  }
}

/* =========================
   Mobile placement (under header)
   ========================= */

@media (max-width: 919px){
  .toast-wrap{
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    bottom: auto;
    left: 12px;
    right: 12px;
  }
}