diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css
index be0ab2fcd..ec2cfecb3 100644
--- a/app/assets/stylesheets/actiontext-lexical.css
+++ b/app/assets/stylesheets/actiontext-lexical.css
@@ -1,170 +1,192 @@
-lexical-editor {
-  display: block;
-  position: relative;
-  overflow: visible;
+@layer components {
+  lexical-editor {
+    display: block;
+    position: relative;
+    overflow: visible;
 
-  .node--selected:not(.attachment--custom) {
-    &:not(:has(img)) {
-      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+    .node--selected:not(.attachment--custom) {
+      &:not(:has(img)) {
+        box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+      }
+
+      &:has(img) {
+        img {
+          box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+        }
+      }
     }
 
-    &:has(img) {
-      img {
-        box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+    &.lexical-editor--empty {
+      .lexical-editor__content::before {
+        content: attr(placeholder);
+        color: currentColor;
+        cursor: text;
+        opacity: 0.66;
+        pointer-events: none;
+        position: absolute;
+        white-space: pre-line;
       }
     }
   }
 
-  &.lexical-editor--empty {
-    .lexical-editor__content::before {
-      content: attr(placeholder);
-      color: currentColor;
-      cursor: text;
-      opacity: 0.66;
-      pointer-events: none;
-      position: absolute;
-      white-space: pre-line;
+  .lexical-dialog-actions {
+    display: flex;
+    font-size: var(--text-x-small);
+    flex: 1 1 0%;
+    gap: var(--inline-space-half);
+    margin-block-start: var(--block-space-half);
+
+    .btn {
+      --radius: 0.3em;
+
+      inline-size: 100%;
+      justify-content: center;
+
+      &:is([type="submit"]) {
+        --btn-background: var(--card-color, var(--color-link));
+        --btn-color: var(--color-ink-inverted);
+        --outline-color: var(--card-color, var(--color-link));
+      }
     }
-  }
-}
 
-.lexical-dialog-actions {
-  display: flex;
-  font-size: var(--text-x-small);
-  flex: 1 1 0%;
-  gap: var(--inline-space-half);
-  margin-block-start: var(--block-space-half);
-
-  .btn {
-    --radius: 0.3em;
-
-    inline-size: 100%;
-    justify-content: center;
-
-    &:is([type="submit"]) {
-      --btn-background: var(--card-color, var(--color-link));
-      --btn-color: var(--color-ink-inverted);
-      --outline-color: var(--card-color, var(--color-link));
+    span {
+      inline-size: 100%;
     }
   }
 
-  span {
-    inline-size: 100%;
-  }
-}
+  .lexical-editor__content {
+    --outline-size: max(2px, 0.08em);
 
-.lexical-editor__content {
-  --outline-size: max(2px, 0.08em);
+    margin: var(--block-space-half) 0;
+    min-block-size: calc(7lh + var(--block-space));
+    outline: 0;
+    padding: var(--block-space-half) var(--inline-space);
 
-  margin: var(--block-space-half) 0;
-  min-block-size: calc(7lh + var(--block-space));
-  outline: 0;
-  padding: var(--block-space-half) var(--inline-space);
+    * {
+      &:first-child {
+        margin-block-start: 0;
+      }
 
-  * {
-    &:first-child {
-      margin-block-start: 0;
-    }
-
-    &:last-child {
-      margin-block-end: 0;
-    }
-  }
-}
-
-.lexical-editor--drag-over {
-  background-color: var(--color-selected);
-  border-radius: 4px;
-  outline: 2px dashed var(--color-selected-dark);
-}
-
-lexical-toolbar {
-  background-color: inherit;
-  border-block-end: 1px solid var(--color-ink-light);
-  color: currentColor;
-  display: flex;
-  font-size: inherit;
-  margin: 0;
-  max-inline-size: 100%;
-  padding: 0.2em 0;
-  position: relative;
-
-  dialog {
-    background-color: var(--color-canvas);
-    border: 1px solid var(--color-ink-lighter);
-    border-radius: 0.5em;
-    box-shadow: var(--shadow);
-    color: var(--color-ink);
-    padding: var(--block-space) calc(var(--inline-space) * 1.5);
-    position: absolute;
-    z-index: 1;
-
-    .input[type="url"] {
-      min-inline-size: 30ch;
+      &:last-child {
+        margin-block-end: 0;
+      }
     }
   }
 
-  > button {
-    aspect-ratio: 4/3.5;
-    appearance: none;
-    background-color: transparent;
-    block-size: 2em;
-    border: none;
-    border-radius: 0.2em;
+  .lexical-editor--drag-over {
+    background-color: var(--color-selected);
+    border-radius: 4px;
+    outline: 2px dashed var(--color-selected-dark);
+  }
+
+  lexical-toolbar {
+    background-color: inherit;
+    border-block-end: 1px solid var(--color-ink-light);
     color: currentColor;
-    cursor: pointer;
-    display: grid;
+    display: flex;
     font-size: inherit;
-    inline-size: auto;
-    place-items: center;
-    transition: background-color 300ms ease;
+    margin: 0;
+    max-inline-size: 100%;
+    padding: 0.2em 0;
+    position: relative;
 
-    svg {
-      -webkit-touch-callout: none;
-      block-size: 0.85em;
-      fill: currentColor;
-      grid-area: 1/1;
+    dialog {
+      background-color: var(--color-canvas);
+      border: 1px solid var(--color-ink-lighter);
+      border-radius: 0.5em;
+      box-shadow: var(--shadow);
+      color: var(--color-ink);
+      padding: var(--block-space) calc(var(--inline-space) * 1.5);
+      position: absolute;
+      z-index: 1;
+
+      .input[type="url"] {
+        min-inline-size: 30ch;
+      }
+    }
+
+    > button {
+      aspect-ratio: 4/3.5;
+      appearance: none;
+      background-color: transparent;
+      block-size: 2em;
+      border: none;
+      border-radius: 0.2em;
+      color: currentColor;
+      cursor: pointer;
+      display: grid;
+      font-size: inherit;
       inline-size: auto;
-      user-select: none;
-    }
+      place-items: center;
+      transition: background-color 300ms ease;
 
-    &:is(:focus, :hover) {
-      background-color: var(--color-ink-lighter);
-      box-shadow: none;
-    }
+      svg {
+        -webkit-touch-callout: none;
+        block-size: 0.85em;
+        fill: currentColor;
+        grid-area: 1/1;
+        inline-size: auto;
+        user-select: none;
+      }
 
-    &:is(:active) {
-      background-color: var(--color-selected);
+      &:is(:focus, :hover) {
+        background-color: var(--color-ink-lighter);
+        box-shadow: none;
+      }
+
+      &:is(:active) {
+        background-color: var(--color-selected);
+      }
     }
   }
-}
 
-/* Debug styles by Jorge */
-.lexical-prompt-menu {
-  background: white;
-  border: 2px solid black;
-  list-style: none;
+  /* Prompt
+  /* ------------------------------------------------------------------------ */
 
-  margin: 0;
-  padding: 0;
-  min-height: 100px;
-  min-width: 300px;
+  .lexical-prompt-menu {
+    --lexical-prompt-avatar-size: 24px;
+    --lexical-prompt-min-height: 5lh;
+    --lexical-prompt-min-width: 20ch;
+    --lexical-prompt-padding: 0.5ch;
 
-  visibility: hidden;
+    background-color: var(--color-canvas);
+    border-radius: calc(var(--lexical-prompt-padding) * 2);
+    box-shadow: var(--shadow);
+    font-size: var(--text-small);
+    list-style: none;
+    margin: 0;
+    min-block-size: var(--lexical-prompt-min-height);
+    min-inline-size: var(--lexical-prompt-min-width);
+    padding: var(--lexical-prompt-padding);
+    visibility: hidden;
+  }
 
-  &.lexical-prompt-menu--visible {
+  .lexical-prompt-menu--visible {
     visibility: initial;
   }
 
-  [aria-selected] {
-    border: 1px solid red;
-  }
-
   .lexical-prompt-menu__item {
+    align-items: center;
+    border-radius: 0.5ch;
     cursor: pointer;
+    display: flex;
+    gap: var(--lexical-prompt-padding);
+    padding: var(--lexical-prompt-padding);
+
+    &[aria-selected] {
+      background-color: var(--color-ink-lighter);
+    }
+
+    img {
+      block-size: var(--lexical-prompt-avatar-size);
+      border-radius: 50%;
+      flex-shrink: 0;
+      inline-size: var(--lexical-prompt-avatar-size);
+      margin: 0;
+    }
+  }
+
+  .attachment--custom.node--selected {
+    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
   }
 }
-
-.attachment--custom.node--selected {
-  box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
-}
diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css
index 1652b4cbb..89357b036 100644
--- a/app/assets/stylesheets/rich-text-content.css
+++ b/app/assets/stylesheets/rich-text-content.css
@@ -340,10 +340,14 @@
     white-space: normal;
   }
 
-  .attachment--custom, .lexical-prompt-menu__item, action-text-attachment {
+  .attachment--custom,
+  action-text-attachment {
+    --attachment-image-size: 24px;
+
     img {
+      block-size: var(--attachment-image-size);
       display: inline;
-      width: 24px;
+      inline-size: var(--attachment-image-size);
     }
   }
 }