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

package/dist/css/index.css

@@ -19,65 +19,9 @@
 .str-chat {
   /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
   --str-chat__spacing-px: 1px;
-  /* Used for margins and paddings */
-  --str-chat__spacing-0_5: var(--space-2);
-  /* Used for margins and paddings */
-  --str-chat__spacing-1: var(--space-4);
-  /* Used for margins and paddings */
-  --str-chat__spacing-1_5: calc(var(--space-4) + var(--space-2));
-  /* Used for margins and paddings */
-  --str-chat__spacing-2: var(--space-8);
-  /* Used for margins and paddings */
-  --str-chat__spacing-2_5: calc(var(--space-8) + var(--space-2));
-  /* Used for margins and paddings */
-  --str-chat__spacing-3: calc(var(--space-8) + var(--space-4));
-  /* Used for margins and paddings */
-  --str-chat__spacing-3_5: calc(var(--space-12) + var(--space-2));
-  /* Used for margins and paddings */
-  --str-chat__spacing-4: var(--space-16);
-  /* Used for margins and paddings */
-  --str-chat__spacing-5: var(--space-20);
-  /* Used for margins and paddings */
-  --str-chat__spacing-6: var(--space-24);
-  /* Used for margins and paddings */
-  --str-chat__spacing-7: calc(var(--space-24) + var(--space-4));
-  /* Used for margins and paddings */
-  --str-chat__spacing-8: var(--space-32);
-  /* Used for margins and paddings */
-  --str-chat__spacing-9: calc(var(--space-32) + var(--space-4));
-  /* Used for margins and paddings */
-  --str-chat__spacing-10: var(--space-40);
-  /* Used for margins and paddings */
-  --str-chat__spacing-11: calc(var(--space-40) + var(--space-4));
-  /* Used for margins and paddings */
-  --str-chat__spacing-12: calc(var(--space-48));
-  /* Used for margins and paddings */
-  --str-chat__spacing-14: calc(var(--space-48) + var(--space-8));
-  /* Used for margins and paddings */
-  --str-chat__spacing-16: var(--space-64);
 }
 
 .str-chat {
-  /* Border radius used for squared elements */
-  --str-chat__border-radius-none: var(--radius-none);
-  /* Border radius used for subtle rounding */
-  --str-chat__border-radius-xxs: var(--radius-xxs);
-  /* Border radius used for subtle rounding */
-  --str-chat__border-radius-xs: var(--radius-xs);
-  /* Border radius used for slightly rounded elements */
-  --str-chat__border-radius-sm: var(--radius-sm);
-  /* Border radius used for slightly rounded elements */
-  --str-chat__border-radius-md: var(--radius-md);
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-lg: var(--radius-lg);
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-xl: var(--radius-xl);
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-2xl: var(--radius-2xl);
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-3xl: var(--radius-3xl);
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-4xl: var(--radius-4xl);
   /* Border radius used for circular elements */
   --str-chat__border-radius-circle: var(--radius-max);
   /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
@@ -91,10 +35,10 @@
     var(--typography-font-size-xs) / var(--typography-line-height-tight)
     var(--str-chat__font-family);
   --str-chat__caption-emphasis-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__caption-default-text: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__body-emphasis-text: normal var(--typography-font-weight-semi-bold)
     var(--typography-font-size-md) / var(--typography-line-height-normal)
@@ -119,54 +63,18 @@
   --str-chat__numeric-xl-text: normal var(--typography-font-weight-bold)
     var(--typography-font-size-sm) / 100% var(--str-chat__font-family);
   color: var(--text-primary, #1a1b25);
-  /* The font used for caption texts */
-  --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family);
-  /* The font used for caption texts with emphasize */
-  --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
-  /* The font used for caption texts with emphasize */
-  --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
-  /* The font used for body texts */
-  --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
-  /* The font used for body texts with emphasize */
-  --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
-  /* The font used for body texts */
-  --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
-  /* The font used for body texts with emphasize */
-  --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
-  /* The font used for subtitle texts */
-  --str-chat__subtitle-text: 1rem/1.25 var(--str-chat__font-family);
-  /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
-  /* The font used for subtitle texts */
-  --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
-  /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
-  /* The font used for headline texts */
-  --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
-  /* The font used for headline texts */
-  --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family);
 }
 
 .str-chat,
 .str-chat__theme-light {
   /* Used for emphasis, brands can inject their main color using this variable */
   --str-chat__primary-color: var(--accent-primary);
-  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
-  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
-  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
-  --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
-  /* Used to indicate that a UI element with primary color is in an active state */
-  --str-chat__active-primary-color: var(--str-chat__blue600);
   /* If the primary color is used as a background, text/icons are displayed in this color */
   --str-chat__on-primary-color: var(--str-chat__grey50);
   /* Used as a background color for the main chat UI components */
   --str-chat__background-color: var(--str-chat__grey50);
   /* Used as a background color for the main chat UI components */
   --str-chat__secondary-background-color: var(--str-chat__grey50);
-  /* Used as a background color to give emphasis, but less vibrant than the primary color */
-  --str-chat__primary-surface-color: var(--str-chat__blue100);
-  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
-  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
   /* A neutral color used to give emphasis to different surfaces */
   --str-chat__surface-color: var(--str-chat__grey300);
   /* A neutral color used to give emphasis to different surfaces */
@@ -179,8 +87,6 @@
   --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
   /* Used for displaying disabled UI elements (typically buttons) */
   --str-chat__disabled-color: var(--str-chat__grey400);
-  /* Used for text/icon colors if disabled color is used as a background color */
-  --str-chat__on-disabled-color: var(--str-chat__grey50);
   /* Used for error messages, and destructive actions */
   --str-chat__danger-color: var(--str-chat__red400);
   /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
@@ -189,16 +95,10 @@
   --str-chat__unread-badge-color: var(--str-chat__red400);
   /* Used for text/icon colors if unread badge color is used as a background color */
   --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-  /* The background color used for overlays */
-  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
   /* The background color used for subtle overlays */
   --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
   /* The text/icon color used on subtle overlays */
   --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-  /* The background color used for opaque surfaces */
-  --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
-  /* The text color used on opaque surfaces */
-  --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
   /* If a component has a box shadow applied to it, this will be the color used for the shadow */
   --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
   --str-chat__box-shadow-elevation-1:
@@ -210,46 +110,26 @@
 
 .str-chat__theme-dark {
   --str-chat__primary-color: var(--accent-primary);
-  --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6);
-  --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
-  --str-chat__active-primary-color: var(--str-chat__blue600);
   --str-chat__on-primary-color: var(--str-chat__grey50);
   --str-chat__background-color: var(--str-chat__grey950);
   --str-chat__secondary-background-color: var(--str-chat__grey900);
-  --str-chat__primary-surface-color: var(--str-chat__blue900);
-  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950);
   --str-chat__surface-color: var(--str-chat__grey700);
   --str-chat__secondary-surface-color: var(--str-chat__grey800);
   --str-chat__tertiary-surface-color: var(--str-chat__grey900);
   --str-chat__text-color: var(--str-chat__grey50);
   --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
   --str-chat__disabled-color: var(--str-chat__grey600);
-  --str-chat__on-disabled-color: var(--str-chat__grey50);
   --str-chat__danger-color: var(--str-chat__red600);
   --str-chat__message-highlight-color: var(--str-chat__yellow900);
   --str-chat__unread-badge-color: var(--str-chat__red400);
   --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-  --str-chat__overlay-color: rgba(0, 0, 0, 0.7);
   --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4);
   --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-  --str-chat__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
-  --str-chat__opaque-surface-text-color: var(--str-chat__grey900);
   --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8);
   --str-chat__info-color: var(--str-chat__green500);
 }
 
 .str-chat {
-  --str-chat__blue950: #001333;
-  --str-chat__blue900: #00163d;
-  --str-chat__blue800: #002666;
-  --str-chat__blue700: #003999;
-  --str-chat__blue600: #004ccc;
-  --str-chat__blue500: #005fff;
-  --str-chat__blue400: #337eff;
-  --str-chat__blue300: #669fff;
-  --str-chat__blue200: #ccdfff;
-  --str-chat__blue100: #e0f0ff;
-  --str-chat__blue50: #ebf5ff;
   --str-chat__grey950: #080707;
   --str-chat__grey900: #17191c;
   --str-chat__grey800: #1c1e22;
@@ -261,33 +141,10 @@
   --str-chat__grey200: #e9eaed;
   --str-chat__grey100: #f4f4f5;
   --str-chat__grey50: #ffffff;
-  --str-chat__red900: #330003;
-  --str-chat__red800: #660006;
-  --str-chat__red700: #990008;
   --str-chat__red600: #cc000b;
-  --str-chat__red500: #ff000e;
   --str-chat__red400: #ff3742;
-  --str-chat__red300: #ff666e;
-  --str-chat__red200: #ff999f;
-  --str-chat__red100: #ffe5e7;
-  --str-chat__green900: #062d16;
-  --str-chat__green800: #0d592c;
-  --str-chat__green700: #138643;
-  --str-chat__green600: #19b359;
   --str-chat__green500: #20e070;
-  --str-chat__green400: #4ce68c;
-  --str-chat__green300: #79eca9;
-  --str-chat__green200: #a6f2c6;
-  --str-chat__green100: #e9f1ff;
   --str-chat__yellow900: #332500;
-  --str-chat__yellow800: #664900;
-  --str-chat__yellow700: #996e00;
-  --str-chat__yellow600: #cc9200;
-  --str-chat__yellow500: #ffb700;
-  --str-chat__yellow400: #ffd466;
-  --str-chat__yellow300: #ffe299;
-  --str-chat__yellow200: #fff1cc;
-  --str-chat__yellow100: #fff8e5;
 }
 
 /**
@@ -827,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;
@@ -1070,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);
@@ -1103,6 +1060,9 @@
   height: 1em;
   fill: currentColor;
 }
+[dir=rtl] .str-chat__icon[data-rtl-mirror] {
+  transform: scaleX(-1);
+}
 
 .str-chat__icon--exclamation-mark {
   stroke: currentColor;
@@ -1252,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%;
@@ -1400,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;
@@ -1519,16 +1504,6 @@
     var(--background-core-surface-subtle)
   );
   --str-chat__switch-field-border-radius: var(--radius-md);
-  --str-chat__switch-field-title-font-size: var(--typography-font-size-sm, 14px);
-  --str-chat__switch-field-title-font-weight: var(--typography-font-weight-medium, 500);
-  --str-chat__switch-field-title-line-height: var(--typography-line-height-tight, 16px);
-  --str-chat__switch-field-title-color: var(--text-primary, #1a1b25);
-  --str-chat__switch-field-description-font-size: var(--typography-font-size-xs, 12px);
-  --str-chat__switch-field-description-font-weight: var(
-    --typography-font-weight-regular,
-    400
-  );
-  --str-chat__switch-field-description-color: var(--text-tertiary, #687385);
   --str-chat__switch-field__track-off-bg: var(
     --control-toggle-switch-bg,
     var(--border-core-on-surface, #a3acba)
@@ -1574,29 +1549,6 @@
   min-width: 0;
   cursor: pointer;
 }
-.str-chat .str-chat__form__switch-field__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xxs, 4px);
-  min-width: 0;
-}
-.str-chat .str-chat__form__switch-field__title {
-  font-size: var(--str-chat__switch-field-title-font-size);
-  font-weight: var(--str-chat__switch-field-title-font-weight);
-  line-height: var(--str-chat__switch-field-title-line-height);
-  color: var(--str-chat__switch-field-title-color);
-}
-.str-chat .str-chat__form__switch-field__description {
-  font-size: var(--str-chat__switch-field-description-font-size);
-  font-weight: var(--str-chat__switch-field-description-font-weight);
-  line-height: var(--str-chat__switch-field-title-line-height);
-  color: var(--str-chat__switch-field-description-color);
-}
-.str-chat .str-chat__form__switch-field__expanded-content {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
 .str-chat .str-chat__form__switch-field__switch {
   display: flex;
   align-items: center;
@@ -1750,7 +1702,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: calc(-1 * var(--space-4));
+  margin-inline-end: calc(-1 * var(--space-4));
   color: var(--input-text-icon);
 }
 .str-chat__form-text-input--error .str-chat__form-text-input__trailing {
@@ -1850,7 +1802,7 @@
   font: var(--str-chat__heading-sm-text);
 }
 .str-chat__alert-root .str-chat__alert-header .str-chat__alert-header__copy .str-chat__alert-header__description {
-  font: var(--str-chat__caption-default-tex);
+  font: var(--str-chat__caption-default-text);
 }
 .str-chat__alert-root .str-chat__alert-actions {
   display: flex;
@@ -1872,7 +1824,7 @@
 }
 .str-chat__callout .str-chat__callout__close-button {
   position: absolute;
-  right: var(--spacing-xs);
+  inset-inline-end: var(--spacing-xs);
   top: var(--spacing-xs);
 }
 
@@ -2102,7 +2054,7 @@
   overflow-x: clip;
   text-overflow: ellipsis;
   flex: auto;
-  text-align: left;
+  text-align: start;
   color: var(--text-primary);
   white-space: nowrap;
 }
@@ -2221,7 +2173,7 @@
   color: var(--text-primary);
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__description {
-  font: var(--str-chat__body-text);
+  font: var(--str-chat__caption-default-text);
   color: var(--text-secondary);
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__close-button {
@@ -2236,9 +2188,6 @@
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
-.str-chat__prompt .str-chat__prompt__body .str-chat__prompt__title {
-  margin-bottom: 1rem;
-}
 .str-chat__prompt .str-chat__prompt__footer {
   display: flex;
   align-items: center;
@@ -2283,7 +2232,7 @@
   color: var(--text-primary);
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__description {
-  font: var(--str-chat__body-text);
+  font: var(--str-chat__caption-default-text);
   color: var(--text-secondary);
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__go-back-button path {
@@ -2300,9 +2249,6 @@
   flex: 1;
   min-height: 0;
 }
-.str-chat__viewer .str-chat__viewer__body .str-chat__viewer__title {
-  margin-bottom: 1rem;
-}
 .str-chat__viewer .str-chat__viewer__footer {
   display: flex;
   align-items: center;
@@ -2358,7 +2304,7 @@
 }
 .str-chat__modal--open .str-chat__modal__overlay__close-button {
   position: absolute;
-  right: 10px;
+  inset-inline-end: 10px;
   top: 10px;
   padding: var(--spacing-xs);
   color: var(--text-on-accent);
@@ -2379,7 +2325,7 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
+  --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 */
@@ -2476,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
@@ -2535,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);
@@ -2575,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);
@@ -2621,47 +2554,13 @@
 }
 .str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image,
 .str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
-  padding: var(--str-chat__spacing-6);
+  padding: var(--space-24);
 }
 .str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image img,
 .str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image img {
   object-fit: contain;
-  max-width: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
-  max-height: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
-}
-.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(--str-chat__spacing-2);
-  column-gap: var(--str-chat__spacing-4);
-}
-.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%;
+  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-file--item,
 .str-chat__attachment-list .str-chat__message-attachment-audio-widget {
@@ -2680,7 +2579,7 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  row-gap: var(--str-chat__spacing-0_5);
+  row-gap: var(--space-2);
   min-width: 0;
   line-height: var(--typography-line-height-tight);
 }
@@ -2696,7 +2595,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  column-gap: var(--str-chat__spacing-2);
+  column-gap: var(--space-8);
   font-weight: var(--typography-font-weight-semi-bold);
   font-size: var(--typography-font-size-sm);
 }
@@ -2739,68 +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-voice-recording-widget--first-row {
-  overflow-y: visible;
-  overflow-x: hidden;
-  overflow-x: clip;
-  min-width: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--str-chat__spacing-1);
-}
-.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__metadata .str-chat__message-attachment__voice-recording-widget__error-message {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--str-chat__spacing-1);
-}
-.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__attachment-list .str-chat__attachment-type-icon {
-  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
+
+.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);
@@ -2808,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);
@@ -2960,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;
@@ -2969,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);
@@ -3005,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 {
@@ -3056,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;
@@ -3108,7 +2959,7 @@
 }
 .str-chat__message-attachment-geolocation .str-chat__message-attachment-geolocation__status .str-chat__message-attachment-geolocation__status--active .str-chat__message-attachment-geolocation__status--active-until {
   text-transform: lowercase;
-  font: var(--str-chat__caption-text);
+  font: var(--str-chat__metadata-emphasis-text);
 }
 
 .str-chat {
@@ -3131,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;
@@ -3140,7 +2995,7 @@
   align-items: center;
   gap: var(--spacing-xxs, 4px);
   position: absolute;
-  left: 8px;
+  inset-inline-start: 8px;
   bottom: 8px;
   border-radius: var(--radius-lg, 12px);
   background-color: var(--badge-bg-overlay, rgba(0, 0, 0, 0.75));
@@ -3151,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);
@@ -3302,7 +3163,7 @@
   grid-template-rows: 50% 50%;
   overflow: hidden;
   border-radius: var(--radius-lg);
-  gap: var(--str-chat__spacing-0_5);
+  gap: var(--space-2);
   width: var(--str-chat__attachment-max-width);
   max-width: var(--str-chat__attachment-max-width);
   height: var(--str-chat__attachment-max-width);
@@ -3461,40 +3322,166 @@
     background-position: -200% 0;
   }
 }
-.str-chat .str-chat__duration-display {
-  letter-spacing: 0;
-  min-width: 35px;
-  width: 35px;
-  color: var(--text-primary);
-  white-space: nowrap;
-  text-align: center;
-}
-.str-chat .str-chat__duration-display--hasProgress .str-chat__duration-display__time-elapsed {
-  color: var(--str-chat__primary-color);
+.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 .str-chat__button.str-chat__playback-rate-button {
-  text-transform: 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;
-  justify-content: center;
   align-items: center;
-  gap: var(--spacing-xs);
-  min-width: 48px;
-  min-height: 24px;
-  max-height: 24px;
-  padding: var(--button-padding-y-sm) var(--spacing-xs);
-  background-color: inherit;
-  border-radius: var(--button-radius-lg);
-  border: 1px solid var(--control-playback-toggle-border);
-  color: var(--control-playback-toggle-text, var(--text-primary));
-  font: var(--str-chat__metadata-emphasis-text);
+  justify-content: center;
+  padding: var(--spacing-md);
+  column-gap: var(--spacing-xs);
 }
-.str-chat .str-chat__button.str-chat__playback-rate-button:not(:disabled):hover::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--background-utility-hover);
-  pointer-events: none;
+.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;
+  width: 35px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  text-align: center;
+}
+.str-chat .str-chat__duration-display--hasProgress .str-chat__duration-display__time-elapsed {
+  color: var(--str-chat__primary-color);
+}
+
+.str-chat .str-chat__button.str-chat__playback-rate-button {
+  text-transform: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 48px;
+  min-height: 24px;
+  max-height: 24px;
+  padding: var(--button-padding-y-sm) var(--spacing-xs);
+  background-color: inherit;
+  border-radius: var(--button-radius-lg);
+  border: 1px solid var(--control-playback-toggle-border);
+  color: var(--control-playback-toggle-text, var(--text-primary));
+  font: var(--str-chat__metadata-emphasis-text);
+}
+.str-chat .str-chat__button.str-chat__playback-rate-button:not(:disabled):hover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--background-utility-hover);
+  pointer-events: none;
 }
 .str-chat .str-chat__button.str-chat__playback-rate-button:not(:disabled):focus-visible {
   outline: 2px solid var(--border-utility-focused);
@@ -3524,7 +3511,12 @@
   flex: 1;
   min-width: 0;
   cursor: pointer;
-  background: linear-gradient(to right, var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress), var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress));
+  background: linear-gradient(to var(--str-chat__progress-direction, right), var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress), var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress));
+}
+[dir=rtl] .str-chat .str-chat__message-attachment-audio-widget--progress-track {
+  --str-chat__progress-direction: left;
+}
+.str-chat .str-chat__message-attachment-audio-widget--progress-track {
   border-radius: calc(var(--str-chat__spacing-px) * 5);
 }
 .str-chat .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
@@ -3570,7 +3562,7 @@
 }
 .str-chat .str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   border: 2px solid var(--base-white);
   box-shadow: var(--light-elevation-3);
   background: var(--accent-neutral);
@@ -3578,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);
 }
@@ -3615,7 +3615,7 @@
   width: 100%;
   height: 100%;
 }
-.str-chat__avatar .str-chat__icon--person {
+.str-chat__avatar .str-chat__icon {
   width: var(--avatar-icon-size);
   height: var(--avatar-icon-size);
   stroke-width: var(--avatar-icon-stroke-width);
@@ -3643,7 +3643,7 @@
   width: var(--avatar-status-badge-size);
   height: var(--avatar-status-badge-size);
   z-index: 1;
-  left: calc(var(--avatar-size) / 2 + var(--avatar-size) / 2 * cos(var(--avatar-status-badge-angle)) - var(--avatar-status-badge-size) / 2);
+  inset-inline-start: calc(var(--avatar-size) / 2 + var(--avatar-size) / 2 * cos(var(--avatar-status-badge-angle)) - var(--avatar-status-badge-size) / 2);
   top: calc(var(--avatar-size) / 2 + var(--avatar-size) / 2 * sin(var(--avatar-status-badge-angle)) - var(--avatar-status-badge-size) / 2);
   border-radius: var(--radius-max, 9999px);
   border-style: solid;
@@ -3714,15 +3714,15 @@
 }
 .str-chat__avatar-stack.str-chat__avatar-stack--size-xs > .str-chat__avatar:not(:first-child),
 .str-chat__avatar-stack.str-chat__avatar-stack--size-xs .str-chat__avatar-stack__count-badge {
-  margin-left: calc(var(--spacing-xs) * -1);
+  margin-inline-start: calc(var(--spacing-xs) * -1);
 }
 .str-chat__avatar-stack.str-chat__avatar-stack--size-sm > .str-chat__avatar:not(:first-child),
 .str-chat__avatar-stack.str-chat__avatar-stack--size-sm .str-chat__avatar-stack__count-badge {
-  margin-left: calc(var(--spacing-sm) * -1);
+  margin-inline-start: calc(var(--spacing-sm) * -1);
 }
 .str-chat__avatar-stack.str-chat__avatar-stack--size-md > .str-chat__avatar:not(:first-child),
 .str-chat__avatar-stack.str-chat__avatar-stack--size-md .str-chat__avatar-stack__count-badge {
-  margin-left: calc(var(--spacing-sm) * -1);
+  margin-inline-start: calc(var(--spacing-sm) * -1);
 }
 
 .str-chat__avatar-group {
@@ -3768,7 +3768,7 @@
   position: absolute;
   width: var(--avatar-group-online-badge-size);
   height: var(--avatar-group-online-badge-size);
-  right: -2px;
+  inset-inline-end: -2px;
   top: -2px;
   border-radius: var(--radius-max, 9999px);
   border-style: solid;
@@ -3800,27 +3800,27 @@
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(4)) > :nth-child(1) {
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(4)) > :nth-child(2) {
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(4)) > :nth-child(3) {
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(4)) > :last-child {
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(3)):has(> .str-chat__avatar-group__count-badge) > :nth-child(1) {
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(3)):has(> .str-chat__avatar-group__count-badge) > :nth-child(2) {
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(3)):has(> .str-chat__avatar-group__count-badge) > :last-child {
   bottom: 0;
@@ -3830,19 +3830,19 @@
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(3)):not(:has(> .str-chat__avatar-group__count-badge)) > :nth-child(2) {
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(3)):not(:has(> .str-chat__avatar-group__count-badge)) > :last-child {
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(2)) > :nth-child(1) {
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(2)) > :last-child {
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .str-chat__channel {
@@ -4011,8 +4011,6 @@
   --str-chat__channel-border-inline-start: none;
   /* Right (left in RTL layout) border of the component */
   --str-chat__channel-border-inline-end: none;
-  /* The icon color used when no channel is selected */
-  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
   /* The base surface color behind the loading shimmer */
   --str-chat__channel-loading-state-color: var(--background-core-surface);
 }
@@ -4145,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;
@@ -4166,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;
@@ -4267,7 +4267,7 @@
 .str-chat__channel-list .str-chat__channel-list-inner {
   height: 100%;
   overflow: hidden;
-  padding-bottom: var(--str-chat__spacing-2_5);
+  padding-bottom: calc(var(--space-8) + var(--space-2));
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main {
   height: 100%;
@@ -4279,7 +4279,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--str-chat__spacing-3);
+  padding: calc(var(--space-8) + var(--space-4));
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main .str-chat__channel-list-empty p {
   color: var(--text-secondary);
@@ -4288,16 +4288,13 @@
 .str-chat__channel-list .str-chat__load-more-button {
   display: flex;
   justify-content: center;
-  margin: var(--str-chat__spacing-2) 0;
+  margin: var(--space-8) 0;
 }
 .str-chat__channel-list .str-chat__load-more-button .str-chat__load-more-button__button {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.str-chat__channel-list .stream-chat__paginated-list {
-  gap: 0;
-}
 .str-chat__channel-list .str-chat__load-more-button__button {
   background: var(--str-chat__channel-list-load-more-background-color);
   color: var(--str-chat__channel-list-load-more-color);
@@ -4344,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 {
@@ -4384,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 {
@@ -4395,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);
@@ -4429,7 +4374,7 @@
   border-radius: var(--radius-md, 8px);
   background: var(--background-core-elevation-3, #fff);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.06);
-  right: 10px;
+  inset-inline-end: 10px;
   top: 10px;
   padding: var(--spacing-xxs);
 }
@@ -4547,44 +4492,8 @@
   flex-direction: column;
   padding: var(--spacing-md);
   gap: var(--spacing-xs);
-  border-right: 1px solid var(--str-chat-selector-border-color);
+  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;
-  }
 }
 .str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-container {
   display: flex;
@@ -4624,7 +4533,7 @@
   align-items: center;
 }
 .str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-tooltip {
-  left: calc(100% + 8px);
+  inset-inline-start: calc(100% + 8px);
   opacity: 0;
   pointer-events: none;
   position: absolute;
@@ -4750,11 +4659,6 @@
   border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
 }
 
-.str-chat {
-  /* The text color used when no channel is selected */
-  --str-chat__channel-empty-color: var(--text-secondary);
-}
-
 .str-chat__empty-channel {
   --str-chat-icon-color: var(--text-tertiary);
   display: flex;
@@ -4782,10 +4686,6 @@
   height: 32px;
   color: var(--str-chat-icon-color);
 }
-.str-chat__empty-channel .str-chat__empty-channel-notifications {
-  position: absolute;
-  inset-block-end: var(--str-chat__spacing-2);
-}
 .str-chat__empty-channel .str-chat__empty-channel-text {
   margin: 0;
   max-width: 230px;
@@ -5026,10 +4926,10 @@
   pointer-events: none;
 }
 .str-chat .str-chat__gallery__nav-button--prev {
-  left: var(--spacing-sm);
+  inset-inline-start: var(--spacing-sm);
 }
 .str-chat .str-chat__gallery__nav-button--next {
-  right: var(--spacing-sm);
+  inset-inline-end: var(--spacing-sm);
 }
 .str-chat .str-chat__gallery__position-indicator {
   position: absolute;
@@ -5189,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;
@@ -5255,7 +5163,7 @@
   align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-xs);
-  padding-left: var(--spacing-sm);
+  padding-inline-start: var(--spacing-sm);
 }
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-playback .str-chat__recording-timer,
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-preview .str-chat__recording-timer {
@@ -5329,12 +5237,6 @@
   width: auto;
   min-width: 0;
 }
-.str-chat__audio_recorder .str-chat__wave-progress-bar__track-container {
-  max-width: 500px;
-}
-.str-chat__audio_recorder .str-chat__waveform-box-container {
-  max-width: 520px;
-}
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track {
   display: flex;
   min-width: 0;
@@ -5366,11 +5268,8 @@
   --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
   --str-chat__message-border-radius: 0;
   --str-chat__message-color: var(--str-chat__text-color);
-  --str-chat__message-error-message-color: var(--str-chat__danger-color);
-  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
   --str-chat__message-link-color: var(--chat-text-link);
   --str-chat__message-mention-color: var(--str-chat__primary-color);
-  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
   --str-chat__message-background-color: transparent;
   --str-chat__message-highlighted-background-color: var(
     --str-chat__message-highlight-color
@@ -5397,7 +5296,7 @@
   --str-chat__message-bubble-border-inline-start: none;
   --str-chat__message-bubble-border-inline-end: none;
   --str-chat__message-bubble-box-shadow: none;
-  --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md);
+  --str-chat__blocked-message-border-radius: var(--radius-md);
   --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
   --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
   --str-chat__blocked-message-border-block-start: none;
@@ -5405,17 +5304,13 @@
   --str-chat__blocked-message-border-inline-start: none;
   --str-chat__blocked-message-border-inline-end: none;
   --str-chat__blocked-message-box-shadow: none;
-  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
-  --str-chat__translation-notice-active-background-color: var(
-    --str-chat__tertiary-surface-color
-  );
   --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1);
   /* Background color for pinned messages (Figma: background/core/highlight) */
   --str-chat__message-pinned-background-color: var(--background-core-highlight);
   /* 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 */
@@ -5441,12 +5336,8 @@
   --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
   padding-inline: var(--str-chat__message-composer-padding);
 }
-.str-chat__message.str-chat__message-without-touch-support {
-  --str-chat-message-options-size: calc(
-    1 * var(--str-chat__message-options-button-size)
-  );
-}
 .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;
@@ -5465,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;
@@ -5477,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;
 }
@@ -5490,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);
 }
 
@@ -5502,7 +5398,7 @@
 
 .str-chat__message-mention {
   color: var(--str-chat__message-mention-color);
-  font: var(--str-chat__body2-medium-text);
+  font: var(--str-chat__body-emphasis-text);
 }
 
 .str-chat__message {
@@ -5528,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;
 }
@@ -5538,7 +5445,7 @@
   justify-content: flex-end;
 }
 .str-chat__message.str-chat__message--other {
-  column-gap: var(--str-chat__spacing-2);
+  column-gap: var(--space-8);
   justify-items: flex-start;
 }
 .str-chat__message.str-chat__message--other.str-chat__message--with-avatar {
@@ -5557,9 +5464,7 @@
 }
 .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-right: var(--str-chat__message-reactions-host-offset-x);
+  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 {
   justify-content: flex-start;
@@ -5574,7 +5479,7 @@
   grid-template-columns: 1fr auto;
 }
 .str-chat__message.str-chat__message--me {
-  column-gap: var(--str-chat__spacing-2);
+  column-gap: var(--space-8);
   justify-items: flex-end;
 }
 .str-chat__message.str-chat__message--me.str-chat__message--with-avatar {
@@ -5593,9 +5498,7 @@
 }
 .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-left: var(--str-chat__message-reactions-host-offset-x);
+  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 {
   justify-content: flex-end;
@@ -5620,7 +5523,7 @@
   display: grid;
   grid-template-areas: "reactions ." "message-bubble options" "replies replies";
   grid-template-columns: auto 1fr;
-  column-gap: var(--str-chat__spacing-2);
+  column-gap: var(--space-8);
   position: relative;
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-reactions-host {
@@ -5654,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;
@@ -5677,31 +5580,11 @@
 .str-chat__message.str-chat__message--me .str-chat__message-inner:has(.str-chat__message-reactions--bottom) {
   grid-template-areas: "reminder reminder" "options message-bubble" "replies replies" ". reactions";
 }
-.str-chat__message .str-chat__translation-notice {
-  grid-area: translation-notice;
-}
-.str-chat__message .str-chat__translation-notice button {
-  cursor: pointer;
-  padding: 0.25rem 0;
-  margin: 0;
-  font: var(--str-chat__body2-text);
-  color: var(--str-chat__translation-notice-color);
-  border: none;
-  background: none;
-}
-.str-chat__message .str-chat__translation-notice button:active, .str-chat__message .str-chat__translation-notice button:hover {
-  background: var(--str-chat__translation-notice-active-background-color);
-}
-.str-chat__message .str-chat__custom-message-metadata {
-  grid-area: custom-metadata;
-  height: var(--size-24);
-  margin-block-start: var(--spacing-xxs);
-  color: var(--str-chat__message-secondary-color);
-}
 .str-chat__message .str-chat__message-metadata {
   grid-area: metadata;
   display: flex;
   flex-wrap: wrap;
+  gap: var(--spacing-xxs);
   align-items: center;
   height: var(--size-24);
   color: var(--chat-text-timestamp);
@@ -5713,21 +5596,15 @@
   overflow-y: hidden;
   margin-inline-end: var(--spacing-xxs);
 }
-.str-chat__message .str-chat__message-metadata .str-chat__message-sender-name {
-  font: var(--str-chat__caption-medium-text);
-}
 .str-chat__message .str-chat__message-metadata .str-chat__message-edited-indicator {
-  margin-left: var(--spacing-xs);
+  margin-inline-start: var(--spacing-xs);
 }
 .str-chat__message.str-chat__message--me .str-chat__message-metadata {
   justify-content: flex-end;
-  text-align: right;
-}
-.str-chat__message .str-chat__message-is-thread-reply-button-wrapper {
-  grid-area: replies;
+  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;
@@ -5743,11 +5620,6 @@
   border-inline-start: var(--str-chat__blocked-message-border-inline-start);
   border-inline-end: var(--str-chat__blocked-message-border-inline-end);
   padding-block: var(--spacing-xs);
-  font: var(--str-chat__body2-text);
-}
-.str-chat__message .str-chat__emoji-display-fix {
-  display: inline-block;
-  width: 1.25em;
 }
 .str-chat__message .str-chat__message-error-indicator {
   display: none;
@@ -5791,103 +5663,32 @@
     background-color: var(--str-chat__message-active-background-color);
   }
 }
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support),
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) {
+.str-chat__ul,
+.str-chat__virtual-list {
   /* This rule won't be applied in browsers that don't support :has() */
 }
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message-options,
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message-options,
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message-options,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message-options,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message-options,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message-options {
-  display: flex;
-}
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--other .str-chat__message-inner,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--other .str-chat__message-inner {
-  margin-inline-end: 0;
-}
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--me .str-chat__message-inner,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--me .str-chat__message-inner {
-  margin-inline-start: 0;
-}
-.str-chat__ul:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support),
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-.str-chat__message-with-touch-support) {
-  /* Fallback for when :has() is unsupported */
-}
-@supports not selector(:has(a, b)) {
-  .str-chat__ul:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message-options,
-  .str-chat__ul:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message-options,
-  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message-options,
-  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message-options {
-    display: flex;
-  }
-  .str-chat__ul:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
-  .str-chat__ul:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message--other .str-chat__message-inner,
-  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
-  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message--other .str-chat__message-inner {
-    margin-inline-end: 0;
-  }
-  .str-chat__ul:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
-  .str-chat__ul:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message--me .str-chat__message-inner,
-  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
-  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble,
-  .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message--me .str-chat__message-inner {
-    margin-inline-start: 0;
-  }
-}
-
-.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message-inner:hover .str-chat__message-options,
-.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message-inner:hover .str-chat__message-options {
+.str-chat__ul .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message-options,
+.str-chat__ul .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message-options,
+.str-chat__ul .str-chat__li:has(.str-chat__message-options--active) .str-chat__message-options,
+.str-chat__virtual-list .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message-options,
+.str-chat__virtual-list .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message-options,
+.str-chat__virtual-list .str-chat__li:has(.str-chat__message-options--active) .str-chat__message-options {
   display: flex;
 }
-.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message--other .str-chat__message-inner:hover,
-.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message--other .str-chat__message-inner:hover {
+.str-chat__ul .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
+.str-chat__ul .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
+.str-chat__ul .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--other .str-chat__message-inner,
+.str-chat__virtual-list .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
+.str-chat__virtual-list .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
+.str-chat__virtual-list .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--other .str-chat__message-inner {
   margin-inline-end: 0;
 }
-.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message--me .str-chat__message-inner:hover,
-.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message--me .str-chat__message-inner:hover {
+.str-chat__ul .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
+.str-chat__ul .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
+.str-chat__ul .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--me .str-chat__message-inner,
+.str-chat__virtual-list .str-chat__li:hover:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
+.str-chat__virtual-list .str-chat__li:focus-within:not(:has(.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
+.str-chat__virtual-list .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--me .str-chat__message-inner {
   margin-inline-start: 0;
 }
 
@@ -5898,9 +5699,6 @@
 .str-chat__message-inner .str-chat__message-options {
   display: none;
 }
-.str-chat__message-inner .str-chat__message-actions-open.str-chat__message-options {
-  display: flex;
-}
 
 .str-chat__message-inner:focus-within .str-chat__message-options {
   display: flex;
@@ -5938,10 +5736,10 @@
 }
 
 .str-chat__message-with-thread-link.str-chat__message--other .str-chat__message-bubble {
-  border-end-start-radius: calc(var(--str-chat__border-radius-md) / 6);
+  border-end-start-radius: calc(var(--radius-md) / 6);
 }
 .str-chat__message-with-thread-link.str-chat__message--me .str-chat__message-bubble {
-  border-end-end-radius: calc(var(--str-chat__border-radius-md) / 6);
+  border-end-end-radius: calc(var(--radius-md) / 6);
 }
 
 .str-chat__li--top .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar,
@@ -5950,22 +5748,6 @@
   pointer-events: none;
 }
 
-.str-chat__message-with-touch-support .str-chat__message-bubble {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.str-chat__message-with-touch-support.str-chat__message-menu-opened .str-chat__attachments-container,
-.str-chat__message-with-touch-support.str-chat__message-menu-opened .str-chat__message-text-inner {
-  pointer-events: none;
-}
-.str-chat__message-with-touch-support .str-chat__message-inner {
-  margin-inline: 0;
-}
-.str-chat__message-with-touch-support .str-chat__message-options {
-  display: none;
-}
-
 .str-chat {
   --str-chat__message-also-sent-in-channel-color: var(--text-primary);
   --str-chat__message-also-sent-in-channel-background-color: transparent;
@@ -5993,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 {
@@ -6010,7 +5796,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  column-gap: var(--str-chat__spacing-0_5);
+  column-gap: var(--space-2);
   position: relative;
   color: var(--chat-text-timestamp);
 }
@@ -6085,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);
@@ -6127,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);
 }
 
@@ -6202,10 +5995,10 @@
   padding-inline-end: var(--spacing-xl);
 }
 .str-chat__message.str-chat__message--me .str-chat__message-replies-count-button-wrapper::after {
-  border-bottom-right-radius: var(--radius-max);
-  border-right: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-outgoing);
-  border-bottom: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-outgoing);
-  right: 0;
+  border-end-end-radius: var(--radius-max);
+  border-inline-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-outgoing);
+  border-block-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-outgoing);
+  inset-inline-end: 0;
 }
 
 .str-chat__message.str-chat__message--other .str-chat__message-replies-count-button-wrapper {
@@ -6218,10 +6011,10 @@
   padding-inline-start: var(--spacing-xl);
 }
 .str-chat__message.str-chat__message--other .str-chat__message-replies-count-button-wrapper::after {
-  border-bottom-left-radius: var(--radius-max);
-  border-left: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-incoming);
-  border-bottom: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-incoming);
-  left: 0;
+  border-end-start-radius: var(--radius-max);
+  border-inline-start: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-incoming);
+  border-block-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-incoming);
+  inset-inline-start: 0;
 }
 
 .str-chat__message-actions-box {
@@ -6261,8 +6054,7 @@
 .str-chat__message-options .str-chat__message-reactions-button:active {
   color: var(--str-chat__message-options-active-color);
 }
-.str-chat__message-options .str-chat__message-actions-box-button,
-.str-chat__message-options .str-chat__message-actions-container {
+.str-chat__message-options .str-chat__message-actions-box-button {
   position: relative;
 }
 
@@ -6396,11 +6188,12 @@
   flex: 0 1 auto;
   gap: var(--spacing-sm);
   padding: var(--spacing-md);
-  padding-right: var(--spacing-sm);
+  padding-inline-end: var(--spacing-sm);
   width: 290px;
+  height: 72px;
 }
 .str-chat .str-chat__attachment-preview-audio .str-chat__attachment-preview-file__data {
-  padding-right: var(--spacing-xs);
+  padding-inline-end: var(--spacing-xs);
 }
 .str-chat .str-chat__attachment-preview-audio,
 .str-chat .str-chat__attachment-preview-file,
@@ -6427,41 +6220,20 @@
   border-inline-start: var(--str-chat__attachment-preview-image-border-inline-start);
   border-inline-end: var(--str-chat__attachment-preview-image-border-inline-end);
   flex: 0 0 auto;
-  width: 72px;
-  height: 72px;
-  cursor: pointer;
-}
-.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__thumbnail-wrapper {
-  border-radius: inherit;
-  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;
-  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-xxs);
-  left: var(--spacing-xxs);
-  padding-inline: var(--button-padding-x-icon-only-sm);
-  padding-block: var(--button-padding-y-sm);
-  border-radius: var(--str-chat__attachment-preview-media-video-indicator-border-radius);
-  background-color: var(--str-chat__attachment-preview-media-video-indicator-background-color);
-  color: var(--str-chat__attachment-preview-media-video-indicator-color);
-  font-size: var(--typography-font-size-xxs);
-  font-weight: var(--typography-font-weight-bold);
-  line-height: var(--line-height-line-height-10);
+  width: 72px;
+  height: 72px;
+  cursor: pointer;
 }
-.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__video-indicator .str-chat__icon--video-camera {
-  width: 10px;
-  height: 8px;
-  fill: currentColor;
+.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__thumbnail-wrapper {
+  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: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 .str-chat .str-chat__attachment-preview-media__overlay {
   display: flex;
@@ -6469,6 +6241,7 @@
   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 {
@@ -6492,14 +6265,27 @@
   background-color: var(--str-chat__attachment-preview-media-overlay-pressed-background-color);
 }
 .str-chat .str-chat__attachment-preview-media__overlay .str-chat__loading-indicator,
-.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon--exclamation-mark {
-  width: 14px;
-  height: 14px;
+.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);
+  background: var(--background-core-elevation-0);
+  color: var(--accent-primary);
+}
+.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon--exclamation {
+  padding: var(--spacing-xxxs);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
   position: absolute;
-  left: var(--spacing-xxs);
+  inset-inline-start: var(--spacing-xxs);
   bottom: var(--spacing-xxs);
-  border: 2px solid var(--control-remove-control-border);
+  border: 2px solid var(--badge-border);
   border-radius: var(--radius-max);
+  background: var(--badge-bg-error);
+  color: var(--badge-text-on-accent);
 }
 .str-chat .str-chat__attachment-preview-media--upload-error .str-chat__attachment-preview-media__overlay {
   background-color: var(--str-chat__attachment-preview-media-upload-error-overlay-background-color);
@@ -6542,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__loading-indicator {
-  width: var(--size-12);
-  height: var(--size-12);
+.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;
@@ -7181,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;
@@ -7188,7 +6979,7 @@
   height: 20px;
   width: 20px;
   position: absolute;
-  left: 10px;
+  inset-inline-start: 10px;
   top: 10px;
   border-radius: var(--radius-max);
   background-color: var(--control-play-control-bg);
@@ -7208,7 +6999,7 @@
   position: absolute;
   z-index: 1;
   top: -6px;
-  right: -6px;
+  inset-inline-end: -6px;
   background-color: var(--str-chat__attachment-preview-close-icon-background);
   border: 3px solid var(--str-chat__attachment-preview-close-icon-border-color);
   color: var(--str-chat__attachment-preview-close-icon-color);
@@ -7264,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;
@@ -7283,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%;
@@ -7417,8 +7271,8 @@
 .str-chat__jump-to-latest-message .str-chat__jump-to-latest__unread-count {
   position: absolute;
   inset-block-end: 100%;
-  margin-block-end: var(--str-chat__spacing-1);
-  right: -15%;
+  margin-block-end: var(--space-4);
+  inset-inline-end: -15%;
   top: -15%;
 }
 
@@ -7543,7 +7397,7 @@
 }
 .str-chat__virtual-list__loading {
   display: flex;
-  padding-top: var(--str-chat__spacing-2);
+  padding-top: var(--space-8);
   justify-content: center;
   width: 100%;
   position: absolute;
@@ -7565,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;
@@ -7580,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;
@@ -7767,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);
@@ -8193,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;
@@ -8206,35 +8060,36 @@
   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;
   aspect-ratio: 1/1;
 }
-.str-chat__reaction-selector .str-chat__reaction-selector__add-button .str-chat__icon--plus {
+.str-chat__reaction-selector .str-chat__reaction-selector__add-button .str-chat__icon {
   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);
@@ -8280,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;
 }
@@ -8315,6 +8190,7 @@
   border-radius: var(--radius-max);
   border: 1px solid var(--reaction-border);
   background: var(--reaction-bg);
+  color: var(--reaction-text);
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
   font-weight: inherit;
   font-size: inherit;
@@ -8376,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%;
+  inset-inline-start: 0;
+  height: var(--size-16);
+}
+.str-chat__message-reactions-detail:has(.str-chat__reaction-selector-extended-list)::after {
   bottom: 0;
-  left: 0;
-  height: var(--size-12);
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 130%);
+  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: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;
@@ -8410,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;
@@ -8436,6 +8333,7 @@
   border-radius: var(--radius-max);
   border: 1px solid var(--reaction-border);
   background: var(--reaction-bg);
+  color: var(--reaction-text);
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
   font-weight: inherit;
   font-size: inherit;
@@ -8461,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;
@@ -8468,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;
@@ -8480,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);
@@ -8522,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;
@@ -8532,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;
 }
@@ -8597,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;
 }
@@ -8848,13 +8776,11 @@
   border-inline-start: var(--str-chat__thread-header-border-inline-start);
   border-inline-end: var(--str-chat__thread-header-border-inline-end);
 }
-.str-chat__thread-header .str-chat__thread-header-name,
 .str-chat__thread-header .str-chat__thread-header-title {
-  font: var(--str-chat__subtitle-medium-text);
+  font: var(--str-chat__heading-sm-text);
 }
-.str-chat__thread-header .str-chat__thread-header-channel-name,
 .str-chat__thread-header .str-chat__thread-header-subtitle {
-  font: var(--str-chat__body-text);
+  font: var(--str-chat__caption-default-text);
   color: var(--str-chat__thread-header-info-color);
 }
 .str-chat__thread-header .str-chat__thread-header-details {
@@ -8865,11 +8791,10 @@
   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-name,
-.str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-reply-count,
-.str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-channel-name,
 .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 {
   white-space: nowrap;
@@ -8882,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;
 }
@@ -8900,41 +8823,15 @@
   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__thread-header--main {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--spacing-md);
-  gap: var(--spacing-sm);
-  height: var(--str-chat__channel-header-height);
-  min-width: 0;
-  border-bottom: 1px solid var(--border-core-default);
-  background: var(--background-core-elevation-1);
-}
-.str-chat__thread-header--main .str-chat__thread-header--main__details {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  max-width: 100%;
-  row-gap: var(--spacing-xxs);
-}
-.str-chat__thread-header--main .str-chat__thread-header--main__details .str-chat__thread-header--main__title {
-  font: var(--str-chat__heading-sm-text);
-  color: var(--text-primary);
-}
-.str-chat__thread-header--main .str-chat__thread-header--main__details .str-chat__thread-header--main__subtitle {
-  font: var(--str-chat__caption-default-text);
-  color: var(--text-secondary);
+.str-chat__chat-view__threads .str-chat__thread {
+  border: none;
 }
 
 /* Only available in React SDK. */
@@ -9055,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 {
@@ -9164,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 {
@@ -9176,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);
@@ -9264,16 +9104,6 @@
   white-space: nowrap;
 }
 
-.str-chat__thread-list-item__message-preview {
-  font-size: var(--typography-font-size-md);
-  font-weight: var(--typography-font-weight-regular);
-  line-height: var(--typography-line-height-normal);
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .str-chat__thread-list-item__content-trailing {
   display: flex;
   gap: var(--spacing-xs);
@@ -9340,11 +9170,11 @@
   border-inline-end: var(--str-chat__tooltip-border-inline-end);
   overflow-y: hidden;
   display: flex;
-  padding: var(--str-chat__spacing-2);
+  padding: var(--space-8);
   z-index: 1;
   max-width: calc(var(--str-chat__spacing-px) * 150);
   width: max-content;
-  font: var(--str-chat__caption-text);
+  font: var(--str-chat__metadata-emphasis-text);
 }
 .str-chat__tooltip::after {
   background-color: var(--str-chat__tooltip-background-color);
@@ -9397,22 +9227,6 @@
   align-items: center;
   column-gap: var(--spacing-xxs);
 }
-.str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background-color: var(--chat-text-typing-indicator);
-  animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both;
-}
-.str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(1) {
-  animation-delay: 0s;
-}
-.str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(2) {
-  animation-delay: 0.15s;
-}
-.str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(3) {
-  animation-delay: 0.3s;
-}
 
 /* SVG dots (TypingIndicatorDots component) */
 .str-chat__typing-indicator__dots svg {
@@ -9480,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);
 }
@@ -9491,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 */