File-Upload: Attachments-Tabelle, Base64-Speicherung, Frontend mit Drag&Drop/Paste/Preview, Error-Handling Fix

wwwroot/css/chat.css

@@ -97,3 +97,99 @@
   display: block;
   margin-inline: auto;
 }
+
+/* File Upload */
+
+.file-btn {
+  align-self: flex-end;
+  background: none;
+  border: var(--border-width) solid var(--f2-border);
+  cursor: pointer;
+  padding: var(--s2);
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+.file-btn:hover {
+  background: var(--f1-bg);
+}
+
+.file-preview {
+  padding: var(--s2) var(--s4);
+  background: var(--f1-bg);
+  border-top: var(--border-width) solid var(--f1-border);
+}
+
+.file-preview-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+
+.file-thumb {
+  max-height: 60px;
+  max-width: 100px;
+  object-fit: contain;
+  border: var(--border-width) solid var(--f2-border);
+}
+
+.file-icon {
+  font-size: 2em;
+}
+
+.file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2em;
+  padding: var(--s1);
+  color: var(--text);
+  opacity: 0.6;
+}
+
+.file-remove:hover {
+  opacity: 1;
+}
+
+/* Attachments in History */
+
+.attachment-indicator {
+  margin-top: var(--s2);
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+
+.attachment-indicator:hover {
+  opacity: 1;
+}
+
+.attachment-container {
+  margin-top: var(--s2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s2);
+}
+
+.attachment-image {
+  max-width: 300px;
+  max-height: 200px;
+  object-fit: contain;
+  border: var(--border-width) solid var(--f2-border);
+  cursor: pointer;
+}
+
+.attachment-file {
+  display: inline-block;
+  padding: var(--s2) var(--s3);
+  background: var(--f2-bg);
+  border: var(--border-width) solid var(--f2-border);
+  text-decoration: none;
+  color: var(--text);
+}