V1.0.0-beta.17 Update 2

public/css/dashboard.styles.css

@@ -321,18 +321,32 @@ position: relative !important;
 .initial-loading {
     position: fixed;
     inset: 0;
-    background: linear-gradient(135deg, 
-        hsla(var(--background), 0.85),
-        hsla(var(--background), 0.9)
-    );
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    background-color: #333;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 9999;
-}
+    transition: background-color 0.3s ease;
+    }
+    .initial-loading > .loader {
+    border: 4px solid #fff;
+    border-top-color: transparent;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+    }
+    .initial-loading > .message {
+    margin-top: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+    }
 
 .success-animation {
     position: relative;
@@ -458,4 +472,170 @@ position: relative !important;
     to {
         opacity: 0;
     }
+}
+
+/* Notifications container */
+.notification-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1100;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    pointer-events: none;
+    max-width: 100%;
+    padding: 1rem;
+}
+
+/* Individual notification */
+.notification {
+    display: flex;
+    align-items: center;
+    background-color: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    padding: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateX(120%);
+    opacity: 0;
+    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    pointer-events: auto;
+    max-width: 380px;
+    margin-bottom: 0.5rem;
+}
+
+.notification.show {
+    transform: translateX(0);
+    opacity: 1;
+}
+
+/* Icon styles */
+.notification-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    margin-right: 1rem;
+    flex-shrink: 0;
+}
+
+/* Notification types */
+.notification.success .notification-icon {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10B981;
+}
+
+.notification.error .notification-icon {
+    background: rgba(239, 68, 68, 0.1);
+    color: #EF4444;
+}
+
+.notification.warning .notification-icon {
+    background: rgba(245, 158, 11, 0.1);
+    color: #F59E0B;
+}
+
+.notification.info .notification-icon {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3B82F6;
+}
+
+/* Content styling */
+.notification-content {
+    flex: 1;
+}
+
+.notification-title {
+    font-weight: 600;
+    font-size: 0.925rem;
+    margin-bottom: 0.25rem;
+    color: hsl(var(--foreground));
+}
+
+.notification-message {
+    font-size: 0.875rem;
+    color: hsl(var(--muted-foreground));
+    line-height: 1.4;
+}
+
+/* Dark mode adjustments */
+.dark .notification {
+    background-color: hsl(var(--card));
+    border-color: hsl(var(--border));
+}
+
+.dark .notification-title {
+    color: hsl(var(--foreground));
+}
+
+.dark .notification-message {
+    color: hsl(var(--muted-foreground));
+}
+
+/* Animations */
+@keyframes slideIn {
+    from {
+        transform: translateX(120%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(120%);
+        opacity: 0;
+    }
+}
+
+/* File info styles */
+.file-info {
+    padding: 0.5rem;
+    background: rgba(var(--card), 0.5);
+    border-radius: var(--radius);
+}
+
+.file-info p {
+    margin-bottom: 0.5rem;
+}
+
+.file-info strong {
+    color: hsl(var(--foreground));
+}
+
+/* Metadata info styles */
+.metadata-info {
+    padding: 0.5rem;
+    background: rgba(var(--card), 0.5);
+    border-radius: var(--radius);
+}
+
+.metadata-info p {
+    margin-bottom: 0.5rem;
+}
+
+.metadata-info strong {
+    color: hsl(var(--foreground));
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    .notification-container {
+        left: 1rem;
+        right: 1rem;
+    }
+
+    .notification {
+        max-width: 100%;
+    }
 }