/* =========================
   WOORDS Toast System
   ========================= */

.toast-stack{
  position:fixed;
  top:calc(var(--topbar-h, 64px) + 16px);
  right:18px;
  z-index:10050;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(360px, calc(100vw - 24px));
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
  padding:14px 14px 14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  color:#111;
  transform:translateY(-6px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.toast.show{
  transform:translateY(0);
  opacity:1;
}

.toast.hide{
  transform:translateY(-6px);
  opacity:0;
}

.toast-body{
  min-width:0;
}

.toast-title{
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  color:#111;
}

.toast-message{
  margin-top:4px;
  font-size:13px;
  line-height:1.45;
  color:#4b4f56;
  word-wrap:break-word;
}

.toast-close{
  border:none;
  background:transparent;
  color:#7a7a7a;
  font-size:18px;
  line-height:1;
  width:28px;
  height:28px;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .12s ease, color .12s ease;
}

.toast-close:hover{
  background:#f4f4f4;
  color:#111;
}

.toast.success{
  border-color:#d9efde;
}

.toast.success .toast-title{
  color:#166534;
}

.toast.error{
  border-color:#f2d3d3;
}

.toast.error .toast-title{
  color:#b42318;
}

.toast.info{
  border-color:#dfe5ee;
}

.toast.info .toast-title{
  color:#111827;
}

.toast.loading{
  border-color:#ececec;
}

.toast.loading .toast-title{
  color:#111;
}

.toast.loading .toast-message::after{
  content:'';
}

.toast-progress{
  grid-column:1 / -1;
  height:3px;
  margin-top:2px;
  border-radius:999px;
  background:#f1f1f1;
  overflow:hidden;
}

.toast-progress > span{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  animation:toastCountdown linear forwards;
  background:#111;
}

.toast.success .toast-progress > span{
  background:#22c55e;
}

.toast.error .toast-progress > span{
  background:#ef4444;
}

.toast.info .toast-progress > span{
  background:#111;
}

@keyframes toastCountdown{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(0); }
}

@media (max-width: 720px){
  .toast-stack{
    top:calc(var(--topbar-h, 56px) + 10px);
    right:12px;
    left:12px;
    width:auto;
  }
}