stream-chat-react 14.1.0 → 14.3.0

package/dist/css/index.css

@@ -1,5 +1,4 @@
 @charset "UTF-8";
-@import 'modern-normalize' layer(css-reset);
 @media (prefers-reduced-motion: reduce) {
   .str-chat,
   .str-chat *,
@@ -1095,6 +1094,23 @@ to create clearer separation from the base surface.
   --str-chat__box-shadow-4: var(--str-chat__dark-elevation-4);
 }
 
+@layer minimal-normalize {
+  .str-chat *,
+  .str-chat ::before,
+  .str-chat ::after {
+    box-sizing: border-box;
+  }
+  .str-chat button,
+  .str-chat input,
+  .str-chat optgroup,
+  .str-chat select,
+  .str-chat textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+  }
+}
 .str-chat {
   --str-chat__focus-outline-color: var(--str-chat__border-utility-focused);
   --str-chat__focus-outline: 2px solid var(--str-chat__focus-outline-color);
@@ -1121,6 +1137,10 @@ to create clearer separation from the base surface.
 .str-chat input[type=number] {
   -moz-appearance: textfield;
 }
+.str-chat input::placeholder,
+.str-chat textarea::placeholder {
+  color: var(--str-chat__input-text-placeholder);
+}
 
 .str-chat__icon {
   flex-shrink: 0;
@@ -1309,12 +1329,14 @@ to create clearer separation from the base surface.
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   background-color: var(--str-chat__background-core-overlay-light);
 }
 .str-chat .str-chat__image-placeholder svg {
   fill: var(--str-chat__accent-neutral);
   width: min(var(--str-chat__icon-size-lg, 32px), 50%);
   height: min(var(--str-chat__icon-size-lg, 32px), 50%);
+  flex-shrink: 0;
 }
 
 .str-chat .str-chat__button {
@@ -1322,7 +1344,6 @@ to create clearer separation from the base surface.
   border: none;
   padding: 0;
   position: relative; /* creates positioning context for pseudo ::after overlay */
-  overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
   display: flex;
@@ -1510,15 +1531,12 @@ to create clearer separation from the base surface.
   font-size: var(--str-chat__typography-font-size-sm, 0.875rem);
   font-weight: var(--str-chat__typography-font-weight-medium, 500);
   line-height: var(--str-chat__typography-line-height-tight, 1.25);
-  color: var(--str-chat__input-text-default, #1a1b25);
+  color: var(--str-chat__input-text-default);
   text-align: center;
   background: transparent;
   border: none;
   box-shadow: none;
 }
-.str-chat__form-numeric-input__input::placeholder {
-  color: var(--str-chat__input-text-placeholder, var(--str-chat__text-tertiary));
-}
 .str-chat__form-numeric-input--disabled .str-chat__form-numeric-input__input {
   color: var(--str-chat__input-text-placeholder);
   cursor: not-allowed;
@@ -1726,14 +1744,9 @@ to create clearer separation from the base surface.
   background: transparent;
   border: none;
   outline: none;
-  outline-style: none;
   box-shadow: none;
 }
 
-.str-chat__form-text-input .str-chat__form-text-input__input::placeholder {
-  color: var(--str-chat__input-text-placeholder);
-}
-
 .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input {
   color: var(--str-chat__input-text-placeholder);
   cursor: not-allowed;
@@ -1746,7 +1759,6 @@ to create clearer separation from the base surface.
 .str-chat__form-text-input .str-chat__form-text-input__input:focus,
 .str-chat__form-text-input .str-chat__form-text-input__input:focus-visible {
   outline: none;
-  outline-style: none;
   box-shadow: none;
 }
 
@@ -2006,6 +2018,10 @@ to create clearer separation from the base surface.
 .str-chat .str-chat__context-menu .str-chat__context-menu__back-button:active:not(:disabled) {
   background-color: var(--str-chat__background-utility-pressed);
 }
+.str-chat .str-chat__context-menu .str-chat__context-menu__back-button:focus:not(:disabled) {
+  outline: 2px solid var(--str-chat__border-utility-focused);
+  outline-offset: 2px;
+}
 .str-chat .str-chat__context-menu .str-chat__context-menu__back-button:focus-visible:not(:disabled) {
   background-color: transparent;
 }
@@ -2065,6 +2081,12 @@ to create clearer separation from the base surface.
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button:disabled {
   background-color: transparent;
+  color: var(--str-chat__text-disabled);
+  cursor: default;
+}
+.str-chat .str-chat__context-menu .str-chat__context-menu__button:disabled .str-chat__context-menu__button__details,
+.str-chat .str-chat__context-menu .str-chat__context-menu__button:disabled .str-chat__icon {
+  color: inherit;
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button .str-chat__icon {
   height: var(--str-chat__icon-size-sm);
@@ -2079,7 +2101,6 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
   flex: auto;
   text-align: start;
-  color: var(--str-chat__text-primary);
   white-space: nowrap;
   min-width: 0;
 }
@@ -2886,12 +2907,15 @@ to create clearer separation from the base surface.
   padding: 0;
 }
 .str-chat__message--has-single-attachment .str-chat__message-attachment-card img {
-  height: var(--str-chat__scraped-image-height);
+  aspect-ratio: 1.91/1;
   width: 100%;
+  height: auto;
+  max-height: var(--str-chat__scraped-image-height);
   border-radius: 0;
 }
 .str-chat__message--has-single-attachment .str-chat__message-attachment-card .str-chat__message-attachment-card--header:has(.str-chat__image-placeholder) {
-  height: var(--str-chat__scraped-image-height);
+  aspect-ratio: 1.91/1;
+  height: auto;
 }
 .str-chat__message--has-single-attachment .str-chat__message-attachment-card .str-chat__message-attachment-card--header:has(.str-chat__image-placeholder) .str-chat__image-placeholder {
   border-radius: 0;
@@ -2907,42 +2931,93 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
 }
 
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery {
-  background: transparent;
+.str-chat__attachment-list .str-chat__message-attachment--gallery,
+.str-chat__attachment-list .str-chat__message-attachment--image {
+  min-width: 0;
+  max-width: 100%;
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery {
+  background-color: var(--chat-bg);
   color: var(--str-chat__text-primary);
   border-radius: calc(var(--str-chat__message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
   display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
   overflow: hidden;
   border-radius: var(--str-chat__radius-lg);
-  gap: var(--str-chat__space-2);
+  gap: var(--str-chat__spacing-xxs);
   width: var(--str-chat__attachment-max-width);
-  max-width: var(--str-chat__attachment-max-width);
-  height: var(--str-chat__attachment-max-width);
+  max-width: 100%;
+  aspect-ratio: 4/3;
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image {
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
+  border-radius: var(--str-chat__radius-md);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading, .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed {
+  min-height: 0;
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:only-child,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:only-child {
+  grid-column: 1/-1;
+  grid-row: 1/-1;
+  border-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(1),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(1) {
+  border-start-start-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(2),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(2) {
+  border-start-end-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(3),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(3) {
+  border-end-start-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(4),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(4) {
+  border-end-end-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--two-images {
   grid-template-rows: 1fr;
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(1) {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(1),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(1) {
+  border-end-start-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(2),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(2) {
+  border-end-end-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(1),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(1) {
   grid-column: 1;
-  grid-row: 1/span 2; /* Span two rows */
+  grid-row: 1/span 2;
+  border-end-start-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(2) {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(2),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(2) {
   grid-column: 2;
   grid-row: 1;
+  border-start-end-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(3) {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(3),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(3) {
   grid-column: 2;
   grid-row: 2;
+  border-end-end-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__placeholder {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__placeholder,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2984,25 +3059,42 @@ to create clearer separation from the base surface.
   object-fit: cover;
   cursor: zoom-in;
   max-width: var(--str-chat__attachment-max-width);
+  max-height: var(--str-chat__attachment-max-width);
   transition: opacity 150ms ease-in-out;
 }
+.str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading,
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading {
+  min-height: 200px;
+  align-items: stretch;
+}
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading img,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading img,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading img {
+  position: absolute;
   opacity: 0;
 }
+.str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading .str-chat__modal-gallery__image-loading-overlay,
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading .str-chat__modal-gallery__image-loading-overlay,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading .str-chat__modal-gallery__image-loading-overlay {
+  position: static;
+  flex: 1;
+  min-width: 0;
+  height: auto;
+}
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed {
   cursor: pointer;
   min-height: 200px;
+  align-items: stretch;
 }
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed .str-chat__image-placeholder.str-chat__base-image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed .str-chat__image-placeholder.str-chat__base-image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed .str-chat__image-placeholder.str-chat__base-image--load-failed {
-  width: 100%;
-  min-height: 200px;
-  align-self: stretch;
+  flex: 1;
+  min-width: 0;
+  height: auto;
 }
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed img,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed img,
@@ -3028,7 +3120,7 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--chat-bg);
+  background-color: var(--str-chat__background-core-overlay-light);
   background-image: linear-gradient(90deg, var(--str-chat__skeleton-loading-base) 0%, var(--str-chat__skeleton-loading-highlight) 50%, var(--str-chat__skeleton-loading-base) 100%);
   background-repeat: no-repeat;
   background-size: 200% 100%;
@@ -3071,8 +3163,18 @@ to create clearer separation from the base surface.
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image:focus-visible,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image:focus-visible,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image:focus-visible {
-  outline: 2px solid var(--str-chat__border-utility-focused);
-  outline-offset: 2px;
+  outline: none;
+}
+.str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image:focus-visible::before,
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image:focus-visible::before,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 2px var(--str-chat__brand-300);
+  z-index: 1;
 }
 
 @keyframes str-chat__modal-gallery-loading-shimmer {
@@ -3829,13 +3931,13 @@ to create clearer separation from the base surface.
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2));
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main {
   height: 100%;
   overflow-y: auto;
   scrollbar-gutter: stable both-edges;
   scrollbar-width: thin;
-  padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2));
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main .str-chat__channel-list-empty {
   height: 100%;
@@ -3911,7 +4013,7 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__spacing-xxs);
   position: relative;
 }
-.str-chat__channel-list-item-container:has(.str-chat__channel-list-item__action-buttons--active) .str-chat__channel-list-item__action-buttons, .str-chat__channel-list-item-container:hover .str-chat__channel-list-item__action-buttons {
+.str-chat__channel-list-item-container:has(.str-chat__channel-list-item__action-buttons--active) .str-chat__channel-list-item__action-buttons, .str-chat__channel-list-item-container:focus-within .str-chat__channel-list-item__action-buttons, .str-chat__channel-list-item-container:hover .str-chat__channel-list-item__action-buttons {
   display: flex;
 }
 .str-chat__channel-list-item-container .str-chat__channel-list-item__action-buttons {
@@ -4042,7 +4144,7 @@ to create clearer separation from the base surface.
   transform: translate3d(0, -50%, 0);
   visibility: visible;
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button {
   --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
   gap: 4px;
   padding: var(--str-chat__spacing-xs);
@@ -4053,15 +4155,15 @@ to create clearer separation from the base surface.
   background: transparent;
   color: var(--str-chat__text-tertiary);
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button[aria-selected=true] {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button[aria-selected=true] {
   color: var(--str-chat__text-primary);
   background: var(--str-chat__background-core-surface-default);
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button .str-chat__icon {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button .str-chat__icon {
   height: var(--str-chat__icon-size-md);
   width: var(--str-chat__icon-size-md);
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button .str-chat__button__content {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button .str-chat__button__content {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4839,14 +4941,8 @@ to create clearer separation from the base surface.
   .str-chat__message {
     --str-chat-message-options-size: var(--str-chat__message-options-button-size);
   }
-  .str-chat__message .str-chat__message-bubble {
-    width: fit-content(var(--str-chat__message-max-width));
-    max-width: min(100%, var(--str-chat__message-max-width));
-  }
   .str-chat__message.str-chat__message--other .str-chat__message-inner, .str-chat__message.str-chat__message--me .str-chat__message-inner {
     margin-inline: 0;
-    width: fit-content;
-    max-width: min(100%, var(--str-chat__message-max-width));
   }
   .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host, .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host {
     justify-self: flex-start;
@@ -4856,15 +4952,6 @@ to create clearer separation from the base surface.
     margin-inline: 0;
     padding-inline: 0;
   }
-  .str-chat__message.str-chat__message--other .str-chat__message-inner {
-    grid-template-columns: auto var(--str-chat-message-options-size);
-  }
-  .str-chat__message.str-chat__message--me .str-chat__message-inner {
-    grid-template-columns: var(--str-chat-message-options-size) auto;
-  }
-  .str-chat__message.str-chat__message--me .str-chat__message-bubble {
-    justify-self: flex-end;
-  }
 }
 .str-chat__message a {
   text-decoration: none;
@@ -4903,9 +4990,10 @@ to create clearer separation from the base surface.
   grid-area: message;
   display: grid;
   grid-template-areas: "reactions ." "message-bubble options" "replies replies";
-  grid-template-columns: auto 1fr;
+  grid-template-columns: fit-content(var(--str-chat__message-max-width)) auto;
   column-gap: var(--str-chat__space-8);
   position: relative;
+  width: fit-content;
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-reactions-host {
   display: flex;
@@ -4925,7 +5013,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-bubble {
   width: fit-content(var(--str-chat__message-max-width));
-  max-width: var(--str-chat__message-max-width);
+  max-width: min(var(--str-chat__message-max-width), 100%);
   min-width: 0;
   display: flex;
   flex-direction: column;
@@ -5068,7 +5156,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner {
   grid-template-areas: "reminder reminder" ". reactions" "options message-bubble" "replies replies";
-  grid-template-columns: 1fr auto;
+  grid-template-columns: auto fit-content(var(--str-chat__message-max-width));
   margin-inline-start: var(--str-chat-message-options-size);
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
@@ -5119,6 +5207,9 @@ to create clearer separation from the base surface.
 .str-chat__message.str-chat__message--has-attachment {
   --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
 }
+.str-chat__message.str-chat__message--has-attachment .str-chat__message-bubble {
+  width: 100%;
+}
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
   padding: 0;
 }
@@ -5488,6 +5579,10 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-md);
 }
 .str-chat .str-chat__attachment-preview-audio,
+.str-chat .str-chat__attachment-preview-voice-recording {
+  --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming);
+}
+.str-chat .str-chat__attachment-preview-audio,
 .str-chat .str-chat__attachment-preview-file,
 .str-chat .str-chat__attachment-preview-voice-recording,
 .str-chat .str-chat__attachment-preview-unsupported {
@@ -6067,12 +6162,12 @@ to create clearer separation from the base surface.
 .str-chat .str-chat__message-composer-controls .str-chat__textarea 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%;
-  font-size: var(--str-chat__typography-font-size-md);
   scrollbar-width: none;
 }
 .str-chat .str-chat__message-composer-controls .str-chat__emoji-picker-button {
@@ -6783,7 +6878,7 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__spacing-xs);
   width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--str-chat__spacing-xs));
   max-width: 100%;
-  min-width: 260px;
+  min-width: min(260px, 100%);
   font: var(--str-chat__font-caption-default);
 }
 .str-chat .str-chat__poll button {
@@ -7189,13 +7284,12 @@ to create clearer separation from the base surface.
 
 .str-chat__reaction-selector {
   display: flex;
-  padding-inline-start: var(--str-chat__spacing-xxs, 0);
-  padding-inline-end: var(--str-chat__spacing-xs, 0);
-  padding-block: var(--str-chat__spacing-xxs, 0);
+  padding-inline: var(--str-chat__spacing-xxs);
+  padding-block: var(--str-chat__spacing-xxs);
   align-items: center;
   gap: var(--str-chat__spacing-xs);
-  border-radius: var(--str-chat__radius-4xl, 32px);
-  background: var(--str-chat__background-core-elevation-2, #fff);
+  border-radius: var(--str-chat__radius-4xl);
+  background: var(--str-chat__background-core-elevation-2);
   box-shadow: var(--str-chat__box-shadow-3);
 }
 .str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list) {
@@ -7237,12 +7331,15 @@ to create clearer separation from the base surface.
   width: var(--str-chat__icon-size-sm);
   height: var(--str-chat__icon-size-sm);
 }
+.str-chat__reaction-selector:has(.str-chat__reaction-selector__add-button) {
+  padding-inline-end: var(--str-chat__spacing-xs);
+}
 .str-chat__reaction-selector .str-chat__reaction-selector-list {
   list-style: none;
-  margin: var(--str-chat__spacing-none, 0);
-  padding: var(--str-chat__spacing-none, 0);
+  margin: var(--str-chat__spacing-none);
+  padding: var(--str-chat__spacing-none);
   display: flex;
-  gap: var(--str-chat__space-2, 2px);
+  gap: var(--str-chat__space-2);
 }
 .str-chat__reaction-selector .str-chat__reaction-selector-list .str-chat__reaction-selector-list__item {
   display: flex;
@@ -7664,8 +7761,7 @@ to create clearer separation from the base surface.
   border: none;
   background: none;
   width: 100%;
-  font-size: inherit;
-  line-height: inherit;
+  font: inherit;
 }
 .str-chat__search-bar .str-chat__search-bar__input-wrapper .str-chat__search-bar__input:focus {
   outline: none;
@@ -7689,7 +7785,6 @@ to create clearer separation from the base surface.
   min-height: 0;
 }
 .str-chat__search-results .str-chat__search-results-header {
-  overflow-x: auto;
   scrollbar-width: none;
 }
 .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons {