<script>
function gxToast(message, type = "info", duration = 3500) {
    const root = document.getElementById("gx-toast-root");
    if (!root) return console.error("gx-toast-root not found!");

    // Create toast element
    const el = document.createElement("div");
    el.className = `gx-toast ${type}`;
    el.innerHTML = `
        <div class="gx-toast-msg">${message}</div>
        <span class="gx-toast-close" onclick="this.parentElement.remove()">×</span>
    `;

    root.appendChild(el);

    // Auto-dismiss
    setTimeout(() => {
        el.classList.add("hide");
        setTimeout(() => el.remove(), 280);
    }, duration);
}

/* Optional convenience wrappers */
function toastSuccess(msg) { gxToast(msg, "success"); }
function toastInfo(msg)    { gxToast(msg, "info"); }
function toastWarn(msg)    { gxToast(msg, "warn"); }
function toastError(msg)   { gxToast(msg, "error"); }
</script>
