diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index 76bb6098a66..1ef735d5dbd 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -75,12 +75,13 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
 
 .header-dropdown-toggle.chat-header-icon .icon {
   .chat-channel-unread-indicator {
-    @include chat-unread-indicator;
     border: 2px solid var(--header_background);
     position: absolute;
     top: 0;
     right: 2px;
 
+    @include chat-unread-indicator;
+
     &.-urgent {
       display: flex;
       align-items: center;
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-name.scss b/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
index a564ad9c791..2849887882a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
@@ -23,14 +23,16 @@
   }
 
   .chat-channel-unread-indicator {
-    @include chat-unread-indicator;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 8px;
-    height: 8px;
     flex-shrink: 0;
 
+    @include chat-unread-indicator {
+      width: 8px;
+      height: 8px;
+    }
+
     &.-urgent {
       width: auto;
       height: auto;
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
index cd329728f45..50852d9240a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
@@ -1,13 +1,14 @@
 .chat-composer-button {
-  @include breakpoint(mobile-large) {
-    width: 50px;
-  }
   box-sizing: border-box;
   border: 0;
   height: 50px;
   background: none;
   padding-inline: 0.75rem;
 
+  @include breakpoint(mobile-large) {
+    width: 50px;
+  }
+
   .is-disabled & {
     cursor: not-allowed;
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index b8840d7d986..6ce24c75152 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -86,10 +86,11 @@
     margin: 5px 0;
     text-overflow: ellipsis;
     cursor: inherit;
-    @include chat-scrollbar;
     white-space: pre-wrap !important;
     min-width: 20px;
 
+    @include chat-scrollbar;
+
     &[disabled] {
       background: none;
 
@@ -103,7 +104,6 @@
       outline: none;
     }
 
-    &:placeholder-shown,
     &::placeholder {
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index 9d3e682d47f..2d611512d79 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
@@ -94,7 +94,6 @@ html.rtl {
 }
 
 .chat-drawer-content {
-  @include chat-scrollbar;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -104,6 +103,8 @@ html.rtl {
   overflow-y: auto;
   overscroll-behavior: contain;
 
+  @include chat-scrollbar;
+
   .c-channel-settings {
     flex-grow: 1;
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index b3a8f935064..67144649d42 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -29,13 +29,10 @@
 .channels-list,
 .channels-list-container {
   position: relative;
-  @include chat-scrollbar;
   height: 100%;
   padding-bottom: 1rem;
 
-  @include breakpoint(mobile-large) {
-    @include chat-scrollbar;
-  }
+  @include chat-scrollbar;
 
   .open-browse-page-btn,
   .open-draft-channel-page-btn,
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
index e46531f4ae4..4e48fdf69d1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
@@ -47,14 +47,15 @@
   }
 
   &__member {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: popIn 0.1s ease-out;
-    }
     padding: 0 0.25rem;
     border-radius: var(--border-radius);
     background: var(--primary-very-low);
     gap: 0.25rem;
 
+    @media (prefers-reduced-motion: no-preference) {
+      animation: popIn 0.1s ease-out;
+    }
+
     &:hover {
       .discourse-no-touch & {
         background: var(--primary-very-low);
diff --git a/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss b/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
index ed2378bab00..7f05ee58fef 100644
--- a/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
@@ -7,8 +7,10 @@
   z-index: 1;
   margin: 0 1px 0 0;
   will-change: transform;
-  @include chat-scrollbar;
   min-height: 1px;
   box-sizing: border-box;
-  transition: padding-top 0.2s ease-in-out;
+
+  @include chat-scrollbar {
+    transition: scrollbar-color 0.25s ease-in-out, padding-top 0.2s ease-in-out;
+  }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
index 032b08ea751..464e97a3f0a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
@@ -21,15 +21,16 @@
 
   &__copy-success {
     animation: chat-quote-message-background-fade-highlight 2s ease-out 3s;
-    @media (prefers-reduced-motion) {
-      animation-duration: 0s;
-    }
     animation-fill-mode: forwards;
     background-color: var(--success-low);
     color: var(--primary);
     flex: 1;
     line-height: normal;
     padding: 0.5rem 0.65rem;
+
+    @media (prefers-reduced-motion) {
+      animation-duration: 0s;
+    }
   }
 
   @keyframes chat-quote-message-background-fade-highlight {
diff --git a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
index 89797a3c68e..5354ec4b9c5 100644
--- a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
@@ -128,10 +128,11 @@
         rgba(var(--chat-skeleton-animation-rgb), 0.3) 50%,
         rgba(var(--chat-skeleton-animation-rgb), 0.5) 100%
       );
+      content: "";
+
       @media (prefers-reduced-motion: no-preference) {
         animation: shimmer 1.25s infinite;
       }
-      content: "";
     }
 
     @keyframes shimmer {
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
index b46064a0565..e24d8a4fa8a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
@@ -1,13 +1,14 @@
 .chat-thread-header-unread-indicator,
 .chat-thread-list-item-unread-indicator {
-  @include chat-unread-indicator;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: auto;
-  height: auto;
   padding: 0.21em 0.42em;
-  border-radius: 1em;
   min-width: 0.6em;
   align-self: center;
+
+  @include chat-unread-indicator {
+    width: auto;
+    height: auto;
+  }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
index 9e8a9cea335..8f72154f2f1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
@@ -8,12 +8,13 @@
 
   &__items {
     overflow-y: scroll;
-    @include chat-scrollbar;
     box-sizing: border-box;
     flex-grow: 1;
     overscroll-behavior: contain;
     display: flex;
     flex-direction: column;
+
+    @include chat-scrollbar;
   }
 
   &__no-threads {
diff --git a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
index a59e62a0c6b..352b1e25bea 100644
--- a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
@@ -11,6 +11,8 @@
   text-align: center;
   transition: border-color linear 0.15s;
 
+  @content;
+
   &.-urgent {
     background: var(--success);
     color: var(--secondary);
diff --git a/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss b/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
index 461dc18680f..fbe90b2a03c 100644
--- a/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
+++ b/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
@@ -5,6 +5,8 @@
   scrollbar-color: transparent var(--scrollbarBg);
   transition: scrollbar-color 0.25s ease-in-out;
 
+  @content;
+
   // chrome, safari
   &::-webkit-scrollbar-thumb {
     background-color: var(--scrollbarThumbBg);