stream-chat-react 14.0.1 → 14.1.0

package/dist/css/index.css

@@ -1,7 +1,17 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
 @import 'modern-normalize' layer(css-reset);
 @media (prefers-reduced-motion: reduce) {
+  .str-chat,
+  .str-chat *,
+  .str-chat *::before,
+  .str-chat *::after {
+    animation-delay: 0ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+  }
   .str-chat__attachment-selector__menu-button__icon {
     transform: none;
   }
@@ -990,9 +1000,9 @@
 .str-chat {
   /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
   --str-chat__font-family:
-    var(--str-chat__typography-font-family-sans), system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue,
-    sans-serif;
+    var(--str-chat__typography-font-family-sans), -apple-system, BlinkMacSystemFont,
+    avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu,
+    roboto, noto, helvetica, arial, sans-serif;
   --str-chat__font-heading-xs: normal var(--str-chat__typography-font-weight-semi-bold)
     var(--str-chat__typography-font-size-sm) /
     var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
@@ -1086,16 +1096,16 @@ to create clearer separation from the base surface.
 }
 
 .str-chat {
-  font-family: var(--str-chat__font-family);
-  font-size: var(--str-chat__typography-font-size-md);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  --str-chat__focus-outline-color: var(--str-chat__border-utility-focused);
+  --str-chat__focus-outline: 2px solid var(--str-chat__focus-outline-color);
+  --str-chat__focus-outline-offset: 2px;
+  font: var(--str-chat__font-body-default);
   letter-spacing: var(--typography-letter-spacing-default);
   color: var(--str-chat__text-primary);
 }
 .str-chat *:not(:disabled):focus-visible {
-  outline: 2px solid var(--str-chat__border-utility-focused);
-  outline-offset: 2px;
+  outline: var(--str-chat__focus-outline);
+  outline-offset: var(--str-chat__focus-outline-offset, 2px);
 }
 .str-chat {
   /* Chrome, Safari, Edge, Opera */
@@ -1208,7 +1218,6 @@ to create clearer separation from the base surface.
   min-height: 16px;
   padding-inline: var(--str-chat__spacing-xxxs);
   border-width: 1px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
 }
 
 .str-chat__badge--size-md {
@@ -1217,7 +1226,6 @@ to create clearer separation from the base surface.
   min-height: 20px;
   padding-inline: var(--str-chat__spacing-xxs);
   border-width: 2px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
 }
 
 .str-chat__badge--size-lg {
@@ -1226,22 +1234,20 @@ to create clearer separation from the base surface.
   min-height: 24px;
   padding-inline: var(--str-chat__spacing-xs);
   border-width: 2px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
 }
 
 .str-chat__badge--variant-counter {
   border-radius: var(--str-chat__radius-max);
   border: 1px solid var(--str-chat__border-core-subtle);
   background: var(--str-chat__badge-bg-default);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
   font: var(--str-chat__font-numeric-xl);
   color: var(--str-chat__badge-text);
+  box-shadow: var(--str-chat__box-shadow-2);
 }
 .str-chat__badge--variant-counter.str-chat__badge--size-xs {
   min-width: 20px;
   min-height: 20px;
   padding-inline: var(--str-chat__spacing-xxs);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
   font: var(--str-chat__font-numeric-md);
 }
 .str-chat__badge--variant-counter.str-chat__badge--size-sm {
@@ -1494,7 +1500,6 @@ to create clearer separation from the base surface.
   padding: 0;
   background: transparent;
   border-radius: var(--str-chat__radius-md, 0.5rem);
-  outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .str-chat__form-numeric-input__input {
@@ -1509,7 +1514,6 @@ to create clearer separation from the base surface.
   text-align: center;
   background: transparent;
   border: none;
-  outline: none;
   box-shadow: none;
 }
 .str-chat__form-numeric-input__input::placeholder {
@@ -1519,11 +1523,6 @@ to create clearer separation from the base surface.
   color: var(--str-chat__input-text-placeholder);
   cursor: not-allowed;
 }
-.str-chat__form-numeric-input .str-chat__form-numeric-input__input:focus,
-.str-chat__form-numeric-input .str-chat__form-numeric-input__input:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
 
 .str-chat {
   --str-chat__switch-field-background-color: var(
@@ -1546,25 +1545,25 @@ to create clearer separation from the base surface.
   border-radius: var(--str-chat__switch-field-border-radius);
   box-sizing: border-box;
 }
-.str-chat .str-chat__form__switch-field__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-.str-chat .str-chat__form__switch-field__label {
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__label {
   display: flex;
   align-items: center;
   flex: 1 1 auto;
   min-width: 0;
   cursor: pointer;
 }
-.str-chat .str-chat__form__switch-field__switch {
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__switch {
+  position: relative;
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -1576,22 +1575,27 @@ to create clearer separation from the base surface.
   border-radius: var(--str-chat__button-radius-full, 9999px);
   transition: background-color 0.2s ease;
 }
-.str-chat .str-chat__form__switch-field__switch-handle {
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__switch-handle {
   width: 16px;
   height: 16px;
   border-radius: var(--str-chat__button-radius-full, 9999px);
   background-color: var(--str-chat__base-white, #ffffff);
   transition: transform 0.2s ease;
 }
-.str-chat .str-chat__form__switch-field__switch--on {
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__switch:focus-within {
+  outline: var(--str-chat__focus-outline, 2px solid var(--border-utility-focused));
+  outline-offset: var(--str-chat__focus-outline-offset, 2px);
+}
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__switch--on {
   background-color: var(--str-chat__control-toggle-switch-bg-selected);
   justify-content: flex-end;
 }
-.str-chat .str-chat__form__switch-field__switch--on .str-chat__form__switch-field__switch-handle {
+.str-chat .str-chat__form__switch-field .str-chat__form__switch-field__switch--on .str-chat__form__switch-field__switch-handle {
   background-color: var(--str-chat__base-white, #ffffff);
 }
 .str-chat .str-chat__form__switch-field--disabled .str-chat__form__switch-field__label,
-.str-chat .str-chat__form__switch-field--disabled .str-chat__form__switch-field__switch {
+.str-chat .str-chat__form__switch-field--disabled .str-chat__form__switch-field__switch,
+.str-chat .str-chat__form__switch-field--disabled .str-chat__form__switch-field__input {
   cursor: not-allowed;
 }
 .str-chat .str-chat__form__switch-field--disabled .str-chat__form__switch-field__switch {
@@ -1620,9 +1624,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__form-text-input__label {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-medium);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-heading-xs);
   color: var(--str-chat__text-primary);
 }
 
@@ -1634,7 +1636,6 @@ to create clearer separation from the base surface.
   gap: 0;
   background-color: var(--str-chat__background-core-elevation-0);
   border-radius: var(--str-chat__radius-md);
-  outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -1653,8 +1654,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__form-text-input:focus-within .str-chat__form-text-input__wrapper--outline {
-  border: 1px solid var(--input-border-focus);
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  box-shadow: 0 0 0 2px var(--str-chat__focus-outline-color, var(--str-chat__border-utility-focused));
 }
 
 .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline {
@@ -1668,12 +1668,11 @@ to create clearer separation from the base surface.
 
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline {
   border: 1px solid var(--str-chat__border-utility-error);
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--str-chat__focus-outline-color, var(--border-utility-focused));
 }
 
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside .str-chat__form-text-input__wrapper--outline {
-  border: 1px solid var(--input-border-focus);
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  box-shadow: 0 0 0 2px var(--str-chat__focus-outline-color, var(--str-chat__border-utility-focused));
 }
 
 .str-chat__form-text-input--disabled .str-chat__form-text-input__wrapper--outline {
@@ -1687,7 +1686,7 @@ to create clearer separation from the base surface.
 
 .str-chat__form-text-input:focus-within .str-chat__form-text-input__wrapper--ghost {
   border: none;
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  box-shadow: 0 0 0 2px var(--str-chat__focus-outline-color, var(--str-chat__border-utility-focused));
 }
 
 .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost {
@@ -1702,12 +1701,12 @@ to create clearer separation from the base surface.
 
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost {
   border: 1px solid var(--str-chat__border-utility-error);
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--str-chat__focus-outline-color, var(--border-utility-focused));
 }
 
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside .str-chat__form-text-input__wrapper--ghost {
   border: none;
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  box-shadow: 0 0 0 2px var(--str-chat__focus-outline-color, var(--str-chat__border-utility-focused));
 }
 
 .str-chat__form-text-input__leading {
@@ -1814,9 +1813,7 @@ to create clearer separation from the base surface.
   border: none;
 }
 .str-chat__form__input-fieldset .str-chat__form__input-fieldset__label {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-medium);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-heading-xs);
   color: var(--str-chat__text-primary);
 }
 .str-chat__form__input-fieldset .str-chat__form__input-fieldset__values {
@@ -1985,9 +1982,7 @@ to create clearer separation from the base surface.
 .str-chat .str-chat__context-menu .str-chat__context-menu__header {
   width: 100%;
   color: var(--str-chat__text-tertiary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__back-button {
   background: none;
@@ -2003,9 +1998,7 @@ to create clearer separation from the base surface.
   cursor: pointer;
   border-radius: var(--str-chat__radius-md);
   color: var(--str-chat__text-tertiary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__back-button:hover:not(:disabled) {
   background-color: var(--str-chat__background-utility-hover);
@@ -2027,15 +2020,16 @@ to create clearer separation from the base surface.
   display: flex;
   flex-direction: column;
   gap: var(--str-chat__spacing-xxxs);
-  overflow-x: hidden;
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__body.str-chat__context-menu__body--submenu-forward {
+  overflow-x: hidden;
   animation-duration: 280ms;
   animation-name: var(--str-chat__context-menu-submenu-forward-animation, str-chat-context-menu-submenu-forward);
   animation-timing-function: cubic-bezier(0.2, 0.95, 0.25, 1);
   transform-origin: var(--str-chat__context-menu-submenu-forward-transform-origin, left center);
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__body.str-chat__context-menu__body--submenu-backward {
+  overflow-x: hidden;
   animation-duration: 400ms;
   animation-name: var(--str-chat__context-menu-submenu-backward-animation, str-chat-context-menu-submenu-backward);
   animation-timing-function: cubic-bezier(0.16, 0.92, 0.2, 1);
@@ -2054,9 +2048,7 @@ to create clearer separation from the base surface.
   width: 100%;
   padding: var(--str-chat__spacing-xs);
   cursor: pointer;
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button.str-chat__context-menu__button--destructive .str-chat__context-menu__button__label,
 .str-chat .str-chat__context-menu .str-chat__context-menu__button.str-chat__context-menu__button--destructive .str-chat__icon {
@@ -2094,12 +2086,22 @@ to create clearer separation from the base surface.
 .str-chat .str-chat__context-menu .str-chat__context-menu__button .str-chat__context-menu__button__details {
   flex: 1;
   color: var(--str-chat__text-tertiary);
-  font-weight: var(--str-chat__typography-font-weight-regular);
+  font: var(--str-chat__font-caption-default);
   white-space: nowrap;
 }
 .str-chat .str-chat__context-menu .str-chat__emoji-context-menu__button,
 .str-chat .str-chat__context-menu .str-chat__user-context-menu__button {
-  font-weight: var(--str-chat__typography-font-weight-regular, 400);
+  font: var(--str-chat__font-caption-default);
+}
+.str-chat .str-chat__context-menu .str-chat__emoji-context-menu__button .str-chat__context-menu__button__emoji,
+.str-chat .str-chat__context-menu .str-chat__user-context-menu__button .str-chat__context-menu__button__emoji {
+  font-size: var(--str-chat__typography-font-size-md);
+  width: var(--str-chat__typography-font-size-md);
+  height: var(--str-chat__typography-font-size-md);
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .str-chat [data-str-chat-placement^=right] > .str-chat__context-menu {
   animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
@@ -2202,6 +2204,7 @@ to create clearer separation from the base surface.
   min-width: 0;
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__title {
+  margin: 0;
   font: var(--str-chat__font-heading-sm);
   color: var(--str-chat__text-primary);
 }
@@ -2210,6 +2213,7 @@ to create clearer separation from the base surface.
   color: var(--str-chat__text-secondary);
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__close-button {
+  align-self: flex-start;
   flex-shrink: 0;
   color: var(--str-chat__text-primary);
 }
@@ -2265,6 +2269,7 @@ to create clearer separation from the base surface.
   min-width: 0;
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__title {
+  margin: 0;
   font: var(--str-chat__font-heading-sm);
   color: var(--str-chat__text-primary);
 }
@@ -2278,6 +2283,7 @@ to create clearer separation from the base surface.
   stroke-width: 1.5px;
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__close-button {
+  align-self: flex-start;
   flex-shrink: 0;
   color: var(--str-chat__text-primary);
 }
@@ -2500,8 +2506,7 @@ to create clearer separation from the base surface.
   align-items: center;
   justify-content: space-between;
   column-gap: var(--str-chat__space-8);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item__info .str-chat__message-attachment-file--item__first-row .str-chat__message-attachment-file--item__name,
 .str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item__info .str-chat__message-attachment-file--item__first-row .str-chat__message-attachment-audio-widget--title,
@@ -2530,7 +2535,7 @@ to create clearer separation from the base surface.
 .str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item__data,
 .str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item__info .str-chat__message-attachment-file--item__data,
 .str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item__data {
-  font-size: var(--str-chat__typography-font-size-xs);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__attachment-list .str-chat__message-attachment-file--item {
   background: transparent;
@@ -2594,16 +2599,15 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__button-padding-y-sm) var(--str-chat__button-padding-x-with-label-sm);
   white-space: nowrap;
   border-collapse: collapse;
-  font-size: var(--str-chat__typography-font-size-md);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-body-emphasis);
 }
 .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form .str-chat__message-attachment-actions-button.str-chat__button:active {
   color: var(--str-chat__accent-primary);
 }
 .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form .str-chat__message-attachment-actions-button.str-chat__button:focus-visible {
   color: var(--str-chat__accent-primary);
-  outline: none;
+  outline: 2px solid var(--str-chat__border-utility-focused);
+  outline-offset: 2px;
 }
 
 .str-chat__message-attachment-audio-widget {
@@ -2769,19 +2773,17 @@ to create clearer separation from the base surface.
 .str-chat__giphy-badge {
   display: inline-flex;
   height: 24px;
-  padding: var(--str-chat__spacing-xxxs, 2px) var(--str-chat__spacing-xs, 8px);
+  padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
   justify-content: center;
   align-items: center;
-  gap: var(--str-chat__spacing-xxs, 4px);
+  gap: var(--str-chat__spacing-xxs);
   position: absolute;
   inset-inline-start: 8px;
   bottom: 8px;
-  border-radius: var(--str-chat__radius-lg, 12px);
-  background-color: var(--str-chat__badge-bg-overlay, rgba(0, 0, 0, 0.75));
-  color: var(--str-chat__badge-text-on-accent, #fff);
-  font-size: var(--str-chat__typography-font-size-xs, 12px);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
-  line-height: var(--str-chat__typography-line-height-tight, 16px);
+  border-radius: var(--str-chat__radius-lg);
+  background-color: var(--str-chat__badge-bg-overlay);
+  color: var(--str-chat__badge-text-on-accent);
+  font: var(--str-chat__font-metadata-emphasis);
   text-transform: uppercase;
 }
 
@@ -2798,9 +2800,7 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-xs, 8px);
   align-self: stretch;
   color: var(--chat-text);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-caption-emphasis);
 }
 
 .str-chat__message-attachment-card {
@@ -2847,17 +2847,11 @@ to create clearer separation from the base surface.
   min-width: 0;
 }
 .str-chat__message-attachment-card .str-chat__message-attachment-card--title {
-  white-space: nowrap;
-  overflow-y: visible;
-  overflow-x: hidden;
-  overflow-x: clip;
-  text-overflow: ellipsis;
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__message-attachment-card .str-chat__message-attachment-card--source-link,
 .str-chat__message-attachment-card .str-chat__message-attachment-card--text {
-  font-size: var(--str-chat__typography-font-size-xs);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__message-attachment-card .str-chat__message-attachment-card--title,
 .str-chat__message-attachment-card .str-chat__message-attachment-card--url {
@@ -2873,6 +2867,7 @@ to create clearer separation from the base surface.
   -webkit-line-clamp: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__message-attachment-card .str-chat__message-attachment-card--source-link {
   display: flex;
@@ -3298,10 +3293,6 @@ to create clearer separation from the base surface.
   border-radius: var(--str-chat__radius-max);
   background: var(--str-chat__avatar-bg-default);
   color: var(--str-chat__avatar-text-default);
-  text-align: center;
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  font-style: normal;
-  line-height: 1;
   text-transform: uppercase;
   width: var(--avatar-size);
   height: var(--avatar-size);
@@ -3360,35 +3351,35 @@ to create clearer separation from the base surface.
   --avatar-status-badge-size: 16px;
   --avatar-icon-size: var(--str-chat__icon-size-lg);
   --avatar-icon-stroke-width: 1.5px;
-  font-size: var(--str-chat__typography-font-size-xl);
+  font: var(--str-chat__font-heading-lg);
 }
 .str-chat__avatar.str-chat__avatar--size-xl {
   --avatar-size: 48px;
   --avatar-status-badge-size: 16px;
   --avatar-icon-size: var(--str-chat__size-24);
   --avatar-icon-stroke-width: 1.5px;
-  font-size: var(--str-chat__typography-font-size-xl);
+  font: var(--str-chat__font-heading-md);
 }
 .str-chat__avatar.str-chat__avatar--size-lg {
   --avatar-size: 40px;
   --avatar-status-badge-size: 14px;
   --avatar-icon-size: var(--str-chat__icon-size-md);
   --avatar-icon-stroke-width: 1.5px;
-  font-size: var(--str-chat__typography-font-size-md);
+  font: var(--str-chat__font-body-emphasis);
 }
 .str-chat__avatar.str-chat__avatar--size-md {
   --avatar-size: 32px;
   --avatar-status-badge-size: 12px;
   --avatar-icon-size: var(--str-chat__icon-size-md);
   --avatar-icon-stroke-width: 1.5px;
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__avatar.str-chat__avatar--size-sm {
   --avatar-size: 24px;
   --avatar-status-badge-size: 8px;
   --avatar-icon-size: var(--str-chat__icon-size-sm);
   --avatar-icon-stroke-width: 1.2px;
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__avatar.str-chat__avatar--size-sm .str-chat__avatar-status-badge {
   border-width: 1px;
@@ -3398,7 +3389,7 @@ to create clearer separation from the base surface.
   --avatar-status-badge-size: 8px;
   --avatar-icon-size: 10px;
   --avatar-icon-stroke-width: 1.2px;
-  font-size: var(--str-chat__typography-font-size-xs);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__avatar.str-chat__avatar--size-xs .str-chat__avatar-status-badge {
   border-width: 1px;
@@ -3441,7 +3432,7 @@ to create clearer separation from the base surface.
   --avatar-group-count-badge-size: 32px;
 }
 .str-chat__avatar-group.str-chat__avatar-group--size-2xl > .str-chat__avatar-group__count-badge {
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-numeric-xl);
   padding-inline: var(--str-chat__spacing-xs);
 }
 .str-chat__avatar-group.str-chat__avatar-group--size-xl {
@@ -3450,7 +3441,7 @@ to create clearer separation from the base surface.
   --avatar-group-count-badge-size: 24px;
 }
 .str-chat__avatar-group.str-chat__avatar-group--size-xl > .str-chat__avatar-group__count-badge {
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-numeric-xl);
   padding-inline: var(--str-chat__spacing-xs);
 }
 .str-chat__avatar-group.str-chat__avatar-group--size-lg {
@@ -3459,7 +3450,7 @@ to create clearer separation from the base surface.
   --avatar-group-count-badge-size: 20px;
 }
 .str-chat__avatar-group.str-chat__avatar-group--size-lg > .str-chat__avatar-group__count-badge {
-  font-size: var(--str-chat__typography-font-size-xxs);
+  font: var(--str-chat__font-numeric-md);
   padding-inline: var(--str-chat__spacing-xxs);
 }
 .str-chat__avatar-group.str-chat__avatar-group--online::after, .str-chat__avatar-group.str-chat__avatar-group--offline::after {
@@ -3489,13 +3480,11 @@ to create clearer separation from the base surface.
   height: var(--avatar-group-count-badge-size);
   min-width: var(--avatar-group-count-badge-size);
   min-height: var(--avatar-group-count-badge-size);
-  font-weight: var(--str-chat__typography-font-weight-bold);
-  font-family: var(--str-chat__typography-font-family-sans);
   justify-content: center;
   align-items: center;
   border-radius: var(--str-chat__radius-max);
   background: var(--str-chat__badge-bg-default);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
+  box-shadow: var(--str-chat__box-shadow-2);
 }
 .str-chat__avatar-group:has(> :last-child:nth-child(4)) > :nth-child(1) {
   top: 0;
@@ -3837,15 +3826,16 @@ to create clearer separation from the base surface.
   border-inline-end: 1px solid var(--str-chat__border-core-default);
 }
 .str-chat__channel-list .str-chat__channel-list-inner {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
-  padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2));
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main {
   height: 100%;
   overflow-y: auto;
   scrollbar-gutter: stable both-edges;
   scrollbar-width: thin;
+  padding-bottom: calc(var(--str-chat__space-8) + var(--str-chat__space-2));
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main .str-chat__channel-list-empty {
   height: 100%;
@@ -3928,9 +3918,9 @@ to create clearer separation from the base surface.
   display: none;
   position: absolute;
   gap: var(--str-chat__spacing-xs);
-  border-radius: var(--str-chat__radius-md, 8px);
-  background: var(--str-chat__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);
+  border-radius: var(--str-chat__radius-md);
+  background: var(--str-chat__background-core-elevation-3);
+  box-shadow: var(--str-chat__box-shadow-2);
   inset-inline-end: 10px;
   top: 10px;
   padding: var(--str-chat__spacing-xxs);
@@ -3956,7 +3946,6 @@ to create clearer separation from the base surface.
   background: none;
   cursor: pointer;
   text-align: start;
-  font-family: var(--str-chat__typography-font-family-sans);
   border-radius: var(--str-chat__radius-lg);
   width: 100%;
   background: var(--str-chat__background-core-elevation-1);
@@ -3994,9 +3983,7 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: inherit;
   gap: var(--str-chat__spacing-xxs);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-emphasis);
   color: var(--str-chat__text-primary);
 }
 .str-chat__channel-list-item .str-chat__channel-list-item-data .str-chat__channel-list-item-data__first-row .str-chat__channel-list-item-data__title > span {
@@ -4016,10 +4003,8 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-xs);
 }
 .str-chat__channel-list-item .str-chat__channel-list-item-data .str-chat__channel-list-item-data__first-row .str-chat__channel-list-item-data__timestamp-and-badge .str-chat__channel-list-item-timestamp {
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-tertiary);
-  line-height: var(--str-chat__typography-line-height-normal);
 }
 
 .str-chat {
@@ -4241,6 +4226,10 @@ to create clearer separation from the base surface.
   --str-chat__modal-overlay-color: var(--str-chat__background-core-scrim);
   --str-chat__modal-overlay-backdrop-filter: none;
 }
+.str-chat.str-chat__modal.str-chat__gallery-modal .str-chat__modal__dialog {
+  width: 100%;
+  height: 100%;
+}
 .str-chat .str-chat__gallery__header {
   padding: var(--str-chat__spacing-md);
   display: grid;
@@ -4587,9 +4576,6 @@ to create clearer separation from the base surface.
   width: 100%;
   max-width: 520px;
 }
-.str-chat__share-location-dialog .str-chat__prompt__body {
-  height: 65px;
-}
 .str-chat__share-location-dialog .str-chat__live-location-activation {
   display: flex;
   flex-direction: column;
@@ -4655,9 +4641,7 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: center;
   width: 2.75rem;
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-playback .str-chat__recording-timer--hours,
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-preview .str-chat__recording-timer--hours {
@@ -4756,131 +4740,143 @@ to create clearer separation from the base surface.
   /* The maximum allowed width of the message component, if it has attachments */
   --str-chat__message-with-attachment-max-width: 400px;
 }
-.str-chat .str-chat__message.str-chat__message--me {
-  --chat-bg: var(--str-chat__chat-bg-outgoing);
-  --chat-bg-attachment: var(--str-chat__chat-bg-attachment-outgoing);
-  --chat-text: var(--str-chat__chat-text-outgoing);
-  --chat-border: var(--str-chat__chat-border-outgoing);
-  --chat-border-on-chat: var(--str-chat__chat-border-on-chat-outgoing);
-  --chat-reply-indicator: var(--str-chat__chat-reply-indicator-outgoing);
-  --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-outgoing);
-  --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-outgoing);
-  --chat-thread-connector: var(--str-chat__chat-thread-connector-outgoing);
+
+.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 .str-chat__message.str-chat__message--other {
-  --chat-bg: var(--str-chat__chat-bg-incoming);
-  --chat-bg-attachment: var(--str-chat__chat-bg-attachment-incoming);
-  --chat-text: var(--str-chat__chat-text-incoming);
-  --chat-border: var(--str-chat__chat-border-incoming);
-  --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming);
-  --chat-reply-indicator: var(--str-chat__chat-reply-indicator-incoming);
-  --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-incoming);
-  --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-incoming);
-  --chat-thread-connector: var(--str-chat__chat-thread-connector-incoming);
+.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__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;
 }
 
-/* Make spaces between message groups */
-.str-chat__li--top {
+.str-chat__li:has(.str-chat__message--pinned) {
+  position: relative;
+  isolation: isolate;
+}
+.str-chat__li:has(.str-chat__message--pinned)::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline: -9999px;
+  background-color: var(--str-chat__background-core-highlight);
+  z-index: -1;
+  pointer-events: none;
+}
+.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
+  background-color: transparent;
+}
+.str-chat__li.str-chat__li--top {
   padding-block-start: var(--str-chat__spacing-xs);
   padding-block-end: var(--str-chat__spacing-xxxs);
 }
-
-.str-chat__li--bottom {
+.str-chat__li.str-chat__li--bottom {
   padding-block-start: var(--str-chat__spacing-xxxs);
   padding-block-end: var(--str-chat__spacing-xs);
 }
-
-.str-chat__li--middle {
+.str-chat__li.str-chat__li--middle {
   padding-block: var(--str-chat__spacing-xxxs);
 }
-
-.str-chat__li--single {
+.str-chat__li.str-chat__li--single {
   padding-block: var(--str-chat__spacing-xs);
 }
+.str-chat__li.str-chat__li--middle .str-chat__message .str-chat__message-metadata, .str-chat__li.str-chat__li--top .str-chat__message .str-chat__message-metadata {
+  display: none;
+}
+.str-chat__li.str-chat__li--middle .str-chat__message > .str-chat__avatar, .str-chat__li.str-chat__li--top .str-chat__message > .str-chat__avatar {
+  visibility: hidden;
+}
+.str-chat__li.str-chat__li--middle .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar, .str-chat__li.str-chat__li--top .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar {
+  pointer-events: none;
+}
+.str-chat__li.str-chat__li--middle .str-chat__message-bubble, .str-chat__li.str-chat__li--top .str-chat__message-bubble {
+  border-radius: var(--str-chat__message-bubble-radius-group-middle);
+}
+.str-chat__li.str-chat__li--single .str-chat__message--other .str-chat__message-inner .str-chat__message-bubble, .str-chat__li.str-chat__li--bottom .str-chat__message--other .str-chat__message-inner .str-chat__message-bubble {
+  border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
+}
+.str-chat__li.str-chat__li--single .str-chat__message--other .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text, .str-chat__li.str-chat__li--bottom .str-chat__message--other .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
+  border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
+}
+.str-chat__li.str-chat__li--single .str-chat__message--me .str-chat__message-inner .str-chat__message-bubble, .str-chat__li.str-chat__li--bottom .str-chat__message--me .str-chat__message-inner .str-chat__message-bubble {
+  border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
+}
+.str-chat__li.str-chat__li--single .str-chat__message--me .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text, .str-chat__li.str-chat__li--bottom .str-chat__message--me .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
+  border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
+}
+
+.str-chat__message-mention {
+  font: var(--str-chat__font-body-emphasis);
+  color: var(--str-chat__accent-primary);
+}
 
 .str-chat__message {
   --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+  color: var(--chat-text);
+  display: grid;
+  word-break: break-word;
+  hyphens: auto;
+  overflow-wrap: break-word;
   padding-inline: var(--str-chat__message-composer-padding);
 }
 @media (max-width: 767px) {
   .str-chat__message {
     --str-chat-message-options-size: 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;
-  gap: var(--str-chat__spacing-xs);
-  padding: var(--str-chat__spacing-xs);
-}
-.str-chat__message .str-chat__message-options {
-  --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7);
+  .str-chat__message .str-chat__message-bubble {
+    width: fit-content(var(--str-chat__message-max-width));
+    max-width: min(100%, var(--str-chat__message-max-width));
+  }
+  .str-chat__message.str-chat__message--other .str-chat__message-inner, .str-chat__message.str-chat__message--me .str-chat__message-inner {
+    margin-inline: 0;
+    width: fit-content;
+    max-width: min(100%, var(--str-chat__message-max-width));
+  }
+  .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host, .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host {
+    justify-self: flex-start;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow: visible;
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+  .str-chat__message.str-chat__message--other .str-chat__message-inner {
+    grid-template-columns: auto var(--str-chat-message-options-size);
+  }
+  .str-chat__message.str-chat__message--me .str-chat__message-inner {
+    grid-template-columns: var(--str-chat-message-options-size) auto;
+  }
+  .str-chat__message.str-chat__message--me .str-chat__message-bubble {
+    justify-self: flex-end;
+  }
 }
 .str-chat__message a {
   text-decoration: none;
   color: var(--str-chat__chat-text-link);
 }
-
-.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.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.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-3 .str-chat__message-inner .str-chat__message-bubble {
-  background-color: transparent;
-  overflow: visible;
+.str-chat__message .str-chat__avatar:has(~ .str-chat__message-inner) {
+  grid-area: avatar;
+  align-self: end;
 }
-.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;
-}
-.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 {
-  font-size: 48px;
-  line-height: 48px;
-}
-.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 {
-  font-size: 32px;
-  line-height: 32px;
-}
-.str-chat__message.str-chat__message--is-emoji-only .str-chat__message-replies-count-button-wrapper::after {
-  display: none;
-}
-
-.str-chat__message.str-chat__message--has-attachment {
-  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
-}
-.str-chat__message.str-chat__message--has-attachment .str-chat__message-bubble {
-  width: min(100%, var(--str-chat__message-max-width));
-  max-width: var(--str-chat__message-max-width);
-}
-
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
-  padding: 0;
-}
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-text {
+.str-chat__message:not(.str-chat__message--with-avatar) .str-chat__avatar:has(~ .str-chat__message-inner) {
   display: none;
 }
-
-.str-chat__message-mention {
-  font: var(--str-chat__font-body-emphasis);
-  color: var(--str-chat__accent-primary);
-}
-
-.str-chat__message {
-  background: transparent;
-  color: var(--str-chat__message-color, var(--chat-text));
-  display: grid;
-  word-wrap: break-word;
-  word-break: break-word;
-  hyphens: auto;
-  overflow-wrap: break-word;
-}
 .str-chat__message .str-chat__message-pin-indicator {
   grid-area: pin-indicator;
   padding-block: var(--str-chat__spacing-xxs);
@@ -4903,86 +4899,6 @@ to create clearer separation from the base surface.
 .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;
-}
-.str-chat__message.str-chat__message--me .str-chat__message-also-sent-in-channel {
-  justify-content: flex-end;
-}
-.str-chat__message.str-chat__message--other {
-  column-gap: var(--str-chat__space-8);
-  justify-items: flex-start;
-}
-.str-chat__message.str-chat__message--other.str-chat__message--with-avatar {
-  grid-template-areas: ". message-saved-for-later" ". pin-indicator" ". also-sent-in-channel" ". message-reminder" ". translation-indicator" "avatar message" "avatar translation-notice" "avatar custom-metadata" "avatar metadata";
-  grid-template-columns: auto 1fr;
-}
-.str-chat__message.str-chat__message--other:not(.str-chat__message--with-avatar) {
-  grid-template-areas: "message-saved-for-later" "pin-indicator" "also-sent-in-channel" "message-reminder" "translation-indicator" "message" "translation-notice" "custom-metadata" "metadata";
-  grid-template-columns: 1fr;
-}
-.str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host {
-  justify-self: flex-end;
-}
-.str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
-  justify-self: flex-start;
-}
-.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__spacing-xs) * -1 * -1);
-  margin-inline-end: calc(var(--str-chat__spacing-xs) * -1);
-}
-.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;
-  flex-wrap: wrap;
-}
-.str-chat__message.str-chat__message--pinned.str-chat__message--other {
-  grid-template-areas: ". message-saved-for-later" ". pin-indicator" ". also-sent-in-channel" ". message-reminder" ". translation-indicator" "avatar message" "avatar translation-notice" "avatar custom-metadata" "avatar metadata";
-  grid-template-columns: auto 1fr;
-}
-.str-chat__message.str-chat__message--pinned.str-chat__message--me {
-  grid-template-areas: "message-saved-for-later ." "pin-indicator ." "also-sent-in-channel ." "message-reminder ." "translation-indicator ." "message avatar" "translation-notice avatar" "custom-metadata avatar" "metadata avatar";
-  grid-template-columns: 1fr auto;
-}
-.str-chat__message.str-chat__message--me {
-  column-gap: var(--str-chat__space-8);
-  justify-items: flex-end;
-}
-.str-chat__message.str-chat__message--me.str-chat__message--with-avatar {
-  grid-template-areas: "message-saved-for-later ." "pin-indicator ." "also-sent-in-channel ." "message-reminder ." "translation-indicator ." "message avatar" "translation-notice avatar" "custom-metadata avatar" "metadata avatar";
-  grid-template-columns: 1fr auto;
-}
-.str-chat__message.str-chat__message--me:not(.str-chat__message--with-avatar) {
-  grid-template-areas: "message-saved-for-later" "pin-indicator" "also-sent-in-channel" "message-reminder" "translation-indicator" "message" "translation-notice" "custom-metadata" "metadata";
-  grid-template-columns: 1fr;
-}
-.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host {
-  justify-self: flex-start;
-}
-.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
-  justify-self: flex-end;
-}
-.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__spacing-xs) * -1 * -1);
-  margin-inline-start: calc(var(--str-chat__spacing-xs) * -1);
-}
-.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;
-  flex-wrap: wrap;
-}
-.str-chat__message.str-chat__message--blocked {
-  grid-template-areas: "message";
-}
-.str-chat__message.str-chat__message--system {
-  grid-template-areas: "message";
-  grid-template-columns: auto;
-}
-.str-chat__message .str-chat__avatar:has(~ .str-chat__message-inner) {
-  grid-area: avatar;
-  align-self: end;
-}
-.str-chat__message:not(.str-chat__message--with-avatar) .str-chat__avatar:has(~ .str-chat__message-inner) {
-  display: none;
-}
 .str-chat__message .str-chat__message-inner {
   grid-area: message;
   display: grid;
@@ -4995,6 +4911,9 @@ to create clearer separation from the base surface.
   display: flex;
   grid-area: reactions;
 }
+.str-chat__message .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom) {
+  max-width: var(--str-chat__message-max-width);
+}
 .str-chat__message .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   margin-bottom: calc(var(--str-chat__spacing-xxs) * -1);
 }
@@ -5005,14 +4924,18 @@ to create clearer separation from the base surface.
   grid-template-areas: "message-bubble options" "replies replies" "reactions .";
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-bubble {
+  width: fit-content(var(--str-chat__message-max-width));
+  max-width: var(--str-chat__message-max-width);
+  min-width: 0;
   display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-xs);
+  padding: var(--str-chat__spacing-xs);
   justify-self: flex-start;
   grid-area: message-bubble;
   position: relative;
-  min-width: 0;
   border-radius: var(--str-chat__message-bubble-radius-group-bottom);
-  color: var(--str-chat__message-bubble-color, inherit);
-  background-color: var(--str-chat__message-bubble-background-color, var(--chat-bg));
+  background-color: var(--chat-bg);
   overflow: hidden;
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
@@ -5022,23 +4945,17 @@ to create clearer separation from the base surface.
   white-space: pre-line;
   margin: 0;
 }
+.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
+  border-radius: calc(var(--str-chat__message-bubble-radius-group-bottom) - var(--str-chat__spacing-xs));
+}
 .str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner {
   overflow-y: hidden;
 }
-.str-chat__message.str-chat__message--me .str-chat__message-bubble {
-  justify-self: flex-end;
-  color: var(--str-chat__own-message-bubble-color, inherit);
-  background-color: var(--str-chat__own-message-bubble-background-color, var(--chat-bg));
-}
-.str-chat__message.str-chat__message--me .str-chat__message-inner {
-  grid-template-areas: "reminder reminder" ". reactions" "options message-bubble" "replies replies";
-  grid-template-columns: 1fr auto;
-}
-.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
-  flex-direction: row;
+.str-chat__message .str-chat__message-inner .str-chat__message-options {
+  display: none;
 }
-.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__message-inner .str-chat__message-options.str-chat__message-options--active, .str-chat__message .str-chat__message-inner:focus-within .str-chat__message-options {
+  display: flex;
 }
 .str-chat__message .str-chat__message-metadata {
   grid-area: metadata;
@@ -5048,8 +4965,6 @@ to create clearer separation from the base surface.
   align-items: center;
   height: var(--str-chat__size-24);
   color: var(--str-chat__chat-text-timestamp);
-}
-.str-chat__message .str-chat__message-metadata * {
   font: var(--str-chat__font-metadata-default);
 }
 .str-chat__message .str-chat__message-metadata .str-chat__message-metadata__name {
@@ -5059,10 +4974,6 @@ to create clearer separation from the base surface.
 .str-chat__message .str-chat__message-metadata .str-chat__message-edited-indicator {
   margin-inline-start: var(--str-chat__spacing-xs);
 }
-.str-chat__message.str-chat__message--me .str-chat__message-metadata {
-  justify-content: flex-end;
-  text-align: end;
-}
 .str-chat__message .str-chat__message--blocked-inner {
   padding-inline: var(--str-chat__spacing-xxs);
 }
@@ -5072,8 +4983,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__message .str-chat__message--blocked-inner {
   border-radius: var(--str-chat__radius-md);
-  color: var(--str-chat__blocked-message-color, var(--chat-text));
-  background-color: var(--str-chat__blocked-message-background-color, var(--chat-bg));
+  background-color: var(--chat-bg);
   padding-block: var(--str-chat__spacing-xs);
 }
 .str-chat__message .str-chat__message-error-indicator {
@@ -5082,141 +4992,170 @@ to create clearer separation from the base surface.
 .str-chat__message .str-chat__message-inner--error {
   cursor: pointer;
 }
-.str-chat__message.str-chat__message--deleted .str-chat__message-bubble {
-  padding: var(--str-chat__spacing-sm);
+.str-chat__message:not(.str-chat__message--with-avatar) {
+  grid-template-areas: "message-saved-for-later" "pin-indicator" "also-sent-in-channel" "message-reminder" "translation-indicator" "message" "translation-notice" "custom-metadata" "metadata";
+  grid-template-columns: 1fr;
 }
-.str-chat__message.str-chat__message--deleted .str-chat__message-bubble .str-chat__message-text {
-  display: flex;
-  align-items: center;
-  padding: 0;
-  gap: var(--str-chat__spacing-xxs);
+.str-chat__message.str-chat__message--other {
+  column-gap: var(--str-chat__space-8);
+  justify-items: flex-start;
+  --chat-bg: var(--str-chat__chat-bg-incoming);
+  --chat-bg-attachment: var(--str-chat__chat-bg-attachment-incoming);
+  --chat-text: var(--str-chat__chat-text-incoming);
+  --chat-border: var(--str-chat__chat-border-incoming);
+  --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming);
+  --chat-reply-indicator: var(--str-chat__chat-reply-indicator-incoming);
+  --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-incoming);
+  --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-incoming);
+  --chat-thread-connector: var(--str-chat__chat-thread-connector-incoming);
 }
-.str-chat__message.str-chat__message--failed .str-chat__message-error-indicator {
-  display: block;
-  position: absolute;
-  top: 8px;
-  inset-inline-end: calc(-1 * 18px / 2);
+.str-chat__message.str-chat__message--other.str-chat__message--with-avatar, .str-chat__message.str-chat__message--other.str-chat__message--pinned {
+  grid-template-areas: ". message-saved-for-later" ". pin-indicator" ". also-sent-in-channel" ". message-reminder" ". translation-indicator" "avatar message" "avatar translation-notice" "avatar custom-metadata" "avatar metadata";
+  grid-template-columns: auto 1fr;
 }
-
-.str-chat__message--highlighted {
-  transition: background-color 0.1s ease-out;
-  background-color: var(--str-chat__background-core-highlight);
+.str-chat__message.str-chat__message--other.str-chat__message-with-thread-link .str-chat__message-bubble {
+  border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
 }
-
-.str-chat__li:has(.str-chat__message--pinned) {
-  position: relative;
-  isolation: isolate;
+.str-chat__message.str-chat__message--other.str-chat__message-with-thread-link .str-chat__message-bubble .str-chat__message-text {
+  border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
 }
-.str-chat__li:has(.str-chat__message--pinned)::before {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline: -9999px;
-  background-color: var(--str-chat__background-core-highlight);
-  z-index: -1;
-  pointer-events: none;
+.str-chat__message.str-chat__message--other .str-chat__message-inner:not(:has(.str-chat__message-options--active)) {
+  margin-inline-end: var(--str-chat-message-options-size);
 }
-
-/* Fallback for browsers without :has() support */
-@supports not selector(:has(a, b)) {
-  .str-chat__message--pinned {
-    background-color: var(--str-chat__background-core-highlight);
-  }
+.str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host {
+  justify-self: flex-end;
 }
-/* This rule won't be applied in browsers that don't support :has() */
-.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
-  background-color: transparent;
+.str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
+  justify-self: flex-start;
 }
-
-/* Fallback for when :has() is unsupported */
-@supports not selector(:has(a, b)) {
-  .str-chat__li:hover {
-    background-color: transparent;
-  }
+.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__spacing-xs) * -1 * -1);
+  margin-inline-end: calc(var(--str-chat__spacing-xs) * -1);
 }
-.str-chat__ul,
-.str-chat__virtual-list {
-  /* This rule won't be applied in browsers that don't support :has() */
+.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;
+  flex-wrap: wrap;
 }
-.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__message.str-chat__message--me {
+  --chat-bg: var(--str-chat__chat-bg-outgoing);
+  --chat-bg-attachment: var(--str-chat__chat-bg-attachment-outgoing);
+  --chat-text: var(--str-chat__chat-text-outgoing);
+  --chat-border: var(--str-chat__chat-border-outgoing);
+  --chat-border-on-chat: var(--str-chat__chat-border-on-chat-outgoing);
+  --chat-reply-indicator: var(--str-chat__chat-reply-indicator-outgoing);
+  --chat-poll-progress-track: var(--str-chat__chat-poll-progress-track-outgoing);
+  --chat-poll-progress-fill: var(--str-chat__chat-poll-progress-fill-outgoing);
+  --chat-thread-connector: var(--str-chat__chat-thread-connector-outgoing);
+  column-gap: var(--str-chat__spacing-xs);
+  justify-items: flex-end;
 }
-.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__message.str-chat__message--me.str-chat__message--with-avatar, .str-chat__message.str-chat__message--me.str-chat__message--pinned {
+  grid-template-areas: "message-saved-for-later ." "pin-indicator ." "also-sent-in-channel ." "message-reminder ." "translation-indicator ." "message avatar" "translation-notice avatar" "custom-metadata avatar" "metadata avatar";
+  grid-template-columns: 1fr auto;
 }
-.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;
+.str-chat__message.str-chat__message--me.str-chat__message-with-thread-link .str-chat__message-bubble {
+  border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
 }
-
-.str-chat__message-inner .str-chat__message-options.str-chat__message-options--active {
-  display: flex;
+.str-chat__message.str-chat__message--me.str-chat__message-with-thread-link .str-chat__message-bubble .str-chat__message-text {
+  border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
 }
-
-.str-chat__message-inner .str-chat__message-options {
-  display: none;
+.str-chat__message.str-chat__message--me .str-chat__message-pin-indicator .str-chat__message-pin-indicator__content,
+.str-chat__message.str-chat__message--me .str-chat__message-also-sent-in-channel {
+  justify-content: flex-end;
 }
-
-.str-chat__message-inner:focus-within .str-chat__message-options {
+.str-chat__message.str-chat__message--me .str-chat__message-bubble {
+  justify-self: flex-end;
+}
+.str-chat__message.str-chat__message--me .str-chat__message-inner {
+  grid-template-areas: "reminder reminder" ". reactions" "options message-bubble" "replies replies";
+  grid-template-columns: 1fr auto;
+  margin-inline-start: var(--str-chat-message-options-size);
+}
+.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
+  flex-direction: row;
+}
+.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__message--me .str-chat__message-inner .str-chat__message-reactions-host {
+  justify-self: flex-start;
+}
+.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
+  justify-self: flex-end;
+}
+.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__spacing-xs) * -1 * -1);
+  margin-inline-start: calc(var(--str-chat__spacing-xs) * -1);
+}
+.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;
+  flex-wrap: wrap;
+}
+.str-chat__message.str-chat__message--me .str-chat__message-metadata {
+  justify-content: flex-end;
+  text-align: end;
+}
+.str-chat__message.str-chat__message--blocked, .str-chat__message.str-chat__message--system {
+  grid-template-areas: "message";
+}
+.str-chat__message.str-chat__message--system {
+  grid-template-columns: auto;
+}
+.str-chat__message.str-chat__message--deleted .str-chat__message-bubble {
+  padding: var(--str-chat__spacing-sm);
+}
+.str-chat__message.str-chat__message--deleted .str-chat__message-bubble .str-chat__message-text {
   display: flex;
+  align-items: center;
+  padding: 0;
+  gap: var(--str-chat__spacing-xxs);
 }
-
-.str-chat__message--other .str-chat__message-inner:not(:has(.str-chat__message-options--active)) {
-  margin-inline-end: var(--str-chat-message-options-size);
+.str-chat__message.str-chat__message--failed .str-chat__message-error-indicator {
+  display: block;
+  position: absolute;
+  top: 8px;
+  inset-inline-end: -9px;
 }
-
-.str-chat__message--me .str-chat__message-inner {
-  margin-inline-start: var(--str-chat-message-options-size);
+.str-chat__message.str-chat__message--has-attachment {
+  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
 }
-
-.str-chat__li--middle .str-chat__message .str-chat__message-metadata,
-.str-chat__li--top .str-chat__message .str-chat__message-metadata {
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
+  padding: 0;
+}
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-text {
   display: none;
 }
-.str-chat__li--middle .str-chat__message > .str-chat__avatar,
-.str-chat__li--top .str-chat__message > .str-chat__avatar {
-  visibility: hidden;
+.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.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.str-chat__message--is-emoji-only.str-chat__message--is-emoji-only-count-3 .str-chat__message-inner .str-chat__message-bubble {
+  background-color: transparent;
+  overflow: visible;
 }
-
-.str-chat__li--single .str-chat__message--other .str-chat__message-bubble,
-.str-chat__li--bottom .str-chat__message--other .str-chat__message-bubble {
-  border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
+.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__li--single .str-chat__message--me .str-chat__message-bubble,
-.str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble {
-  border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
+.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;
 }
-
-.str-chat__li--top .str-chat__message-bubble,
-.str-chat__li--middle .str-chat__message-bubble {
-  border-radius: var(--str-chat__message-bubble-radius-group-middle);
+.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 {
+  font-size: 48px;
+  line-height: 48px;
 }
-
-.str-chat__message-with-thread-link.str-chat__message--other .str-chat__message-bubble {
-  border-end-start-radius: calc(var(--str-chat__radius-md) / 6);
+.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 {
+  font-size: 32px;
+  line-height: 32px;
 }
-.str-chat__message-with-thread-link.str-chat__message--me .str-chat__message-bubble {
-  border-end-end-radius: calc(var(--str-chat__radius-md) / 6);
+.str-chat__message.str-chat__message--is-emoji-only .str-chat__message-replies-count-button-wrapper::after {
+  display: none;
 }
-
-.str-chat__li--top .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar,
-.str-chat__li--middle .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar {
-  visibility: hidden;
-  pointer-events: none;
+.str-chat__message.str-chat__message--highlighted {
+  transition: background-color 0.1s ease-out;
+  background-color: var(--str-chat__background-core-highlight);
 }
 
 .str-chat__message-also-sent-in-channel {
@@ -5682,9 +5621,7 @@ to create clearer separation from the base surface.
   overflow-x: clip;
   text-overflow: ellipsis;
   max-width: 100%;
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  font-size: var(--str-chat__typography-font-size-sm);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat .str-chat__attachment-preview-file__info .str-chat__attachment-preview-file__data {
   display: flex;
@@ -5693,9 +5630,7 @@ to create clearer separation from the base surface.
   max-width: 100%;
   gap: var(--str-chat__spacing-xxs);
   color: var(--str-chat__text-secondary);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  font-size: var(--str-chat__typography-font-size-xs);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-metadata-default);
 }
 .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 {
@@ -6241,9 +6176,8 @@ to create clearer separation from the base surface.
   justify-content: center;
   flex: 1;
   min-width: 0;
-  font-size: var(--str-chat__typography-font-size-xs);
-  line-height: var(--str-chat__typography-line-height-tight);
   height: 40px;
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__author {
   white-space: nowrap;
@@ -6252,7 +6186,7 @@ to create clearer separation from the base surface.
   overflow-x: clip;
   text-overflow: ellipsis;
   overflow-x: hidden;
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message {
   display: flex;
@@ -6604,9 +6538,6 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__virtual-list {
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-gutter: stable both-edges;
   background: var(--str-chat__background-core-app);
   color: var(--str-chat__text-primary);
   --str-chat__message-list-scroll-max-width: calc(
@@ -6968,6 +6899,9 @@ to create clearer separation from the base surface.
 .str-chat__poll-creation-dialog .str-chat__form__switch-field__label {
   width: 100%;
 }
+.str-chat__poll-creation-dialog .str-chat__prompt__header__description {
+  display: none;
+}
 .str-chat__poll-creation-dialog .str-chat__multiple-answers-field__votes-limit-field {
   padding-top: 0;
 }
@@ -7333,7 +7267,7 @@ to create clearer separation from the base surface.
   background-color: var(--str-chat__background-utility-pressed);
 }
 .str-chat__reaction-selector .str-chat__reaction-selector-list .str-chat__reaction-selector-list__item-button:not(:disabled):focus-visible {
-  outline: 2px solid var(--str-chat__border-utility-focused);
+  outline: var(--str-chat__focus-outline, 2px solid var(--str-chat__border-utility-focused));
   outline-offset: -2px;
 }
 .str-chat__reaction-selector .str-chat__reaction-selector-list .str-chat__reaction-selector-list__item-button:not(:disabled)[aria-pressed=true] {
@@ -7341,11 +7275,13 @@ to create clearer separation from the base surface.
 }
 .str-chat__reaction-selector .str-chat__reaction-selector-list .str-chat__reaction-selector-list__item-button .str-chat__reaction-icon {
   font-size: var(--str-chat__typography-font-size-2xl);
-  line-height: 1;
+  height: var(--str-chat__typography-font-size-2xl);
+  width: var(--str-chat__typography-font-size-2xl);
+  font-family: system-ui;
+  line-height: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: system-ui, sans-serif;
 }
 
 .str-chat__reaction-selector-extended-list {
@@ -7359,8 +7295,6 @@ to create clearer separation from the base surface.
   height: var(--str-chat__emoji-md);
   width: var(--str-chat__emoji-md);
   font-size: var(--str-chat__emoji-md);
-  letter-spacing: var(--typography-letter-spacing-default);
-  font-style: normal;
   line-height: 0;
   font-family: system-ui;
   display: flex;
@@ -7404,7 +7338,7 @@ to create clearer separation from the base surface.
   border: 1px solid var(--str-chat__reaction-border);
   background: var(--str-chat__reaction-bg);
   color: var(--str-chat__reaction-text);
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--str-chat__box-shadow-3);
   font-weight: inherit;
   font-size: inherit;
   line-height: 1;
@@ -7437,7 +7371,6 @@ to create clearer separation from the base surface.
 .str-chat__message-reactions .str-chat__message-reactions__list-item-button .str-chat__message-reactions__list-item-icon {
   font-family: system-ui;
   font-size: var(--str-chat__font-size-size-17);
-  font-style: normal;
   line-height: var(--str-chat__typography-line-height-normal);
 }
 .str-chat__message-reactions .str-chat__message-reactions__list-button .str-chat__message-reactions__total-count,
@@ -7498,7 +7431,6 @@ to create clearer separation from the base surface.
   min-width: unset;
 }
 .str-chat__message-reactions-detail {
-  font-family: var(--str-chat__typography-font-family-sans);
   box-shadow: var(--str-chat__box-shadow-3);
   padding-block-start: var(--str-chat__spacing-xxs);
   display: flex;
@@ -7513,9 +7445,7 @@ to create clearer separation from the base surface.
   min-height: var(--str-chat__size-32);
   max-height: var(--str-chat__size-32);
   color: var(--str-chat__text-tertiary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-medium);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-heading-xs);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list {
   list-style: none;
@@ -7547,7 +7477,7 @@ to create clearer separation from the base surface.
   border: 1px solid var(--str-chat__reaction-border);
   background: var(--str-chat__reaction-bg);
   color: var(--str-chat__reaction-text);
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--str-chat__box-shadow-3);
   font-weight: inherit;
   font-size: inherit;
   line-height: 1;
@@ -7579,7 +7509,6 @@ to create clearer separation from the base surface.
 .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;
   font-size: var(--str-chat__font-size-size-17);
-  font-style: normal;
   line-height: var(--str-chat__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 {
@@ -7674,7 +7603,6 @@ to create clearer separation from the base surface.
 .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;
   font-size: var(--str-chat__font-size-size-17);
-  font-style: normal;
   line-height: var(--str-chat__typography-line-height-normal);
 }
 .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 {
@@ -7685,9 +7613,7 @@ to create clearer separation from the base surface.
 }
 .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 .str-chat__message-reactions-detail__user-list-item-username {
   color: var(--str-chat__text-primary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
 }
 .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 .str-chat__message-reactions-detail__user-list-item-button {
   padding: unset;
@@ -7707,6 +7633,10 @@ to create clearer separation from the base surface.
   padding-block: var(--str-chat__spacing-xs);
   justify-content: center;
 }
+.str-chat__search.str-chat__search--active {
+  flex: 1;
+  min-height: 0;
+}
 
 .str-chat__search-bar {
   padding-inline: var(--str-chat__spacing-md);
@@ -7721,11 +7651,14 @@ to create clearer separation from the base surface.
   border-radius: var(--str-chat__radius-max);
   border: 1px solid var(--str-chat__border-core-default);
   color: var(--str-chat__input-text-placeholder);
-  font: var(--str_chat__heading-xs-text);
-  font-weight: var(--str-chat__typography-font-weight-regular);
+  font: var(--str-chat__font-caption-default);
   flex-shrink: 1;
   flex-grow: 1;
 }
+.str-chat__search-bar .str-chat__search-bar__input-wrapper:focus-within {
+  outline: var(--str-chat__focus-outline, 2px solid var(--border-utility-focused));
+  outline-offset: var(--str-chat__focus-outline-offset, 2px);
+}
 .str-chat__search-bar .str-chat__search-bar__input-wrapper .str-chat__search-bar__input {
   min-height: 24px;
   border: none;
@@ -7752,6 +7685,8 @@ to create clearer separation from the base surface.
   display: flex;
   flex-direction: column;
   gap: var(--str-chat__spacing-sm);
+  flex: 1;
+  min-height: 0;
 }
 .str-chat__search-results .str-chat__search-results-header {
   overflow-x: auto;
@@ -7766,6 +7701,25 @@ to create clearer separation from the base surface.
   flex-shrink: 0;
 }
 
+.str-chat__search-source-results {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.str-chat__search-source-result-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.str-chat__search-source-result-list .str-chat__infinite-scroll-paginator {
+  flex: 1;
+  min-height: 0;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-width: thin;
+}
 .str-chat__search-source-result-list .str-chat__search-result-container {
   padding: var(--str-chat__spacing-xxs);
   border-bottom: 1px solid var(--str-chat__border-core-subtle);
@@ -7793,7 +7747,7 @@ to create clearer separation from the base surface.
   text-align: start;
 }
 .str-chat__search-source-result-list .str-chat__search-result-container .str-chat__search-result--user .str-chat__search-result-data .str-chat__search-result__display-name {
-  font: var(--str-chat__font-heading-xs);
+  font: var(--str-chat__font-caption-emphasis);
   color: var(--str-chat__text-primary);
   flex: 1;
   min-width: 0;
@@ -7807,10 +7761,8 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  font-size: var(--str-chat__typography-font-size-sm);
   color: var(--str-chat__text-tertiary);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__search-source-result-list .str-chat__search-result-container .str-chat__search-result--user {
   background: var(--str-chat__background-core-elevation-1);
@@ -7828,7 +7780,7 @@ to create clearer separation from the base surface.
 .str-chat__search-source-result-list__footer,
 .str-chat__search-results-presearch,
 .str-chat__search-source-results-empty {
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-tertiary);
   padding-block: var(--str-chat__spacing-xs);
   display: flex;
@@ -7836,6 +7788,27 @@ to create clearer separation from the base surface.
   align-items: center;
 }
 
+.str-chat__skip-navigation-link {
+  background-color: var(--str-chat__background-color, #fff);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--str-chat__text-color, currentColor);
+  left: 0;
+  margin: 8px;
+  padding: 8px 12px;
+  position: absolute;
+  text-decoration: none;
+  top: 0;
+  transform: translateY(-200%);
+  z-index: 2;
+}
+
+.str-chat__skip-navigation-link:focus,
+.str-chat__skip-navigation-link:focus-visible {
+  border: 1px solid var(--accent-primary);
+  transform: translateY(0);
+}
+
 .str-chat__summarized-message-preview {
   display: flex;
   align-items: center;
@@ -7844,10 +7817,7 @@ to create clearer separation from the base surface.
   flex-shrink: 1;
   min-width: 0;
   color: var(--str-chat__text-secondary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-style: normal;
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__summarized-message-preview .str-chat__icon {
   flex-shrink: 0;
@@ -7877,7 +7847,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__summarized-message-preview .str-chat__summarized-message-preview__sender {
   color: var(--str-chat__text-tertiary);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
+  font: var(--str-chat__font-caption-emphasis);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7886,10 +7856,8 @@ to create clearer separation from the base surface.
 .str-chat .str-chat__suggestion-list {
   max-height: 320px;
   min-width: 200px;
-  overflow-x: hidden;
   overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
+  scrollbar-width: none;
 }
 .str-chat .str-chat__suggestion-list .str-chat__suggestion-list-item--selected {
   background-color: var(--str-chat__dialog-menu-button-hover-background-color);
@@ -8156,9 +8124,7 @@ to create clearer separation from the base surface.
 .str-chat__thread-list-empty-placeholder p {
   margin: 0;
   color: var(--str-chat__text-secondary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
 }
 
 .str-chat__thread-list__header {
@@ -8231,11 +8197,15 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-xxs);
   padding-block: var(--str-chat__spacing-xxxs);
 }
+.str-chat__thread-list-item__content-leading .str-chat__summarized-message-preview {
+  font: var(--str-chat__font-body-default);
+}
+.str-chat__thread-list-item__content-leading .str-chat__summarized-message-preview .str-chat__summarized-message-preview__sender {
+  font: var(--str-chat__font-body-emphasis);
+}
 
 .str-chat__thread-list-item__title {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-emphasis);
   color: var(--str-chat__text-tertiary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8255,9 +8225,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__thread-list-item__reply-count {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-emphasis);
   color: var(--str-chat__text-link);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8265,9 +8233,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__thread-list-item__timestamp {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-tertiary);
   white-space: nowrap;
   min-width: 0;