diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss
index 42ff565ed..1469d3b7c 100644
--- a/src/addons/messages/pages/discussion/discussion.scss
+++ b/src/addons/messages/pages/discussion/discussion.scss
@@ -1,25 +1,7 @@
+@import "~theme/components/discussion.scss";
 @import "~theme/globals.scss";
 
 :host {
-    ion-content {
-        --background: var(--background-alternative);
-
-        &::part(scroll) {
-            padding-bottom: 0 !important;
-        }
-    }
-
-    .addon-messages-discussion-container {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 15px;
-        background: var(--background-alternative);
-    }
-
-    .addon-messages-date {
-        font-weight: normal;
-        font-size: 0.9rem;
-    }
 
     .addon-messages-unreadfrom {
         color: var(--ion-color-primary);
@@ -33,157 +15,7 @@
         }
     }
 
-    // Message item.
-    ion-item.addon-message {
-        border: 0;
-        border-radius: 4px;
-        padding: 0 8px 0 8px;
-        margin: 10px 8px 0 8px;
-        --background: var(--addon-messages-message-bg);
-        background: var(--background);
-        align-self: flex-start;
-        width: 90%;
-        max-width: 90%;
-        --min-height: var(--a11y-min-target-size);
-        position: relative;
-        @include core-transition(width);
-        // This is needed to display bubble tails.
-        overflow: visible;
-
-        &::part(native) {
-            --inner-border-width: 0;
-            --inner-padding-end: 0;
-            padding: 0;
-            margin: 0;
-        }
-
-        core-format-text > p:only-child {
-            display: inline;
-        }
-
-        .addon-message-user {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: .5rem;
-            margin-top: 0;
-            color: var(--ion-text-color);
-
-            core-user-avatar {
-                display: block;
-                --core-avatar-size: var(--addon-messages-avatar-size);
-                margin: 0;
-            }
-
-            div {
-                font-weight: 500;
-                flex-grow: 1;
-                @include padding-horizontal(.5rem);
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        ion-note {
-            color: var(--addon-messages-message-note-text);
-            font-size: var(--addon-messages-message-note-font-size);
-            margin: 0;
-            padding: 0 0 8px 0;
-            align-self: flex-end;
-        }
-
-        &:active {
-            --background: var(--addon-messages-message-activated-bg);
-        }
-
-        ion-label {
-            margin: 0;
-            padding: 8px 0;
-        }
-
-        .addon-message-text {
-            display: inline-flex;
-            * {
-                color: var(--ion-text-color);
-            }
-        }
-
-        .addon-messages-delete-button {
-            min-height: initial;
-            line-height: initial;
-            @include margin(0, null, 0, null);
-            height: var(--a11y-min-target-size) !important;
-            align-self: flex-end;
-
-            ion-icon {
-                font-size: 1.4em;
-                line-height: initial;
-                color: var(--ion-color-danger);
-            }
-        }
-
-        .tail {
-            content: '';
-            width: 0;
-            height: 0;
-            border: 0.5rem solid transparent;
-            position: absolute;
-            touch-action: none;
-            bottom: 0;
-        }
-
-        // Defines when an item-message is the user's.
-        &.addon-message-mine {
-            --background: var(--addon-messages-message-mine-bg);
-            align-self: flex-end;
-
-            &:active {
-                --background: var(--addon-messages-message-mine-activated-bg);
-            }
-
-            .spinner {
-                @include float(end);
-                @include margin(2px, -3px, -2px, 5px);
-
-                svg {
-                    width: 16px;
-                    height: 16px;
-                }
-            }
-
-            .tail {
-                @include position(null, -8px, null, null);
-                @include margin-horizontal(null, -0.5rem);
-                border-bottom-color: var(--addon-messages-message-mine-bg);
-            }
-
-            &:active .tail {
-                border-bottom-color: var(--addon-messages-message-mine-activated-bg);
-            }
-        }
-
-        &.addon-message-not-mine .tail {
-            border-bottom-color: var(--addon-messages-message-bg);
-            @include position(null, null, null, -8px);
-            @include margin-horizontal(-0.5rem, null);
-        }
-
-        &.addon-message-not-mine.activated .tail {
-            border-bottom-color: var(--addon-messages-message-activated-bg);
-        }
-    }
-
-    ion-item.addon-message.addon-message-mine + ion-item.addon-message.addon-message-no-user.addon-message-mine,
-    ion-item.addon-message.addon-message-not-mine + ion-item.addon-message.addon-message-no-user.addon-message-not-mine {
-        .item-heading {
-            margin-bottom: 0;
-        }
-        padding-top: 0;
-    }
-
-    .has-fab .scroll-content {
+   .has-fab .scroll-content {
         padding-bottom: 0;
     }
 
@@ -232,9 +64,4 @@
     ion-header ion-toolbar h1 {
         justify-content: center;
     }
-
-    ion-footer .toolbar:last-child {
-        padding-bottom: 4px;
-        min-height: 0;
-    }
 }
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index d741b541e..d88bf4d0b 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -86,11 +86,10 @@
                     [@coreSlideInOut]="message.userid == currentUserId ? '' : 'fromLeft'">
                     <ion-label>
                         <!-- User data. -->
-                        <h2 class="addon-message-user">
-                            <core-user-avatar slot="start" [user]="message" [linkProfile]="false" *ngIf="message.showUserData">
+                        <h2 class="addon-message-user" *ngIf="message.showUserData">
+                            <core-user-avatar slot="start" [user]="message" [linkProfile]="false">
                             </core-user-avatar>
-                            <div *ngIf="message.showUserData">{{ message.userfullname }}</div>
-                            <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
+                            <div>{{ message.userfullname }}</div>
                         </h2>
 
                         <p class="addon-message-text">
@@ -99,6 +98,7 @@
                             </core-format-text>
                         </p>
                     </ion-label>
+                    <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                     <div class="tail" *ngIf="message.showTail"></div>
                 </ion-item>
             </ng-container>
diff --git a/src/addons/mod/chat/pages/chat/chat.scss b/src/addons/mod/chat/pages/chat/chat.scss
index 2ee6b3c8c..79a0b6be9 100644
--- a/src/addons/mod/chat/pages/chat/chat.scss
+++ b/src/addons/mod/chat/pages/chat/chat.scss
@@ -1,3 +1,5 @@
+@import "~theme/components/discussion.scss";
+
 :host {
     .addon-mod_chat-notice {
         margin-top: 8px;
diff --git a/src/addons/mod/chat/pages/chat/chat.ts b/src/addons/mod/chat/pages/chat/chat.ts
index 732beb830..72aaff042 100644
--- a/src/addons/mod/chat/pages/chat/chat.ts
+++ b/src/addons/mod/chat/pages/chat/chat.ts
@@ -36,7 +36,7 @@ import { AddonModChatFormattedMessage, AddonModChatHelper } from '../../services
     selector: 'page-addon-mod-chat-chat',
     templateUrl: 'chat.html',
     animations: [CoreAnimations.SLIDE_IN_OUT],
-    styleUrls: ['chat.scss', '../../../../messages/pages/discussion/discussion.scss'],
+    styleUrls: ['chat.scss'],
 })
 export class AddonModChatChatPage implements OnInit, OnDestroy, CanLeave {
 
@@ -54,7 +54,6 @@ export class AddonModChatChatPage implements OnInit, OnDestroy, CanLeave {
     courseId!: number;
     cmId!: number;
 
-    protected logger;
     protected chatId!: number;
     protected sessionId?: string;
     protected lastTime = 0;
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.html b/src/addons/mod/chat/pages/session-messages/session-messages.html
index 4fbc6d40a..f9706469e 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.html
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.html
@@ -11,7 +11,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded" class="safe-area-page">
-        <ion-list class="addon-messages-discussion-container" aria-live="polite">
+        <ion-list class="addon-messages-discussion-container">
             <ng-container *ngFor="let message of messages; index as index;">
 
                 <div class="ion-text-center addon-messages-date" *ngIf="message.showDate">
@@ -83,7 +83,6 @@
                             <core-user-avatar slot="start" [user]="message" [linkProfile]="false" *ngIf="message.showUserData">
                             </core-user-avatar>
                             <div *ngIf="message.showUserData">{{ message.userfullname }}</div>
-                            <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                         </h2>
 
                         <p class="addon-message-text">
@@ -91,6 +90,7 @@
                                 [courseId]="courseId">
                             </core-format-text>
                         </p>
+                        <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                     </ion-label>
                     <div class="tail" *ngIf="message.showTail"></div>
                 </ion-item>
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.scss b/src/addons/mod/chat/pages/session-messages/session-messages.scss
index 2ee6b3c8c..79a0b6be9 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.scss
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.scss
@@ -1,3 +1,5 @@
+@import "~theme/components/discussion.scss";
+
 :host {
     .addon-mod_chat-notice {
         margin-top: 8px;
diff --git a/src/addons/mod/chat/pages/session-messages/session-messages.ts b/src/addons/mod/chat/pages/session-messages/session-messages.ts
index 27620d907..00b7e8a71 100644
--- a/src/addons/mod/chat/pages/session-messages/session-messages.ts
+++ b/src/addons/mod/chat/pages/session-messages/session-messages.ts
@@ -28,7 +28,7 @@ import { AddonModChatFormattedSessionMessage, AddonModChatHelper } from '../../s
 @Component({
     selector: 'page-addon-mod-chat-session-messages',
     templateUrl: 'session-messages.html',
-    styleUrls: ['session-messages.scss', '../../../../messages/pages/discussion/discussion.scss'],
+    styleUrls: ['session-messages.scss'],
 })
 export class AddonModChatSessionMessagesPage implements OnInit {
 
diff --git a/src/core/components/send-message-form/send-message-form.scss b/src/core/components/send-message-form/send-message-form.scss
index c9500e34a..ce52b352e 100644
--- a/src/core/components/send-message-form/send-message-form.scss
+++ b/src/core/components/send-message-form/send-message-form.scss
@@ -20,5 +20,6 @@
     line-height: 20px;
     padding: 9px 12px 11px;
     margin: 5px 10px;
+    resize: vertical;
   }
 }
diff --git a/src/theme/components/discussion.scss b/src/theme/components/discussion.scss
new file mode 100644
index 000000000..66f450ba9
--- /dev/null
+++ b/src/theme/components/discussion.scss
@@ -0,0 +1,185 @@
+@import "~theme/globals.scss";
+
+:host {
+    ion-content {
+        --background: var(--background-alternative);
+
+        &::part(scroll) {
+            padding-bottom: 0 !important;
+        }
+    }
+
+    .addon-messages-discussion-container {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 15px;
+        background: var(--background-alternative);
+    }
+
+    .addon-messages-date {
+        font-weight: normal;
+        font-size: 0.9rem;
+    }
+
+    // Message item.
+    ion-item.addon-message {
+        border: 0;
+        border-radius: 4px;
+        padding: 0 8px 0 8px;
+        margin: 10px 8px 0 8px;
+        --background: var(--addon-messages-message-bg);
+        background: var(--background);
+        align-self: flex-start;
+        width: 90%;
+        max-width: 90%;
+        --min-height: var(--a11y-min-target-size);
+        position: relative;
+        @include core-transition(width);
+        // This is needed to display bubble tails.
+        overflow: visible;
+
+        &::part(native) {
+            --inner-border-width: 0;
+            --inner-padding-end: 0;
+            padding: 0;
+            margin: 0;
+        }
+
+        core-format-text > p:only-child {
+            display: inline;
+        }
+
+        .addon-message-user {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: .5rem;
+            margin-top: 0;
+            color: var(--ion-text-color);
+
+            core-user-avatar {
+                display: block;
+                --core-avatar-size: var(--addon-messages-avatar-size);
+                margin: 0;
+            }
+
+            div {
+                font-weight: 500;
+                flex-grow: 1;
+                @include padding-horizontal(.5rem);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        ion-note {
+            color: var(--addon-messages-message-note-text);
+            font-size: var(--addon-messages-message-note-font-size);
+            margin: 0;
+            padding: 0 0 8px 0;
+            align-self: flex-end;
+        }
+
+        &[tappable]:active {
+            --background: var(--addon-messages-message-activated-bg);
+        }
+
+        ion-label {
+            margin: 0;
+            padding: 8px 0;
+        }
+
+        .addon-message-text {
+            display: inline-flex;
+            * {
+                color: var(--ion-text-color);
+            }
+        }
+
+        .tail {
+            content: '';
+            width: 0;
+            height: 0;
+            border: 0.5rem solid transparent;
+            position: absolute;
+            touch-action: none;
+            bottom: 0;
+        }
+
+        // Defines when an item-message is the user's.
+        &.addon-message-mine {
+            --background: var(--addon-messages-message-mine-bg);
+            align-self: flex-end;
+
+            &[tappable]:active {
+                --background: var(--addon-messages-message-mine-activated-bg);
+            }
+
+            .spinner {
+                @include float(end);
+                @include margin(2px, -3px, -2px, 5px);
+
+                svg {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+
+            .tail {
+                @include position(null, -8px, null, null);
+                @include margin-horizontal(null, -0.5rem);
+                border-bottom-color: var(--addon-messages-message-mine-bg);
+            }
+
+            &[tappable]:active .tail {
+                border-bottom-color: var(--addon-messages-message-mine-activated-bg);
+            }
+        }
+
+        &.addon-message-not-mine .tail {
+            border-bottom-color: var(--addon-messages-message-bg);
+            @include position(null, null, null, -8px);
+            @include margin-horizontal(-0.5rem, null);
+        }
+
+        &[tappable].addon-message-not-mine.activated .tail {
+            border-bottom-color: var(--addon-messages-message-activated-bg);
+        }
+
+        .addon-messages-delete-button {
+            min-height: initial;
+            line-height: initial;
+            @include margin(0, null, 0, null);
+            height: var(--a11y-min-target-size) !important;
+            align-self: flex-end;
+
+            ion-icon {
+                font-size: 1.4em;
+                line-height: initial;
+                color: var(--ion-color-danger);
+            }
+        }
+
+        &.addon-message-no-user {
+            margin-top: 8px;
+        }
+    }
+
+    ion-item.addon-message.addon-message-mine + ion-item.addon-message.addon-message-no-user.addon-message-mine,
+    ion-item.addon-message.addon-message-not-mine + ion-item.addon-message.addon-message-no-user.addon-message-not-mine {
+        .item-heading {
+            margin-bottom: 0;
+        }
+        padding-top: 0;
+    }
+
+}
+
+:host-context(.ios) {
+    ion-footer .toolbar:last-child {
+        padding-bottom: 4px;
+        min-height: 0;
+    }
+}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index f2e7f1458..d088270be 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -364,7 +364,7 @@ ion-toolbar {
 
 .item-dimmed {
     opacity: 0.7;
-    --background: var(--gray-lighter);
+    --background: var(--ion-color-light);
 }
 
 // Extra text colors.