diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss
index af38a6c6b..b3c7e125d 100644
--- a/src/components/MessageComposer/styling/MessageComposer.scss
+++ b/src/components/MessageComposer/styling/MessageComposer.scss
@@ -191,27 +191,6 @@
           ease-out;
     }
 
-    .str-chat__textarea {
-      flex: 1;
-      min-width: 0;
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      textarea {
-        background: transparent;
-        color: var(--str-chat__input-text-default);
-        font: var(--str-chat__font-body-default);
-        resize: none;
-        border: none;
-        box-shadow: none;
-        outline: none;
-        width: 100%;
-        scrollbar-width: none;
-      }
-    }
-
     .str-chat__emoji-picker-button {
       display: flex;
       cursor: pointer;
@@ -265,6 +244,41 @@
     }
   }
 
+  // Scoped to the TextareaComposer's own elements (not the composer-controls
+  // wrapper) so the textarea fills its container in any composer layout — e.g.
+  // a custom composer that renders <TextareaComposer> without the default
+  // MessageComposerUI. Without this the bare <textarea> falls back to its
+  // intrinsic `cols` width (~160px).
+  .str-chat__textarea {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    textarea {
+      background: transparent;
+      color: var(--str-chat__input-text-default);
+      font: var(--str-chat__font-body-default);
+      resize: none;
+      border: none;
+      box-shadow: none;
+      outline: none;
+      width: 100%;
+      scrollbar-width: none;
+
+      // The composer intentionally has no focus ring on the textarea itself.
+      // Re-assert the reset on :focus-visible so it keeps outranking the global
+      // `.str-chat *:not(:disabled):focus-visible` outline (base.scss, (0,3,0))
+      // now that this rule is scoped one level shallower (was (0,3,1) under
+      // .str-chat__message-composer-controls, now (0,2,1)).
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
   .str-chat__message-composer--command-active
     .str-chat__message-composer__additional-actions {
     max-width: 0;