/* Toast container (stack toasts) */
#toast-root{
  position: fixed;
  right: 20px;
  top: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;          /* clicks pass through except the toast itself */
  font-family: "Aeonik", sans-serif;
}

/* Toast card */
.toast{
  pointer-events: auto;
  min-width: 320px;
  max-width: 460px;
  background: #1b1b1b;
  color: #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 14px 16px 14px 14px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  column-gap: 12px;
  align-items: start;
  border: 1px solid rgba(255,255,255,.06);
}

/* Spinner circle */
.toast .spinner{
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .9s linear infinite;
  margin-top: 2px;
}

/* Title + subtext */
.toast .content .title{
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.toast .content .sub{
  font-size: 13px;
  color: #bdbdbd;
}

/* Close (X) */
.toast .close{
  border: 0;
  background: transparent;
  color: #cfcfcf;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 6px;
  opacity: .85;
}
.toast .close:hover{ opacity: 1; }

/* Enter/exit animations — slide in from the right */
.toast.enter{
  opacity: 0; transform: translateX(40px) scale(.98);
}
.toast.enter-active{
  opacity: 1; transform: translateX(0) scale(1);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.exit-active{
  opacity: 0; transform: translateX(40px) scale(.98);
  transition: opacity .16s ease, transform .16s ease;
}

@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .toast.enter, .toast.enter-active, .toast.exit-active{ transition: none; transform: none; }
  .spinner{ animation: none; }
}

/* ── showToast variants ──────────────────────────────────────────────── */
.toast .toast-icon{
  font-size: 16px;
  line-height: 1.4;
  margin-top: 1px;
}
.toast .toast-msg{
  font-size: 14px;
  line-height: 1.45;
  color: #e8e8e8;
  word-break: break-word;
}

.toast--success{ border-left: 3px solid #22c55e; }
.toast--success .toast-icon{ color: #22c55e; }

.toast--error  { border-left: 3px solid #ef4444; }
.toast--error   .toast-icon{ color: #ef4444; }

.toast--warning{ border-left: 3px solid #f59e0b; }
.toast--warning .toast-icon{ color: #f59e0b; }

.toast--info   { border-left: 3px solid #3b82f6; }
.toast--info    .toast-icon{ color: #3b82f6; }