.toast-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.toast {
  background: #fff;
  min-width: 300px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 4px solid #3b82f6;
  animation: slideIn 0.3s ease forwards;
  transition: opacity 0.3s, transform 0.3s;
}
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }

.toast-content h4 {
  margin: 0;
  font-size: 0.95rem;
  color: #1f2937;
}
.toast-content p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(20px); }
}
.trigger-btn {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.trigger-btn.success { background: #10b981; }
.trigger-btn.error { background: #ef4444; }

const container = document.getElementById("toastContainer");

function showToast(title, message, type = "default") {
  const toast = document.createElement("div");
  toast.classList.add("toast", type);
  
  toast.innerHTML = `
    <div class="toast-content">
      <h4>${title}</h4>
      <p>${message}</p>
    </div>
  `;
  
  container.appendChild(toast);
  
  // Remove after 3 seconds
  setTimeout(() => {
    toast.style.animation = "fadeOut 0.3s forwards";
    toast.addEventListener("animationend", () => {
      toast.remove();
    });
  }, 3000);
}