diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css
index 118d3d77e..b5ca20116 100644
--- a/app/assets/stylesheets/rich-text-content.css
+++ b/app/assets/stylesheets/rich-text-content.css
@@ -165,30 +165,11 @@
 
   .attachment {
     block-size: auto;
-    display: inline-block;
-    inline-size: 100%;
+    display: block;
+    inline-size: fit-content;
     position: relative;
-    margin-inline: 0;
     max-inline-size: 100%;
 
-    &:is(figure) {
-      inline-size: fit-content;
-      margin-inline: auto;
-      display: block;
-
-      img, video {
-        block-size: auto;
-        display: block;
-        margin-inline: auto;
-        max-inline-size: 100%;
-        user-select: none;
-      }
-
-      > a {
-        display: block;
-      }
-    }
-
     :where(progress) {
       inline-size: 100%;
       margin: auto;
@@ -197,21 +178,14 @@
 
   .attachment__caption {
     color: var(--color-ink-dark);
-    display: flex;
     font-size: var(--text-small);
-    flex-wrap: wrap;
-    line-height: 1.3;
-    column-gap: 0.5ch;
-    justify-content: center;
-    margin: var(--block-space-half) var(--inline-space);
-    text-align: center;
 
     .input {
       --input-border-radius: 0.3em;
       --input-border-size: 0;
       --input-padding: 0;
 
-      color: var(--color-ink-dark);
+      color: inherit;
       inline-size: 100%;
       max-inline-size: 100%;
       text-align: center;
@@ -228,21 +202,61 @@
     }
   }
 
+  .attachment__icon {
+    aspect-ratio: 4/5;
+    background-color: color-mix(var(--attachment-icon-color), transparent 90%);
+    block-size: 2.5lh;
+    border: 2px solid var(--attachment-icon-color);
+    border-block-start-width: 1ch;
+    border-radius: 0.5ch;
+    box-sizing: border-box;
+    color: var(--attachment-icon-color);
+    display: grid;
+    font-size: var(--text-small);
+    font-weight: bold;
+    inline-size: auto;
+    place-content: center;
+    text-transform: uppercase;
+  }
+
+  .attachment--preview {
+    margin-inline: auto;
+    text-align: center;
+
+    img, video {
+      block-size: auto;
+      display: block;
+      margin-inline: auto;
+      max-inline-size: 100%;
+      user-select: none;
+    }
+
+    > a {
+      display: block;
+    }
+
+    .attachment__caption {
+      column-gap: 0.5ch;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-block-start: var(--block-space-half);
+    }
+  }
+
   .attachment--file {
+    --attachment-icon-color: var(--lexxy-color-text-subtle);
+
     align-items: center;
-    display: inline-flex;
+    display: flex;
     flex-wrap: wrap;
+    gap: 1ch;
     inline-size: auto;
 
     .attachment__caption {
-      flex-direction: column;
-      flex-wrap: nowrap;
-      justify-content: flex-start;
+      display: grid;
+      flex: 1;
       text-align: start;
-
-      strong {
-        color: var(--color-ink);
-      }
     }
 
     .attachment__name {
@@ -251,95 +265,44 @@
     }
   }
 
-  .attachment__icon {
-    aspect-ratio: 4/5;
-    background-color: var(--color-canvas);
-    block-size: calc(2lh + (var(--block-space) - 2px));
-    border: 2px solid var(--color-ink-medium);
-    border-radius: 0.3em;
-    color: var(--color-ink-dark);
-    display: inline-grid;
-    font-size: var(--text-small);
-    font-weight: 800;
-    inline-size: auto;
-    overflow: clip;
-    padding-block-start: 0.4lh;
-    place-content: center;
-    position: relative;
-    text-transform: uppercase;
+  .attachment--psd,
+  .attachment--key,
+  .attachment--sketch,
+  .attachment--ai,
+  .attachment--eps,
+  .attachment--indd,
+  .attachment--svg,
+  .attachment--ppt,
+  .attachment--pptx {
+    --attachment-icon-color: oklch(var(--lch-red-medium));
+  }
 
-    &::before {
-      background-color: var(--color-ink-medium);
-      block-size: 0.5lh;
-      content: "";
-      display: block;
-      inset: 0 0 auto;
-      position: absolute;
-    }
+  .attachment--css,
+  .attachment--php,
+  .attachment--json,
+  .attachment--htm,
+  .attachment--html,
+  .attachment--rb,
+  .attachment--erb,
+  .attachment--ts,
+  .attachment--js {
+    --attachment-icon-color: oklch(var(--lch-purple-medium));
+  }
 
-    .attachment--psd &,
-    .attachment--key &,
-    .attachment--sketch &,
-    .attachment--ai &,
-    .attachment--eps &,
-    .attachment--indd &,
-    .attachment--svg &,
-    .attachment--ppt &,
-    .attachment--pptx & {
-      color: oklch(var(--lch-red-dark));
-      background-color: oklch(var(--lch-red-lightest));
-      border-color: oklch(var(--lch-red-medium));
+  .attachment--txt,
+  .attachment--pages,
+  .attachment--rtf,
+  .attachment--md,
+  .attachment--doc,
+  .attachment--docx {
+    --attachment-icon-color: oklch(var(--lch-blue-medium));
+  }
 
-      &::before {
-        background-color: oklch(var(--lch-red-medium));
-      }
-    }
-
-    .attachment--css &,
-    .attachment--php &,
-    .attachment--json &,
-    .attachment--htm &,
-    .attachment--html &,
-    .attachment--rb &,
-    .attachment--erb &,
-    .attachment--ts &,
-    .attachment--js & {
-      color: oklch(var(--lch-purple-dark));
-      background-color: oklch(var(--lch-purple-lightest));
-      border-color: oklch(var(--lch-purple-medium));
-
-      &::before {
-        background-color: oklch(var(--lch-purple-medium));
-      }
-    }
-
-    .attachment--txt &,
-    .attachment--pages &,
-    .attachment--rtf &,
-    .attachment--md &,
-    .attachment--doc &,
-    .attachment--docx & {
-      color: oklch(var(--lch-blue-dark));
-      background-color: oklch(var(--lch-blue-lightest));
-      border-color: oklch(var(--lch-blue-medium));
-
-      &::before {
-        background-color: oklch(var(--lch-blue-medium));
-      }
-    }
-
-    .attachment--csv &,
-    .attachment--numbers &,
-    .attachment--xls &,
-    .attachment--xlsx & {
-      color: oklch(var(--lch-green-dark));
-      background-color: oklch(var(--lch-green-lightest));
-      border-color: oklch(var(--lch-green-medium));
-
-      &::before {
-        background-color: oklch(var(--lch-green-medium));
-      }
-    }
+  .attachment--csv &,
+  .attachment--numbers &,
+  .attachment--xls &,
+  .attachment--xlsx & {
+    --attachment-icon-color: oklch(var(--lch-green-medium));
   }
 
   .attachment__link {
@@ -353,23 +316,20 @@
     --attachment-image-size: 1em;
     --attachment-text-color: currentColor;
 
-    display: inline;
-    padding: 0;
-    margin: 0;
-    white-space: normal;
-
     align-items: center;
-    color: var(--attachment-text-color);
-    display: inline-flex;
-    gap: 0.25ch;
-    position: relative;
-    vertical-align: bottom;
-
     background: var(--attachment-bg-color);
+    border-radius: 99rem;
     box-shadow:
       -0.25ch 0 0 var(--attachment-bg-color),
        0.5ch 0 0 var(--attachment-bg-color);
-    border-radius: 99rem;
+    color: var(--attachment-text-color);
+    display: inline-flex;
+    gap: 0.25ch;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    vertical-align: bottom;
+    white-space: normal;
 
     lexxy-editor & {
       cursor: pointer;