/* Container to stack multiple toasts */
.live-toast-wrap{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(80px + env(safe-area-inset-bottom)); /* أعلى شوية من الحافة */
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse; /* الأحدث يظهر تحت */
  gap: 10px;
  pointer-events: none; /* التوست نفسه يسمح بالضغط داخله */
}

@media (max-width: 600px){
  .live-toast-wrap{
    right: 12px;
    bottom: calc(48px + env(safe-area-inset-bottom));
  }
}


/* Toast card */
.live-toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;

  min-width: 260px;
  max-width: min(92vw, 420px);
  padding: 12px 14px;
  border-radius: 16px;
  color: #fff;

  /* glassy gradient look */
background-image: linear-gradient(180deg, rgba(109,121,255,.45), rgba(160,109,255,.35));
border: 1px solid rgba(160,109,255,.65);

  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);

  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
}

/* show/hide states */
.live-toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.live-toast.hide{
  opacity: 0;
  transform: translateY(10px) scale(.98);
}

/* Icon bubble */
.live-toast .lt-icon{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(110,231,183,.16);
  border: 1px solid rgba(110,231,183,.35);
  font-size: 18px;
}

/* Text */
.live-toast .lt-text{
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Close button */
.live-toast .lt-close{
  appearance: none;
  border: 0; background: transparent; color: #fff;
  opacity: .75; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
}
.live-toast .lt-close:hover{ opacity: 1; background: rgba(255,255,255,.06); }

/* Progress bar */
.live-toast .lt-progress{
  grid-column: 1 / -1;
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden; margin-top: 8px;
}
.live-toast .lt-progress > i{
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg,#6d79ff,#a06dff);
  transform: scaleX(1);
  transition: transform linear;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .live-toast, .live-toast .lt-progress > i{
    transition: none;
  }
}