wip(encryption): experimental support for encrypted file transfer via chunks

Added an early implementation of secure file transfer using chunk-based encryption.
Files are split into encrypted chunks and transmitted over the chat channel.

This feature is still under active development and requires further changes and testing.

src/styles/components.css

@@ -5,6 +5,91 @@
     flex-direction: column;
 }
 
+/* ============================================ */
+/* FILE TRANSFER STYLES */
+/* ============================================ */
+
+.file-transfer-component {
+    margin-top: 1rem;
+}
+
+.file-drop-zone {
+    border: 2px dashed #4b5563;
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: rgba(55, 65, 81, 0.1);
+}
+
+.file-drop-zone:hover {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.file-drop-zone.drag-over {
+    border-color: #10b981;
+    background: rgba(16, 185, 129, 0.1);
+    transform: scale(1.02);
+}
+
+.drop-content {
+    pointer-events: none;
+}
+
+.active-transfers {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.transfer-item {
+    transition: all 0.2s ease;
+}
+
+.transfer-item:hover {
+    transform: translateY(-1px);
+}
+
+.progress-bar {
+    position: relative;
+    height: 6px;
+    background: rgba(75, 85, 99, 0.3);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+    border-radius: 3px;
+}
+
+.progress-text {
+    position: absolute;
+    top: -20px;
+    right: 0;
+    color: #9ca3af;
+}
+
+.file-transfer-section {
+    border-top: 1px solid rgba(75, 85, 99, 0.1);
+}
+
+@media (max-width: 640px) {
+    .file-drop-zone {
+        padding: 1.5rem;
+    }
+    
+    .transfer-item {
+        padding: 0.75rem;
+    }
+    
+    .progress-text {
+        font-size: 0.75rem;
+    }
+}
+
 .header-minimal {
     background: rgb(35 36 35 / 13%);
     backdrop-filter: blur(5px);