/* ═══════════════════════════════════════════════════
   toast.css — Toast Notifications
   ═══════════════════════════════════════════════════ */
#toastContainer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 40px);
}

.toast-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  border-left: 4px solid var(--primary);
  pointer-events: auto;
  animation: toastIn .35s cubic-bezier(.2,.9,.3,1);
  position: relative;
  overflow: hidden;
  font-family: 'Sarabun', sans-serif;
}
.toast-item.closing { animation: toastOut .3s ease forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); max-height: 200px; }
  to   { opacity: 0; transform: translateX(120%); max-height: 0; padding: 0; margin: 0; }
}

.toast-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  color: #fff;
}

.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--text-main);
  margin-bottom: 2px;
}
.toast-msg {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  word-wrap: break-word;
}

.toast-close {
  background: transparent;
  border: 0;
  color: #94a3b8;
  padding: 2px 4px;
  cursor: pointer;
  font-size: .85rem;
  transition: color .15s;
}
.toast-close:hover { color: #475569; }

.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--primary);
  animation: toastProgress linear forwards;
}
@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── Variants ── */
.toast-success { border-left-color: #10b981; }
.toast-success .toast-icon { background: #10b981; }
.toast-success .toast-progress { background: #10b981; }

.toast-error { border-left-color: #ef4444; }
.toast-error .toast-icon { background: #ef4444; }
.toast-error .toast-progress { background: #ef4444; }

.toast-warning { border-left-color: #f59e0b; }
.toast-warning .toast-icon { background: #f59e0b; }
.toast-warning .toast-progress { background: #f59e0b; }

.toast-info { border-left-color: var(--primary); }
.toast-info .toast-icon { background: var(--primary); }
.toast-info .toast-progress { background: var(--primary); }

/* ── Mobile ── */
@media (max-width: 575px) {
  #toastContainer {
    top: 12px; right: 12px; left: 12px;
    width: auto; max-width: none;
  }
  .toast-item { padding: 12px 14px; }
}