fix(frontend): readable links and file chips on own bubbles

frontend/src/lib/components/media/FileChip.svelte

@@ -8,9 +8,10 @@
 
   interface Props {
     media: MediaRef;
+    own?: boolean;
   }
 
-  const { media }: Props = $props();
+  const { media, own = false }: Props = $props();
 
   let saving = $state(false);
 
@@ -40,9 +41,9 @@
   }
 </script>
 
-<div class="FileChip">
+<div class="FileChip" class:own>
   <button class="file-main" type="button" title={name} onclick={save}>
-    <span class="file-glyph">
+    <span class="file-glyph" class:own>
       <Icon name={saving ? "timer" : "document"} size="1.25rem" />
     </span>
     <span class="file-text">
@@ -72,6 +73,10 @@
     border-radius: var(--border-radius-default-small);
 
     background-color: var(--color-primary-tint);
+
+    &.own {
+      background-color: var(--color-code-own-bg);
+    }
   }
 
   .file-main {
@@ -104,6 +109,15 @@
 
     color: var(--color-white);
     background-color: var(--color-primary);
+
+    &.own {
+      color: var(--color-own-links);
+      background-color: color-mix(
+        in srgb,
+        var(--color-own-links) 20%,
+        transparent
+      );
+    }
   }
 
   .file-text {
@@ -126,6 +140,10 @@
     color: var(--color-text-secondary);
   }
 
+  .own .file-sub {
+    color: var(--color-message-meta-own);
+  }
+
   .file-share {
     cursor: pointer;
 
@@ -146,4 +164,12 @@
       background-color: var(--color-primary-opacity);
     }
   }
+
+  .own .file-share {
+    color: var(--color-own-links);
+
+    &:hover {
+      background-color: color-mix(in srgb, currentcolor 18%, transparent);
+    }
+  }
 </style>