diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
index 7fafa026484..2affd3718dc 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
@@ -25,7 +25,7 @@ export default Component.extend({
           `.chat-message-container[data-id="${this.message.id}"]`
         ),
         document.querySelector(
-          `.chat-msgactions-hover[data-id="${this.message.id}"] .chat-msgactions`
+          `.chat-message-actions-container[data-id="${this.message.id}"] .chat-message-actions`
         ),
         {
           placement: "right-start",
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js
index 5ffb58def35..1457f56e55e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js
@@ -54,13 +54,13 @@ export default Component.extend({
 
   _addFadeIn() {
     document
-      .querySelector(".chat-msgactions-backdrop")
+      .querySelector(".chat-message-actions-backdrop")
       ?.classList.add("fade-in");
   },
 
   _removeFadeIn() {
     document
-      .querySelector(".chat-msgactions-backdrop")
+      .querySelector(".chat-message-actions-backdrop")
       ?.classList?.remove("fade-in");
   },
 });
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
index 139b8291ee6..52908dd15d7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
@@ -261,7 +261,7 @@ export default Component.extend({
       restore: this.restore,
       rebakeMessage: this.rebakeMessage,
       toggleBookmark: this.toggleBookmark,
-      startReactionForMsgActions: this.startReactionForMsgActions,
+      startReactionForMessageActions: this.startReactionForMessageActions,
     };
   },
 
@@ -502,7 +502,7 @@ export default Component.extend({
   },
 
   @action
-  startReactionForMsgActions() {
+  startReactionForMessageActions() {
     this.chatEmojiPickerManager.startFromMessageActions(
       this.message,
       this.site.desktopView,
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js b/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js
index 48e2b9ef515..b19d53b61a5 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js
@@ -77,7 +77,7 @@ export default class ChatEmojiPickerManager extends Service {
 
   startFromMessageActions(message, isDesktop, callback) {
     const trigger = document.querySelector(
-      `.chat-msgactions-hover[data-id="${message.id}"] .chat-msgactions`
+      `.chat-message-actions-container[data-id="${message.id}"] .chat-message-actions`
     );
     this.startFromMessage(callback, isDesktop, trigger);
   }
diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs
index f8a0ce3534c..4f8ec192932 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs
@@ -1,5 +1,5 @@
-<div class="chat-msgactions-hover" data-id={{this.message.id}}>
-  <div class="chat-msgactions">
+<div class="chat-message-actions-container" data-id={{this.message.id}}>
+  <div class="chat-message-actions">
     {{#if this.chatPreferredMode.isFullPage}}
       {{#each this.emojiReactions as |reaction|}}
         <ChatMessageReaction @reaction={{reaction}} @react={{this.messageActions.react}} @class="show" />
@@ -7,7 +7,7 @@
     {{/if}}
 
     {{#if this.messageCapabilities.canReact}}
-      <DButton @class="btn-flat react-btn" @action={{this.messageActions.startReactionForMsgActions}} @icon="discourse-emojis" @title="chat.react" />
+      <DButton @class="btn-flat react-btn" @action={{this.messageActions.startReactionForMessageActions}} @icon="discourse-emojis" @title="chat.react" />
     {{/if}}
 
     {{#if this.messageCapabilities.canBookmark}}
diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs
index e814080e9f9..55a4c1e0511 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs
@@ -1,4 +1,4 @@
-<div class="chat-msgactions-backdrop">
+<div class="chat-message-actions-backdrop">
   <div
     role="button"
     class="collapse-area"
@@ -6,7 +6,7 @@
   >
   </div>
 
-  <div class="chat-msgactions">
+  <div class="chat-message-actions">
     <div class="selected-message-container">
       <div class="selected-message">
         <ChatUserAvatar @user={{this.message.user}} />
@@ -57,7 +57,7 @@
             @class="btn-flat react-btn"
             @action={{action
               "actAndCloseMenu"
-              this.messageActions.startReactionForMsgActions
+              this.messageActions.startReactionForMessageActions
             }}
             @icon="discourse-emojis"
             @title="chat.react"
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-actions.scss b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
new file mode 100644
index 00000000000..356cf39dfa6
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
@@ -0,0 +1,176 @@
+.chat-message-actions-desktop-anchor {
+  position: relative;
+  z-index: z("dropdown");
+}
+
+.chat-message-actions {
+  .chat-message-reaction {
+    @include chat-reaction;
+
+    &:not(.show) {
+      display: none;
+    }
+  }
+}
+
+.chat-message-actions-container {
+  @include unselectable;
+  position: relative;
+}
+
+.chat-message-actions {
+  border-radius: 0.25em;
+  background-color: var(--secondary);
+  display: flex;
+  box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15);
+
+  .emoji-picker-anchor {
+    position: absolute;
+    height: 34px;
+  }
+
+  .link-to-message-btn {
+    .d-icon {
+      transition: all 0.25s ease-in-out;
+    }
+
+    &.copied {
+      .d-icon {
+        transform: scale(1.1);
+        color: var(--tertiary);
+      }
+    }
+  }
+
+  .react-btn,
+  .reply-btn,
+  .bookmark-btn {
+    margin-right: -1px;
+    padding: 0.5em 0;
+    width: 2.5em;
+    transition: background 0.2s, border-color 0.2s;
+
+    &:focus {
+      .d-icon {
+        color: var(--primary);
+      }
+    }
+
+    &:first-child {
+      border-bottom-left-radius: 0.25em;
+      border-top-left-radius: 0.25em;
+    }
+
+    &:first-child:not(:hover) {
+      border-color: var(--primary-low);
+      border-right-color: transparent;
+    }
+
+    .d-icon {
+      color: var(--primary-medium);
+
+      &.bookmark-icon__bookmarked {
+        color: var(--tertiary);
+      }
+    }
+  }
+
+  .more-buttons.dropdown-select-box {
+    .select-kit-header {
+      background: none;
+      border: 1px solid var(--primary-low);
+      border-left-color: transparent;
+      border-radius: 0 0.25em 0.25em 0;
+      padding: 0.5em 0;
+      width: 2.5em;
+      transition: background 0.2s, border-color 0.2s;
+
+      &:focus {
+        border-color: var(--primary-low);
+        border-left-color: transparent;
+
+        .select-kit-header-wrapper .d-icon {
+          color: var(--primary);
+        }
+      }
+
+      .select-kit-header-wrapper {
+        justify-content: center;
+
+        .d-icon {
+          color: var(--primary-medium);
+          margin: 0;
+        }
+      }
+
+      &:hover {
+        background: var(--primary-low);
+        border-color: var(--primary-low-mid);
+
+        .select-kit-header-wrapper {
+          .d-icon {
+            color: var(--primary);
+          }
+        }
+      }
+    }
+
+    .select-kit-body {
+      padding: 0.5rem;
+      box-shadow: shadow("card");
+      border: 1px solid var(--primary-low);
+    }
+
+    .select-kit-row {
+      .texts .name {
+        font-size: var(--font-0);
+        font-weight: 500;
+      }
+
+      .icons .d-icon {
+        font-size: var(--font-0);
+        color: var(--primary-medium);
+      }
+    }
+  }
+
+  .chat-message-reaction {
+    align-items: center;
+    border-radius: 0;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    box-sizing: border-box;
+    font-size: var(--font-0);
+    justify-content: center;
+    margin: 0;
+    margin-right: -1px;
+    padding: 0.5em 0;
+    width: 2.5em;
+
+    &:focus {
+      background: var(--primary-low);
+      outline: none;
+    }
+
+    &:first-child {
+      border-bottom-left-radius: 0.25em;
+      border-left-color: var(--primary-low);
+      border-top-left-radius: 0.25em;
+    }
+
+    &.reacted {
+      border-left-color: var(--tertiary-medium);
+      z-index: 1;
+
+      &:focus {
+        background: var(--tertiary-low);
+      }
+    }
+
+    .emoji {
+      height: 15px;
+      width: auto;
+      margin: 0;
+    }
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss
index 00abf400385..2778ce81908 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message.scss
@@ -14,11 +14,6 @@
   }
 }
 
-.chat-message-actions-desktop-anchor {
-  position: relative;
-  z-index: z("dropdown");
-}
-
 @mixin chat-reaction {
   align-items: center;
   display: inline-flex;
@@ -56,16 +51,6 @@
   }
 }
 
-.chat-msgactions {
-  .chat-message-reaction {
-    @include chat-reaction;
-
-    &:not(.show) {
-      display: none;
-    }
-  }
-}
-
 .chat-message {
   align-items: flex-start;
   padding: 0.25em 0.5em 0.25em 0.75em;
@@ -261,173 +246,6 @@
   background-color: var(--tertiary-low) !important;
 }
 
-.chat-msgactions-hover {
-  @include unselectable;
-  position: relative;
-}
-
-.chat-msgactions {
-  border-radius: 0.25em;
-  background-color: var(--secondary);
-  display: flex;
-  box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15);
-
-  .emoji-picker-anchor {
-    position: absolute;
-    height: 34px;
-  }
-
-  .link-to-message-btn {
-    .d-icon {
-      transition: all 0.25s ease-in-out;
-    }
-
-    &.copied {
-      .d-icon {
-        transform: scale(1.1);
-        color: var(--tertiary);
-      }
-    }
-  }
-
-  .react-btn,
-  .reply-btn,
-  .bookmark-btn {
-    margin-right: -1px;
-    padding: 0.5em 0;
-    width: 2.5em;
-    transition: background 0.2s, border-color 0.2s;
-
-    &:focus {
-      .d-icon {
-        color: var(--primary);
-      }
-    }
-
-    &:first-child {
-      border-bottom-left-radius: 0.25em;
-      border-top-left-radius: 0.25em;
-    }
-
-    &:first-child:not(:hover) {
-      border-color: var(--primary-low);
-      border-right-color: transparent;
-    }
-
-    .d-icon {
-      color: var(--primary-medium);
-
-      &.bookmark-icon__bookmarked {
-        color: var(--tertiary);
-      }
-    }
-  }
-
-  .more-buttons.dropdown-select-box {
-    .select-kit-header {
-      background: none;
-      border: 1px solid var(--primary-low);
-      border-left-color: transparent;
-      border-radius: 0 0.25em 0.25em 0;
-      padding: 0.5em 0;
-      width: 2.5em;
-      transition: background 0.2s, border-color 0.2s;
-
-      &:focus {
-        border-color: var(--primary-low);
-        border-left-color: transparent;
-
-        .select-kit-header-wrapper .d-icon {
-          color: var(--primary);
-        }
-      }
-
-      .select-kit-header-wrapper {
-        justify-content: center;
-
-        .d-icon {
-          color: var(--primary-medium);
-          margin: 0;
-        }
-      }
-
-      &:hover {
-        background: var(--primary-low);
-        border-color: var(--primary-low-mid);
-
-        .select-kit-header-wrapper {
-          .d-icon {
-            color: var(--primary);
-          }
-        }
-      }
-    }
-
-    .select-kit-body {
-      padding: 0.5rem;
-      box-shadow: shadow("card");
-      border: 1px solid var(--primary-low);
-    }
-
-    .select-kit-row {
-      .texts .name {
-        font-size: var(--font-0);
-        font-weight: 500;
-      }
-
-      .icons .d-icon {
-        font-size: var(--font-0);
-        color: var(--primary-medium);
-      }
-    }
-  }
-
-  .chat-message-reaction {
-    align-items: center;
-    border-radius: 0;
-    border-left-color: transparent;
-    border-right-color: transparent;
-    box-sizing: border-box;
-    font-size: var(--font-0);
-    justify-content: center;
-    margin: 0;
-    margin-right: -1px;
-    padding: 0.5em 0;
-    width: 2.5em;
-    filter: grayscale(100%);
-
-    &:hover {
-      filter: grayscale(0);
-    }
-
-    &:focus {
-      background: var(--primary-low);
-      outline: none;
-    }
-
-    &:first-child {
-      border-bottom-left-radius: 0.25em;
-      border-left-color: var(--primary-low);
-      border-top-left-radius: 0.25em;
-    }
-
-    &.reacted {
-      border-left-color: var(--tertiary-medium);
-      z-index: 1;
-
-      &:focus {
-        background: var(--tertiary-low);
-      }
-    }
-
-    .emoji {
-      height: 15px;
-      width: auto;
-      margin: 0;
-    }
-  }
-}
-
 .chat-messages-container {
   .not-mobile-device & .chat-message:hover,
   .chat-message.chat-message-selected {
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss b/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss
new file mode 100644
index 00000000000..3d015632e7c
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss
@@ -0,0 +1,5 @@
+.chat-message-actions[data-popper-reference-hidden],
+.chat-message-actions[data-popper-escaped] {
+  visibility: hidden;
+  pointer-events: none;
+}
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-message.scss b/plugins/chat/assets/stylesheets/desktop/chat-message.scss
index 934d736fa95..8ea9c38357c 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-message.scss
@@ -1,4 +1,4 @@
-.chat-msgactions {
+.chat-message-actions {
   .react-btn,
   .reply-btn,
   .bookmark-btn {
diff --git a/plugins/chat/assets/stylesheets/desktop/desktop.scss b/plugins/chat/assets/stylesheets/desktop/desktop.scss
index e55781648e9..fa1cb31d43a 100644
--- a/plugins/chat/assets/stylesheets/desktop/desktop.scss
+++ b/plugins/chat/assets/stylesheets/desktop/desktop.scss
@@ -56,16 +56,6 @@
 
 .chat-message.user-info-hidden {
   padding: 0.15em 1em;
-
-  .chat-msgactions-hover {
-    top: -2em;
-  }
-}
-
-.chat-msgactions[data-popper-reference-hidden],
-.chat-msgactions[data-popper-escaped] {
-  visibility: hidden;
-  pointer-events: none;
 }
 
 // Full Page Styling in Core
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss
new file mode 100644
index 00000000000..eac83541f83
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss
@@ -0,0 +1,160 @@
+.chat-message-actions {
+  position: absolute;
+  bottom: -100vh;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px 8px 0 0;
+  margin: 0 2px;
+  transition: bottom 0.2s ease;
+
+  .selected-message-container {
+    padding: 0.5em 0.5em 1em 0.5em;
+  }
+
+  .selected-message {
+    display: flex;
+    align-items: center;
+    padding: 0.5em;
+    border: 1px solid var(--primary-low);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
+    border-radius: 8px;
+
+    .selected-message-reply {
+      &:not(.is-expanded) {
+        @include ellipsis;
+      }
+
+      &.is-expanded {
+        @include user-select(text);
+        max-height: 80px;
+        overflow-y: scroll;
+      }
+    }
+  }
+
+  .main-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1em 1em 1.5em 1em;
+
+    .chat-message-reaction {
+      background: none;
+      border: 1px solid transparent;
+
+      img.emoji {
+        width: 30px;
+        height: 30px;
+        object-fit: contain;
+      }
+
+      &.reacted {
+        border-color: var(--tertiary-medium);
+        background: var(--tertiary-very-low);
+        color: var(--tertiary-hover);
+
+        &:hover {
+          background: var(--tertiary-low);
+        }
+      }
+    }
+
+    .react-btn {
+      .d-icon {
+        color: var(--primary-medium);
+        font-size: var(--font-up-4);
+      }
+    }
+
+    .chat-message-reaction,
+    .react-btn {
+      margin: 0;
+    }
+
+    .chat-message-reaction,
+    .reply-btn,
+    .react-btn,
+    .bookmark-btn {
+      flex-grow: 1;
+      height: 42px;
+    }
+
+    .bookmark-btn,
+    .react-btn {
+      > .svg-icon-title,
+      > .svg-icon {
+        font-size: var(--font-up-4);
+      }
+    }
+
+    .reply-btn {
+      border-radius: 3px;
+      .d-icon {
+        font-size: var(--font-up-4);
+      }
+    }
+  }
+
+  .secondary-actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 0.5em;
+    margin: 0;
+
+    .chat-message-action-item {
+      border-bottom: 1px solid var(--primary-low);
+      width: 100%;
+      list-style: none;
+      padding-bottom: 0.25em;
+      margin-bottom: 0.25em;
+      display: flex;
+
+      &:last-child {
+        border: 0;
+        margin: 0;
+        padding: 0;
+      }
+
+      .chat-message-action {
+        justify-content: flex-start;
+        background: none;
+        width: 100%;
+        border: 0;
+        color: var(--primary);
+
+        &:focus,
+        .d-icon {
+          color: var(--primary);
+        }
+      }
+    }
+  }
+}
+
+.chat-message-actions-backdrop {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  z-index: z("header") + 1;
+  transition: background-color 0.2s ease;
+
+  .collapse-area {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.fade-in {
+    background-color: rgba(0, 0, 0, 0.35);
+
+    .chat-message-actions {
+      bottom: 0;
+    }
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message.scss b/plugins/chat/assets/stylesheets/mobile/chat-message.scss
index d9ae4b07cff..c3517ab9858 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-message.scss
@@ -1,10 +1,3 @@
-.chat-message-selected {
-  .chat-msgactions-hover {
-    bottom: 0;
-    transition: top 1s linear;
-  }
-}
-
 .chat-message *,
 .chat-composer-row,
 .chat-reply,
@@ -15,164 +8,3 @@
 .chat-message-container {
   transform: translateZ(0);
 }
-
-.chat-msgactions-backdrop {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-  z-index: z("header") + 1;
-  transition: background-color 0.2s ease;
-
-  .collapse-area {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.fade-in {
-    background-color: rgba(0, 0, 0, 0.35);
-
-    .chat-msgactions {
-      bottom: 0;
-    }
-  }
-
-  .chat-msgactions {
-    position: absolute;
-    bottom: -100vh;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    border-radius: 8px 8px 0 0;
-    margin: 0 2px;
-    transition: bottom 0.2s ease;
-
-    .selected-message-container {
-      padding: 0.5em 0.5em 1em 0.5em;
-    }
-
-    .selected-message {
-      display: flex;
-      align-items: center;
-      padding: 0.5em;
-      border: 1px solid var(--primary-low);
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
-      border-radius: 8px;
-
-      .selected-message-reply {
-        &:not(.is-expanded) {
-          @include ellipsis;
-        }
-
-        &.is-expanded {
-          @include user-select(text);
-          max-height: 80px;
-          overflow-y: scroll;
-        }
-      }
-    }
-
-    .main-actions {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1em 1em 1.5em 1em;
-
-      .chat-message-reaction {
-        background: none;
-        border: 1px solid transparent;
-
-        img.emoji {
-          width: 30px;
-          height: 30px;
-          object-fit: contain;
-        }
-
-        &.reacted {
-          border-color: var(--tertiary-medium);
-          background: var(--tertiary-very-low);
-          color: var(--tertiary-hover);
-
-          &:hover {
-            background: var(--tertiary-low);
-          }
-        }
-      }
-
-      .react-btn {
-        .d-icon {
-          color: var(--primary-medium);
-          font-size: var(--font-up-4);
-        }
-      }
-
-      .chat-message-reaction,
-      .react-btn {
-        margin: 0;
-      }
-
-      .chat-message-reaction,
-      .reply-btn,
-      .react-btn,
-      .bookmark-btn {
-        flex-grow: 1;
-        height: 42px;
-      }
-
-      .bookmark-btn,
-      .react-btn {
-        > .svg-icon-title,
-        > .svg-icon {
-          font-size: var(--font-up-4);
-        }
-      }
-
-      .reply-btn {
-        border-radius: 3px;
-        .d-icon {
-          font-size: var(--font-up-4);
-        }
-      }
-    }
-
-    .secondary-actions {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      padding: 0.5em;
-      margin: 0;
-
-      .chat-message-action-item {
-        border-bottom: 1px solid var(--primary-low);
-        width: 100%;
-        list-style: none;
-        padding-bottom: 0.25em;
-        margin-bottom: 0.25em;
-        display: flex;
-
-        &:last-child {
-          border: 0;
-          margin: 0;
-          padding: 0;
-        }
-
-        .chat-message-action {
-          justify-content: flex-start;
-          background: none;
-          width: 100%;
-          border: 0;
-          color: var(--primary);
-
-          &:focus,
-          .d-icon {
-            color: var(--primary);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/plugins/chat/plugin.rb b/plugins/chat/plugin.rb
index e789776d186..ab32fcd0c18 100644
--- a/plugins/chat/plugin.rb
+++ b/plugins/chat/plugin.rb
@@ -56,6 +56,9 @@ register_asset "stylesheets/mobile/mobile.scss", :mobile
 register_asset "stylesheets/desktop/desktop.scss", :desktop
 register_asset "stylesheets/sidebar-extensions.scss"
 register_asset "stylesheets/desktop/sidebar-extensions.scss", :desktop
+register_asset "stylesheets/common/chat-message-actions.scss"
+register_asset "stylesheets/desktop/chat-message-actions.scss", :desktop
+register_asset "stylesheets/mobile/chat-message-actions.scss", :mobile
 register_asset "stylesheets/common/chat-message-separator.scss"
 register_asset "stylesheets/common/chat-onebox.scss"
 register_asset "stylesheets/common/chat-skeleton.scss"
diff --git a/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js b/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js
index ab091287b6c..63cbd5bf330 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js
@@ -53,7 +53,9 @@ acceptance("Discourse Chat - Flagging test", function (needs) {
     assert.notOk(exists(".chat-live-pane .chat-message .chat-message-flagged"));
     await triggerEvent(".chat-message-container", "mouseenter");
 
-    let moreButtons = selectKit(".chat-msgactions-hover .more-buttons");
+    const moreButtons = selectKit(
+      ".chat-message-actions-container .more-buttons"
+    );
     await moreButtons.expand();
 
     const content = moreButtons.displayedContent();
@@ -85,7 +87,7 @@ acceptance("Discourse Chat - Flagging test", function (needs) {
     await visit("/chat/channel/9/@hawk");
     await triggerEvent(".chat-message-container", "mouseenter");
 
-    let moreButtons = selectKit(".chat-msgactions .more-buttons");
+    const moreButtons = selectKit(".chat-message-actions .more-buttons");
     await moreButtons.expand();
 
     const content = moreButtons.displayedContent();
diff --git a/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js b/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js
index 777124eb3fb..1316017f3d1 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js
@@ -75,7 +75,7 @@ acceptance("Discourse Chat - Chat live pane", function (needs) {
   test("Textarea and message interactions are disabled when user is silenced", async function (assert) {
     await visit("/chat/channel/1/cat");
     assert.equal(query(".chat-composer-input").disabled, true);
-    assert.notOk(exists(".chat-msgactions-hover"));
+    assert.notOk(exists(".chat-message-actions-container"));
     assert.notOk(exists(".chat-message-react-btn"));
   });
 });
diff --git a/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js b/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js
index 311012f0091..c348161d78b 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js
@@ -305,11 +305,11 @@ acceptance(
       const message = query(".chat-message-container");
       await tap(message);
 
-      assert.ok(exists(".chat-msgactions-backdrop"));
+      assert.ok(exists(".chat-message-actions-backdrop"));
 
       await tap(".collapse-area");
 
-      assert.notOk(exists(".chat-msgactions-backdrop"));
+      assert.notOk(exists(".chat-message-actions-backdrop"));
     });
   }
 );
diff --git a/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js b/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js
index 2f7b22d5fe8..eb4a2510910 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js
@@ -46,7 +46,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) {
     const message = query(".chat-message-container");
 
     await triggerEvent(message, "mouseenter");
-    await click(".chat-msgactions .bookmark-btn");
+    await click(".chat-message-actions .bookmark-btn");
     assert.ok(
       exists("#bookmark-reminder-modal"),
       "it shows the bookmark modal"
@@ -60,7 +60,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) {
       "the message should be bookmarked and show the icon on the message info"
     );
     assert.ok(
-      ".chat-msgactions .bookmark-btn .d-icon-discourse-bookmark-clock",
+      ".chat-message-actions .bookmark-btn .d-icon-discourse-bookmark-clock",
       "the message actions icon shows the reminder icon"
     );
   });
@@ -71,7 +71,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) {
     const message = query(".chat-message-container");
 
     await triggerEvent(message, "mouseenter");
-    await click(".chat-msgactions .bookmark-btn");
+    await click(".chat-message-actions .bookmark-btn");
     assert.ok(
       exists("#bookmark-reminder-modal"),
       "it shows the bookmark modal"
@@ -83,7 +83,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) {
       "the message should be bookmarked and show the icon on the message info"
     );
     assert.ok(
-      exists(".chat-msgactions .bookmark-btn .d-icon-bookmark"),
+      exists(".chat-message-actions .bookmark-btn .d-icon-bookmark"),
       "the message actions icon shows the bookmark icon"
     );
   });
diff --git a/plugins/chat/test/javascripts/acceptance/chat-message-test.js b/plugins/chat/test/javascripts/acceptance/chat-message-test.js
index 5ddc50ecdde..776fd607f93 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-message-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-message-test.js
@@ -77,7 +77,7 @@ acceptance("Discourse Chat - Chat Message", function (needs) {
 
     await visit("/chat/channel/4/public-category");
     await triggerEvent(".chat-message-container[data-id='176']", "mouseenter");
-    await click(".chat-msgactions-hover .react-btn");
+    await click(".chat-message-actions-container .react-btn");
     await click(`[data-emoji="grinning"]`);
 
     assert.deepEqual(
diff --git a/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js b/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js
index 1a745e65fa8..1d0db0ad4fa 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js
@@ -57,7 +57,7 @@ acceptance(
       assert.ok(exists(".chat-message-container"));
       const firstMessage = query(".chat-message-container");
       await triggerEvent(firstMessage, "mouseenter");
-      const dropdown = selectKit(".chat-msgactions .more-buttons");
+      const dropdown = selectKit(".chat-message-actions .more-buttons");
       await dropdown.expand();
       await dropdown.selectRowByValue("selectMessage");
 
@@ -109,7 +109,7 @@ acceptance(
       assert.ok(exists(".chat-message-container"));
       const firstMessage = query(".chat-message-container");
       await triggerEvent(firstMessage, "mouseenter");
-      const dropdown = selectKit(".chat-msgactions .more-buttons");
+      const dropdown = selectKit(".chat-message-actions .more-buttons");
       await dropdown.expand();
       await dropdown.selectRowByValue("selectMessage");
       assert.ok(firstMessage.classList.contains("selecting-messages"));
@@ -151,7 +151,7 @@ acceptance(
       assert.ok(exists(".chat-message-container"));
       const firstMessage = query(".chat-message-container");
       await triggerEvent(firstMessage, "mouseenter");
-      const dropdown = selectKit(".chat-msgactions .more-buttons");
+      const dropdown = selectKit(".chat-message-actions .more-buttons");
       await dropdown.expand();
       await dropdown.selectRowByValue("selectMessage");
 
@@ -168,7 +168,7 @@ acceptance(
       const firstMessage = query(".chat-message-container");
       await triggerEvent(firstMessage, "mouseenter");
       const dropdown = selectKit(
-        `.chat-msgactions-hover[data-id="${firstMessage.dataset.id}"] .more-buttons`
+        `.chat-message-actions-container[data-id="${firstMessage.dataset.id}"] .more-buttons`
       );
       await dropdown.expand();
       await dropdown.selectRowByValue("selectMessage");
diff --git a/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js b/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js
index e30af93eab1..1a9fe0c3426 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js
@@ -62,7 +62,7 @@ acceptance("Discourse Chat | Copying messages", function (needs) {
     const firstMessage = query(".chat-message-container");
     await triggerEvent(firstMessage, "mouseenter");
     const dropdown = selectKit(
-      `.chat-msgactions-hover[data-id="${firstMessage.dataset.id}"] .more-buttons`
+      `.chat-message-actions-container[data-id="${firstMessage.dataset.id}"] .more-buttons`
     );
     await dropdown.expand();
     await dropdown.selectRowByValue("selectMessage");
diff --git a/plugins/chat/test/javascripts/acceptance/chat-test.js b/plugins/chat/test/javascripts/acceptance/chat-test.js
index 36cb1bb54a8..90235ce2e85 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-test.js
@@ -217,7 +217,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
     await triggerEvent(".chat-message-container[data-id='174']", "mouseenter");
 
     const currentUserDropdown = selectKit(
-      ".chat-msgactions-hover[data-id='174'] .more-buttons"
+      ".chat-message-actions-container[data-id='174'] .more-buttons"
     );
     await currentUserDropdown.expand();
 
@@ -243,7 +243,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
     );
 
     const notCurrentUserDropdown = selectKit(
-      ".chat-msgactions-hover[data-id='175'] .more-buttons"
+      ".chat-message-actions-container[data-id='175'] .more-buttons"
     );
     await triggerEvent(".chat-message-container[data-id='175']", "mouseenter");
     await notCurrentUserDropdown.expand();
@@ -259,12 +259,12 @@ acceptance("Discourse Chat - without unread", function (needs) {
 
     // User created this message
     assert.ok(
-      ".chat-msgactions-hover[data-id='174'] .reply-btn",
+      ".chat-message-actions-container[data-id='174'] .reply-btn",
       "it shows the reply button"
     );
 
     const currentUserDropdown = selectKit(
-      ".chat-msgactions-hover[data-id='174'] .more-buttons"
+      ".chat-message-actions-container[data-id='174'] .more-buttons"
     );
     await currentUserDropdown.expand();
 
@@ -301,11 +301,11 @@ acceptance("Discourse Chat - without unread", function (needs) {
     // User _didn't_ create this message
     await triggerEvent(".chat-message-container[data-id='175']", "mouseenter");
     assert.ok(
-      ".chat-msgactions-hover[data-id='175'] .reply-btn",
+      ".chat-message-actions-container[data-id='175'] .reply-btn",
       "it shows the reply button"
     );
     const notCurrentUserDropdown = selectKit(
-      ".chat-msgactions-hover[data-id='175'] .more-buttons"
+      ".chat-message-actions-container[data-id='175'] .more-buttons"
     );
     await notCurrentUserDropdown.expand();
 
@@ -376,7 +376,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
     await click(".topic-chat-drawer-header__return-to-channels-btn");
     await click(".chat-channel-row.chat-channel-9");
     await triggerEvent(".chat-message-container[data-id='174']", "mouseenter");
-    await click(".chat-msgactions-hover[data-id='174'] .reply-btn");
+    await click(".chat-message-actions-container[data-id='174'] .reply-btn");
     // Reply-to line is present
     assert.ok(exists(".chat-composer-message-details .chat-reply"));
     await click(".topic-chat-drawer-header__return-to-channels-btn");
@@ -386,7 +386,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
     // Now click on reply btn and cancel it on channel 7
 
     await triggerEvent(".chat-message-container[data-id='174']", "mouseenter");
-    await click(".chat-msgactions-hover[data-id='174'] .reply-btn");
+    await click(".chat-message-actions-container[data-id='174'] .reply-btn");
     await click(".cancel-message-action");
 
     // Go back to channel 9 and check that reply-to is present
@@ -687,7 +687,7 @@ Widget.triangulate(arg: "test")
     const firstMessage = query(".chat-message-container");
     await triggerEvent(firstMessage, "mouseenter");
     const dropdown = selectKit(
-      `.chat-msgactions-hover[data-id="${firstMessage.dataset.id}"] .more-buttons`
+      `.chat-message-actions-container[data-id="${firstMessage.dataset.id}"] .more-buttons`
     );
     await dropdown.expand();
     await dropdown.selectRowByValue("selectMessage");
@@ -700,7 +700,9 @@ Widget.triangulate(arg: "test")
     updateCurrentUser({ admin: false, moderator: false });
     await visit("/chat/channel/11/another-category");
     assert.notOk(
-      exists(".chat-message-container .chat-msgactions-hover .select-btn")
+      exists(
+        ".chat-message-container .chat-message-actions-container .select-btn"
+      )
     );
   });
 
@@ -735,7 +737,7 @@ Widget.triangulate(arg: "test")
     const message = query(".chat-message-container");
     await triggerEvent(message, "mouseenter");
     assert.notOk(message.querySelector(".chat-message-reaction-list"));
-    await click(".chat-msgactions .react-btn");
+    await click(".chat-message-actions .react-btn");
     await click(`.chat-emoji-picker .emoji[alt="grinning"]`);
 
     assert.ok(message.querySelector(".chat-message-reaction-list"));
@@ -831,7 +833,7 @@ Widget.triangulate(arg: "test")
     assert.deepEqual(lastMessage.dataset.id, "202");
     await triggerEvent(lastMessage, "mouseenter");
     await click(
-      `.chat-msgactions-hover[data-id="${lastMessage.dataset.id}"] .react-btn`
+      `.chat-message-actions-container[data-id="${lastMessage.dataset.id}"] .react-btn`
     );
     await click(`.emoji[alt="grinning"]`);
 
@@ -937,7 +939,7 @@ Widget.triangulate(arg: "test")
   test("changing channel resets message selection", async function (assert) {
     await visit("/chat/channel/11/another-category");
     await triggerEvent(".chat-message-container", "mouseenter");
-    const dropdown = selectKit(".chat-msgactions .more-buttons");
+    const dropdown = selectKit(".chat-message-actions .more-buttons");
     await dropdown.expand();
     await dropdown.selectRowByValue("selectMessage");
     await click("#chat-copy-btn");
@@ -1631,7 +1633,7 @@ acceptance(
     test("read only channels do not show the reply, react, delete, edit, restore, or rebuild options for messages", async function (assert) {
       await visit("/chat/channel/5/public-category");
       await triggerEvent(".chat-message-container", "mouseenter");
-      const dropdown = selectKit(".chat-msgactions .more-buttons");
+      const dropdown = selectKit(".chat-message-actions .more-buttons");
       await dropdown.expand();
       assert.notOk(exists(".select-kit-row[data-value='edit']"));
       assert.notOk(exists(".select-kit-row[data-value='deleteMessage']"));
@@ -1684,7 +1686,7 @@ acceptance(
       await visit("/chat/channel/4/public-category");
 
       await triggerEvent(".chat-message-container", "mouseenter");
-      const dropdown = selectKit(".chat-msgactions .more-buttons");
+      const dropdown = selectKit(".chat-message-actions .more-buttons");
       await dropdown.expand();
 
       assert.notOk(exists(".select-kit-row[data-value='edit']"));
@@ -1729,7 +1731,7 @@ acceptance(
     test("closed channels show the reply, react, delete, edit, restore, or rebuild options for messages", async function (assert) {
       await visit("/chat/channel/4/public-category");
       await triggerEvent(".chat-message-container", "mouseenter");
-      const dropdown = selectKit(".chat-msgactions .more-buttons");
+      const dropdown = selectKit(".chat-message-actions .more-buttons");
       await dropdown.expand();
       assert.ok(
         exists(".select-kit-row[data-value='edit']"),