feat: replace alerts with custom toasts

cypher-chat-app/public/app.js

@@ -168,7 +168,7 @@ function processFiles(files) {
     Array.from(files).forEach(file => {
         // File size limit 500KB to avoid blowing context window
         if (file.size > 500 * 1024) {
-            alert(`Le fichier "${file.name}" est trop volumineux (max 500 Ko pour les fichiers de code).`);
+            showToast(`Le fichier "${file.name}" est trop volumineux (max 500 Ko).`, "error");
             return;
         }
         
@@ -177,7 +177,7 @@ function processFiles(files) {
             const textContent = event.target.result;
             // Check if file is text-based (rough heuristic: check for null bytes)
             if (textContent.includes("\0")) {
-                alert(`Le fichier "${file.name}" semble être binaire. Seuls les fichiers de texte/code sont acceptés.`);
+                showToast(`Le fichier "${file.name}" semble être binaire. Seuls les fichiers texte sont acceptés.`, "error");
                 return;
             }
             
@@ -354,7 +354,7 @@ function renderMessage(role, content) {
                 shareText += `${m.role === 'user' ? 'Utilisateur' : 'Cypher AI'}:\n${m.content}\n\n`;
             });
             navigator.clipboard.writeText(shareText).then(() => {
-                alert("Discussion copiée dans le presse-papiers pour partage !");
+                showToast("Discussion copiée dans le presse-papiers !", "success");
             });
         });
         
@@ -848,3 +848,42 @@ function saveSettings() {
     // Force rerender messages labels if username changed
     loadConversation(currentConversationId);
 }
+
+// Custom Premium Toast Notification System
+function showToast(message, type = "info") {
+    let container = document.getElementById("toastContainer");
+    if (!container) {
+        container = document.createElement("div");
+        container.id = "toastContainer";
+        container.className = "toast-container";
+        document.body.appendChild(container);
+    }
+    
+    const toast = document.createElement("div");
+    toast.className = `toast-message ${type} animate-fade-in`;
+    
+    let iconName = "info";
+    if (type === "success") iconName = "check-circle";
+    else if (type === "error") iconName = "alert-triangle";
+    else if (type === "warning") iconName = "alert-circle";
+    
+    toast.innerHTML = `
+        <i data-lucide="${iconName}"></i>
+        <span>${message}</span>
+    `;
+    
+    container.appendChild(toast);
+    lucide.createIcons({ scope: toast });
+    
+    // Auto-remove after 4 seconds
+    setTimeout(() => {
+        toast.classList.remove("animate-fade-in");
+        toast.classList.add("animate-fade-out");
+        toast.addEventListener("animationend", () => {
+            toast.remove();
+            if (container.children.length === 0) {
+                container.remove();
+            }
+        });
+    }, 4000);
+}

cypher-chat-app/public/style.css

@@ -1210,3 +1210,78 @@ input:checked + .slider:before {
     background: rgba(30, 34, 53, 0.8);
 }
 
+/* -----------------------------------------------------
+   CUSTOM TOAST NOTIFICATIONS (GLASSMORPHIC SYSTEM)
+   ----------------------------------------------------- */
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 380px;
+    width: calc(100% - 40px);
+}
+
+.toast-message {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 13.5px;
+    font-weight: 600;
+    color: var(--text-primary);
+    background: rgba(12, 14, 23, 0.9);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-app);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.toast-message i {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+}
+
+.toast-message.info {
+    border-color: rgba(0, 229, 255, 0.4);
+}
+.toast-message.info i {
+    color: var(--accent-cyan);
+}
+
+.toast-message.success {
+    border-color: rgba(0, 255, 170, 0.4);
+}
+.toast-message.success i {
+    color: var(--accent-green);
+}
+
+.toast-message.warning {
+    border-color: rgba(245, 158, 11, 0.4);
+}
+.toast-message.warning i {
+    color: #F59E0B;
+}
+
+.toast-message.error {
+    border-color: rgba(239, 68, 68, 0.4);
+}
+.toast-message.error i {
+    color: #EF4444;
+}
+
+/* Toast Animations */
+.animate-fade-out {
+    animation: fadeOut 0.3s ease forwards;
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.95); }
+}
+