stream-chat-react 14.0.0-beta.6 → 14.0.0-beta.7

package/dist/css/index.css

@@ -684,6 +684,8 @@
   --badge-text: var(--text-primary);
   --badge-bg-default: #ffffff;
   --badge-text-on-accent: #ffffff;
+  --badge-text-on-inverse: #ffffff;
+  --badge-bg-inverse: var(--chrome-1000);
   /* ─── Control (remove, progress bar, toggle, playback, checkbox, play button, thumb, radio) ─── */
   --control-remove-control-bg: #1a1b25;
   --control-remove-control-icon: #ffffff;
@@ -927,6 +929,104 @@
   --avatar-presence-border: var(--border-core-inverse);
 }
 
+/* Numeric styles are used for compact, layout-critical UI elements such as:
+    - badge counts,
+    - avatar initials,
+    - keyboard key labels, and
+    - numeric labels inside pills.
+    Numeric tokens are classified as layout-stable UI indicators, not content text. */
+.str-chat {
+  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
+  --str-chat__font-family:
+    var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+  --str-chat__font-heading-xs: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
+    var(--str-chat__font-family);
+  --str-chat__font-heading-sm: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-md) / var(--typography-line-height-normal)
+    var(--str-chat__font-family);
+  --str-chat__font-heading-md: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-lg) / var(--typography-line-height-relaxed)
+    var(--str-chat__font-family);
+  --str-chat__font-heading-lg: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-xl) / var(--typography-line-height-relaxed)
+    var(--str-chat__font-family);
+  --str-chat__font-body-default: normal var(--typography-font-weight-regular)
+    var(--typography-font-size-md) / var(--typography-line-height-normal)
+    var(--str-chat__font-family);
+  --str-chat__font-body-emphasis: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-md) / var(--typography-line-height-normal)
+    var(--str-chat__font-family);
+  --str-chat__font-body-link: normal var(--typography-font-weight-regular)
+    var(--typography-font-size-md) / var(--typography-line-height-normal)
+    var(--str-chat__font-family);
+  --str-chat__font-body-link-emphasis: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-md) / var(--typography-line-height-normal)
+    var(--str-chat__font-family);
+  --str-chat__font-caption-default: normal var(--typography-font-weight-regular)
+    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-caption-emphasis: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-caption-link: normal var(--typography-font-weight-regular)
+    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-caption-link-emphasis: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-metadata-default: normal var(--typography-font-weight-regular)
+    var(--typography-font-size-xs) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-metadata-emphasis: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-xs) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-metadata-link: normal var(--typography-font-weight-regular)
+    var(--typography-font-size-xs) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-metadata-link-emphasis: normal var(--typography-font-weight-semi-bold)
+    var(--typography-font-size-xs) / var(--typography-line-height-tight)
+    var(--str-chat__font-family);
+  --str-chat__font-numeric-sm: normal var(--typography-font-weight-bold)
+    var(--typography-font-size-micro) / 100% var(--str-chat__font-family);
+  --str-chat__font-numeric-md: normal var(--typography-font-weight-bold)
+    var(--typography-font-size-xxs) / 100% var(--str-chat__font-family);
+  --str-chat__font-numeric-lg: normal var(--typography-font-weight-bold)
+    var(--typography-font-size-xs) / 100% var(--str-chat__font-family);
+  --str-chat__font-numeric-xl: normal var(--typography-font-weight-bold)
+    var(--typography-font-size-sm) / var(--line-height-line-height-14)
+    var(--str-chat__font-family);
+}
+
+/*
+Shadows on Web communicate visual separation and hierarchy through composed box-shadow layers.
+
+Unlike iOS (single shadow token) and Android (dp elevation), web elevation is constructed
+from multiple shadow layers to simulate depth and ambient light.
+
+Each shadow level consists of predefined layered shadows.
+Components must use these tokens instead of defining custom box-shadow values.
+
+Higher levels combine stronger blur, increased offset, and additional ambient layers
+to create clearer separation from the base surface.
+ */
+.str-chat,
+.str-chat__theme-light {
+  --str-chat__box-shadow-1: var(--light-elevation-1);
+  --str-chat__box-shadow-2: var(--light-elevation-2);
+  --str-chat__box-shadow-3: var(--light-elevation-3);
+  --str-chat__box-shadow-4: var(--light-elevation-4);
+}
+
+.str-chat__theme-dark,
+.str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse {
+  --str-chat__box-shadow-1: var(--dark-elevation-1);
+  --str-chat__box-shadow-2: var(--dark-elevation-2);
+  --str-chat__box-shadow-3: var(--dark-elevation-3);
+  --str-chat__box-shadow-4: var(--dark-elevation-4);
+}
+
 .str-chat {
   font-family: var(--str-chat__font-family);
   font-size: var(--typography-font-size-md);
@@ -1112,6 +1212,27 @@
   min-height: 24px;
 }
 
+.str-chat__media-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  position: absolute;
+  bottom: var(--spacing-xs);
+  inset-inline-start: var(--spacing-xs);
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  border-radius: var(--radius-max);
+  background: var(--badge-bg-inverse);
+  color: var(--badge-text-on-inverse);
+  font: var(--str-chat__numeric-md-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.str-chat__media-badge .str-chat__icon {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+  fill: currentColor;
+}
+
 .str-chat .str-chat__image-placeholder {
   width: 100%;
   height: 100%;
@@ -1260,6 +1381,10 @@
   justify-content: center;
   border-radius: var(--button-radius-full);
 }
+.str-chat .str-chat__button.str-chat__button--circular .str-chat__icon {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
 .str-chat .str-chat__button .str-chat__button__content {
   display: flex;
   align-items: center;
@@ -2200,9 +2325,9 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--space-2)
-    /* The border radius used for the borders of the component */
-    --str-chat__attachment-list-border-radius: 0;
+  --str-chat__attachment-margin: var(--spacing-xs);
+  /* The border radius used for the borders of the component */
+  --str-chat__attachment-list-border-radius: 0;
   /* The text/icon color of the component */
   --str-chat__attachment-list-color: var(--str-chat__text-color);
   /* The background color of the component */
@@ -2297,28 +2422,6 @@
   --str-chat__file-attachment-border-inline-end: none;
   /* Box shadow applied to file attachments */
   --str-chat__file-attachment-box-shadow: none;
-  /* Border radius applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-radius: calc(
-    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
-  );
-  /* Text color used in audio recording widget */
-  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
-  /* Border radius applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
-  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
-  --str-chat__voice-recording-attachment-widget-background-color: transparent;
-  /* Top border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-block-start: none;
-  /* Bottom border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-block-end: none;
-  /* Left (right in RTL layout) border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
-  /* Right (left in RTL layout) border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
-  /* Box shadow applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-box-shadow: none;
   /* Border radius applied to the play / pause button of audio widget */
   --str-chat__audio-attachment-controls-button-border-radius: var(
     --str-chat__border-radius-circle
@@ -2356,7 +2459,7 @@
   --str-chat__video-height: var(--str-chat__attachment-max-width);
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: flex-start;
   gap: var(--spacing-xs);
   min-width: 0;
   background: var(--str-chat__attachment-list-background-color);
@@ -2396,6 +2499,15 @@
   align-items: center;
   overflow: hidden;
 }
+.str-chat__attachment-list .str-chat__message-attachment--audio,
+.str-chat__attachment-list .str-chat__message-attachment--file,
+.str-chat__attachment-list .str-chat__message-attachment--unsupported,
+.str-chat__attachment-list .str-chat__message-attachment--geolocation,
+.str-chat__attachment-list .str-chat__message-attachment--voiceRecording,
+.str-chat__attachment-list .str-chat__message-attachment--card {
+  width: var(--str-chat__attachment-max-width);
+  max-width: 100%;
+}
 .str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) img {
   height: min(var(--str-chat__attachment-max-width), min(var(--str-chat__attachment-max-width, 1000000) / var(--original-width, 1000000), 1px) * var(--original-height, 1000000));
   max-width: var(--str-chat__attachment-max-width);
@@ -2450,40 +2562,6 @@
   max-width: calc(var(--str-chat__attachment-max-width) - var(--space-24));
   max-height: calc(var(--str-chat__attachment-max-width) - var(--space-24));
 }
-.str-chat__attachment-list .str-chat__message-attachment-unsupported {
-  background: var(--str-chat__file-attachment-background-color);
-  color: var(--str-chat__file-attachment-color);
-  box-shadow: var(--str-chat__file-attachment-box-shadow);
-  border-radius: var(--str-chat__file-attachment-border-radius);
-  border-block-start: var(--str-chat__file-attachment-border-block-start);
-  border-block-end: var(--str-chat__file-attachment-border-block-end);
-  border-inline-start: var(--str-chat__file-attachment-border-inline-start);
-  border-inline-end: var(--str-chat__file-attachment-border-inline-end);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-8);
-  column-gap: var(--space-16);
-}
-.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__file-icon {
-  width: calc(var(--str-chat__spacing-px) * 30);
-}
-.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__metadata {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__title {
-  white-space: nowrap;
-  overflow-y: visible;
-  overflow-x: hidden;
-  overflow-x: clip;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
 .str-chat__attachment-list .str-chat__message-attachment-file--item,
 .str-chat__attachment-list .str-chat__message-attachment-audio-widget {
   display: flex;
@@ -2560,48 +2638,17 @@
   border-inline-start: var(--str-chat__file-attachment-border-inline-start);
   border-inline-end: var(--str-chat__file-attachment-border-inline-end);
 }
-.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget {
-  background: var(--str-chat__voice-recording-attachment-widget-background-color);
-  color: var(--str-chat__voice-recording-attachment-widget-color);
-  box-shadow: var(--str-chat__voice-recording-attachment-widget-box-shadow);
-  border-radius: var(--str-chat__voice-recording-attachment-widget-border-radius);
-  border-block-start: var(--str-chat__voice-recording-attachment-widget-border-block-start);
-  border-block-end: var(--str-chat__voice-recording-attachment-widget-border-block-end);
-  border-inline-start: var(--str-chat__voice-recording-attachment-widget-border-inline-start);
-  border-inline-end: var(--str-chat__voice-recording-attachment-widget-border-inline-end);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-block: var(--spacing-xs);
-  padding-inline-start: var(--spacing-xs);
-  padding-inline-end: var(--spacing-sm);
-  min-height: 60px;
-}
-.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__play-button-container {
-  padding: var(--spacing-xxs);
-}
-.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata {
-  min-width: 180px;
-  padding-inline: var(--spacing-xs);
-}
-.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata a {
-  cursor: pointer;
-  text-decoration: none;
-  color: var(--str-chat__voice-recording-attachment-widget-color);
-}
-.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment-download-icon svg {
-  width: calc(var(--str-chat__spacing-px) * 24);
-  height: calc(var(--str-chat__spacing-px) * 16);
-}
-.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
-  min-width: calc(var(--str-chat__spacing-px) * 40);
-  width: calc(var(--str-chat__spacing-px) * 40);
-  font: var(--str-chat__metadata-emphasis-text);
-}
 .str-chat__attachment-list .str-chat__message-attachment-download-icon {
   --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
 }
 
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text:not(.str-chat__message--has-quoted-message) .str-chat__message-bubble {
+  padding: 0;
+}
+
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__attachment-list {
+  --str-chat__attachment-max-width: var(--str-chat__message-max-width);
+}
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
   border: 1px solid var(--chat-border-incoming);
   box-shadow: var(--background-core-elevation-0);
@@ -2609,11 +2656,10 @@
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment {
   background-color: var(--chat-bg-incoming);
 }
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment .str-chat__message-attachment__voice-recording-widget {
-  padding: unset;
-  padding-inline-end: var(--spacing-xxs);
-}
 
+.str-chat__message--me .str-chat__attachment-list {
+  align-items: flex-end;
+}
 .str-chat__message--me .str-chat__message-attachment {
   background-color: var(--chat-bg-attachment-outgoing);
   border-radius: var(--message-bubble-radius-attachment);
@@ -2761,7 +2807,8 @@
   border-inline-start: var(--str-chat__audio-attachment-widget-border-inline-start);
   border-inline-end: var(--str-chat__audio-attachment-widget-border-inline-end);
   flex: 1 1 auto;
-  min-width: 276px;
+  width: 100%;
+  min-width: 0;
 }
 .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--play-controls {
   display: flex;
@@ -2770,6 +2817,7 @@
 }
 .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--data {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxs);
@@ -2806,6 +2854,7 @@
 }
 .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row .str-chat__message-attachment-file--item-size {
   line-height: calc(var(--str-chat__spacing-px) * 14);
+  font: var(--str-chat__font-metadata-default);
 }
 
 .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content {
@@ -2857,7 +2906,8 @@
   display: flex;
   flex-direction: column;
   height: 200px;
-  width: 200px;
+  width: 100%;
+  max-width: var(--str-chat__attachment-max-width);
 }
 .str-chat__message-attachment-geolocation .str-chat__message-attachment-geolocation__location-preview {
   flex: 1;
@@ -2932,6 +2982,10 @@
   width: 100%;
   cursor: default;
 }
+.str-chat__message-attachment-giphy .str-chat__image-placeholder {
+  height: var(--str-chat__gif-height);
+  width: var(--str-chat__attachment-max-width);
+}
 
 .str-chat__giphy-badge {
   display: inline-flex;
@@ -2952,6 +3006,12 @@
   text-transform: uppercase;
 }
 
+.str-chat__message-attachment--giphy--actions .str-chat__message-attachment-giphy {
+  height: var(--str-chat__gif-height);
+}
+.str-chat__message-attachment--giphy--actions .str-chat__message-attachment-giphy img.str-chat__base-image {
+  height: var(--str-chat__gif-height);
+}
 .str-chat__message-attachment--giphy--actions .str-chat__visibility-disclaimer {
   display: flex;
   padding: var(--spacing-sm, 12px);
@@ -3262,6 +3322,132 @@
     background-position: -200% 0;
   }
 }
+.str-chat {
+  /* The border radius used for the borders of file attachments */
+  --str-chat__unsupported-attachment-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+  /* The text/icon color of file attachments */
+  --str-chat__unsupported-attachment-color: var(--str-chat__text-color);
+  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
+  --str-chat__unsupported-attachment-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+  /* The background color of file attachments */
+  --str-chat__unsupported-attachment-background-color: transparent;
+  /* Top border of file attachments */
+  --str-chat__unsupported-attachment-border-block-start: none;
+  /* Bottom border of file attachments */
+  --str-chat__unsupported-attachment-border-block-end: none;
+  /* Left (right in RTL layout) border of file attachments */
+  --str-chat__unsupported-attachment-border-inline-start: none;
+  /* Right (left in RTL layout) border of file attachments */
+  --str-chat__unsupported-attachment-border-inline-end: none;
+  /* Box shadow applied to file attachments */
+  --str-chat__unsupported-attachment-box-shadow: none;
+}
+
+.str-chat__message-attachment-unsupported {
+  background: var(--str-chat__unsupported-attachment-background-color);
+  color: var(--str-chat__unsupported-attachment-color);
+  box-shadow: var(--str-chat__unsupported-attachment-box-shadow);
+  border-radius: var(--str-chat__unsupported-attachment-border-radius);
+  border-block-start: var(--str-chat__unsupported-attachment-border-block-start);
+  border-block-end: var(--str-chat__unsupported-attachment-border-block-end);
+  border-inline-start: var(--str-chat__unsupported-attachment-border-inline-start);
+  border-inline-end: var(--str-chat__unsupported-attachment-border-inline-end);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  column-gap: var(--spacing-xs);
+}
+.str-chat__message-attachment-unsupported .str-chat__icon {
+  height: calc(var(--str-chat__spacing-px) * 20);
+  width: calc(var(--str-chat__spacing-px) * 20);
+}
+.str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__metadata {
+  min-width: 0;
+  flex: 1;
+  height: stretch;
+  display: flex;
+  align-items: center;
+}
+.str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__title {
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  font: var(--str-chat__font-caption-emphasis);
+  color: var(--text-primary);
+  max-width: 100%;
+}
+
+.str-chat {
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+  /* Text color used in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-background-color: transparent;
+  /* Top border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-start: none;
+  /* Bottom border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-end: none;
+  /* Left (right in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
+  /* Right (left in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
+  /* Box shadow applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-box-shadow: none;
+}
+
+.str-chat__message-attachment__voice-recording-widget {
+  background: var(--str-chat__voice-recording-attachment-widget-background-color);
+  color: var(--str-chat__voice-recording-attachment-widget-color);
+  box-shadow: var(--str-chat__voice-recording-attachment-widget-box-shadow);
+  border-radius: var(--str-chat__voice-recording-attachment-widget-border-radius);
+  border-block-start: var(--str-chat__voice-recording-attachment-widget-border-block-start);
+  border-block-end: var(--str-chat__voice-recording-attachment-widget-border-block-end);
+  border-inline-start: var(--str-chat__voice-recording-attachment-widget-border-inline-start);
+  border-inline-end: var(--str-chat__voice-recording-attachment-widget-border-inline-end);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 60px;
+  padding: var(--spacing-xs);
+}
+.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__play-button-container {
+  padding: var(--spacing-xxs);
+}
+.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata {
+  flex: 1;
+  min-width: 0;
+}
+.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata a {
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--str-chat__voice-recording-attachment-widget-color);
+}
+.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment-download-icon svg {
+  width: calc(var(--str-chat__spacing-px) * 24);
+  height: calc(var(--str-chat__spacing-px) * 16);
+}
+.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
+  min-width: calc(var(--str-chat__spacing-px) * 40);
+  width: calc(var(--str-chat__spacing-px) * 40);
+  font: var(--str-chat__metadata-emphasis-text);
+}
+
 .str-chat .str-chat__duration-display {
   letter-spacing: 0;
   min-width: 35px;
@@ -3384,14 +3570,22 @@
   width: 14px;
   border-radius: var(--radius-max);
   cursor: grab;
+  transition: inset-inline-start 250ms linear;
 }
 .str-chat .str-chat__wave-progress-bar__amplitude-bar {
   background: var(--chat-waveform-bar);
   border-radius: var(--radius-max);
+  transition: background 250ms linear;
 }
 .str-chat .str-chat__wave-progress-bar__amplitude-bar--active {
   background: var(--chat-waveform-bar-playing);
 }
+.str-chat .str-chat__wave-progress-bar__track--dragging .str-chat__wave-progress-bar__progress-indicator {
+  transition: none;
+}
+.str-chat .str-chat__wave-progress-bar__track--dragging .str-chat__wave-progress-bar__amplitude-bar {
+  transition: none;
+}
 .str-chat .str-chat__wave-progress-bar__track--playback-initiated .str-chat__wave-progress-bar__progress-indicator {
   background: var(--accent-primary);
 }
@@ -3949,6 +4143,7 @@
   overflow-x: hidden;
   max-width: 100%;
   row-gap: var(--spacing-xxs);
+  width: 100%;
 }
 .str-chat__channel-header .str-chat__channel-header__end {
   flex: 1;
@@ -3970,6 +4165,7 @@
   font: var(--str-chat__caption-default-text);
   color: var(--str-chat__channel-header__data__subtitle-color);
 }
+
 .str-chat {
   /* The border radius used for the borders of the component */
   --str-chat__channel-list-border-radius: 0;
@@ -4145,36 +4341,6 @@
     inset-inline-start: var(--str-chat__chat-view-selector-mobile-width, 0px);
     width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
   }
-  .str-chat__channel-list.str-chat__channel-list--open {
-    pointer-events: auto;
-    transform: translateX(0);
-    transition-delay: 0s, 0s;
-    visibility: visible;
-  }
-}
-.str-chat__channel-list {
-  /* Desktop (≥768px): collapse when nav closed so main content uses space. */
-}
-@media (min-width: 768px) {
-  .str-chat__channel-list.str-chat__channel-list--open {
-    flex-basis: var(--str-chat__channel-list-width);
-    max-width: 100%;
-    min-width: 280px;
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateX(0);
-    width: var(--str-chat__channel-list-width);
-  }
-  .str-chat__channel-list:not(.str-chat__channel-list--open) {
-    flex: 0 0 0;
-    width: 0;
-    min-width: 0;
-    max-width: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-    transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset)));
-  }
 }
 @media (prefers-reduced-motion: reduce) {
   .str-chat__channel-list {
@@ -4185,10 +4351,7 @@
 .str-chat__channel-list__header {
   display: flex;
   align-items: center;
-  opacity: 1;
   padding: var(--spacing-md);
-  transform: translateX(0);
-  transition: opacity var(--str-chat__channel-list-transition-duration, 180ms) var(--str-chat__channel-list-transition-easing, ease), transform var(--str-chat__channel-list-transition-duration, 180ms) var(--str-chat__channel-list-transition-easing, ease);
   width: 100%;
 }
 .str-chat__channel-list__header .str-chat__channel-list__header__title {
@@ -4196,25 +4359,6 @@
   font: var(--str-chat__heading-lg-text);
   color: var(--text-primary);
 }
-.str-chat__channel-list__header.str-chat__channel-list__header--sidebar-collapsed {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset, 8px)));
-}
-@media (max-width: 767px) {
-  .str-chat__channel-list__header {
-    transition: none;
-  }
-  .str-chat__channel-list__header.str-chat__channel-list__header--sidebar-collapsed {
-    opacity: 1;
-    transform: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .str-chat__channel-list__header {
-    transition: none;
-  }
-}
 
 .str-chat__channel-list-item-container {
   padding: var(--spacing-xxs);
@@ -4341,51 +4485,15 @@
   width: 100%;
   height: 100%;
   min-height: 0;
-  position: relative;
-}
-.str-chat__chat-view .str-chat__chat-view__selector {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-md);
-  gap: var(--spacing-xs);
-  border-inline-end: 1px solid var(--str-chat-selector-border-color);
-  background-color: var(--str-chat-selector-background-color);
-  /* Mobile: hide when nav closed, show when nav open. */
-}
-@media (max-width: 767px) {
-  .str-chat__chat-view .str-chat__chat-view__selector.str-chat__chat-view__selector--nav-closed {
-    pointer-events: none;
-    transform: translateX(calc(0px - var(--str-chat__chat-view-selector-transition-offset)));
-    visibility: hidden;
-  }
-  .str-chat__chat-view .str-chat__chat-view__selector {
-    inset-block: 0;
-    inset-inline-start: 0;
-    position: absolute;
-    transition: transform var(--str-chat__chat-view-selector-transition-duration) var(--str-chat__chat-view-selector-transition-easing), visibility 0s linear var(--str-chat__chat-view-selector-transition-duration);
-    width: var(--str-chat__chat-view-selector-mobile-width);
-    z-index: 2;
-  }
-  .str-chat__chat-view .str-chat__chat-view__selector.str-chat__chat-view__selector--nav-open {
-    pointer-events: auto;
-    transform: translateX(0);
-    transition-delay: 0s, 0s;
-    visibility: visible;
-  }
-}
-.str-chat__chat-view .str-chat__chat-view__selector {
-  /* Desktop (≥768px): collapse when nav closed so main content uses space. */
-}
-@media (min-width: 768px) {
-  .str-chat__chat-view .str-chat__chat-view__selector.str-chat__chat-view__selector--nav-closed {
-    width: 0;
-    min-width: 0;
-    overflow: hidden;
-    padding-inline: 0;
-    padding-block: 0;
-    gap: 0;
-    border-inline-end: none;
-  }
+  position: relative;
+}
+.str-chat__chat-view .str-chat__chat-view__selector {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-md);
+  gap: var(--spacing-xs);
+  border-inline-end: 1px solid var(--str-chat-selector-border-color);
+  background-color: var(--str-chat-selector-background-color);
 }
 .str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-container {
   display: flex;
@@ -4981,6 +5089,14 @@
   }
 }
 
+.str-chat__circular-progress-indicator {
+  width: 100%;
+  height: 100%;
+}
+.str-chat__circular-progress-indicator svg {
+  display: block;
+}
+
 .str-chat__share-location-dialog {
   width: 100%;
   max-width: 520px;
@@ -5194,7 +5310,7 @@
   /* The maximum allowed width of the message component */
   --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 400);
   /* The maximum allowed width of the message component, if it has attachments */
-  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
+  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 400);
 }
 
 /* Make spaces between message groups */
@@ -5221,6 +5337,7 @@
   padding-inline: var(--str-chat__message-composer-padding);
 }
 .str-chat__message .str-chat__message-bubble {
+  width: min(100%, var(--str-chat__message-max-width));
   max-width: var(--str-chat__message-max-width);
   display: flex;
   flex-direction: column;
@@ -5239,6 +5356,15 @@
   background-color: transparent;
   overflow: visible;
 }
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-1 .str-chat__message-bubble,
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-1 .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-1 .str-chat__message-inner .str-chat__message-replies-count-button-wrapper, .str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-2 .str-chat__message-bubble,
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-2 .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-2 .str-chat__message-inner .str-chat__message-replies-count-button-wrapper, .str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-3 .str-chat__message-bubble,
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-3 .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
+.str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-3 .str-chat__message-inner .str-chat__message-replies-count-button-wrapper {
+  padding-inline: 0;
+}
 .str-chat__message.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-1 .str-chat__message-inner .str-chat__message-bubble {
   font-size: 64px;
   line-height: 64px;
@@ -5251,11 +5377,6 @@
   font-size: 32px;
   line-height: 32px;
 }
-.str-chat__message.str-chat__message--is-emoji-only .str-chat__message-bubble,
-.str-chat__message.str-chat__message--is-emoji-only .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
-.str-chat__message.str-chat__message--is-emoji-only .str-chat__message-inner .str-chat__message-replies-count-button-wrapper {
-  padding-inline: 0;
-}
 .str-chat__message.str-chat__message--is-emoji-only .str-chat__message-replies-count-button-wrapper::after {
   display: none;
 }
@@ -5264,6 +5385,7 @@
   --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: min(100%, var(--str-chat__message-max-width));
   max-width: var(--str-chat__message-max-width);
 }
 
@@ -5302,9 +5424,20 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-xxs);
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__metadata-emphasis-text);
   color: var(--text-primary-text);
 }
+.str-chat__message .str-chat__message-pin-indicator .str-chat__message-pin-indicator__content .str-chat__message-pin-indicator__icon {
+  display: flex;
+  align-items: center;
+}
+.str-chat__message .str-chat__message-pin-indicator .str-chat__message-pin-indicator__content .str-chat__message-pin-indicator__icon .str-chat__icon {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+}
+.str-chat__message .str-chat__message-pin-indicator .str-chat__message-pin-indicator__content .str-chat__message-pin-indicator__icon .str-chat__icon path {
+  stroke-width: 2px;
+}
 .str-chat__message.str-chat__message--me .str-chat__message-pin-indicator .str-chat__message-pin-indicator__content {
   justify-content: flex-end;
 }
@@ -5331,8 +5464,6 @@
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   padding-inline-start: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
-}
-.str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top):has(.str-chat__message-reactions--flipped-horizontally) {
   margin-inline-end: var(--str-chat__message-reactions-host-offset-x);
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom > .str-chat__message-reactions__list {
@@ -5367,8 +5498,6 @@
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
-}
-.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top):has(.str-chat__message-reactions--flipped-horizontally) {
   margin-inline-start: var(--str-chat__message-reactions-host-offset-x);
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom > .str-chat__message-reactions__list {
@@ -5428,7 +5557,7 @@
   overflow: hidden;
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xxs);
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p {
   white-space: pre-line;
@@ -5455,6 +5584,7 @@
   grid-area: metadata;
   display: flex;
   flex-wrap: wrap;
+  gap: var(--spacing-xxs);
   align-items: center;
   height: var(--size-24);
   color: var(--chat-text-timestamp);
@@ -5474,7 +5604,7 @@
   text-align: end;
 }
 .str-chat__message .str-chat__message--blocked-inner {
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xxs);
 }
 .str-chat__message .str-chat__message--blocked-inner p {
   white-space: pre-line;
@@ -5645,8 +5775,12 @@
   border-inline-end: var(--str-chat__message-also-sent-in-channel-border-inline-end);
   font: var(--str-chat__metadata-emphasis-text);
 }
-.str-chat__message-also-sent-in-channel svg path {
-  stroke-width: 1.5px;
+.str-chat__message-also-sent-in-channel .str-chat__icon {
+  height: var(--spacing-sm);
+  width: var(--spacing-sm);
+}
+.str-chat__message-also-sent-in-channel .str-chat__icon path {
+  stroke-width: 2px;
   stroke: var(--str-chat__message-also-sent-in-channel-color);
 }
 .str-chat__message-also-sent-in-channel .str-chat__message-also-sent-in-channel__link-button {
@@ -5737,6 +5871,9 @@
 }
 .str-chat .str-chat__message .str-chat__quoted-message-preview {
   background-color: var(--chat-bg-attachment-incoming);
+  width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--spacing-xs));
+  max-width: 100%;
+  min-width: 0;
 }
 .str-chat .str-chat__message--me .str-chat__quoted-message-preview {
   background-color: var(--chat-bg-attachment-outgoing);
@@ -5779,8 +5916,12 @@
   border-inline-end: var(--str-chat__message-saved-for-later-border-inline-end);
   font: var(--str-chat__metadata-emphasis-text);
 }
+.str-chat__message-saved-for-later svg {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+}
 .str-chat__message-saved-for-later svg path {
-  stroke-width: 1.5px;
+  stroke-width: 2px;
   stroke: var(--str-chat__message-saved-for-later-color);
 }
 
@@ -6049,6 +6190,7 @@
   padding: var(--spacing-md);
   padding-inline-end: var(--spacing-sm);
   width: 290px;
+  height: 72px;
 }
 .str-chat .str-chat__attachment-preview-audio .str-chat__attachment-preview-file__data {
   padding-inline-end: var(--spacing-xs);
@@ -6083,42 +6225,23 @@
   cursor: pointer;
 }
 .str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__thumbnail-wrapper {
-  border-radius: inherit;
+  border-radius: max(0px, var(--str-chat__attachment-preview-image-border-radius) - 1px);
   overflow: hidden;
   height: 100%;
   width: 100%;
 }
 .str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__thumbnail-wrapper img {
-  width: 72px;
-  height: 72px;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
-.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__video-indicator {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  position: absolute;
-  bottom: var(--spacing-xs);
-  inset-inline-start: var(--spacing-xs);
-  padding: var(--spacing-xxs) var(--spacing-xs);
-  border-radius: var(--radius-max);
-  background: var(--badge-bg-inverse);
-  color: var(--badge-text-on-inverse);
-  font: var(--str-chat__numeric-md-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__video-indicator .str-chat__icon {
-  width: var(--icon-size-xs);
-  height: var(--icon-size-xs);
-  fill: currentColor;
-}
 .str-chat .str-chat__attachment-preview-media__overlay {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   inset: 0;
+  overflow: hidden;
   border-radius: var(--message-bubble-radius-attachment);
 }
 .str-chat .str-chat__attachment-preview-media__overlay:hover::after {
@@ -6141,14 +6264,14 @@
 .str-chat .str-chat__attachment-preview-media__overlay:active {
   background-color: var(--str-chat__attachment-preview-media-overlay-pressed-background-color);
 }
-.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon.str-chat__loading-indicator {
+.str-chat .str-chat__attachment-preview-media__overlay .str-chat__loading-indicator,
+.str-chat .str-chat__attachment-preview-media__overlay .str-chat__progress-indicator {
   width: var(--icon-size-sm);
   height: var(--icon-size-sm);
   position: absolute;
   inset-inline-start: var(--spacing-xxs);
   bottom: var(--spacing-xxs);
   border-radius: var(--radius-max);
-  border-radius: var(--radius-max);
   background: var(--background-core-elevation-0);
   color: var(--accent-primary);
 }
@@ -6205,9 +6328,11 @@
   font-size: var(--typography-font-size-xs);
   line-height: var(--typography-line-height-tight);
 }
-.str-chat .str-chat__attachment-preview-file__info .str-chat__attachment-preview-file__data .str-chat__icon.str-chat__loading-indicator {
+.str-chat .str-chat__attachment-preview-file__info .str-chat__attachment-preview-file__data .str-chat__loading-indicator,
+.str-chat .str-chat__attachment-preview-file__info .str-chat__attachment-preview-file__data .str-chat__progress-indicator {
   width: var(--icon-size-sm);
   height: var(--icon-size-sm);
+  color: var(--accent-primary);
 }
 .str-chat .str-chat__attachment-preview-file__info .str-chat__attachment-preview-file__data .str-chat__attachment-preview-file__fatal-error {
   display: flex;
@@ -6844,6 +6969,9 @@
   min-width: 40px;
   overflow: hidden;
 }
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image img {
+  object-fit: cover;
+}
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator {
   display: flex;
   align-items: center;
@@ -6927,7 +7055,7 @@
   border-color: var(--control-radiocheck-bg-selected, var(--accent-primary));
 }
 .str-chat__send-to-channel-checkbox__container .str-chat__send-to-channel-checkbox__field .str-chat__send-to-channel-checkbox__checkmark {
-  color: var(--control-radiocheck-icon-selected);
+  color: var(--control-checkbox-icon);
   opacity: 0;
   display: flex;
   align-items: center;
@@ -6946,6 +7074,69 @@
   transition: color 0.15s ease, border-color 0.15s ease;
 }
 
+.str-chat {
+  /* The border radius used for the borders of file attachments */
+  --str-chat__unsupported-attachment-preview-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+  /* The text/icon color of file attachments */
+  --str-chat__unsupported-attachment-preview-color: var(--str-chat__text-color);
+  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
+  --str-chat__unsupported-attachment-preview-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+  /* The background color of file attachments */
+  --str-chat__unsupported-attachment-preview-background-color: transparent;
+  /* Top border of file attachments */
+  --str-chat__unsupported-attachment-preview-border-block-start: none;
+  /* Bottom border of file attachments */
+  --str-chat__unsupported-attachment-preview-border-block-end: none;
+  /* Left (right in RTL layout) border of file attachments */
+  --str-chat__unsupported-attachment-preview-border-inline-start: none;
+  /* Right (left in RTL layout) border of file attachments */
+  --str-chat__unsupported-attachment-preview-border-inline-end: none;
+  /* Box shadow applied to file attachments */
+  --str-chat__unsupported-attachment-preview-box-shadow: none;
+}
+
+.str-chat__attachment-preview-unsupported {
+  background: var(--str-chat__unsupported-attachment-preview-background-color);
+  color: var(--str-chat__unsupported-attachment-preview-color);
+  box-shadow: var(--str-chat__unsupported-attachment-preview-box-shadow);
+  border-radius: var(--str-chat__unsupported-attachment-preview-border-radius);
+  border-block-start: var(--str-chat__unsupported-attachment-preview-border-block-start);
+  border-block-end: var(--str-chat__unsupported-attachment-preview-border-block-end);
+  border-inline-start: var(--str-chat__unsupported-attachment-preview-border-inline-start);
+  border-inline-end: var(--str-chat__unsupported-attachment-preview-border-inline-end);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  column-gap: var(--spacing-xs);
+}
+.str-chat__attachment-preview-unsupported .str-chat__icon {
+  height: calc(var(--str-chat__spacing-px) * 20);
+  width: calc(var(--str-chat__spacing-px) * 20);
+}
+.str-chat__attachment-preview-unsupported .str-chat__attachment-preview-unsupported__metadata {
+  min-width: 0;
+  flex: 1;
+  height: stretch;
+  display: flex;
+  align-items: center;
+}
+.str-chat__attachment-preview-unsupported .str-chat__attachment-preview-unsupported__title {
+  white-space: nowrap;
+  overflow-y: visible;
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  font: var(--str-chat__font-caption-emphasis);
+  color: var(--text-primary);
+  max-width: 100%;
+  height: fit-content;
+}
+
 .str-chat__main-panel-inner {
   width: 100%;
   height: 100%;
@@ -7228,7 +7419,6 @@
   align-items: center;
   gap: var(--spacing-xs);
   min-height: 48px;
-  min-width: 200px;
   max-width: 100%;
   padding: var(--spacing-xs);
   position: relative;
@@ -7243,6 +7433,7 @@
   display: flex;
   flex: 1 1 auto;
   gap: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs) var(--spacing-xs);
 }
 .str-chat__notification .str-chat__notification-content .str-chat__notification-icon {
   display: flex;
@@ -7430,8 +7621,9 @@
   flex-direction: column;
   gap: var(--spacing-xl);
   padding: var(--spacing-xs);
+  width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--spacing-xs));
+  max-width: 100%;
   min-width: 260px;
-  max-width: 400px;
   font-size: var(--typography-font-size-sm);
   font-weight: var(--typography-font-weight-regular);
   line-height: var(--typography-line-height-tight);
@@ -7856,9 +8048,8 @@
   align-items: center;
   gap: var(--spacing-xs);
   border-radius: var(--radius-4xl, 32px);
-  border: 1px solid var(--border-core-surface-subtle, #e2e6ea);
   background: var(--background-core-elevation-2, #fff);
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--light-elevation-3);
 }
 .str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list) {
   padding: 0;
@@ -7869,7 +8060,27 @@
   scrollbar-gutter: stable;
   scrollbar-width: none;
   border-radius: var(--radius-lg);
-  max-height: 250px;
+  max-height: 320px;
+}
+.str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list)::before, .str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list)::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  inset-inline-start: 0;
+  height: var(--size-16);
+}
+.str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list)::after {
+  bottom: 0;
+  border-end-end-radius: inherit;
+  border-end-start-radius: inherit;
+  background: linear-gradient(to bottom, transparent 5%, var(--background-core-elevation-0) 95%);
+}
+.str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list)::before {
+  z-index: 1;
+  top: 0;
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  background: linear-gradient(to top, transparent 5%, var(--background-core-elevation-0) 95%);
 }
 .str-chat__reaction-selector .str-chat__reaction-selector__add-button {
   width: 32px;
@@ -7879,25 +8090,6 @@
   width: var(--icon-size-sm);
   height: var(--icon-size-sm);
 }
-.str-chat__reaction-selector .str-chat__reaction-selector-extended-list {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  height: 100%;
-  padding-block: var(--spacing-md);
-  padding-inline: var(--spacing-sm);
-}
-.str-chat__reaction-selector .str-chat__reaction-selector-extended-list .str-chat__reaction-selector-extended-list__button .str-chat__reaction-icon {
-  height: var(--emoji-md);
-  width: var(--emoji-md);
-  font-size: var(--emoji-md);
-  letter-spacing: var(--typography-letter-spacing-default);
-  font-style: normal;
-  line-height: 0;
-  font-family: system-ui;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 .str-chat__reaction-selector .str-chat__reaction-selector-list {
   list-style: none;
   margin: var(--spacing-none, 0);
@@ -7943,6 +8135,26 @@
   font-family: system-ui, sans-serif;
 }
 
+.str-chat__reaction-selector-extended-list {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: 100%;
+  padding-block: var(--spacing-md);
+  padding-inline: var(--spacing-sm);
+}
+.str-chat__reaction-selector-extended-list .str-chat__reaction-selector-extended-list__button .str-chat__reaction-icon {
+  height: var(--emoji-md);
+  width: var(--emoji-md);
+  font-size: var(--emoji-md);
+  letter-spacing: var(--typography-letter-spacing-default);
+  font-style: normal;
+  line-height: 0;
+  font-family: system-ui;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .str-chat__message-reactions {
   display: flex;
 }
@@ -8040,20 +8252,41 @@
   max-width: 256px;
   min-width: min(90vw, 256px);
 }
-.str-chat__message-reactions-detail::after {
+.str-chat__message-reactions-detail:has(.str-chat__reaction-selector-extended-list)::before, .str-chat__message-reactions-detail:has(.str-chat__reaction-selector-extended-list)::after {
   content: "";
   position: absolute;
   width: 100%;
-  bottom: 0;
   inset-inline-start: 0;
-  height: var(--size-12);
+  height: var(--size-16);
+}
+.str-chat__message-reactions-detail:has(.str-chat__reaction-selector-extended-list)::after {
+  bottom: 0;
   border-end-end-radius: inherit;
   border-end-start-radius: inherit;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 130%);
+  background: linear-gradient(to bottom, transparent 5%, var(--background-core-elevation-0) 95%);
+}
+.str-chat__message-reactions-detail:has(.str-chat__reaction-selector-extended-list)::before {
+  z-index: 1;
+  top: 0;
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  background: linear-gradient(to top, transparent 5%, var(--background-core-elevation-0) 95%);
+}
+.str-chat__message-reactions-detail:has(.str-chat__reaction-selector-extended-list) {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding: 0;
+  display: block;
+  scrollbar-width: none;
+  max-height: 320px;
+  max-width: unset;
+  min-width: unset;
 }
 .str-chat__message-reactions-detail {
   font-family: var(--typography-font-family-sans);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 12px 24px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--light-elevation-3);
   padding-block-start: var(--spacing-xxs);
   display: flex;
   flex-direction: column;
@@ -8074,7 +8307,7 @@
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list {
   list-style: none;
   margin: 0;
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
   padding-block: var(--spacing-xs);
   display: flex;
   flex-wrap: wrap;
@@ -8126,6 +8359,7 @@
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button {
   box-shadow: unset;
+  min-width: var(--size-48);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button .str-chat__message-reactions-detail__reaction-type-list-item-icon {
   font-family: system-ui;
@@ -8133,10 +8367,46 @@
   font-style: normal;
   line-height: var(--typography-line-height-normal);
 }
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button .str-chat__message-reactions-detail__reaction-type-list-item-icon .str-chat__icon {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button .str-chat__message-reactions-detail__reaction-type-list-item-icon:has(.str-chat__icon) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button .str-chat__message-reactions-detail__reaction-type-list-item-count {
   color: var(--reaction-text);
   font: var(--str-chat__metadata-emphasis-text);
 }
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container {
+  position: relative;
+  border-radius: inherit;
+}
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container::before, .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  inset-inline-start: 0;
+  height: var(--size-16);
+}
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container::after {
+  bottom: 0;
+  border-end-end-radius: inherit;
+  border-end-start-radius: inherit;
+  background: linear-gradient(to bottom, transparent 5%, var(--background-core-elevation-0) 95%);
+}
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container::before {
+  z-index: 1;
+  top: 0;
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  background: linear-gradient(to top, transparent 5%, var(--background-core-elevation-0) 95%);
+}
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container::before {
+  display: none;
+}
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list {
   overflow-x: hidden;
   overflow-y: auto;
@@ -8145,10 +8415,7 @@
   scrollbar-width: none;
   position: relative;
   padding-block-end: var(--spacing-xxs);
-  max-height: 100px;
-}
-.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list:has(.str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-button:nth-child(-n+3)) {
-  max-height: 106px;
+  max-height: 180px;
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__skeleton-item {
   padding-block: var(--spacing-xxs);
@@ -8187,6 +8454,7 @@
   align-items: center;
   gap: var(--spacing-xs);
   padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs));
+  max-height: var(--size-40);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-icon {
   font-family: system-ui;
@@ -8197,7 +8465,6 @@
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-info {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xxxs);
   flex-grow: 1;
   min-width: 0;
 }
@@ -8262,10 +8529,6 @@
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
 }
-.str-chat__search-bar .str-chat__search-bar__input-wrapper .str-chat__icon {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
-}
 .str-chat__search-bar .str-chat__search-bar__exit-search-button {
   flex-shrink: 0;
 }
@@ -8528,7 +8791,9 @@
   overflow-x: hidden;
   max-width: 100%;
   row-gap: var(--spacing-xxs);
+  width: 100%;
   align-items: start;
+  flex: 1;
 }
 .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle,
 .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-title {
@@ -8542,11 +8807,9 @@
   overflow-y: hidden;
 }
 .str-chat__thread-header .str-chat__thread-header__start {
-  flex: 1;
   display: flex;
 }
 .str-chat__thread-header .str-chat__thread-header__end {
-  flex: 1;
   display: flex;
   justify-content: flex-end;
 }
@@ -8560,13 +8823,16 @@
   background-color: transparent;
   border: none;
 }
-.str-chat__thread-header .str-chat__close-thread-button svg {
+.str-chat__thread-header .str-chat__close-thread-button .str-chat__icon {
   fill: var(--str-chat__thread-color);
 }
 
 .str-chat__chat-view__threads .str-chat__thread-header .str-chat__thread-header-details {
   align-items: center;
 }
+.str-chat__chat-view__threads .str-chat__thread {
+  border: none;
+}
 
 /* Only available in React SDK. */
 .str-chat {
@@ -8686,41 +8952,6 @@
     width: var(--str-chat__thread-list-mobile-width);
     z-index: 1;
   }
-  .str-chat__thread-list-container.str-chat__thread-list-container--open {
-    box-shadow: var(--str-chat__thread-list-box-shadow);
-    pointer-events: auto;
-    transform: translateX(0);
-    transition-delay: 0s, 0s;
-    visibility: visible;
-  }
-  .str-chat__chat-view .str-chat__thread-list-container.str-chat__thread-list-container--open {
-    inset-inline-start: var(--str-chat__chat-view-selector-mobile-width, 0px);
-    width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
-  }
-}
-.str-chat__thread-list-container {
-  /* Desktop (≥768px): collapse when nav closed so main content uses space. */
-}
-@media (min-width: 768px) {
-  .str-chat__thread-list-container.str-chat__thread-list-container--open {
-    flex-basis: var(--str-chat__thread-list-width);
-    max-width: 100%;
-    min-width: var(--str-chat__thread-list-min-width);
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateX(0);
-    width: var(--str-chat__thread-list-width);
-  }
-  .str-chat__thread-list-container:not(.str-chat__thread-list-container--open) {
-    flex: 0 0 0;
-    width: 0;
-    min-width: 0;
-    max-width: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-    transform: translateX(calc(0px - var(--str-chat__thread-list-transition-offset)));
-  }
 }
 @media (prefers-reduced-motion: reduce) {
   .str-chat__thread-list-container {
@@ -8795,11 +9026,8 @@
 .str-chat__thread-list__header {
   display: flex;
   align-items: center;
-  opacity: 1;
   padding: var(--spacing-md);
   height: var(--str-chat__channel-header-height);
-  transform: translateX(0);
-  transition: opacity var(--str-chat__channel-list-transition-duration, 180ms) var(--str-chat__channel-list-transition-easing, ease), transform var(--str-chat__channel-list-transition-duration, 180ms) var(--str-chat__channel-list-transition-easing, ease);
   width: 100%;
 }
 .str-chat__thread-list__header .str-chat__thread-list__header__title {
@@ -8807,25 +9035,6 @@
   font: var(--str-chat__heading-lg-text);
   color: var(--text-primary);
 }
-.str-chat__thread-list__header.str-chat__thread-list__header--sidebar-collapsed {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset, 8px)));
-}
-@media (max-width: 767px) {
-  .str-chat__thread-list__header {
-    transition: none;
-  }
-  .str-chat__thread-list__header.str-chat__thread-list__header--sidebar-collapsed {
-    opacity: 1;
-    transform: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .str-chat__thread-list__header {
-    transition: none;
-  }
-}
 
 .str-chat__thread-list-item-container {
   border-bottom: 1px solid var(--border-core-subtle);
@@ -9085,7 +9294,7 @@
   height: 48px;
   width: 48px;
   border-radius: var(--radius-max);
-  background-color: var(--control-play-control-bg);
+  background-color: var(--control-play-button-bg);
   left: calc(50% - 24px);
   top: calc(50% - 24px);
 }
@@ -9096,7 +9305,7 @@
 }
 .str-chat .str-chat__message-attachment__video-thumbnail .str-chat__message-attachment__video-thumbnail__play-indicator svg path,
 .str-chat .str-chat__message-attachment__video-thumbnail .str-chat__button.str-chat__button--solid.str-chat__message-attachment__video-thumbnail__play-indicator svg path {
-  fill: var(--control-play-control-icon);
+  fill: var(--control-play-button-icon);
 }
 
 /*# sourceMappingURL=index.css.map */