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

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;
 }
 
 /**
@@ -1103,6 +960,9 @@
   height: 1em;
   fill: currentColor;
 }
+[dir=rtl] .str-chat__icon[data-rtl-mirror] {
+  transform: scaleX(-1);
+}
 
 .str-chat__icon--exclamation-mark {
   stroke: currentColor;
@@ -1519,16 +1379,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 +1424,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 +1577,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 +1677,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 +1699,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 +1929,7 @@
   overflow-x: clip;
   text-overflow: ellipsis;
   flex: auto;
-  text-align: left;
+  text-align: start;
   color: var(--text-primary);
   white-space: nowrap;
 }
@@ -2221,7 +2048,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 +2063,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 +2107,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 +2124,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 +2179,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,9 +2200,9 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
-  /* The border radius used for the borders of the component */
-  --str-chat__attachment-list-border-radius: 0;
+  --str-chat__attachment-margin: var(--space-2)
+    /* The border radius used for the borders of the component */
+    --str-chat__attachment-list-border-radius: 0;
   /* The text/icon color of the component */
   --str-chat__attachment-list-color: var(--str-chat__text-color);
   /* The background color of the component */
@@ -2621,13 +2442,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));
+  max-width: calc(var(--str-chat__attachment-max-width) - var(--space-24));
+  max-height: calc(var(--str-chat__attachment-max-width) - var(--space-24));
 }
 .str-chat__attachment-list .str-chat__message-attachment-unsupported {
   background: var(--str-chat__file-attachment-background-color);
@@ -2641,8 +2462,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--str-chat__spacing-2);
-  column-gap: var(--str-chat__spacing-4);
+  padding: var(--space-8);
+  column-gap: var(--space-16);
 }
 .str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__file-icon {
   width: calc(var(--str-chat__spacing-px) * 30);
@@ -2680,7 +2501,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 +2517,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);
 }
@@ -2768,27 +2589,10 @@
   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);
@@ -2797,9 +2601,6 @@
 .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 .str-chat__message-bubble {
   border: 1px solid var(--chat-border-incoming);
@@ -3108,7 +2909,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 {
@@ -3140,7 +2941,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));
@@ -3302,7 +3103,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);
@@ -3524,7 +3325,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 +3376,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);
@@ -3615,7 +3421,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 +3449,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 +3520,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 +3574,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 +3606,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 +3636,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 +3817,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);
 }
@@ -4267,7 +4071,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 +4083,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 +4092,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);
@@ -4429,7 +4230,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,7 +4348,7 @@
   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. */
 }
@@ -4624,7 +4425,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 +4551,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 +4578,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 +4818,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;
@@ -5255,7 +5047,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 +5121,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 +5152,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 +5180,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,10 +5188,6 @@
   --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);
@@ -5441,11 +5220,6 @@
   --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 {
   max-width: var(--str-chat__message-max-width);
   display: flex;
@@ -5502,7 +5276,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 {
@@ -5538,7 +5312,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 {
@@ -5559,7 +5333,7 @@
   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 +5348,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 {
@@ -5595,7 +5369,7 @@
   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 +5394,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 {
@@ -5677,27 +5451,6 @@
 .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;
@@ -5713,18 +5466,12 @@
   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);
@@ -5743,11 +5490,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 +5533,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 +5569,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 +5606,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 +5618,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;
@@ -6010,7 +5662,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);
 }
@@ -6202,10 +5854,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 +5870,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 +5913,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 +6047,11 @@
   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;
 }
 .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,
@@ -6447,20 +6098,19 @@
   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);
+  bottom: var(--spacing-xs);
+  inset-inline-start: var(--spacing-xs);
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  border-radius: var(--radius-max);
+  background: var(--badge-bg-inverse);
+  color: var(--badge-text-on-inverse);
+  font: var(--str-chat__numeric-md-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__video-indicator .str-chat__icon--video-camera {
-  width: 10px;
-  height: 8px;
+.str-chat .str-chat__attachment-preview-media .str-chat__attachment-preview-media__video-indicator .str-chat__icon {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
   fill: currentColor;
 }
 .str-chat .str-chat__attachment-preview-media__overlay {
@@ -6491,15 +6141,28 @@
 .str-chat .str-chat__attachment-preview-media__overlay:active {
   background-color: var(--str-chat__attachment-preview-media-overlay-pressed-background-color);
 }
-.str-chat .str-chat__attachment-preview-media__overlay .str-chat__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__icon.str-chat__loading-indicator {
+  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-radius: var(--radius-max);
+  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;
+  inset-inline-start: var(--spacing-xxs);
+  bottom: var(--spacing-xxs);
+  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 +6205,9 @@
   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__icon.str-chat__loading-indicator {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 .str-chat .str-chat__attachment-preview-file__info .str-chat__attachment-preview-file__data .str-chat__attachment-preview-file__fatal-error {
   display: flex;
@@ -7188,7 +6851,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 +6871,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);
@@ -7417,8 +7080,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 +7206,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;
@@ -8212,7 +7875,7 @@
   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);
 }
@@ -8315,6 +7978,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;
@@ -8381,10 +8045,10 @@
   position: absolute;
   width: 100%;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   height: var(--size-12);
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
+  border-end-end-radius: inherit;
+  border-end-start-radius: inherit;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 130%);
 }
 .str-chat__message-reactions-detail {
@@ -8436,6 +8100,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;
@@ -8848,13 +8513,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 {
@@ -8867,9 +8530,6 @@
   row-gap: var(--spacing-xxs);
   align-items: start;
 }
-.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;
@@ -8908,35 +8568,6 @@
   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);
-}
-
 /* Only available in React SDK. */
 .str-chat {
   --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
@@ -9264,16 +8895,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 +8961,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 +9018,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 {