stream-chat-react 14.0.1 → 14.2.0

package/dist/css/index.css

@@ -1,7 +1,16 @@
 @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 +999,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);
@@ -1085,17 +1094,34 @@ to create clearer separation from the base surface.
   --str-chat__box-shadow-4: var(--str-chat__dark-elevation-4);
 }
 
+@layer minimal-normalize {
+  .str-chat *,
+  .str-chat ::before,
+  .str-chat ::after {
+    box-sizing: border-box;
+  }
+  .str-chat button,
+  .str-chat input,
+  .str-chat optgroup,
+  .str-chat select,
+  .str-chat textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+  }
+}
 .str-chat {
-  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 */
@@ -1111,6 +1137,10 @@ to create clearer separation from the base surface.
 .str-chat input[type=number] {
   -moz-appearance: textfield;
 }
+.str-chat input::placeholder,
+.str-chat textarea::placeholder {
+  color: var(--str-chat__input-text-placeholder);
+}
 
 .str-chat__icon {
   flex-shrink: 0;
@@ -1208,7 +1238,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 +1246,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 +1254,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 {
@@ -1303,12 +1329,14 @@ to create clearer separation from the base surface.
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   background-color: var(--str-chat__background-core-overlay-light);
 }
 .str-chat .str-chat__image-placeholder svg {
   fill: var(--str-chat__accent-neutral);
   width: min(var(--str-chat__icon-size-lg, 32px), 50%);
   height: min(var(--str-chat__icon-size-lg, 32px), 50%);
+  flex-shrink: 0;
 }
 
 .str-chat .str-chat__button {
@@ -1316,7 +1344,6 @@ to create clearer separation from the base surface.
   border: none;
   padding: 0;
   position: relative; /* creates positioning context for pseudo ::after overlay */
-  overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
   display: flex;
@@ -1494,7 +1521,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 {
@@ -1505,25 +1531,16 @@ to create clearer separation from the base surface.
   font-size: var(--str-chat__typography-font-size-sm, 0.875rem);
   font-weight: var(--str-chat__typography-font-weight-medium, 500);
   line-height: var(--str-chat__typography-line-height-tight, 1.25);
-  color: var(--str-chat__input-text-default, #1a1b25);
+  color: var(--str-chat__input-text-default);
   text-align: center;
   background: transparent;
   border: none;
-  outline: none;
   box-shadow: none;
 }
-.str-chat__form-numeric-input__input::placeholder {
-  color: var(--str-chat__input-text-placeholder, var(--str-chat__text-tertiary));
-}
 .str-chat__form-numeric-input--disabled .str-chat__form-numeric-input__input {
   color: var(--str-chat__input-text-placeholder);
   cursor: not-allowed;
 }
-.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 +1563,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 +1593,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 +1642,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 +1654,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 +1672,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 +1686,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 +1704,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 +1719,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 {
@@ -1727,14 +1744,9 @@ to create clearer separation from the base surface.
   background: transparent;
   border: none;
   outline: none;
-  outline-style: none;
   box-shadow: none;
 }
 
-.str-chat__form-text-input .str-chat__form-text-input__input::placeholder {
-  color: var(--str-chat__input-text-placeholder);
-}
-
 .str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input {
   color: var(--str-chat__input-text-placeholder);
   cursor: not-allowed;
@@ -1747,7 +1759,6 @@ to create clearer separation from the base surface.
 .str-chat__form-text-input .str-chat__form-text-input__input:focus,
 .str-chat__form-text-input .str-chat__form-text-input__input:focus-visible {
   outline: none;
-  outline-style: none;
   box-shadow: none;
 }
 
@@ -1814,9 +1825,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 +1994,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 +2010,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 +2032,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 +2060,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 {
@@ -2073,6 +2077,12 @@ to create clearer separation from the base surface.
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button:disabled {
   background-color: transparent;
+  color: var(--str-chat__text-disabled);
+  cursor: default;
+}
+.str-chat .str-chat__context-menu .str-chat__context-menu__button:disabled .str-chat__context-menu__button__details,
+.str-chat .str-chat__context-menu .str-chat__context-menu__button:disabled .str-chat__icon {
+  color: inherit;
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button .str-chat__icon {
   height: var(--str-chat__icon-size-sm);
@@ -2087,19 +2097,28 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
   flex: auto;
   text-align: start;
-  color: var(--str-chat__text-primary);
   white-space: nowrap;
   min-width: 0;
 }
 .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 +2221,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 +2230,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 +2286,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 +2300,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 +2523,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 +2552,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 +2616,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 +2790,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 +2817,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 +2864,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 +2884,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;
@@ -2891,12 +2903,15 @@ to create clearer separation from the base surface.
   padding: 0;
 }
 .str-chat__message--has-single-attachment .str-chat__message-attachment-card img {
-  height: var(--str-chat__scraped-image-height);
+  aspect-ratio: 1.91/1;
   width: 100%;
+  height: auto;
+  max-height: var(--str-chat__scraped-image-height);
   border-radius: 0;
 }
 .str-chat__message--has-single-attachment .str-chat__message-attachment-card .str-chat__message-attachment-card--header:has(.str-chat__image-placeholder) {
-  height: var(--str-chat__scraped-image-height);
+  aspect-ratio: 1.91/1;
+  height: auto;
 }
 .str-chat__message--has-single-attachment .str-chat__message-attachment-card .str-chat__message-attachment-card--header:has(.str-chat__image-placeholder) .str-chat__image-placeholder {
   border-radius: 0;
@@ -2912,42 +2927,93 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
 }
 
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery {
-  background: transparent;
+.str-chat__attachment-list .str-chat__message-attachment--gallery,
+.str-chat__attachment-list .str-chat__message-attachment--image {
+  min-width: 0;
+  max-width: 100%;
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery {
+  background-color: var(--chat-bg);
   color: var(--str-chat__text-primary);
   border-radius: calc(var(--str-chat__message-bubble-radius-group-bottom) - var(--str-chat__attachment-margin));
   display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
   overflow: hidden;
   border-radius: var(--str-chat__radius-lg);
-  gap: var(--str-chat__space-2);
+  gap: var(--str-chat__spacing-xxs);
   width: var(--str-chat__attachment-max-width);
-  max-width: var(--str-chat__attachment-max-width);
-  height: var(--str-chat__attachment-max-width);
+  max-width: 100%;
+  aspect-ratio: 4/3;
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image {
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
+  border-radius: var(--str-chat__radius-md);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading, .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed {
+  min-height: 0;
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:only-child,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:only-child {
+  grid-column: 1/-1;
+  grid-row: 1/-1;
+  border-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(1),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(1) {
+  border-start-start-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(2),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(2) {
+  border-start-end-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(3),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(3) {
+  border-end-start-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(4),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__image:nth-child(4) {
+  border-end-end-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--two-images {
   grid-template-rows: 1fr;
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(1) {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(1),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(1) {
+  border-end-start-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(2),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--two-images .str-chat__modal-gallery__image:nth-child(2) {
+  border-end-end-radius: var(--str-chat__radius-lg);
+}
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(1),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(1) {
   grid-column: 1;
-  grid-row: 1/span 2; /* Span two rows */
+  grid-row: 1/span 2;
+  border-end-start-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(2) {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(2),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(2) {
   grid-column: 2;
   grid-row: 1;
+  border-start-end-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(3) {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(3),
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery.str-chat__modal-gallery--three-images .str-chat__modal-gallery__image:nth-child(3) {
   grid-column: 2;
   grid-row: 2;
+  border-end-end-radius: var(--str-chat__radius-lg);
 }
-.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__placeholder {
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery .str-chat__modal-gallery__placeholder,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery .str-chat__modal-gallery__placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2989,25 +3055,42 @@ to create clearer separation from the base surface.
   object-fit: cover;
   cursor: zoom-in;
   max-width: var(--str-chat__attachment-max-width);
+  max-height: var(--str-chat__attachment-max-width);
   transition: opacity 150ms ease-in-out;
 }
+.str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading,
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading {
+  min-height: 200px;
+  align-items: stretch;
+}
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading img,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading img,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading img {
+  position: absolute;
   opacity: 0;
 }
+.str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading .str-chat__modal-gallery__image-loading-overlay,
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading .str-chat__modal-gallery__image-loading-overlay,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--loading .str-chat__modal-gallery__image-loading-overlay {
+  position: static;
+  flex: 1;
+  min-width: 0;
+  height: auto;
+}
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed {
   cursor: pointer;
   min-height: 200px;
+  align-items: stretch;
 }
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed .str-chat__image-placeholder.str-chat__base-image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed .str-chat__image-placeholder.str-chat__base-image--load-failed,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed .str-chat__image-placeholder.str-chat__base-image--load-failed {
-  width: 100%;
-  min-height: 200px;
-  align-self: stretch;
+  flex: 1;
+  min-width: 0;
+  height: auto;
 }
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed img,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image.str-chat__modal-gallery__image--load-failed img,
@@ -3033,7 +3116,7 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--chat-bg);
+  background-color: var(--str-chat__background-core-overlay-light);
   background-image: linear-gradient(90deg, var(--str-chat__skeleton-loading-base) 0%, var(--str-chat__skeleton-loading-highlight) 50%, var(--str-chat__skeleton-loading-base) 100%);
   background-repeat: no-repeat;
   background-size: 200% 100%;
@@ -3076,8 +3159,18 @@ to create clearer separation from the base surface.
 .str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image:focus-visible,
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image:focus-visible,
 .str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image:focus-visible {
-  outline: 2px solid var(--str-chat__border-utility-focused);
-  outline-offset: 2px;
+  outline: none;
+}
+.str-chat__attachment-list .str-chat__message-attachment--giphy .str-chat__modal-gallery__image:focus-visible::before,
+.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery__image:focus-visible::before,
+.str-chat__attachment-list .str-chat__message-attachment--image .str-chat__modal-gallery__image:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 2px var(--str-chat__brand-300);
+  z-index: 1;
 }
 
 @keyframes str-chat__modal-gallery-loading-shimmer {
@@ -3298,10 +3391,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 +3449,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 +3487,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 +3530,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 +3539,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 +3548,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 +3578,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,7 +3924,8 @@ 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));
 }
@@ -3921,16 +4009,16 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__spacing-xxs);
   position: relative;
 }
-.str-chat__channel-list-item-container:has(.str-chat__channel-list-item__action-buttons--active) .str-chat__channel-list-item__action-buttons, .str-chat__channel-list-item-container:hover .str-chat__channel-list-item__action-buttons {
+.str-chat__channel-list-item-container:has(.str-chat__channel-list-item__action-buttons--active) .str-chat__channel-list-item__action-buttons, .str-chat__channel-list-item-container:focus-within .str-chat__channel-list-item__action-buttons, .str-chat__channel-list-item-container:hover .str-chat__channel-list-item__action-buttons {
   display: flex;
 }
 .str-chat__channel-list-item-container .str-chat__channel-list-item__action-buttons {
   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 +4044,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 +4081,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 +4101,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 {
@@ -4057,7 +4140,7 @@ to create clearer separation from the base surface.
   transform: translate3d(0, -50%, 0);
   visibility: visible;
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button {
   --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
   gap: 4px;
   padding: var(--str-chat__spacing-xs);
@@ -4068,15 +4151,15 @@ to create clearer separation from the base surface.
   background: transparent;
   color: var(--str-chat__text-tertiary);
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button[aria-selected=true] {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button[aria-selected=true] {
   color: var(--str-chat__text-primary);
   background: var(--str-chat__background-core-surface-default);
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button .str-chat__icon {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button .str-chat__icon {
   height: var(--str-chat__icon-size-md);
   width: var(--str-chat__icon-size-md);
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button .str-chat__button__content {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__button.str-chat__chat-view__selector-button .str-chat__button__content {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4241,6 +4324,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 +4674,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 +4739,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,115 +4838,85 @@ 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 .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);
-}
 
-/* Make spaces between message groups */
-.str-chat__li--top {
-  padding-block-start: var(--str-chat__spacing-xs);
-  padding-block-end: var(--str-chat__spacing-xxxs);
+.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__li--bottom {
-  padding-block-start: var(--str-chat__spacing-xxxs);
-  padding-block-end: var(--str-chat__spacing-xs);
+.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__li--middle {
-  padding-block: var(--str-chat__spacing-xxxs);
+.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__li--single {
-  padding-block: var(--str-chat__spacing-xs);
-}
-
-.str-chat__message {
-  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
-  padding-inline: var(--str-chat__message-composer-padding);
+.str-chat__li:has(.str-chat__message--pinned) {
+  position: relative;
+  isolation: isolate;
 }
-@media (max-width: 767px) {
-  .str-chat__message {
-    --str-chat-message-options-size: var(--str-chat__message-options-button-size);
-  }
+.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-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__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
+  background-color: transparent;
 }
-.str-chat__message .str-chat__message-options {
-  --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7);
+.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__message a {
-  text-decoration: none;
-  color: var(--str-chat__chat-text-link);
+.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__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.str-chat__li--middle {
+  padding-block: var(--str-chat__spacing-xxxs);
 }
-.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.str-chat__li--single {
+  padding-block: var(--str-chat__spacing-xs);
 }
-.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.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__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__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__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__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__message.str-chat__message--is-emoji-only .str-chat__message-replies-count-button-wrapper::after {
-  display: 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__message.str-chat__message--has-attachment {
-  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
+.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__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__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__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
-  padding: 0;
+.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__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-text {
-  display: none;
+.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 {
@@ -4873,13 +4925,40 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__message {
-  background: transparent;
-  color: var(--str-chat__message-color, var(--chat-text));
+  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+  color: var(--chat-text);
   display: grid;
-  word-wrap: break-word;
   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--other .str-chat__message-inner, .str-chat__message.str-chat__message--me .str-chat__message-inner {
+    margin-inline: 0;
+  }
+  .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 a {
+  text-decoration: none;
+  color: var(--str-chat__chat-text-link);
+}
+.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-pin-indicator {
   grid-area: pin-indicator;
@@ -4903,98 +4982,22 @@ 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;
   grid-template-areas: "reactions ." "message-bubble options" "replies replies";
-  grid-template-columns: auto 1fr;
+  grid-template-columns: fit-content(var(--str-chat__message-max-width)) auto;
   column-gap: var(--str-chat__space-8);
   position: relative;
+  width: fit-content;
 }
 .str-chat__message .str-chat__message-inner .str-chat__message-reactions-host {
   display: flex;
   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 +5008,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: min(var(--str-chat__message-max-width), 100%);
+  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 +5029,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,39 +5049,141 @@ to create clearer separation from the base surface.
   align-items: center;
   height: var(--str-chat__size-24);
   color: var(--str-chat__chat-text-timestamp);
+  font: var(--str-chat__font-metadata-default);
+}
+.str-chat__message .str-chat__message-metadata .str-chat__message-metadata__name {
+  overflow-y: hidden;
+  margin-inline-end: var(--str-chat__spacing-xxs);
+}
+.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--blocked-inner {
+  padding-inline: var(--str-chat__spacing-xxs);
+}
+.str-chat__message .str-chat__message--blocked-inner p {
+  white-space: pre-line;
+  margin: 0;
+}
+.str-chat__message .str-chat__message--blocked-inner {
+  border-radius: var(--str-chat__radius-md);
+  background-color: var(--chat-bg);
+  padding-block: var(--str-chat__spacing-xs);
+}
+.str-chat__message .str-chat__message-error-indicator {
+  display: none;
+}
+.str-chat__message .str-chat__message-inner--error {
+  cursor: pointer;
+}
+.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--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--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.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__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__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);
+}
+.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--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__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__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.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.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.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: auto fit-content(var(--str-chat__message-max-width));
+  margin-inline-start: var(--str-chat-message-options-size);
 }
-.str-chat__message .str-chat__message-metadata * {
-  font: var(--str-chat__font-metadata-default);
+.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
+  flex-direction: row;
 }
-.str-chat__message .str-chat__message-metadata .str-chat__message-metadata__name {
-  overflow-y: hidden;
-  margin-inline-end: var(--str-chat__spacing-xxs);
+.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-metadata .str-chat__message-edited-indicator {
-  margin-inline-start: var(--str-chat__spacing-xs);
+.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-metadata {
-  justify-content: flex-end;
-  text-align: end;
+.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--blocked-inner {
-  padding-inline: var(--str-chat__spacing-xxs);
+.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--blocked-inner p {
-  white-space: pre-line;
-  margin: 0;
+.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-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));
-  padding-block: 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-error-indicator {
-  display: none;
+.str-chat__message.str-chat__message--blocked, .str-chat__message.str-chat__message--system {
+  grid-template-areas: "message";
 }
-.str-chat__message .str-chat__message-inner--error {
-  cursor: pointer;
+.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);
@@ -5095,128 +5198,51 @@ to create clearer separation from the base surface.
   display: block;
   position: absolute;
   top: 8px;
-  inset-inline-end: calc(-1 * 18px / 2);
+  inset-inline-end: -9px;
 }
-
-.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--has-attachment {
+  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
 }
-
-.str-chat__li:has(.str-chat__message--pinned) {
-  position: relative;
-  isolation: isolate;
+.str-chat__message.str-chat__message--has-attachment .str-chat__message-bubble {
+  width: 100%;
 }
-.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--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
+  padding: 0;
 }
-
-/* 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--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-text {
+  display: none;
 }
-/* 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)) {
+.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;
 }
-
-/* Fallback for when :has() is unsupported */
-@supports not selector(:has(a, b)) {
-  .str-chat__li:hover {
-    background-color: transparent;
-  }
-}
-.str-chat__ul,
-.str-chat__virtual-list {
-  /* This rule won't be applied in browsers that don't support :has() */
-}
-.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__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;
-}
-
-.str-chat__message-inner .str-chat__message-options.str-chat__message-options--active {
-  display: flex;
-}
-
-.str-chat__message-inner .str-chat__message-options {
-  display: none;
+.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-inner:focus-within .str-chat__message-options {
-  display: flex;
+.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--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--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--me .str-chat__message-inner {
-  margin-inline-start: var(--str-chat-message-options-size);
+.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__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--is-emoji-only .str-chat__message-replies-count-button-wrapper::after {
   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__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__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__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-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-with-thread-link.str-chat__message--me .str-chat__message-bubble {
-  border-end-end-radius: calc(var(--str-chat__radius-md) / 6);
-}
-
-.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 {
@@ -5549,6 +5575,10 @@ to create clearer separation from the base surface.
   gap: var(--str-chat__spacing-md);
 }
 .str-chat .str-chat__attachment-preview-audio,
+.str-chat .str-chat__attachment-preview-voice-recording {
+  --chat-border-on-chat: var(--str-chat__chat-border-on-chat-incoming);
+}
+.str-chat .str-chat__attachment-preview-audio,
 .str-chat .str-chat__attachment-preview-file,
 .str-chat .str-chat__attachment-preview-voice-recording,
 .str-chat .str-chat__attachment-preview-unsupported {
@@ -5682,9 +5712,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 +5721,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 {
@@ -6132,12 +6158,12 @@ to create clearer separation from the base surface.
 .str-chat .str-chat__message-composer-controls .str-chat__textarea textarea {
   background: transparent;
   color: var(--str-chat__input-text-default);
+  font: var(--str-chat__font-body-default);
   resize: none;
   border: none;
   box-shadow: none;
   outline: none;
   width: 100%;
-  font-size: var(--str-chat__typography-font-size-md);
   scrollbar-width: none;
 }
 .str-chat .str-chat__message-composer-controls .str-chat__emoji-picker-button {
@@ -6241,9 +6267,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 +6277,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 +6629,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(
@@ -6852,7 +6874,7 @@ to create clearer separation from the base surface.
   padding: var(--str-chat__spacing-xs);
   width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--str-chat__spacing-xs));
   max-width: 100%;
-  min-width: 260px;
+  min-width: min(260px, 100%);
   font: var(--str-chat__font-caption-default);
 }
 .str-chat .str-chat__poll button {
@@ -6968,6 +6990,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;
 }
@@ -7255,13 +7280,12 @@ to create clearer separation from the base surface.
 
 .str-chat__reaction-selector {
   display: flex;
-  padding-inline-start: var(--str-chat__spacing-xxs, 0);
-  padding-inline-end: var(--str-chat__spacing-xs, 0);
-  padding-block: var(--str-chat__spacing-xxs, 0);
+  padding-inline: var(--str-chat__spacing-xxs);
+  padding-block: var(--str-chat__spacing-xxs);
   align-items: center;
   gap: var(--str-chat__spacing-xs);
-  border-radius: var(--str-chat__radius-4xl, 32px);
-  background: var(--str-chat__background-core-elevation-2, #fff);
+  border-radius: var(--str-chat__radius-4xl);
+  background: var(--str-chat__background-core-elevation-2);
   box-shadow: var(--str-chat__box-shadow-3);
 }
 .str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list) {
@@ -7303,12 +7327,15 @@ to create clearer separation from the base surface.
   width: var(--str-chat__icon-size-sm);
   height: var(--str-chat__icon-size-sm);
 }
+.str-chat__reaction-selector:has(.str-chat__reaction-selector__add-button) {
+  padding-inline-end: var(--str-chat__spacing-xs);
+}
 .str-chat__reaction-selector .str-chat__reaction-selector-list {
   list-style: none;
-  margin: var(--str-chat__spacing-none, 0);
-  padding: var(--str-chat__spacing-none, 0);
+  margin: var(--str-chat__spacing-none);
+  padding: var(--str-chat__spacing-none);
   display: flex;
-  gap: var(--str-chat__space-2, 2px);
+  gap: var(--str-chat__space-2);
 }
 .str-chat__reaction-selector .str-chat__reaction-selector-list .str-chat__reaction-selector-list__item {
   display: flex;
@@ -7333,7 +7360,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 +7368,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 +7388,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 +7431,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 +7464,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 +7524,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 +7538,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 +7570,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 +7602,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 +7696,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 +7706,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 +7726,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,18 +7744,20 @@ 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;
   background: none;
   width: 100%;
-  font-size: inherit;
-  line-height: inherit;
+  font: inherit;
 }
 .str-chat__search-bar .str-chat__search-bar__input-wrapper .str-chat__search-bar__input:focus {
   outline: none;
@@ -7752,9 +7777,10 @@ 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;
   scrollbar-width: none;
 }
 .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons {
@@ -7766,6 +7792,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 +7838,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 +7852,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 +7871,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 +7879,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 +7908,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 +7938,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 +7947,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 +8215,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 +8288,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 +8316,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 +8324,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;