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

package/dist/css/index.css

@@ -16,144 +16,623 @@
   transform: rotate(45deg);
 }
 
-.str-chat {
-  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
-  --str-chat__spacing-px: 1px;
-}
-
-.str-chat {
-  /* Border radius used for circular elements */
-  --str-chat__border-radius-circle: var(--radius-max);
-  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
-  --str-chat__font-family:
-    var(--typography-font-family-sans), system-ui, -apple-system, BlinkMacSystemFont,
-    Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
-  --str-chat__metadata-emphasis-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-xs) / var(--typography-line-height-tight)
-    var(--str-chat__font-family);
-  --str-chat__metadata-default-text: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-xs) / var(--typography-line-height-tight)
-    var(--str-chat__font-family);
-  --str-chat__caption-emphasis-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-sm) / var(--typography-line-height-normal)
-    var(--str-chat__font-family);
-  --str-chat__caption-default-text: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-sm) / var(--typography-line-height-normal)
-    var(--str-chat__font-family);
-  --str-chat__body-emphasis-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-md) / var(--typography-line-height-normal)
-    var(--str-chat__font-family);
-  --str-chat__body-default-text: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-md) / var(--typography-line-height-normal)
-    var(--str-chat__font-family);
-  --str-chat__heading-xs-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-sm) / var(--typography-line-height-normal)
-    var(--str-chat__font-family);
-  --str-chat__heading-sm-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-md) / var(--typography-line-height-normal)
-    var(--str-chat__font-family);
-  --str-chat__heading-md-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-lg) / var(--typography-line-height-relaxed)
-    var(--str-chat__font-family);
-  --str-chat__heading-lg-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-xl) / var(--typography-line-height-relaxed)
-    var(--str-chat__font-family);
-  --str-chat__numeric-md-text: normal var(--typography-font-weight-bold)
-    var(--typography-font-size-xxs) / 100% var(--str-chat__font-family);
-  --str-chat__numeric-xl-text: normal var(--typography-font-weight-bold)
-    var(--typography-font-size-sm) / 100% var(--str-chat__font-family);
-  color: var(--text-primary, #1a1b25);
-}
-
 .str-chat,
-.str-chat__theme-light {
-  /* Used for emphasis, brands can inject their main color using this variable */
-  --str-chat__primary-color: var(--accent-primary);
-  /* If the primary color is used as a background, text/icons are displayed in this color */
-  --str-chat__on-primary-color: var(--str-chat__grey50);
-  /* Used as a background color for the main chat UI components */
-  --str-chat__background-color: var(--str-chat__grey50);
-  /* Used as a background color for the main chat UI components */
-  --str-chat__secondary-background-color: var(--str-chat__grey50);
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-chat__surface-color: var(--str-chat__grey300);
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-chat__secondary-surface-color: var(--str-chat__grey200);
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-chat__tertiary-surface-color: var(--str-chat__grey100);
-  /* The main color used for texts/icons */
-  --str-chat__text-color: var(--str-chat__grey950);
-  /* Used for texts/icons that need less emphasis */
-  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
-  /* Used for displaying disabled UI elements (typically buttons) */
-  --str-chat__disabled-color: var(--str-chat__grey400);
-  /* Used for error messages, and destructive actions */
-  --str-chat__danger-color: var(--str-chat__red400);
-  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
-  --str-chat__message-highlight-color: var(--str-chat__yellow50);
-  /* Used for displaying the unread badge */
-  --str-chat__unread-badge-color: var(--str-chat__red400);
-  /* Used for text/icon colors if unread badge color is used as a background color */
-  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-  /* The background color used for subtle overlays */
-  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
-  /* The text/icon color used on subtle overlays */
-  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-  /* If a component has a box shadow applied to it, this will be the color used for the shadow */
-  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
-  --str-chat__box-shadow-elevation-1:
-    0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 12px 0 rgba(0, 0, 0, 0.16),
-    0 20px 32px 0 rgba(0, 0, 0, 0.12);
-  /* Used for online indicator and success messages */
-  --str-chat__info-color: var(--str-chat__green500);
-}
-
-.str-chat__theme-dark {
-  --str-chat__primary-color: var(--accent-primary);
-  --str-chat__on-primary-color: var(--str-chat__grey50);
-  --str-chat__background-color: var(--str-chat__grey950);
-  --str-chat__secondary-background-color: var(--str-chat__grey900);
-  --str-chat__surface-color: var(--str-chat__grey700);
-  --str-chat__secondary-surface-color: var(--str-chat__grey800);
-  --str-chat__tertiary-surface-color: var(--str-chat__grey900);
-  --str-chat__text-color: var(--str-chat__grey50);
-  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
-  --str-chat__disabled-color: var(--str-chat__grey600);
-  --str-chat__danger-color: var(--str-chat__red600);
-  --str-chat__message-highlight-color: var(--str-chat__yellow900);
-  --str-chat__unread-badge-color: var(--str-chat__red400);
-  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4);
-  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8);
-  --str-chat__info-color: var(--str-chat__green500);
+.str-chat__theme-dark .str-chat__theme-inverse {
+  /**
+  * Do not edit directly, this file was auto-generated.
+  */
+  --base-transparent-0: rgba(255, 255, 255, 0);
+  --base-transparent-white-10: rgba(255, 255, 255, 0.1);
+  --base-transparent-white-20: rgba(255, 255, 255, 0.2);
+  --base-transparent-white-30: rgba(255, 255, 255, 0.3);
+  --base-transparent-white-70: rgba(255, 255, 255, 0.7);
+  --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */
+  --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */
+  --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */
+  --base-black: #000000;
+  --base-white: #ffffff;
+  --slate-50: #f6f8fa;
+  --slate-100: #ebeef1;
+  --slate-150: #d5dbe1;
+  --slate-200: #c0c8d2;
+  --slate-300: #a3acba;
+  --slate-400: #87909f;
+  --slate-500: #687385;
+  --slate-600: #545969;
+  --slate-700: #414552;
+  --slate-800: #30313d;
+  --slate-900: #1a1b25;
+  --neutral-50: #f8f8f8;
+  --neutral-100: #efefef;
+  --neutral-150: #d8d8d8;
+  --neutral-200: #c4c4c4;
+  --neutral-300: #ababab;
+  --neutral-400: #8f8f8f;
+  --neutral-500: #6a6a6a;
+  --neutral-600: #565656;
+  --neutral-700: #464646;
+  --neutral-800: #323232;
+  --neutral-900: #1c1c1c;
+  --blue-50: #f3f7ff;
+  --blue-100: #e3edff;
+  --blue-150: #c3d9ff;
+  --blue-200: #a5c5ff;
+  --blue-300: #78a8ff;
+  --blue-400: #4586ff;
+  --blue-500: #005fff;
+  --blue-600: #1b53bd;
+  --blue-700: #19418d;
+  --blue-800: #142f63;
+  --blue-900: #091a3b;
+  --cyan-50: #f1fbfc;
+  --cyan-100: #d1f3f6;
+  --cyan-150: #a9e4ea;
+  --cyan-200: #72d7e0;
+  --cyan-300: #45bcc7;
+  --cyan-400: #1e9ea9;
+  --cyan-500: #248088;
+  --cyan-600: #006970;
+  --cyan-700: #065056;
+  --cyan-800: #003a3f;
+  --cyan-900: #002124;
+  --green-50: #e1ffee;
+  --green-100: #bdfcdb;
+  --green-150: #8febbd;
+  --green-200: #59dea3;
+  --green-300: #00c384;
+  --green-400: #00a46e;
+  --green-500: #277e59;
+  --green-600: #006643;
+  --green-700: #004f33;
+  --green-800: #003a25;
+  --green-900: #002213;
+  --purple-50: #f7f8ff;
+  --purple-100: #ecedff;
+  --purple-150: #d4d7ff;
+  --purple-200: #c1c5ff;
+  --purple-300: #a1a3ff;
+  --purple-400: #8482fc;
+  --purple-500: #644af9;
+  --purple-600: #553bd8;
+  --purple-700: #4032a1;
+  --purple-800: #2e2576;
+  --purple-900: #1a114d;
+  --yellow-50: #fef9da;
+  --yellow-100: #fcedb9;
+  --yellow-150: #fcd579;
+  --yellow-200: #f6bf57;
+  --yellow-300: #fa922b;
+  --yellow-400: #f26d10;
+  --yellow-500: #c84801;
+  --yellow-600: #a82c00;
+  --yellow-700: #842106;
+  --yellow-800: #5f1a05;
+  --yellow-900: #331302;
+  --red-50: #fff5fa;
+  --red-100: #ffe7f2;
+  --red-150: #ffccdf;
+  --red-200: #ffb1cd;
+  --red-300: #fe87a1;
+  --red-400: #fc526a;
+  --red-500: #d90d10;
+  --red-600: #b3093c;
+  --red-700: #890d37;
+  --red-800: #68052b;
+  --red-900: #3e021a;
+  --violet-50: #fef4ff;
+  --violet-100: #fbe8fe;
+  --violet-150: #f7cffc;
+  --violet-200: #eeb5f4;
+  --violet-300: #e68bec;
+  --violet-400: #d75fe7;
+  --violet-500: #b716ca;
+  --violet-600: #9d00ae;
+  --violet-700: #7c0089;
+  --violet-800: #5c0066;
+  --violet-900: #36003d;
+  --lime-50: #f1fde8;
+  --lime-100: #d4ffb0;
+  --lime-150: #b1ee79;
+  --lime-200: #9cda5d;
+  --lime-300: #78c100;
+  --lime-400: #639e11;
+  --lime-500: #4b7a0a;
+  --lime-600: #3e6213;
+  --lime-700: #355315;
+  --lime-800: #203a00;
+  --lime-900: #112100;
+  --size-2: 2px;
+  --size-4: 4px;
+  --size-6: 6px;
+  --size-8: 8px;
+  --size-12: 12px;
+  --size-16: 16px;
+  --size-20: 20px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-40: 40px;
+  --size-48: 48px;
+  --size-64: 64px;
+  --size-28: 28px;
+  --size-80: 80px;
+  --size-128: 128px;
+  --size-240: 240px;
+  --size-320: 320px;
+  --size-480: 480px;
+  --size-560: 560px;
+  --size-640: 640px;
+  --size-760: 760px;
+  --size-144: 144px;
+  --size-208: 208px;
+  --size-56: 56px;
+  --radius-0: 0px;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-24: 24px;
+  --radius-32: 32px;
+  --radius-full: 9999px;
+  --space-0: 0px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --w100: 1px;
+  --w150: 1.5px;
+  --w200: 2px;
+  --w300: 3px;
+  --w400: 4px;
+  --w120: 1.2px;
+  --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
+  --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
+  --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
+  --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
+  --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */
+  --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */
+  --font-weight-w400: 400;
+  --font-weight-w500: 500;
+  --font-weight-w600: 600;
+  --font-weight-w700: 700;
+  --font-size-size-8: 8px;
+  --font-size-size-10: 10px;
+  --font-size-size-11: 11px;
+  --font-size-size-12: 12px;
+  --font-size-size-13: 13px;
+  --font-size-size-14: 14px;
+  --font-size-size-16: 16px;
+  --font-size-size-15: 15px;
+  --font-size-size-17: 17px;
+  --font-size-size-18: 18px;
+  --font-size-size-20: 20px;
+  --font-size-size-22: 22px;
+  --font-size-size-24: 24px;
+  --font-size-size-28: 28px;
+  --font-size-size-32: 32px;
+  --font-size-size-40: 40px;
+  --font-size-size-48: 48px;
+  --font-size-size-64: 64px;
+  --line-height-line-height-8: 8px;
+  --line-height-line-height-10: 10px;
+  --line-height-line-height-12: 12px;
+  --line-height-line-height-13: 13px;
+  --line-height-line-height-14: 14px;
+  --line-height-line-height-15: 15px;
+  --line-height-line-height-16: 16px;
+  --line-height-line-height-17: 17px;
+  --line-height-line-height-18: 18px;
+  --line-height-line-height-20: 20px;
+  --line-height-line-height-24: 24px;
+  --line-height-line-height-28: 28px;
+  --line-height-line-height-32: 32px;
+  --line-height-line-height-40: 40px;
+  --line-height-line-height-48: 48px;
+  --typography-font-family-sans: 'Geist';
+  --typography-font-family-mono: 'Geist Mono';
+  --typography-font-weight-regular: 400;
+  --typography-font-weight-medium: 500;
+  --typography-font-weight-semi-bold: 600;
+  --typography-font-weight-bold: 700;
+  --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */
+  --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */
+  --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */
+  --typography-font-size-md: 16px; /** Default desktop body size, main text. */
+  --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */
+  --typography-font-size-xl: 20px; /** Small headings. */
+  --typography-font-size-2xl: 24px; /** Section titles, important headings. */
+  --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */
+  --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */
+  --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */
+  --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */
+  --light-elevation-1:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */
+  --light-elevation-2:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.06);
+  --light-elevation-3:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+  --light-elevation-4:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16),
+    0px 20px 32px 0px rgba(0, 0, 0, 0.12);
+  --dark-elevation-1:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  --dark-elevation-2:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.22),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.12);
+  --dark-elevation-3:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.24),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.14);
+  --dark-elevation-4:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 6px 12px 0px rgba(0, 0, 0, 0.28),
+    0px 20px 32px 0px rgba(0, 0, 0, 0.16);
+  --radius-none: 0px;
+  --radius-xxs: 2px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-max: 9999px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --spacing-none: 0px; /** No spacing. Used for tight component joins. */
+  --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */
+  --spacing-xs: 8px; /** Small padding and default vertical gaps. */
+  --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */
+  --spacing-md: 16px; /** Default large padding for sections and cards. */
+  --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */
+  --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */
+  --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */
+  --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */
+  --spacing-xxxs: 2px;
+  --device-radius: 8px;
+  --device-safe-area-bottom: 0px;
+  --device-safe-area-top: 0px;
+  --message-bubble-radius-group-top: 20px;
+  --message-bubble-radius-group-middle: 20px;
+  --message-bubble-radius-group-bottom: 20px;
+  --message-bubble-radius-tail: 0px;
+  --message-bubble-radius-attachment: 12px;
+  --message-bubble-radius-attachment-inline: 8px;
+  --composer-radius-fixed: 24px;
+  --composer-radius-floating: 24px;
+  --button-radius-lg: 9999px;
+  --button-radius-md: 9999px;
+  --button-radius-sm: 9999px;
+  --button-radius-full: 9999px;
+  --button-visual-height-sm: 32px;
+  --button-visual-height-md: 40px;
+  --button-visual-height-lg: 48px;
+  --button-visual-height-xs: 24px;
+  /**
+   * Minimum interactive hit target size.
+   * 
+   * iOS / Android: enforce minimum touch target.
+   * Web: do not apply a min-width or min-height; size to content.
+   * 
+   * Note: Web uses a placeholder value in Figma due to variable mode constraints.
+   */
+  --button-hit-target-min-height: 48px;
+  /**
+   * Minimum interactive hit target size.
+   * 
+   * iOS / Android: enforce minimum touch target.
+   * Web: do not apply a min-width or min-height; size to content.
+   * 
+   * Note: Web uses a placeholder value in Figma due to variable mode constraints.
+   */
+  --button-hit-target-min-width: 48px;
+  --button-padding-y-lg: 14px;
+  --button-padding-y-md: 10px;
+  --button-padding-y-sm: 6px;
+  --button-padding-y-xs: 4px;
+  --button-padding-x-icon-only-lg: 14px;
+  --button-padding-x-icon-only-md: 10px;
+  --button-padding-x-icon-only-sm: 6px;
+  --button-padding-x-icon-only-xs: 4px;
+  --button-padding-x-with-label-lg: 16px;
+  --button-padding-x-with-label-md: 16px;
+  --button-padding-x-with-label-sm: 16px;
+  --button-padding-x-with-label-xs: 12px;
+  --button-primary-bg: #005fff;
+  --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0);
+  --button-primary-text: #005fff;
+  --button-primary-text-on-accent: #ffffff;
+  --button-primary-text-on-dark: #ffffff;
+  --button-primary-border: #a5c5ff;
+  --button-primary-border-on-dark: #ffffff;
+  --button-secondary-bg: #ebeef1;
+  --button-secondary-bg-liquid-glass: #ffffff;
+  --button-secondary-text: #1a1b25;
+  --button-secondary-text-on-accent: #1a1b25;
+  --button-secondary-text-on-dark: #ffffff;
+  --button-secondary-border: #d5dbe1;
+  --button-secondary-border-on-dark: #ffffff;
+  --button-destructive-bg: #d90d10;
+  --button-destructive-bg-liquid-glass: #ffffff;
+  --button-destructive-text: #d90d10;
+  --button-destructive-text-on-accent: #ffffff;
+  --button-destructive-text-on-dark: #ffffff;
+  --button-destructive-border: #d90d10;
+  --button-destructive-border-on-dark: #ffffff;
+  --icon-size-xs: 12px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 32px;
+  --icon-stroke-subtle: 1.2px;
+  --icon-stroke-default: 1.5px;
+  --icon-stroke-emphasis: 2px;
+  --emoji-sm: 16px;
+  --emoji-md: 24px;
+  --emoji-lg: 32px;
+  --emoji-xl: 48px;
+  --emoji-2xl: 64px;
+  --background-core-app: #ffffff; /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */
+  --background-core-elevation-0: #ffffff; /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */
+  --background-core-elevation-1: #ffffff; /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */
+  --background-core-elevation-2: #ffffff; /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */
+  --background-core-elevation-3: #ffffff; /** Used for badge counts that float above other UI elements. */
+  --background-core-surface-default: #ebeef1; /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */
+  --background-core-surface-subtle: #f6f8fa; /** A slightly receded background. Used for secondary containers or to create soft visual separation. */
+  --background-core-surface-card: #f6f8fa; /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */
+  --background-core-surface-strong: #d5dbe1; /** A more prominent background. Used for elements that need to stand out from the main surface. */
+  --background-core-inverse: #000000; /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */
+  --background-core-on-accent: #ffffff; /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */
+  --background-core-highlight: #fef9da; /** A tint for drawing attention to content. Used for highlights and pinned messages. */
+  --background-core-overlay-light: rgba(
+    255,
+    255,
+    255,
+    0.75
+  ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */
+  --background-core-overlay-dark: rgba(
+    26,
+    27,
+    37,
+    0.25
+  ); /** A dark semi-transparent layer. Used for image overlays. */
+  --background-core-scrim: rgba(
+    26,
+    27,
+    37,
+    0.5
+  ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */
+  --background-utility-hover: rgba(
+    26,
+    27,
+    37,
+    0.1
+  ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */
+  --background-utility-pressed: rgba(
+    26,
+    27,
+    37,
+    0.15
+  ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */
+  --background-utility-selected: rgba(
+    26,
+    27,
+    37,
+    0.2
+  ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */
+  --background-utility-disabled: #ebeef1; /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */
+  --border-utility-hover: rgba(
+    26,
+    27,
+    37,
+    0.1
+  ); /** Applied on pointer hover over bordered interactive elements. */
+  --border-utility-pressed: rgba(
+    26,
+    27,
+    37,
+    0.2
+  ); /** Applied during an active press on bordered interactive elements. */
+  --border-utility-selected: rgba(
+    26,
+    27,
+    37,
+    0.15
+  ); /** Border for selected or active items. Used for highlighted list items and active controls. */
+  --border-utility-focused: #c3d9ff; /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */
+  --border-utility-active: #005fff; /** Active input border. Used for focused text fields and selected form elements. */
+  --border-utility-success: #00a46e; /** Border for positive or confirmed states. Used on validated inputs and success indicators. */
+  --border-utility-warning: #f26d10; /** Border for cautionary states. Used on inputs or elements requiring attention. */
+  --border-utility-error: #d90d10; /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */
+  --border-utility-disabled: #ebeef1; /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */
+  --border-utility-disabled-on-surface: #d5dbe1; /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */
+  --border-core-default: #d5dbe1; /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */
+  --border-core-subtle: #ebeef1; /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */
+  --border-core-strong: #a3acba; /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */
+  --border-core-inverse: #ffffff; /** Used on dark backgrounds. */
+  --border-core-on-accent: #ffffff; /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */
+  --border-core-on-surface: #a3acba; /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */
+  --border-core-opacity-subtle: rgba(
+    26,
+    27,
+    37,
+    0.1
+  ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */
+  --border-core-opacity-strong: rgba(
+    26,
+    27,
+    37,
+    0.25
+  ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */
+  --border-core-on-inverse: #ffffff; /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */
+  --chat-bg-incoming: #ebeef1; /** Incoming bubble background. */
+  --chat-bg-outgoing: #e3edff; /** Outgoing bubble background. */
+  --chat-bg-attachment-incoming: #d5dbe1; /** Attachment card in incoming bubble. */
+  --chat-bg-attachment-outgoing: #c3d9ff; /** Attachment card in outgoing bubble. */
+  --chat-text-incoming: #1a1b25; /** Message body text. */
+  --chat-text-outgoing: #091a3b; /** Message body text. */
+  --chat-text-username: #414552; /** Username label. */
+  --chat-text-timestamp: #687385; /** Time labels. */
+  --chat-text-typing-indicator: #1a1b25; /** Typing indicator chip. */
+  --chat-text-read: #005fff;
+  --chat-text-mention: #005fff; /** Mention styling. */
+  --chat-text-link: #005fff; /** Links inside message bubbles. */
+  --chat-text-reaction: #414552; /** Reaction count text. */
+  --chat-text-system: #414552; /** System messages like date separators. */
+  --chat-border-incoming: #ebeef1;
+  --chat-border-outgoing: #e3edff;
+  --chat-border-on-chat-incoming: #a3acba;
+  --chat-border-on-chat-outgoing: #78a8ff;
+  --chat-reply-indicator-incoming: #87909f; /** Reply indicator shading for incoming. */
+  --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */
+  --chat-waveform-bar: rgba(26, 27, 37, 0.25);
+  --chat-waveform-bar-playing: #005fff;
+  --chat-poll-progress-track-incoming: #d5dbe1;
+  --chat-poll-progress-track-outgoing: #a5c5ff;
+  --chat-poll-progress-fill-incoming: #687385;
+  --chat-poll-progress-fill-outgoing: #005fff;
+  --chat-thread-connector-incoming: #d5dbe1;
+  --chat-thread-connector-outgoing: #c3d9ff;
+  --input-text-default: #1a1b25; /** Main text inside the chat input. */
+  --input-text-placeholder: #687385; /** Placeholder text for the input. Lower emphasis than main text. */
+  --input-text-disabled: #a3acba; /** Placeholder text for the input. Lower emphasis than main text. */
+  --input-text-icon: #687385; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */
+  --input-send-icon: #005fff; /** Default send icon color in the input. Uses the brand accent. */
+  --input-send-icon-disabled: #a3acba; /** Send icon when disabled (e.g. empty input). */
+  --reaction-bg: #ffffff;
+  --reaction-border: #d5dbe1;
+  --reaction-text: #1a1b25;
+  --reaction-emoji: #1a1b25;
+  --presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
+  --presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --system-text: #000000;
+  --system-bg-blur: rgba(255, 255, 255, 0.01);
+  --system-caret: #005fff;
+  --system-scrollbar: rgba(0, 0, 0, 0.5);
+  --badge-bg-default: #ffffff;
+  --badge-bg-primary: #005fff;
+  --badge-bg-neutral: #687385;
+  --badge-bg-error: #d90d10;
+  --badge-bg-inverse: #000000;
+  --badge-bg-overlay: rgba(0, 0, 0, 0.75);
+  --badge-text: #1a1b25;
+  --badge-text-on-inverse: #ffffff;
+  --badge-text-on-accent: #ffffff;
+  --badge-border: #ffffff;
+  --control-remove-control-bg: #000000;
+  --control-remove-control-icon: #ffffff;
+  --control-remove-control-border: #ffffff;
+  --control-progress-bar-fill: #687385;
+  --control-progress-bar-track: #d5dbe1;
+  --control-toggle-switch-bg: #687385;
+  --control-toggle-switch-bg-selected: #005fff;
+  --control-toggle-switch-bg-disabled: #ebeef1;
+  --control-toggle-switch-knob: #ffffff;
+  --control-playback-toggle-text: #1a1b25;
+  --control-playback-toggle-border: #d5dbe1;
+  --control-checkbox-bg: rgba(255, 255, 255, 0);
+  --control-checkbox-border: #d5dbe1;
+  --control-checkbox-bg-selected: #005fff;
+  --control-checkbox-icon: #ffffff;
+  --control-play-button-bg: rgba(0, 0, 0, 0.75);
+  --control-play-button-icon: #ffffff;
+  --control-playback-thumb-bg-default: #ffffff;
+  --control-playback-thumb-border-default: rgba(26, 27, 37, 0.25);
+  --control-playback-thumb-bg-active: #005fff;
+  --control-playback-thumb-border-active: #ffffff;
+  --control-radio-button-bg: rgba(255, 255, 255, 0);
+  --control-radio-button-border: #d5dbe1;
+  --control-radio-button-bg-selected: #005fff;
+  --control-radio-button-indicator: #ffffff;
+  --control-radio-check-bg: rgba(255, 255, 255, 0);
+  --control-radio-check-border: #d5dbe1;
+  --control-radio-check-bg-selected: #005fff;
+  --control-radio-check-icon: #ffffff;
+  --control-chip-border: #d5dbe1;
+  --control-chip-text: #1a1b25;
+  --text-primary: #1a1b25; /** Main body text. Used for message content, titles, and any text that carries primary meaning. */
+  --text-secondary: #414552; /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */
+  --text-tertiary: #687385; /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */
+  --text-on-inverse: #ffffff; /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */
+  --text-on-accent: #ffffff; /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */
+  --text-disabled: #a3acba; /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */
+  --text-link: #005fff; /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */
+  --avatar-palette-bg-1: #c3d9ff;
+  --avatar-palette-bg-2: #a9e4ea;
+  --avatar-palette-bg-3: #8febbd;
+  --avatar-palette-bg-4: #d4d7ff;
+  --avatar-palette-bg-5: #fcd579;
+  --avatar-palette-text-1: #091a3b;
+  --avatar-palette-text-2: #002124;
+  --avatar-palette-text-3: #002213;
+  --avatar-palette-text-4: #1a114d;
+  --avatar-palette-text-5: #331302;
+  --avatar-bg-default: #c3d9ff;
+  --avatar-bg-placeholder: #d5dbe1;
+  --avatar-text-default: #091a3b;
+  --avatar-text-placeholder: #687385;
+  --avatar-presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --avatar-presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --avatar-presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
+  --accent-primary: #005fff; /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */
+  --accent-success: #00a46e; /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */
+  --accent-warning: #f26d10; /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */
+  --accent-error: #d90d10; /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */
+  --accent-neutral: #687385; /** A mid-tone gray for de-emphasized UI elements. */
+  --brand-50: #f3f7ff;
+  --brand-100: #e3edff;
+  --brand-150: #c3d9ff;
+  --brand-200: #a5c5ff;
+  --brand-300: #78a8ff;
+  --brand-400: #4586ff;
+  --brand-500: #005fff;
+  --brand-600: #1b53bd;
+  --brand-700: #19418d;
+  --brand-800: #142f63;
+  --brand-900: #091a3b;
+  --skeleton-loading-base: rgba(
+    255,
+    255,
+    255,
+    0
+  ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */
+  --skeleton-loading-highlight: rgba(
+    255,
+    255,
+    255,
+    0.75
+  ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */
+  --chrome-0: #ffffff;
+  --chrome-50: #f6f8fa;
+  --chrome-100: #ebeef1;
+  --chrome-150: #d5dbe1;
+  --chrome-200: #c0c8d2;
+  --chrome-300: #a3acba;
+  --chrome-400: #87909f;
+  --chrome-500: #687385;
+  --chrome-600: #545969;
+  --chrome-700: #414552;
+  --chrome-800: #30313d;
+  --chrome-900: #1a1b25;
+  --chrome-1000: #000000;
 }
 
-.str-chat {
-  --str-chat__grey950: #080707;
-  --str-chat__grey900: #17191c;
-  --str-chat__grey800: #1c1e22;
-  --str-chat__grey700: #272a30;
-  --str-chat__grey600: #4c525c;
-  --str-chat__grey500: #72767e;
-  --str-chat__grey400: #b4b7bb;
-  --str-chat__grey300: #dbdde1;
-  --str-chat__grey200: #e9eaed;
-  --str-chat__grey100: #f4f4f5;
-  --str-chat__grey50: #ffffff;
-  --str-chat__red600: #cc000b;
-  --str-chat__red400: #ff3742;
-  --str-chat__green500: #20e070;
-  --str-chat__yellow900: #332500;
-}
-
-/**
- * Source https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=164-2815&p=f&view=variables&var-set-id=41-278&m=dev
- */
-.str-chat,
-.str-chat__theme-dark .str-chat__theme-inverse {
-  /* ─── Palette (color primitives) ─── */
-  /* Base */
+.str-chat__theme-dark,
+.str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse {
+  /**
+  * Do not edit directly, this file was auto-generated.
+  */
   --base-transparent-0: rgba(255, 255, 255, 0);
   --base-transparent-white-10: rgba(255, 255, 255, 0.1);
   --base-transparent-white-20: rgba(255, 255, 255, 0.2);
@@ -164,7 +643,6 @@
   --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */
   --base-black: #000000;
   --base-white: #ffffff;
-  /* Slate */
   --slate-50: #f6f8fa;
   --slate-100: #ebeef1;
   --slate-150: #d5dbe1;
@@ -176,7 +654,6 @@
   --slate-700: #414552;
   --slate-800: #30313d;
   --slate-900: #1a1b25;
-  /* Neutral */
   --neutral-50: #f8f8f8;
   --neutral-100: #efefef;
   --neutral-150: #d8d8d8;
@@ -188,7 +665,6 @@
   --neutral-700: #464646;
   --neutral-800: #323232;
   --neutral-900: #1c1c1c;
-  /* Blue */
   --blue-50: #f3f7ff;
   --blue-100: #e3edff;
   --blue-150: #c3d9ff;
@@ -200,7 +676,6 @@
   --blue-700: #19418d;
   --blue-800: #142f63;
   --blue-900: #091a3b;
-  /* Cyan */
   --cyan-50: #f1fbfc;
   --cyan-100: #d1f3f6;
   --cyan-150: #a9e4ea;
@@ -212,7 +687,6 @@
   --cyan-700: #065056;
   --cyan-800: #003a3f;
   --cyan-900: #002124;
-  /* Green */
   --green-50: #e1ffee;
   --green-100: #bdfcdb;
   --green-150: #8febbd;
@@ -224,7 +698,6 @@
   --green-700: #004f33;
   --green-800: #003a25;
   --green-900: #002213;
-  /* Purple */
   --purple-50: #f7f8ff;
   --purple-100: #ecedff;
   --purple-150: #d4d7ff;
@@ -236,7 +709,6 @@
   --purple-700: #4032a1;
   --purple-800: #2e2576;
   --purple-900: #1a114d;
-  /* Yellow */
   --yellow-50: #fef9da;
   --yellow-100: #fcedb9;
   --yellow-150: #fcd579;
@@ -248,7 +720,6 @@
   --yellow-700: #842106;
   --yellow-800: #5f1a05;
   --yellow-900: #331302;
-  /* Red */
   --red-50: #fff5fa;
   --red-100: #ffe7f2;
   --red-150: #ffccdf;
@@ -260,7 +731,6 @@
   --red-700: #890d37;
   --red-800: #68052b;
   --red-900: #3e021a;
-  /* Violet */
   --violet-50: #fef4ff;
   --violet-100: #fbe8fe;
   --violet-150: #f7cffc;
@@ -272,7 +742,6 @@
   --violet-700: #7c0089;
   --violet-800: #5c0066;
   --violet-900: #36003d;
-  /* Lime */
   --lime-50: #f1fde8;
   --lime-100: #d4ffb0;
   --lime-150: #b1ee79;
@@ -284,21 +753,6 @@
   --lime-700: #355315;
   --lime-800: #203a00;
   --lime-900: #112100;
-  /* Chrome */
-  --chrome-0: #ffffff; /** Neutral accent for low-priority badges. */
-  --chrome-50: #f6f8fa;
-  --chrome-100: #ebeef1;
-  --chrome-150: #d5dbe1;
-  --chrome-200: #c0c8d2;
-  --chrome-300: #a3acba;
-  --chrome-400: #87909f;
-  --chrome-500: #687385;
-  --chrome-600: #545969;
-  --chrome-700: #414552;
-  --chrome-800: #30313d;
-  --chrome-900: #1a1b25;
-  --chrome-1000: #000000; /** Neutral accent for low-priority badges. */
-  /* ─── Size ─── */
   --size-2: 2px;
   --size-4: 4px;
   --size-6: 6px;
@@ -323,8 +777,7 @@
   --size-144: 144px;
   --size-208: 208px;
   --size-56: 56px;
-  /* ─── Radius ─── */
-  --radius-0: 0;
+  --radius-0: 0px;
   --radius-2: 2px;
   --radius-4: 4px;
   --radius-6: 6px;
@@ -335,8 +788,7 @@
   --radius-24: 24px;
   --radius-32: 32px;
   --radius-full: 9999px;
-  /* ─── Space ─── */
-  --space-0: 0;
+  --space-0: 0px;
   --space-2: 2px;
   --space-4: 4px;
   --space-8: 8px;
@@ -349,26 +801,22 @@
   --space-48: 48px;
   --space-64: 64px;
   --space-80: 80px;
-  /* ─── Width (stroke/weight) ─── */
-  --w100: 1;
-  --w150: 1.5;
-  --w200: 2;
-  --w300: 3;
-  --w400: 4;
-  --w120: 1.2;
-  /* ─── Font family ─── */
+  --w100: 1px;
+  --w150: 1.5px;
+  --w200: 2px;
+  --w300: 3px;
+  --w400: 4px;
+  --w120: 1.2px;
   --font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
   --font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
   --font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
   --font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
   --font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */
   --font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */
-  /* ─── Font weight ─── */
   --font-weight-w400: 400;
   --font-weight-w500: 500;
   --font-weight-w600: 600;
   --font-weight-w700: 700;
-  /* ─── Font size ─── */
   --font-size-size-8: 8px;
   --font-size-size-10: 10px;
   --font-size-size-11: 11px;
@@ -387,7 +835,6 @@
   --font-size-size-40: 40px;
   --font-size-size-48: 48px;
   --font-size-size-64: 64px;
-  /* ─── Line height ─── */
   --line-height-line-height-8: 8px;
   --line-height-line-height-10: 10px;
   --line-height-line-height-12: 12px;
@@ -403,43 +850,12 @@
   --line-height-line-height-32: 32px;
   --line-height-line-height-40: 40px;
   --line-height-line-height-48: 48px;
-  /* ─── Typography (semantic) ─── */
+  --typography-font-family-sans: 'Geist';
+  --typography-font-family-mono: 'Geist Mono';
   --typography-font-weight-regular: 400;
   --typography-font-weight-medium: 500;
   --typography-font-weight-semi-bold: 600;
   --typography-font-weight-bold: 700;
-  /* ─── Elevation (shadows) ─── */
-  --light-elevation-1: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.06); /** Low elevation level for subtle separation. */
-  --light-elevation-2: 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);
-  --light-elevation-3: 0 0 0 1px rgba(0,0,0,0.05), 0 4px 8px 0 rgba(0,0,0,0.14), 0 12px 24px 0 rgba(0,0,0,0.1);
-  --light-elevation-4: 0 0 0 1px rgba(0,0,0,0.05), 0 6px 12px 0 rgba(0,0,0,0.16), 0 20px 32px 0 rgba(0,0,0,0.12);
-  --dark-elevation-1: 0 0 0 1px rgba(255,255,255,0.15), 0 1px 2px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.1);
-  --dark-elevation-2: 0 0 0 1px rgba(255,255,255,0.15), 0 2px 4px 0 rgba(0,0,0,0.22), 0 6px 16px 0 rgba(0,0,0,0.12);
-  --dark-elevation-3: 0 0 0 1px rgba(255,255,255,0.15), 0 4px 8px 0 rgba(0,0,0,0.24), 0 12px 24px 0 rgba(0,0,0,0.14);
-  --dark-elevation-4: 0 0 0 1px rgba(255,255,255,0.15), 0 6px 12px 0 rgba(0,0,0,0.28), 0 20px 32px 0 rgba(0,0,0,0.16);
-  /* ─── Button (layout: padding, radius, height, hit target) ─── */
-  --button-padding-y-lg: 14px;
-  --button-padding-y-md: 10px;
-  --button-padding-y-sm: 6px;
-  --button-padding-y-xs: 4px;
-  --button-padding-x-icon-only-lg: 14px;
-  --button-padding-x-icon-only-md: 10px;
-  --button-padding-x-icon-only-sm: 6px;
-  --button-padding-x-icon-only-xs: 4px;
-  --button-padding-x-with-label-lg: 16px;
-  --button-padding-x-with-label-md: 16px;
-  --button-padding-x-with-label-sm: 16px;
-  --button-padding-x-with-label-xs: 12px;
-  /* ─── Background (core overlays, system) ─── */
-  --background-core-scrim: rgba(26, 27, 37, 0.5); /** Dimmed overlay for modals. */
-  --background-core-overlay-light: rgba(255, 255, 255, 0.75); /** Selected overlay. */
-  --background-core-overlay-dark: rgba(26, 27, 37, 0.25); /** Selected overlay. */
-  --system-bg-blur: rgba(255, 255, 255, 0.01);
-  --system-scrollbar: rgba(0, 0, 0, 0.5);
-  --badge-bg-overlay: rgba(0, 0, 0, 0.75);
-  /* ─── Typography (family, size scale, line-height) ─── */
-  --typography-font-family-sans: "Geist";
-  --typography-font-family-mono: "Geist Mono";
   --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */
   --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */
   --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */
@@ -451,8 +867,31 @@
   --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */
   --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */
   --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */
-  /* ─── Radius (semantic) ─── */
-  --radius-none: 0;
+  --light-elevation-1:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */
+  --light-elevation-2:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.06);
+  --light-elevation-3:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+  --light-elevation-4:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16),
+    0px 20px 32px 0px rgba(0, 0, 0, 0.12);
+  --dark-elevation-1:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  --dark-elevation-2:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.22),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.12);
+  --dark-elevation-3:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 4px 8px 0px rgba(0, 0, 0, 0.24),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.14);
+  --dark-elevation-4:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0px 6px 12px 0px rgba(0, 0, 0, 0.28),
+    0px 20px 32px 0px rgba(0, 0, 0, 0.16);
+  --radius-none: 0px;
   --radius-xxs: 2px;
   --radius-xs: 4px;
   --radius-sm: 6px;
@@ -463,8 +902,7 @@
   --radius-max: 9999px;
   --radius-3xl: 24px;
   --radius-4xl: 32px;
-  /* ─── Spacing ─── */
-  --spacing-none: 0; /** No spacing. Used for tight component joins. */
+  --spacing-none: 0px; /** No spacing. Used for tight component joins. */
   --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */
   --spacing-xs: 8px; /** Small padding and default vertical gaps. */
   --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */
@@ -474,10 +912,17 @@
   --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */
   --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */
   --spacing-xxxs: 2px;
-  /* ─── Device ─── */
-  --device-safe-area-bottom: 0;
-  --device-safe-area-top: 0;
-  /* ─── Button (radius, visual height, hit target, liquid glass) ─── */
+  --device-radius: 8px;
+  --device-safe-area-bottom: 0px;
+  --device-safe-area-top: 0px;
+  --message-bubble-radius-group-top: 20px;
+  --message-bubble-radius-group-middle: 20px;
+  --message-bubble-radius-group-bottom: 20px;
+  --message-bubble-radius-tail: 0px;
+  --message-bubble-radius-attachment: 12px;
+  --message-bubble-radius-attachment-inline: 8px;
+  --composer-radius-fixed: 24px;
+  --composer-radius-floating: 24px;
   --button-radius-lg: 9999px;
   --button-radius-md: 9999px;
   --button-radius-sm: 9999px;
@@ -487,446 +932,312 @@
   --button-visual-height-lg: 48px;
   --button-visual-height-xs: 24px;
   /**
-     * Minimum interactive hit target size.
-     *
-     * iOS / Android: enforce minimum touch target.
-     * Web: do not apply a min-width or min-height; size to content.
-     *
-     * Note: Web uses a placeholder value in Figma due to variable mode constraints.
-     */
+   * Minimum interactive hit target size.
+   * 
+   * iOS / Android: enforce minimum touch target.
+   * Web: do not apply a min-width or min-height; size to content.
+   * 
+   * Note: Web uses a placeholder value in Figma due to variable mode constraints.
+   */
   --button-hit-target-min-height: 48px;
   /**
-     * Minimum interactive hit target size.
-     *
-     * iOS / Android: enforce minimum touch target.
-     * Web: do not apply a min-width or min-height; size to content.
-     *
-     * Note: Web uses a placeholder value in Figma due to variable mode constraints.
-     */
+   * Minimum interactive hit target size.
+   * 
+   * iOS / Android: enforce minimum touch target.
+   * Web: do not apply a min-width or min-height; size to content.
+   * 
+   * Note: Web uses a placeholder value in Figma due to variable mode constraints.
+   */
   --button-hit-target-min-width: 48px;
+  --button-padding-y-lg: 14px;
+  --button-padding-y-md: 10px;
+  --button-padding-y-sm: 6px;
+  --button-padding-y-xs: 4px;
+  --button-padding-x-icon-only-lg: 14px;
+  --button-padding-x-icon-only-md: 10px;
+  --button-padding-x-icon-only-sm: 6px;
+  --button-padding-x-icon-only-xs: 4px;
+  --button-padding-x-with-label-lg: 16px;
+  --button-padding-x-with-label-md: 16px;
+  --button-padding-x-with-label-sm: 16px;
+  --button-padding-x-with-label-xs: 12px;
+  --button-primary-bg: #4586ff;
   --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0);
-  /* ─── Icon & emoji ─── */
+  --button-primary-text: #4586ff;
+  --button-primary-text-on-accent: #ffffff;
+  --button-primary-text-on-dark: #000000;
+  --button-primary-border: #1b53bd;
+  --button-primary-border-on-dark: #000000;
+  --button-secondary-bg: #323232;
+  --button-secondary-bg-liquid-glass: #000000;
+  --button-secondary-text: #f8f8f8;
+  --button-secondary-text-on-accent: #f8f8f8;
+  --button-secondary-text-on-dark: #000000;
+  --button-secondary-border: #565656;
+  --button-secondary-border-on-dark: #000000;
+  --button-destructive-bg: #fc526a;
+  --button-destructive-bg-liquid-glass: #000000;
+  --button-destructive-text: #fc526a;
+  --button-destructive-text-on-accent: #ffffff;
+  --button-destructive-text-on-dark: #000000;
+  --button-destructive-border: #fc526a;
+  --button-destructive-border-on-dark: #000000;
   --icon-size-xs: 12px;
   --icon-size-sm: 16px;
   --icon-size-md: 20px;
   --icon-size-lg: 32px;
-  --icon-stroke-subtle: 1.2;
-  --icon-stroke-default: 1.5;
-  --icon-stroke-emphasis: 2;
+  --icon-stroke-subtle: 1.2px;
+  --icon-stroke-default: 1.5px;
+  --icon-stroke-emphasis: 2px;
+  --emoji-sm: 16px;
   --emoji-md: 24px;
   --emoji-lg: 32px;
   --emoji-xl: 48px;
   --emoji-2xl: 64px;
-  /* ─── Background (core: elevation, surface, utility) ─── */
-  --background-core-elevation-0: #ffffff; /** Flat surfaces. */
-  --background-core-elevation-1: #ffffff; /** Slightly elevated surfaces. */
-  --background-core-elevation-2: #ffffff; /** Card-like elements. */
-  --background-core-elevation-3: #ffffff; /** Popovers. */
-  --background-core-elevation-4: #ffffff; /** Dialogs, modals. */
-  --background-core-surface: #ebeef1; /** Standard section background. */
-  --background-core-surface-subtle: #f6f8fa; /** Very light section background. */
-  --background-core-surface-strong: #d5dbe1; /** Stronger section background. */
-  --background-core-inverse: #1a1b25; /** Inverse background used for elevated, transient, or high-attention UI surfaces that sit on top of the default app background. */
-  --background-core-on-accent: #ffffff; /** Use for surfaces that must remain white across themes (e.g., media controls over video). Don’t use for general UI surfaces. */
-  --background-core-highlight: #fef9da;
-  --background-core-surface-card: #f6f8fa;
-  --background-utility-hover: rgba(26, 27, 37, 0.1); /** Hover feedback overlay. */
-  --background-utility-pressed: rgba(26, 27, 37, 0.15); /** Pressed feedback overlay. */
-  --background-utility-selected: rgba(26, 27, 37, 0.2); /** Selected overlay. */
-  --background-utility-disabled: #ebeef1; /** Disabled backgrounds. */
-  /* ─── Border (utility, core) ─── */
-  --border-utility-disabled: #ebeef1; /** Optional disabled background for inputs, buttons, or chips. */
-  --border-utility-hover: rgba(26, 27, 37, 0.1); /** Hover feedback overlay. */
-  --border-utility-pressed: rgba(26, 27, 37, 0.2); /** Pressed feedback overlay. */
-  --border-core-default: #d5dbe1; /** Standard surface border. */
-  --border-core-subtle: #ebeef1; /** Very light separators. */
-  --border-core-strong: #a3acba; /** Stronger surface border. */
-  --border-core-on-accent: #ffffff; /** Borders on accent backgrounds. */
-  --border-core-on-surface: #c0c8d2;
-  --border-core-inverse: #ffffff; /** Border on inverse (dark) surface, e.g. presence ring. */
-  --border-utility-focused: var(--blue-150); /** Focus ring or focus border. */
-  --border-utility-active: var(--accent-primary); /** Focus ring or focus border. */
-  --border-utility-selected: rgba(26, 27, 37, 0.15); /** Focus ring or focus border. */
-  --border-core-opacity-subtle: rgba(26, 27, 37, 0.1); /** Image frame border treatment. */
-  --border-core-opacity-strong: rgba(26, 27, 37, 0.25); /** Image frame border treatment. */
-  /* ─── Chat (reply, waveform) ─── */
-  --chat-reply-indicator-incoming: #87909f; /** Reply indicator shading for incoming. */
-  --chat-waveform-bar: rgba(26, 27, 37, 0.25);
-  /* ─── System & control ─── */
-  --system-text: #000000;
-  --system-caret: var(--accent-primary);
-  --control-checkbox-bg: rgba(255, 255, 255, 0);
-  /* ─── Text ─── */
-  --text-primary: #1a1b25; /** Main text color. */
-  --text-secondary: #414552; /** Secondary metadata text. */
-  --text-tertiary: #687385; /** Lowest priority text. */
-  --text-inverse: #ffffff; /** Text on dark or accent backgrounds. */
-  --text-disabled: #a3acba; /** Disabled text. */
-  --text-on-accent: #ffffff; /** Text on dark or accent backgrounds. */
-  --text-link: var(--accent-primary); /** Hyperlinks and inline actions. */
-  /* ─── Avatar (palette, placeholder) ─── */
-  --avatar-palette-bg-1: #c3d9ff;
-  --avatar-palette-bg-2: #a9e4ea;
-  --avatar-palette-bg-3: #8febbd;
-  --avatar-palette-bg-4: #d4d7ff;
-  --avatar-palette-bg-5: #fcd579;
-  --avatar-palette-text-1: #091a3b;
-  --avatar-palette-text-2: #002124;
-  --avatar-palette-text-3: #002213;
-  --avatar-palette-text-4: #1a114d;
-  --avatar-palette-text-5: #331302;
-  --avatar-bg-placeholder: #d5dbe1;
-  --avatar-text-placeholder: #687385;
-  /* ─── Accent & brand ─── */
-  --accent-success: #00a46e; /** For success states and positive actions. */
-  --accent-warning: #f26d10; /** Warning or caution messages. */
-  --accent-error: #d90d10; /** Destructive actions and error states. */
-  --accent-neutral: #687385; /** Neutral accent for low-priority badges. */
-  --brand-50: #f3f7ff;
-  --brand-100: #e3edff;
-  --brand-150: #c3d9ff;
-  --brand-200: #a5c5ff;
-  --brand-300: #78a8ff;
-  --brand-400: #4586ff;
-  --brand-500: #005fff;
-  --brand-600: #1b53bd;
-  --brand-700: #19418d;
-  --brand-800: #142f63;
-  --brand-900: #091a3b;
-  --accent-primary: #005fff; /** Main brand accent for interactive elements. */
-  /* ─── Skeleton ─── */
-  --skeleton-loading-base: rgba(255, 255, 255, 0); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */
-  --skeleton-loading-highlight: #ffffff; /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */
-  /* ─── Device & message/composer radius ─── */
-  --device-radius: 8px;
-  --message-bubble-radius-group-top: 20px;
-  --message-bubble-radius-group-middle: 20px;
-  --message-bubble-radius-group-bottom: 20px;
-  --message-bubble-radius-tail: 0;
-  --message-bubble-radius-attachment: 12px;
-  --message-bubble-radius-attachment-inline: 8px;
-  --composer-radius-fixed: 24px;
-  --composer-radius-floating: 24px;
-  /* ─── Button (semantic colors: primary, secondary, destructive) ─── */
-  --button-primary-bg: var(--accent-primary);
-  --button-primary-text: var(--accent-primary);
-  --button-primary-text-on-accent: #ffffff;
-  --button-primary-border: #a5c5ff;
-  --button-primary-text-inverse: #ffffff;
-  --button-primary-border-inverse: #ffffff;
-  --button-secondary-text: var(--text-primary);
-  --button-secondary-bg-liquid-glass: #ffffff;
-  --button-secondary-border: #d5dbe1;
-  --button-secondary-bg: #ebeef1;
-  --button-secondary-text-on-accent: var(--text-primary);
-  --button-secondary-text-inverse: #ffffff;
-  --button-secondary-border-inverse: #ffffff;
-  --button-destructive-text: #d90d10;
-  --button-destructive-bg: #d90d10;
-  --button-destructive-text-on-accent: #ffffff;
-  --button-destructive-bg-liquid-glass: #ffffff;
-  --button-destructive-border: #d90d10;
-  --button-destructive-text-inverse: #ffffff;
-  --button-destructive-border-inverse: #ffffff;
-  --emoji-sm: 16px;
-  /* ─── Background (core app), border (utility state), chat (bg, text, border) ─── */
-  --background-core-app: #ffffff; /** Global application background. */
-  --border-utility-error: #d90d10; /** Error state. */
-  --border-utility-warning: #f26d10; /** Warning borders. */
-  --border-utility-success: #00a46e; /** Success borders. */
-  --chat-bg-incoming: #ebeef1; /** Incoming bubble background. */
-  --chat-bg-outgoing: #e3edff; /** Outgoing bubble background. */
-  --chat-bg-attachment-incoming: #d5dbe1; /** Attachment card in incoming bubble. */
-  --chat-bg-attachment-outgoing: #c3d9ff; /** Attachment card in outgoing bubble. */
-  --chat-text-timestamp: #687385; /** Time labels. */
-  --chat-text-username: #414552; /** Username label. */
-  --chat-text-reaction: #414552; /** Reaction count text. */
-  --chat-text-system: #414552; /** System messages like date separators. */
-  --chat-text-incoming: var(--text-primary); /** Message body text. */
-  --chat-text-outgoing: #091a3b; /** Message body text. */
-  --chat-border-outgoing: #e3edff;
-  --chat-border-incoming: #ebeef1;
-  --chat-border-on-chat-outgoing: #78a8ff;
-  --chat-border-on-chat-incoming: #a3acba;
+  --background-core-app: #000000; /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */
+  --background-core-elevation-0: #000000; /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */
+  --background-core-elevation-1: #1c1c1c; /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */
+  --background-core-elevation-2: #323232; /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */
+  --background-core-elevation-3: #565656; /** Used for badge counts that float above other UI elements. */
+  --background-core-surface-default: #323232; /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */
+  --background-core-surface-subtle: #1c1c1c; /** A slightly receded background. Used for secondary containers or to create soft visual separation. */
+  --background-core-surface-card: #323232; /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */
+  --background-core-surface-strong: #464646; /** A more prominent background. Used for elements that need to stand out from the main surface. */
+  --background-core-inverse: #ffffff; /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */
+  --background-core-on-accent: #ffffff; /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */
+  --background-core-highlight: #5f1a05; /** A tint for drawing attention to content. Used for highlights and pinned messages. */
+  --background-core-overlay-light: rgba(
+    0,
+    0,
+    0,
+    0.75
+  ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */
+  --background-core-overlay-dark: rgba(
+    0,
+    0,
+    0,
+    0.5
+  ); /** A dark semi-transparent layer. Used for image overlays. */
+  --background-core-scrim: rgba(
+    0,
+    0,
+    0,
+    0.75
+  ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */
+  --background-utility-hover: rgba(
+    255,
+    255,
+    255,
+    0.15
+  ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */
+  --background-utility-pressed: rgba(
+    255,
+    255,
+    255,
+    0.2
+  ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */
+  --background-utility-selected: rgba(
+    255,
+    255,
+    255,
+    0.25
+  ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */
+  --background-utility-disabled: #323232; /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */
+  --border-utility-error: #fc526a; /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */
+  --border-utility-warning: #fa922b; /** Border for cautionary states. Used on inputs or elements requiring attention. */
+  --border-utility-success: #00c384; /** Border for positive or confirmed states. Used on validated inputs and success indicators. */
+  --border-utility-selected: rgba(
+    255,
+    255,
+    255,
+    0.15
+  ); /** Border for selected or active items. Used for highlighted list items and active controls. */
+  --border-utility-disabled: #323232; /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */
+  --border-utility-focused: #19418d; /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */
+  --border-utility-active: #4586ff; /** Active input border. Used for focused text fields and selected form elements. */
+  --border-utility-hover: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /** Applied on pointer hover over bordered interactive elements. */
+  --border-utility-pressed: rgba(
+    255,
+    255,
+    255,
+    0.2
+  ); /** Applied during an active press on bordered interactive elements. */
+  --border-utility-disabled-on-surface: #464646; /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */
+  --border-core-default: #565656; /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */
+  --border-core-subtle: #323232; /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */
+  --border-core-strong: #6a6a6a; /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */
+  --border-core-inverse: #000000; /** Used on dark backgrounds. */
+  --border-core-on-accent: #ffffff; /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */
+  --border-core-opacity-subtle: rgba(
+    255,
+    255,
+    255,
+    0.2
+  ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */
+  --border-core-opacity-strong: rgba(
+    255,
+    255,
+    255,
+    0.25
+  ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */
+  --border-core-on-inverse: #000000; /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */
+  --border-core-on-surface: #6a6a6a; /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */
+  --chat-bg-incoming: #323232; /** Incoming bubble background. */
+  --chat-bg-outgoing: #142f63; /** Outgoing bubble background. */
+  --chat-bg-attachment-incoming: #464646; /** Attachment card in incoming bubble. */
+  --chat-bg-attachment-outgoing: #19418d; /** Attachment card in outgoing bubble. */
+  --chat-text-incoming: #f8f8f8; /** Message body text. */
+  --chat-text-outgoing: #f3f7ff; /** Message body text. */
+  --chat-text-username: #d8d8d8; /** Username label. */
+  --chat-text-timestamp: #ababab; /** Time labels. */
+  --chat-text-typing-indicator: #f8f8f8; /** Typing indicator chip. */
+  --chat-text-read: #4586ff;
+  --chat-text-mention: #a5c5ff; /** Mention styling. */
+  --chat-text-link: #a5c5ff; /** Links inside message bubbles. */
+  --chat-text-reaction: #d8d8d8; /** Reaction count text. */
+  --chat-text-system: #d8d8d8; /** System messages like date separators. */
+  --chat-border-incoming: #323232;
+  --chat-border-outgoing: #142f63;
+  --chat-border-on-chat-incoming: #6a6a6a;
+  --chat-border-on-chat-outgoing: #005fff;
+  --chat-reply-indicator-incoming: #8f8f8f; /** Reply indicator shading for incoming. */
   --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */
-  --chat-poll-progress-track-outgoing: #a5c5ff;
-  --chat-thread-connector-incoming: #d5dbe1;
-  --chat-thread-connector-outgoing: #c3d9ff;
-  --chat-text-read: var(--accent-primary);
-  --chat-text-typing-indicator: var(--text-primary); /** Typing indicator chip. */
-  --chat-waveform-bar-playing: var(--accent-primary);
-  --chat-poll-progress-track-incoming: #d5dbe1;
-  --chat-poll-progress-fill-incoming: #687385;
-  --chat-poll-progress-fill-outgoing: var(--accent-primary);
-  --chat-text-mention: var(--accent-primary); /** Mention styling. */
-  --chat-text-link: var(--accent-primary); /** Links inside message bubbles. */
-  /* ─── Input ─── */
-  --input-text-default: var(--text-primary); /** Main text inside the chat input. */
-  --input-text-placeholder: #687385; /** Placeholder text for the input. Lower emphasis than main text. */
-  --input-text-icon: #687385; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */
-  --input-text-disabled: #a3acba; /** Placeholder text for the input. Lower emphasis than main text. */
-  --input-send-icon: var(--accent-primary); /** Default send icon color in the input. Uses the brand accent. */
-  --input-send-icon-disabled: #a3acba; /** Send icon when disabled (e.g. empty input). */
-  /* ─── Reaction ─── */
-  --reaction-bg: #ffffff; /** Reaction bar background. */
-  --reaction-border: #d5dbe1; /** Border around unselected reaction chips. Subtle in normal modes, strong in high-contrast for visibility. */
-  --reaction-text: var(--text-primary); /** Count label next to the emoji inside the reaction chip. Uses secondary text so it does not compete with message text. */
-  --reaction-emoji: var(--text-primary); /** Emoji color inside reaction chips. Uses primary text color so the emoji stays clearly legible. */
-  /* ─── Presence ─── */
-  --presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-  --presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
-  --presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-  /* ─── Badge ─── */
-  --badge-border: #ffffff;
-  --badge-bg-primary: var(--accent-primary);
-  --badge-bg-error: #d90d10;
-  --badge-bg-neutral: #687385;
-  --badge-text: var(--text-primary);
-  --badge-bg-default: #ffffff;
+  --chat-waveform-bar: rgba(255, 255, 255, 0.25);
+  --chat-waveform-bar-playing: #4586ff;
+  --chat-poll-progress-track-incoming: #464646;
+  --chat-poll-progress-track-outgoing: #1b53bd;
+  --chat-poll-progress-fill-incoming: #ababab;
+  --chat-poll-progress-fill-outgoing: #4586ff;
+  --chat-thread-connector-incoming: #565656;
+  --chat-thread-connector-outgoing: #19418d;
+  --input-text-default: #f8f8f8; /** Main text inside the chat input. */
+  --input-text-placeholder: #ababab; /** Placeholder text for the input. Lower emphasis than main text. */
+  --input-text-disabled: #6a6a6a; /** Placeholder text for the input. Lower emphasis than main text. */
+  --input-text-icon: #ababab; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */
+  --input-send-icon: #4586ff; /** Default send icon color in the input. Uses the brand accent. */
+  --input-send-icon-disabled: #6a6a6a; /** Send icon when disabled (e.g. empty input). */
+  --reaction-bg: #565656;
+  --reaction-border: #565656;
+  --reaction-text: #f8f8f8;
+  --reaction-emoji: #f8f8f8;
+  --presence-bg-online: #00c384; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --presence-border: #000000; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
+  --presence-bg-offline: #ababab; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --system-text: #ffffff;
+  --system-bg-blur: rgba(0, 0, 0, 0.01);
+  --system-scrollbar: rgba(255, 255, 255, 0.5);
+  --system-caret: #4586ff;
+  --badge-bg-default: #565656;
+  --badge-bg-primary: #4586ff;
+  --badge-bg-neutral: #ababab;
+  --badge-bg-error: #fc526a;
+  --badge-bg-inverse: #ffffff;
+  --badge-bg-overlay: rgba(0, 0, 0, 0.75);
+  --badge-text: #f8f8f8;
+  --badge-text-on-inverse: #000000;
   --badge-text-on-accent: #ffffff;
-  --badge-text-on-inverse: #ffffff;
-  --badge-bg-inverse: var(--chrome-1000);
-  /* ─── Control (remove, progress bar, toggle, playback, checkbox, play button, thumb, radio) ─── */
-  --control-remove-control-bg: #1a1b25;
-  --control-remove-control-icon: #ffffff;
-  --control-remove-control-border: #ffffff;
-  --control-progress-bar-track: #d5dbe1;
-  --control-progress-bar-fill: #687385;
+  --badge-border: #000000;
+  --control-remove-control-bg: #ffffff;
+  --control-remove-control-icon: #000000;
+  --control-remove-control-border: #000000;
+  --control-progress-bar-fill: #ababab;
+  --control-progress-bar-track: #464646;
+  --control-toggle-switch-bg: #ababab;
+  --control-toggle-switch-bg-selected: #4586ff;
+  --control-toggle-switch-bg-disabled: #323232;
   --control-toggle-switch-knob: #ffffff;
-  --control-toggle-switch-bg: #687385;
-  --control-toggle-switch-bg-selected: var(--accent-primary);
-  --control-toggle-switch-bg-disabled: #ebeef1;
-  --control-playback-toggle-border: #d5dbe1;
-  --control-playback-toggle-text: var(--text-primary);
-  --control-checkbox-border: #d5dbe1;
-  --control-checkbox-bg-selected: var(--accent-primary);
+  --control-playback-toggle-text: #f8f8f8;
+  --control-playback-toggle-border: #565656;
+  --control-checkbox-bg: rgba(255, 255, 255, 0);
+  --control-checkbox-border: #565656;
+  --control-checkbox-bg-selected: #4586ff;
   --control-checkbox-icon: #ffffff;
-  --control-play-button-bg: #000000;
+  --control-play-button-bg: rgba(0, 0, 0, 0.75);
   --control-play-button-icon: #ffffff;
   --control-playback-thumb-bg-default: #ffffff;
-  --control-playback-thumb-border-default: rgba(26, 27, 37, 0.25);
-  --control-playback-thumb-bg-active: var(--accent-primary);
   --control-playback-thumb-border-active: #ffffff;
+  --control-playback-thumb-bg-active: #4586ff;
+  --control-playback-thumb-border-default: rgba(255, 255, 255, 0.25);
   --control-radio-button-bg: rgba(255, 255, 255, 0);
-  --control-radio-button-border: #d5dbe1;
-  --control-radio-button-bg-selected: var(--accent-primary);
+  --control-radio-button-border: #565656;
+  --control-radio-button-bg-selected: #4586ff;
   --control-radio-button-indicator: #ffffff;
   --control-radio-check-bg: rgba(255, 255, 255, 0);
-  --control-radio-check-border: #d5dbe1;
-  --control-radio-check-bg-selected: var(--accent-primary);
+  --control-radio-check-border: #565656;
+  --control-radio-check-bg-selected: #4586ff;
   --control-radio-check-icon: #ffffff;
-  /* ─── Avatar (default, presence) ─── */
-  --avatar-bg-default: #c3d9ff;
-  --avatar-text-default: #091a3b;
-  --avatar-presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-  --avatar-presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-  --avatar-presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
-}
-
-.str-chat__theme-dark,
-.str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse {
-  /* Background (Figma dark semantics) */
-  --background-core-scrim: rgba(0, 0, 0, 0.75);
-  --background-core-overlay-light: rgba(0, 0, 0, 0.75);
-  --background-core-overlay-dark: rgba(0, 0, 0, 0.5);
-  --background-core-surface: var(--neutral-800);
-  --background-core-surface-subtle: var(--neutral-900);
-  --background-core-surface-strong: var(--neutral-700);
-  --background-core-inverse: var(--neutral-50);
-  --background-core-highlight: var(--yellow-800);
-  --background-core-surface-card: var(--neutral-800);
-  --background-core-elevation-0: var(--neutral-800);
-  --background-core-elevation-1: var(--neutral-900);
-  --background-core-elevation-2: var(--neutral-700);
-  --background-core-elevation-3: var(--neutral-600);
-  --background-core-elevation-4: var(--neutral-500);
-  --background-core-on-accent: var(--base-black);
-  --background-core-app: var(--background-core-elevation-0);
-  --background-utility-hover: rgba(255, 255, 255, 0.15);
-  --background-utility-pressed: var(--base-transparent-white-20);
-  --background-utility-selected: rgba(255, 255, 255, 0.25);
-  --background-utility-disabled: var(--neutral-700);
-  /* Border */
-  --border-utility-disabled: var(--neutral-700);
-  --border-utility-focused: var(--brand-150);
-  --border-utility-focus: rgba(120, 168, 255, 0.25);
-  --border-utility-active: var(--accent-primary);
-  --border-utility-hover: var(--base-transparent-white-10);
-  --border-utility-pressed: var(--base-transparent-white-20);
-  --border-utility-selected: rgba(255, 255, 255, 0.15);
-  --border-utility-error: var(--accent-error);
-  --border-utility-warning: var(--accent-warning);
-  --border-utility-success: var(--accent-success);
-  --border-core-default: var(--neutral-600);
-  --border-core-subtle: var(--neutral-800);
-  --border-core-strong: var(--neutral-400);
-  --border-core-on-surface: var(--neutral-500);
-  --border-core-inverse: var(--neutral-900);
-  --border-core-on-accent: var(--base-black);
-  --border-core-opacity-subtle: var(--base-transparent-white-20);
-  --border-core-opacity-strong: rgba(255, 255, 255, 0.25);
-  /* System */
-  --system-bg-blur: rgba(0, 0, 0, 0.01);
-  --system-scrollbar: rgba(255, 255, 255, 0.5);
-  --system-text: var(--base-white);
-  /* Text */
-  --text-primary: var(--base-white);
-  --text-secondary: var(--neutral-100);
-  --text-tertiary: var(--neutral-300);
-  --text-inverse: var(--neutral-900);
-  --text-on-accent: var(--base-white);
-  --text-disabled: var(--neutral-500);
-  --text-link: var(--brand-600);
-  /* Avatar */
-  --avatar-palette-bg-1: var(--blue-600);
-  --avatar-palette-bg-2: var(--cyan-600);
-  --avatar-palette-bg-3: var(--green-600);
-  --avatar-palette-bg-4: var(--purple-600);
-  --avatar-palette-bg-5: var(--yellow-600);
-  --avatar-palette-text-1: var(--blue-100);
-  --avatar-palette-text-2: var(--cyan-100);
-  --avatar-palette-text-3: var(--green-100);
-  --avatar-palette-text-4: var(--purple-100);
-  --avatar-palette-text-5: var(--yellow-100);
-  --avatar-bg-placeholder: var(--neutral-700);
-  --avatar-text-placeholder: var(--neutral-400);
-  /* Accent & brand */
-  --accent-success: var(--green-300);
-  --accent-warning: var(--yellow-300);
-  --accent-error: var(--red-400);
-  --accent-neutral: var(--neutral-500);
-  --accent-primary: var(--brand-400);
-  --brand-50: var(--blue-900);
-  --brand-100: var(--blue-800);
-  --brand-150: var(--blue-700);
-  --brand-200: var(--blue-600);
-  --brand-300: var(--blue-500);
-  --brand-500: var(--blue-300);
-  --brand-600: var(--blue-200);
-  --brand-700: var(--blue-150);
-  --brand-800: var(--blue-100);
-  --brand-900: var(--blue-50);
-  /* Skeleton */
-  --skeleton-loading-base: var(--base-transparent-0);
-  --skeleton-loading-highlight: var(--base-transparent-white-20);
-  /* Chrome (dark semantic scale) */
-  --chrome-0: var(--base-black);
-  --chrome-50: var(--neutral-900);
-  --chrome-100: var(--neutral-800);
-  --chrome-150: var(--neutral-700);
-  --chrome-200: var(--neutral-600);
-  --chrome-300: var(--neutral-500);
-  --chrome-400: var(--neutral-400);
-  --chrome-500: var(--neutral-300);
-  --chrome-600: var(--neutral-200);
-  --chrome-700: var(--neutral-150);
-  --chrome-800: var(--neutral-100);
-  --chrome-900: var(--neutral-50);
-  --chrome-1000: var(--base-white);
-  /* Button (dark mode – aligned with Figma / design-system-tokens dark semantics) */
-  --button-primary-bg: var(--accent-primary);
-  --button-primary-bg-liquid-glass: var(--base-transparent-0);
-  --button-primary-text: var(--text-link);
-  --button-primary-text-on-accent: var(--text-on-accent);
-  --button-primary-text-inverse: var(--text-inverse);
-  --button-primary-border: var(--brand-200);
-  --button-primary-border-inverse: var(--text-inverse);
-  --button-secondary-bg: var(--background-core-surface);
-  --button-secondary-bg-liquid-glass: var(--background-core-elevation-0);
-  --button-secondary-text: var(--text-primary);
-  --button-secondary-text-on-accent: var(--text-primary);
-  --button-secondary-text-inverse: var(--text-inverse);
-  --button-secondary-border: var(--border-core-default);
-  --button-secondary-border-inverse: var(--border-core-inverse);
-  --button-destructive-bg: var(--accent-error);
-  --button-destructive-bg-liquid-glass: var(--background-core-elevation-0);
-  --button-destructive-text: var(--accent-error);
-  --button-destructive-text-on-accent: var(--text-on-accent);
-  --button-destructive-text-inverse: var(--text-inverse);
-  --button-destructive-border: var(--accent-error);
-  --button-destructive-border-inverse: var(--text-inverse);
-  /* Chat (semantic overrides so --chat-bg-* etc resolve in dark) */
-  --chat-bg-incoming: var(--background-core-surface);
-  --chat-bg-outgoing: var(--brand-100);
-  --chat-bg-attachment-incoming: var(--background-core-surface-strong);
-  --chat-bg-attachment-outgoing: var(--brand-150);
-  --chat-reply-indicator-incoming: var(--neutral-500);
-  --chat-reply-indicator-outgoing: var(--brand-700);
-  --chat-poll-progress-fill-outgoing: var(--base-white);
-  --chat-text-username: var(--text-secondary);
-  --chat-text-timestamp: var(--text-tertiary);
-  --chat-text-read: var(--accent-primary);
-  --chat-text-mention: var(--text-link);
-  --chat-text-link: var(--text-link);
-  --chat-text-reaction: var(--text-secondary);
-  --chat-text-system: var(--text-secondary);
-  --chat-border-incoming: var(--border-core-subtle);
-  --chat-border-on-chat-incoming: var(--border-core-strong);
-  --chat-waveform-bar: var(--border-core-opacity-strong);
-  --chat-waveform-bar-playing: var(--accent-primary);
-  --chat-thread-connector-incoming: var(--border-core-default);
-  --chat-text-typing-indicator: var(--chat-text-incoming);
-  --chat-poll-progress-track-incoming: var(--control-progress-bar-track);
-  --chat-poll-progress-fill-incoming: var(--control-progress-bar-fill);
-  /* Input */
-  --input-text-default: var(--text-primary);
-  --input-text-placeholder: var(--text-tertiary);
-  --input-text-icon: var(--text-tertiary);
-  --input-text-disabled: var(--text-disabled);
-  --input-send-icon: var(--accent-primary);
-  --input-send-icon-disabled: var(--text-disabled);
-  /* Reaction */
-  --reaction-bg: var(--background-core-elevation-3);
-  --reaction-border: var(--border-core-default);
-  --reaction-text: var(--text-primary);
-  --reaction-emoji: var(--text-primary);
-  /* Presence */
-  --presence-border: var(--border-core-inverse);
-  --presence-bg-offline: var(--accent-neutral);
-  /* System */
-  --system-caret: var(--accent-primary);
-  /* Badge (-on-dark in tokens = *-inverse in react) */
-  --badge-bg-overlay: rgba(0, 0, 0, 0.75);
-  --badge-bg-default: var(--background-core-elevation-3);
-  --badge-bg-primary: var(--accent-primary);
-  --badge-bg-neutral: var(--accent-neutral);
-  --badge-text: var(--text-primary);
-  --badge-text-on-accent: var(--text-on-accent);
-  --badge-border: var(--border-core-inverse);
-  --badge-bg-inverse: var(--chrome-1000);
-  --badge-text-inverse: var(--text-inverse);
-  /* Control */
-  --control-checkbox-bg: var(--base-transparent-0);
-  --control-playback-thumb-border-default: var(--border-core-opacity-strong);
-  --control-radio-button-bg: var(--base-transparent-0);
-  --control-radio-check-bg: var(--base-transparent-0);
-  --control-remove-control-bg: var(--background-core-inverse);
-  --control-remove-control-icon: var(--text-inverse);
-  --control-remove-control-border: var(--border-core-inverse);
-  --control-progress-bar-track: var(--background-core-surface-strong);
-  --control-progress-bar-fill: var(--accent-neutral);
-  --control-toggle-switch-bg: var(--accent-neutral);
-  --control-toggle-switch-bg-disabled: var(--background-utility-disabled);
-  --control-toggle-switch-knob: var(--background-core-elevation-4);
-  --control-playback-toggle-text: var(--text-primary);
-  --control-playback-toggle-border: var(--border-core-default);
-  --control-checkbox-border: var(--border-core-default);
-  --control-checkbox-bg-selected: var(--accent-primary);
-  --control-checkbox-icon: var(--text-on-accent);
-  --control-play-button-bg: var(--chrome-1000);
-  --control-play-button-icon: var(--text-on-accent);
-  --control-playback-thumb-bg-default: var(--background-core-inverse);
-  --control-playback-thumb-border-active: var(--border-core-on-accent);
-  --control-playback-thumb-bg-active: var(--accent-primary);
-  --control-radio-button-border: var(--border-core-default);
-  --control-radio-button-bg-selected: var(--accent-primary);
-  --control-radio-button-indicator: var(--text-on-accent);
-  --control-radio-check-border: var(--border-core-default);
-  --control-radio-check-bg-selected: var(--accent-primary);
-  --control-radio-check-icon: var(--text-on-accent);
-  /* Avatar */
-  --avatar-presence-bg-offline: var(--accent-neutral);
-  --avatar-presence-border: var(--border-core-inverse);
+  --control-chip-border: #565656;
+  --control-chip-text: #f8f8f8;
+  --text-primary: #f8f8f8; /** Main body text. Used for message content, titles, and any text that carries primary meaning. */
+  --text-secondary: #d8d8d8; /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */
+  --text-tertiary: #ababab; /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */
+  --text-on-inverse: #000000; /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */
+  --text-on-accent: #ffffff; /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */
+  --text-disabled: #6a6a6a; /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */
+  --text-link: #a5c5ff; /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */
+  --avatar-palette-bg-1: #1b53bd;
+  --avatar-palette-bg-2: #006970;
+  --avatar-palette-bg-3: #006643;
+  --avatar-palette-bg-4: #553bd8;
+  --avatar-palette-bg-5: #a82c00;
+  --avatar-palette-text-1: #e3edff;
+  --avatar-palette-text-2: #d1f3f6;
+  --avatar-palette-text-3: #bdfcdb;
+  --avatar-palette-text-4: #ecedff;
+  --avatar-palette-text-5: #fcedb9;
+  --avatar-bg-default: #1b53bd;
+  --avatar-bg-placeholder: #464646;
+  --avatar-text-default: #e3edff;
+  --avatar-text-placeholder: #ababab;
+  --avatar-presence-bg-online: #00c384; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --avatar-presence-bg-offline: #ababab; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --avatar-presence-border: #000000; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
+  --accent-primary: #4586ff; /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */
+  --accent-success: #00c384; /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */
+  --accent-warning: #fa922b; /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */
+  --accent-error: #fc526a; /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */
+  --accent-neutral: #ababab; /** A mid-tone gray for de-emphasized UI elements. */
+  --brand-50: #091a3b;
+  --brand-100: #142f63;
+  --brand-150: #19418d;
+  --brand-200: #1b53bd;
+  --brand-300: #005fff;
+  --brand-400: #4586ff;
+  --brand-500: #78a8ff;
+  --brand-600: #a5c5ff;
+  --brand-700: #c3d9ff;
+  --brand-800: #e3edff;
+  --brand-900: #f3f7ff;
+  --skeleton-loading-base: rgba(
+    255,
+    255,
+    255,
+    0
+  ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */
+  --skeleton-loading-highlight: rgba(
+    0,
+    0,
+    0,
+    0.75
+  ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */
+  --chrome-0: #000000;
+  --chrome-50: #1c1c1c;
+  --chrome-100: #323232;
+  --chrome-150: #464646;
+  --chrome-200: #565656;
+  --chrome-300: #6a6a6a;
+  --chrome-400: #8f8f8f;
+  --chrome-500: #ababab;
+  --chrome-600: #c4c4c4;
+  --chrome-700: #d8d8d8;
+  --chrome-800: #efefef;
+  --chrome-900: #f8f8f8;
+  --chrome-1000: #ffffff;
 }
 
 /* Numeric styles are used for compact, layout-critical UI elements such as:
@@ -965,16 +1276,16 @@
     var(--typography-font-size-md) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__font-caption-default: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__font-caption-emphasis: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__font-caption-link: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__font-caption-link-emphasis: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
   --str-chat__font-metadata-default: normal var(--typography-font-weight-regular)
     var(--typography-font-size-xs) / var(--typography-line-height-tight)
@@ -995,8 +1306,7 @@
   --str-chat__font-numeric-lg: normal var(--typography-font-weight-bold)
     var(--typography-font-size-xs) / 100% var(--str-chat__font-family);
   --str-chat__font-numeric-xl: normal var(--typography-font-weight-bold)
-    var(--typography-font-size-sm) / var(--line-height-line-height-14)
-    var(--str-chat__font-family);
+    var(--typography-font-size-sm) / 100% var(--str-chat__font-family);
 }
 
 /*
@@ -1173,7 +1483,7 @@ to create clearer separation from the base surface.
   border: 1px solid var(--border-core-subtle);
   background: var(--badge-bg-default);
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
-  font: var(--str-chat__numeric-xl-text);
+  font: var(--str-chat__font-numeric-xl);
   color: var(--badge-text);
 }
 .str-chat__badge--variant-counter.str-chat__badge--size-xs {
@@ -1181,7 +1491,7 @@ to create clearer separation from the base surface.
   min-height: 20px;
   padding-inline: var(--spacing-xxs);
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
-  font: var(--str-chat__numeric-md-text);
+  font: var(--str-chat__font-numeric-md);
 }
 .str-chat__badge--variant-counter.str-chat__badge--size-sm {
   min-width: 24px;
@@ -1223,7 +1533,7 @@ to create clearer separation from the base surface.
   border-radius: var(--radius-max);
   background: var(--badge-bg-inverse);
   color: var(--badge-text-on-inverse);
-  font: var(--str-chat__numeric-md-text);
+  font: var(--str-chat__font-numeric-md);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -1261,7 +1571,7 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: center;
   justify-content: center;
-  font: var(--str-chat__heading-xs-text);
+  font: var(--str-chat__font-heading-xs);
   text-transform: capitalize;
 }
 .str-chat .str-chat__button.str-chat__button--solid.str-chat__button--primary {
@@ -1337,7 +1647,7 @@ to create clearer separation from the base surface.
   border-color: var(--border-utility-disabled);
 }
 .str-chat .str-chat__button.str-chat__button--floating {
-  box-shadow: var(--light-elevation-2);
+  box-shadow: var(--str-chat__box-shadow-2);
 }
 .str-chat .str-chat__button::after {
   border-radius: inherit;
@@ -1392,7 +1702,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs);
 }
 .str-chat .str-chat__theme-dark .str-chat__button.str-chat__button--floating {
-  box-shadow: var(--dark-elevation-2);
+  box-shadow: var(--str-chat__box-shadow-2);
 }
 
 .str-chat__button-play svg {
@@ -1409,7 +1719,7 @@ to create clearer separation from the base surface.
   cursor: pointer;
 }
 .str-chat__dropdown .str-chat__dropdown__items {
-  background-color: var(--str-chat__background-color);
+  background-color: transparent;
 }
 
 .str-chat__form-field-error {
@@ -1424,51 +1734,17 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs, 0.5rem);
 }
 .str-chat__form-numeric-input__label {
-  font-size: var(--typography-font-size-sm, 0.875rem);
-  font-weight: var(--typography-font-weight-medium, 500);
-  line-height: var(--typography-line-height-tight, 1.25);
-  color: var(--text-primary, #1a1b25);
-}
-.str-chat__form-numeric-input__wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs, 0.5rem);
-  padding: 0;
-  background: transparent;
-  border-radius: var(--radius-md, 0.5rem);
-  outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.str-chat__form-numeric-input__stepper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background-color: transparent;
-  border: 1px solid var(--border-core-on-surface, #a3acba);
-  border-radius: var(--button-radius-full, 9999px);
-  color: var(--text-tertiary, #687385);
-  cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease;
-}
-.str-chat__form-numeric-input__stepper:hover:not(:disabled) {
-  color: var(--text-primary, #1a1b25);
-}
-.str-chat__form-numeric-input__stepper:disabled {
-  color: var(--text-disabled, #a3acba);
-  cursor: not-allowed;
+  font: var(--str-chat__caption-default-text);
 }
-.str-chat__form-numeric-input__stepper-icon {
-  display: inline-flex;
+.str-chat__form-numeric-input__wrapper {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  font-weight: 300;
-  line-height: 1;
-  color: inherit;
+  gap: var(--spacing-xs, 0.5rem);
+  padding: 0;
+  background: transparent;
+  border-radius: var(--radius-md, 0.5rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .str-chat__form-numeric-input__input {
   flex: 0 1 auto;
@@ -1584,11 +1860,11 @@ to create clearer separation from the base surface.
 }
 .str-chat .str-chat__form__switch-field .str-chat__form__switch-field__label .str-chat__form__switch-field__label__text {
   color: var(--text-primary);
-  font: var(--str-chat__heading-xs-text);
+  font: var(--str-chat__font-heading-xs);
 }
 .str-chat .str-chat__form__switch-field .str-chat__form__switch-field__label .str-chat__form__switch-field__label__description {
   color: var(--text-tertiary);
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat .str-chat__form__switch-field .str-chat__form__switch-field__label,
 .str-chat .str-chat__form__switch-field .str-chat__form__switch-field__label__content {
@@ -1603,59 +1879,98 @@ to create clearer separation from the base surface.
   flex-direction: column;
   gap: var(--spacing-xs);
 }
+
 .str-chat__form-text-input__label {
   font-size: var(--typography-font-size-sm);
   font-weight: var(--typography-font-weight-medium);
   line-height: var(--typography-line-height-tight);
   color: var(--text-primary);
 }
+
+/* Column shell: control row + optional in-border error */
 .str-chat__form-text-input__wrapper {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-height: var(--size-40);
-  padding: 0 var(--spacing-sm);
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
   background-color: var(--background-core-elevation-0);
   border-radius: var(--radius-md);
   outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
+
+.str-chat__form-text-input__control-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  min-width: 0;
+  width: 100%;
+}
+
 .str-chat__form-text-input__wrapper--outline {
   border: 1px solid var(--border-core-default);
   box-shadow: none;
 }
+
 .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);
 }
+
 .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline {
   border: 1px solid var(--border-utility-error);
 }
+
+/* In-border error: shell keeps default outline (red only on message row) */
+.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(--border-core-default);
+}
+
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline {
   border: 1px solid var(--border-utility-error);
   box-shadow: none;
 }
 
+.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);
+}
+
 .str-chat__form-text-input--disabled .str-chat__form-text-input__wrapper--outline {
   border: 1px solid var(--border-utility-disabled);
 }
+
 .str-chat__form-text-input__wrapper--ghost {
   border: none;
   box-shadow: none;
 }
+
 .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);
 }
+
 .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost {
   border: 1px solid var(--border-utility-error);
   box-shadow: none;
 }
+
+.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: none;
+}
+
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost {
   border: 1px solid var(--border-utility-error);
   box-shadow: none;
 }
 
+.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);
+}
+
 .str-chat__form-text-input__leading {
   display: flex;
   align-items: center;
@@ -1663,40 +1978,47 @@ to create clearer separation from the base surface.
   flex-shrink: 0;
   color: var(--input-text-icon);
 }
-.str-chat__form-text-input__input {
+
+.str-chat__form-text-input .str-chat__form-text-input__input {
   flex: 1;
   min-width: 0;
-  padding: var(--spacing-xs) 0;
-  font-size: var(--typography-font-size-sm);
-  font-weight: var(--typography-font-weight-regular);
-  line-height: var(--typography-line-height-normal);
+  padding: 0;
+  font: var(--str-chat__caption-default-text);
   color: var(--input-text-default);
   background: transparent;
   border: none;
   outline: none;
+  outline-style: none;
   box-shadow: none;
 }
-.str-chat__form-text-input__input::placeholder {
+
+.str-chat__form-text-input .str-chat__form-text-input__input::placeholder {
   color: var(--input-text-placeholder);
 }
-.str-chat__form-text-input--disabled .str-chat__form-text-input__input {
+
+.str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input {
   color: var(--input-text-placeholder);
   cursor: not-allowed;
 }
-.str-chat__form-text-input--disabled .str-chat__form-text-input__input::placeholder {
+
+.str-chat__form-text-input.str-chat__form-text-input--disabled .str-chat__form-text-input__input::placeholder {
   color: var(--input-text-placeholder);
 }
+
 .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;
 }
+
 .str-chat__form-text-input__suffix {
   flex-shrink: 0;
   font-size: var(--typography-font-size-sm);
   line-height: var(--typography-line-height-normal);
   color: var(--text-tertiary);
 }
+
 .str-chat__form-text-input__trailing {
   display: flex;
   align-items: center;
@@ -1705,30 +2027,47 @@ to create clearer separation from the base surface.
   margin-inline-end: calc(-1 * var(--space-4));
   color: var(--input-text-icon);
 }
+
 .str-chat__form-text-input--error .str-chat__form-text-input__trailing {
   color: var(--accent-error);
 }
+
 .str-chat__form-text-input__message {
   display: flex;
   align-items: center;
   gap: var(--spacing-xxs);
-  line-height: var(--typography-line-height-tight);
-  /* Base typography/color only when not error (error uses str-chat__form-field-error) */
+  font: var(--str-chat__metadata-default-text);
 }
+
+/* Base typography/color only when not error (error uses str-chat__form-field-error) */
 .str-chat__form-text-input__message:not(.str-chat__form-field-error) {
-  font-size: var(--typography-font-size-xs);
   color: var(--text-tertiary);
 }
+
+.str-chat__form-text-input__message--field-message-inside {
+  padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm);
+}
+
 .str-chat__form-text-input__message--success {
   color: var(--accent-success);
 }
-.str-chat__form-text-input .str-chat__form-text-input__message-icon {
+
+.str-chat__form-text-input__message-text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.str-chat__form-text-input__message-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: inherit;
 }
+.str-chat__form-text-input__message-icon svg {
+  height: 13px;
+  width: 13px;
+}
 
 .str-chat__form__input-fieldset {
   margin: 0;
@@ -1799,10 +2138,10 @@ to create clearer separation from the base surface.
   width: 100%;
 }
 .str-chat__alert-root .str-chat__alert-header .str-chat__alert-header__copy .str-chat__alert-header__title {
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
 }
 .str-chat__alert-root .str-chat__alert-header .str-chat__alert-header__copy .str-chat__alert-header__description {
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__alert-root .str-chat__alert-actions {
   display: flex;
@@ -1820,7 +2159,7 @@ to create clearer separation from the base surface.
   max-width: 320px;
   border-radius: var(--radius-lg);
   background-color: var(--background-core-elevation-2);
-  box-shadow: var(--light-elevation-3);
+  box-shadow: var(--str-chat__box-shadow-3);
 }
 .str-chat__callout .str-chat__callout__close-button {
   position: absolute;
@@ -1902,7 +2241,7 @@ to create clearer separation from the base surface.
   --str-chat__dialog-menu-border-block-end: none;
   --str-chat__dialog-menu-border-inline-start: none;
   --str-chat__dialog-menu-border-inline-end: none;
-  --str-chat__dialog-menu-box-shadow: var(--light-elevation-3);
+  --str-chat__dialog-menu-box-shadow: var(--str-chat__box-shadow-3);
   --str-chat__dialog-menu-button-border-radius: var(--radius-md);
   --str-chat__dialog-menu-button-color: var(--text-primary);
   --str-chat__dialog-menu-button-background-color: transparent;
@@ -2169,17 +2508,21 @@ to create clearer separation from the base surface.
   min-width: 0;
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__title {
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
   color: var(--text-primary);
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__description {
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
   color: var(--text-secondary);
 }
 .str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__close-button {
   flex-shrink: 0;
   color: var(--text-primary);
 }
+.str-chat__prompt .str-chat__prompt__header .str-chat__prompt__header__close-button .str-chat__icon {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
 .str-chat__prompt .str-chat__prompt__body {
   /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */
   padding: var(--spacing-xxs) var(--spacing-xl);
@@ -2228,11 +2571,11 @@ to create clearer separation from the base surface.
   min-width: 0;
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__title {
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
   color: var(--text-primary);
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__description {
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
   color: var(--text-secondary);
 }
 .str-chat__viewer .str-chat__viewer__header .str-chat__viewer__header__go-back-button path {
@@ -2266,7 +2609,7 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the content area of the component of the content area of the component */
   --str-chat__modal-border-radius: var(--radius-xl);
   /* The text/icon color of the content area of the component */
-  --str-chat__modal-color: var(--str-chat__text-color);
+  --str-chat__modal-color: var(--text-primary);
   /* The background color of the content area of the component */
   --str-chat__modal-background-color: var(--background-core-elevation-1);
   /* The overlay color of the component */
@@ -2282,7 +2625,7 @@ to create clearer separation from the base surface.
   /* Right (left in RTL layout) border of the content area of the component */
   --str-chat__modal-border-inline-end: none;
   /* Box shadow applied to the content area of the component */
-  --str-chat__modal-box-shadow: var(--str-chat__box-shadow-elevation-1);
+  --str-chat__modal-box-shadow: var(--str-chat__box-shadow-4);
 }
 
 .str-chat__modal--open {
@@ -2316,11 +2659,11 @@ to create clearer separation from the base surface.
 
 .str-chat__ai-state-indicator-container {
   padding: 0 8px;
-  background-color: var(--str-chat__grey300);
+  background-color: var(--background-core-surface);
 }
 
 .str-chat__ai-state-indicator-text {
-  color: var(--str-chat__text-color);
+  color: var(--text-primary);
 }
 
 .str-chat {
@@ -2329,7 +2672,7 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__attachment-list-border-radius: 0;
   /* The text/icon color of the component */
-  --str-chat__attachment-list-color: var(--str-chat__text-color);
+  --str-chat__attachment-list-color: var(--text-primary);
   /* The background color of the component */
   --str-chat__attachment-list-background-color: transparent;
   /* Top border of the component */
@@ -2347,7 +2690,7 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
-  --str-chat__image-attachment-color: var(--str-chat__text-color);
+  --str-chat__image-attachment-color: var(--text-primary);
   /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-background-color: transparent;
   /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
@@ -2365,7 +2708,7 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* The text/icon color of image gallery attachments */
-  --str-chat__image-gallery-attachment-color: var(--str-chat__text-color);
+  --str-chat__image-gallery-attachment-color: var(--text-primary);
   /* The background color of image gallery attachments */
   --str-chat__image-gallery-attachment-background-color: transparent;
   /* Top border of image gallery attachments */
@@ -2378,38 +2721,12 @@ to create clearer separation from the base surface.
   --str-chat__image-gallery-attachment-border-inline-end: none;
   /* Box shadow applied to image gallery attachments */
   --str-chat__image-gallery-attachment-box-shadow: none;
-  /* Overlay color applied to image gallery attachments */
-  --str-chat__image-gallery-attachment-overlay: var(--str-chat__secondary-overlay-color);
-  /* Text colors used on overlay applied to image gallery attachments */
-  --str-chat__image-gallery-attachment-overlay-text-color: var(
-    --str-chat__secondary-overlay-text-color
-  );
-  /* The border radius used for the borders of card attachments */
-  --str-chat__card-attachment-border-radius: 0;
-  /* The text/icon color of card attachments */
-  --str-chat__card-attachment-color: var(--str-chat__text-color);
-  /* The text color of links inside card attachments */
-  --str-chat__card-attachment-link-color: var(--str-chat__primary-color);
-  /* The background color of card attachments */
-  --str-chat__card-attachment-background-color: transparent;
-  /* Top border of card attachments */
-  --str-chat__card-attachment-border-block-start: none;
-  /* Bottom border of card attachments */
-  --str-chat__card-attachment-border-block-end: none;
-  /* Left (right in RTL layout) border of card attachments */
-  --str-chat__card-attachment-border-inline-start: none;
-  /* Right (left in RTL layout) border of card attachments */
-  --str-chat__card-attachment-border-inline-end: none;
-  /* Box shadow applied to card attachments */
-  --str-chat__card-attachment-box-shadow: none;
   /* The border radius used for the borders of file attachments */
   --str-chat__file-attachment-border-radius: calc(
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* The text/icon color of file attachments */
-  --str-chat__file-attachment-color: var(--str-chat__text-color);
-  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
-  --str-chat__file-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
+  --str-chat__file-attachment-color: var(--text-primary);
   /* The background color of file attachments */
   --str-chat__file-attachment-background-color: transparent;
   /* Top border of file attachments */
@@ -2422,32 +2739,6 @@ to create clearer separation from the base surface.
   --str-chat__file-attachment-border-inline-end: none;
   /* Box shadow applied to file attachments */
   --str-chat__file-attachment-box-shadow: none;
-  /* Border radius applied to the play / pause button of audio widget */
-  --str-chat__audio-attachment-controls-button-border-radius: var(
-    --str-chat__border-radius-circle
-  );
-  /* Text color applied to audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-color: var(--str-chat__text-color);
-  /* Background color applied to audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-background-color: var(
-    --str-chat__secondary-background-color
-  );
-  /* Background color applied to audio widget's play / pause button when in pressed (active) state */
-  --str-chat__audio-attachment-controls-button-pressed-background-color: var(
-    --str-chat__surface-color
-  );
-  /* Top border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-block-start: none;
-  /* Bottom border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-block-end: none;
-  /* Left (right in RTL layout) border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-inline-start: none;
-  /* Right (left in RTL layout) border of audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-border-inline-end: none;
-  /* Box shadow applied to audio widget's play / pause button */
-  --str-chat__audio-attachment-controls-button-box-shadow: var(
-    --str-chat__circle-fab-box-shadow
-  );
 }
 
 .str-chat__attachment-list {
@@ -2484,11 +2775,11 @@ to create clearer separation from the base surface.
 }
 .str-chat__attachment-list .str-chat__message-attachment {
   overflow: hidden;
-  background-color: var(--chat-bg-attachment-incoming);
+  background-color: var(--chat-bg-attachment);
   border-radius: var(--message-bubble-radius-attachment);
 }
 .str-chat__attachment-list .str-chat__message-attachment .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
-  border-color: var(--chat-border-on-chat-incoming);
+  border-color: var(--chat-border-on-chat);
   background-color: transparent;
 }
 .str-chat__attachment-list .str-chat__message-attachment--image,
@@ -2639,7 +2930,7 @@ to create clearer separation from the base surface.
   border-inline-end: var(--str-chat__file-attachment-border-inline-end);
 }
 .str-chat__attachment-list .str-chat__message-attachment-download-icon {
-  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
+  --str-chat-icon-height: var(--size-16);
 }
 
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text:not(.str-chat__message--has-quoted-message) .str-chat__message-bubble {
@@ -2650,30 +2941,16 @@ to create clearer separation from the base surface.
   --str-chat__attachment-max-width: var(--str-chat__message-max-width);
 }
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
-  border: 1px solid var(--chat-border-incoming);
+  border: 1px solid var(--chat-border);
   box-shadow: var(--background-core-elevation-0);
 }
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment {
-  background-color: var(--chat-bg-incoming);
+  background-color: var(--chat-bg);
 }
 
 .str-chat__message--me .str-chat__attachment-list {
   align-items: flex-end;
 }
-.str-chat__message--me .str-chat__message-attachment {
-  background-color: var(--chat-bg-attachment-outgoing);
-  border-radius: var(--message-bubble-radius-attachment);
-}
-.str-chat__message--me .str-chat__message-attachment .str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
-  border-color: var(--chat-border-on-chat-outgoing);
-}
-.str-chat__message--me.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
-  border: 1px solid var(--chat-border-outgoing);
-  box-shadow: var(--background-core-elevation-0);
-}
-.str-chat__message--me.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment {
-  background-color: var(--chat-bg-outgoing);
-}
 
 .str-chat__li--single .str-chat__message--other.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment,
 .str-chat__li--bottom .str-chat__message--other.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment {
@@ -2727,9 +3004,9 @@ to create clearer separation from the base surface.
   /* Box shadow applied to an attachment action */
   --str-chat__attachment-action-box-shadow: none;
   /* The text/icon color of an attachment action while in pressed state */
-  --str-chat__attachment-action-active-color: var(--str-chat__primary-color);
+  --str-chat__attachment-action-active-color: var(--accent-primary);
   /* The text/icon color of an attachment action while in pressed state */
-  --str-chat__attachment-action-focus-color: var(--str-chat__primary-color);
+  --str-chat__attachment-action-focus-color: var(--accent-primary);
 }
 
 .str-chat__message-attachment-actions {
@@ -2778,11 +3055,7 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* Text color used in audio widget */
-  --str-chat__audio-attachment-widget-color: var(--str-chat__text-color);
-  /* Border radius applied audio widget */
-  --str-chat__audio-attachment-widget-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__audio-attachment-widget-color: var(--text-primary);
   /* The text/icon color for low emphasis texts (for example file size) in audio widget */
   --str-chat__audio-attachment-widget-background-color: transparent;
   /* Top border of audio widget */
@@ -2832,7 +3105,7 @@ to create clearer separation from the base surface.
   flex-shrink: 0;
 }
 .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--title {
-  font: var(--str-chat__caption-emphasis-text);
+  font: var(--str-chat__font-caption-emphasis);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2843,7 +3116,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__message-attachment-audio-widget .str-chat__duration-display {
   width: 40px;
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
   color: var(--text-secondary);
 }
 .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row {
@@ -2853,7 +3126,6 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs);
 }
 .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row .str-chat__message-attachment-file--item-size {
-  line-height: calc(var(--str-chat__spacing-px) * 14);
   font: var(--str-chat__font-metadata-default);
 }
 
@@ -2873,15 +3145,9 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* The text/icon color of geolocation attachments */
-  --str-chat__geolocation-attachment-color: var(--str-chat__text-color);
-  /* The text/icon color of geolocation attachments for low emphasis texts (for example file size) */
-  --str-chat__geolocation-attachment-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__geolocation-attachment-color: var(--chat-text);
   /* The background color of geolocation attachments */
-  --str-chat__geolocation-attachment-background-color: var(
-    --str-chat__secondary-background-color
-  );
+  --str-chat__geolocation-attachment-background-color: var(--chat-bg-attachment);
   /* Top border of geolocation attachments */
   --str-chat__geolocation-attachment-border-block-start: none;
   /* Bottom border of geolocation attachments */
@@ -2945,8 +3211,8 @@ to create clearer separation from the base surface.
   display: flex;
   justify-content: center;
   padding: 0.5rem;
-  background-color: var(--str-chat__tertiary-surface-color);
-  font: var(--str-chat__caption-default-text);
+  background-color: var(--background-core-surface-subtle);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__message-attachment-geolocation .str-chat__message-attachment-geolocation__status .str-chat__message-attachment-geolocation__status--active {
   display: flex;
@@ -2955,16 +3221,16 @@ to create clearer separation from the base surface.
   gap: 0.375rem;
 }
 .str-chat__message-attachment-geolocation .str-chat__message-attachment-geolocation__status .str-chat__message-attachment-geolocation__status--active .str-chat__message-attachment-geolocation__status--active-status {
-  color: var(--str-chat__info-color);
+  color: var(--accent-success);
 }
 .str-chat__message-attachment-geolocation .str-chat__message-attachment-geolocation__status .str-chat__message-attachment-geolocation__status--active .str-chat__message-attachment-geolocation__status--active-until {
   text-transform: lowercase;
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 
 .str-chat {
   /* The height of GIFs */
-  --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+  --str-chat__gif-height: 200px;
 }
 
 .str-chat__message-attachment-giphy {
@@ -3018,7 +3284,7 @@ to create clearer separation from the base surface.
   align-items: center;
   gap: var(--spacing-xs, 8px);
   align-self: stretch;
-  color: var(--chat-text-outgoing);
+  color: var(--chat-text);
   font-size: var(--typography-font-size-sm);
   font-weight: var(--typography-font-weight-semi-bold);
   line-height: var(--typography-line-height-tight);
@@ -3042,7 +3308,7 @@ to create clearer separation from the base surface.
   line-height: var(--typography-line-height-tight);
 }
 .str-chat__message-attachment-card * {
-  color: var(--chat-text-incoming);
+  color: var(--chat-text);
 }
 .str-chat__message-attachment-card .str-chat__message-attachment-card--header {
   position: relative;
@@ -3140,15 +3406,11 @@ to create clearer separation from the base surface.
 .str-chat__message {
   --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error);
   --str-chat__modal-gallery-load-failed-indicator-color: var(--text-inverse);
-  --str-chat__modal-gallery-loading-background: var(--chat-bg-incoming);
+  --str-chat__modal-gallery-loading-background: var(--chat-bg);
   --str-chat__modal-gallery-loading-base: var(--skeleton-loading-base);
   --str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight);
 }
 
-.str-chat__message--me {
-  --str-chat__modal-gallery-loading-background: var(--chat-bg-outgoing);
-}
-
 .str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__modal-gallery {
   background: var(--str-chat__image-gallery-attachment-background-color);
   color: var(--str-chat__image-gallery-attachment-color);
@@ -3328,11 +3590,7 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* The text/icon color of file attachments */
-  --str-chat__unsupported-attachment-color: var(--str-chat__text-color);
-  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
-  --str-chat__unsupported-attachment-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__unsupported-attachment-color: var(--text-primary);
   /* The background color of file attachments */
   --str-chat__unsupported-attachment-background-color: transparent;
   /* Top border of file attachments */
@@ -3363,8 +3621,8 @@ to create clearer separation from the base surface.
   column-gap: var(--spacing-xs);
 }
 .str-chat__message-attachment-unsupported .str-chat__icon {
-  height: calc(var(--str-chat__spacing-px) * 20);
-  width: calc(var(--str-chat__spacing-px) * 20);
+  height: var(--size-20);
+  width: var(--size-20);
 }
 .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__metadata {
   min-width: 0;
@@ -3390,11 +3648,7 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* Text color used in audio recording widget */
-  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
-  /* Border radius applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__voice-recording-attachment-widget-color: var(--text-primary);
   /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
   --str-chat__voice-recording-attachment-widget-background-color: transparent;
   /* Top border of audio recording widget */
@@ -3439,13 +3693,13 @@ to create clearer separation from the base surface.
   color: var(--str-chat__voice-recording-attachment-widget-color);
 }
 .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment-download-icon svg {
-  width: calc(var(--str-chat__spacing-px) * 24);
-  height: calc(var(--str-chat__spacing-px) * 16);
+  width: var(--size-24);
+  height: var(--size-16);
 }
 .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
-  min-width: calc(var(--str-chat__spacing-px) * 40);
-  width: calc(var(--str-chat__spacing-px) * 40);
-  font: var(--str-chat__metadata-emphasis-text);
+  min-width: var(--size-40);
+  width: var(--size-40);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 
 .str-chat .str-chat__duration-display {
@@ -3456,9 +3710,6 @@ to create clearer separation from the base surface.
   white-space: nowrap;
   text-align: center;
 }
-.str-chat .str-chat__duration-display--hasProgress .str-chat__duration-display__time-elapsed {
-  color: var(--str-chat__primary-color);
-}
 
 .str-chat .str-chat__button.str-chat__playback-rate-button {
   text-transform: none;
@@ -3472,9 +3723,9 @@ to create clearer separation from the base surface.
   padding: var(--button-padding-y-sm) var(--spacing-xs);
   background-color: inherit;
   border-radius: var(--button-radius-lg);
-  border: 1px solid var(--control-playback-toggle-border);
+  border: 1px solid var(--chat-border-on-chat);
   color: var(--control-playback-toggle-text, var(--text-primary));
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat .str-chat__button.str-chat__playback-rate-button:not(:disabled):hover::after {
   content: "";
@@ -3501,35 +3752,31 @@ to create clearer separation from the base surface.
   cursor: default;
 }
 
-.str-chat__message--me .str-chat__message-attachment .str-chat__playback-rate-button {
-  border: 1px solid var(--chat-border-on-chat-outgoing);
-}
-
 .str-chat .str-chat__message-attachment-audio-widget--progress-track {
   position: relative;
-  height: calc(var(--str-chat__spacing-px) * 5);
+  height: var(--size-4);
   flex: 1;
   min-width: 0;
   cursor: pointer;
-  background: linear-gradient(to var(--str-chat__progress-direction, right), var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress), var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress));
+  background: linear-gradient(to var(--str-chat__progress-direction, right), var(--chat-waveform-bar-playing) var(--str-chat__message-attachment-audio-widget-progress), var(--chat-waveform-bar) var(--str-chat__message-attachment-audio-widget-progress));
 }
 [dir=rtl] .str-chat .str-chat__message-attachment-audio-widget--progress-track {
   --str-chat__progress-direction: left;
 }
 .str-chat .str-chat__message-attachment-audio-widget--progress-track {
-  border-radius: calc(var(--str-chat__spacing-px) * 5);
+  border-radius: var(--radius-max);
 }
 .str-chat .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
   position: absolute;
   inset-inline-start: 0;
   top: 50%;
   transform: translateY(-50%);
-  height: calc(var(--str-chat__spacing-px) * 12);
-  width: calc(var(--str-chat__spacing-px) * 12);
+  height: var(--size-12);
+  width: var(--size-12);
   border-radius: var(--radius-max);
   border: 1px solid var(--control-playback-thumb-border-default);
   background: var(--control-playback-thumb-bg-default);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
+  box-shadow: var(--str-chat__box-shadow-2);
   cursor: grab;
 }
 
@@ -3564,7 +3811,7 @@ to create clearer separation from the base surface.
   position: absolute;
   inset-inline-start: 0;
   border: 2px solid var(--base-white);
-  box-shadow: var(--light-elevation-3);
+  box-shadow: var(--str-chat__box-shadow-3);
   background: var(--accent-neutral);
   height: 14px;
   width: 14px;
@@ -3900,13 +4147,13 @@ to create clearer separation from the base surface.
   align-items: center;
 }
 .str-chat__loading-channel .str-chat__channel-header--loading .str-chat__loading-channel-header-name {
-  height: calc(var(--str-chat__spacing-px) * 16);
-  width: calc(var(--str-chat__spacing-px) * 120);
+  height: var(--size-16);
+  width: 120px;
 }
 .str-chat__loading-channel .str-chat__channel-header--loading .str-chat__loading-channel-header-avatar {
   flex-shrink: 0;
-  width: calc(var(--str-chat__spacing-px) * 40);
-  height: calc(var(--str-chat__spacing-px) * 40);
+  width: var(--size-40);
+  height: var(--size-40);
   border-radius: 50%;
 }
 .str-chat__loading-channel .str-chat__message-list--loading {
@@ -3923,8 +4170,8 @@ to create clearer separation from the base surface.
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: calc(var(--str-chat__spacing-px) * 28);
-  padding-block: calc(var(--str-chat__spacing-px) * 32) calc(var(--str-chat__spacing-px) * 24);
+  gap: var(--size-28);
+  padding-block: var(--size-32) var(--size-24);
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message {
   display: flex;
@@ -3933,8 +4180,8 @@ to create clearer separation from the base surface.
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-avatar {
   flex-shrink: 0;
-  width: calc(var(--str-chat__spacing-px) * 36);
-  height: calc(var(--str-chat__spacing-px) * 36);
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   align-self: end;
 }
@@ -3943,7 +4190,7 @@ to create clearer separation from the base surface.
   flex-direction: column;
   width: min(100%, var(--str-chat__message-max-width));
   max-width: var(--str-chat__message-max-width);
-  row-gap: calc(var(--str-chat__spacing-px) * 12);
+  row-gap: var(--size-12);
   min-width: 0;
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-bubble {
@@ -3951,23 +4198,23 @@ to create clearer separation from the base surface.
   border-radius: var(--radius-3xl);
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-bubble--md {
-  height: calc(var(--str-chat__spacing-px) * 64);
-  width: min(58%, var(--str-chat__spacing-px) * 272);
+  height: var(--size-64);
+  width: min(58%, 272px);
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-bubble--lg {
-  height: calc(var(--str-chat__spacing-px) * 84);
-  width: min(72%, var(--str-chat__spacing-px) * 352);
+  height: 84px;
+  width: min(72%, 352px);
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-metadata {
-  height: calc(var(--str-chat__spacing-px) * 16);
+  height: var(--size-16);
   width: min(100%, var(--str-chat__message-max-width));
   border-radius: 999px;
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-metadata--sm {
-  width: calc(var(--str-chat__spacing-px) * 88);
+  width: 88px;
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-metadata--md {
-  width: calc(var(--str-chat__spacing-px) * 124);
+  width: 124px;
 }
 .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message.str-chat__loading-channel-message--outgoing {
   justify-content: flex-end;
@@ -3983,14 +4230,14 @@ to create clearer separation from the base surface.
 }
 .str-chat__loading-channel .str-chat__message-composer-container--loading .str-chat__loading-channel-message-input-button {
   flex-shrink: 0;
-  width: calc(var(--str-chat__spacing-px) * 48);
-  height: calc(var(--str-chat__spacing-px) * 48);
+  width: var(--size-48);
+  height: var(--size-48);
   border-radius: var(--button-radius-full);
 }
 .str-chat__loading-channel .str-chat__message-composer-container--loading .str-chat__loading-channel-message-input-pill {
   flex: 1;
   min-width: 0;
-  height: calc(var(--str-chat__spacing-px) * 48);
+  height: var(--size-48);
   border-radius: 999px;
 }
 
@@ -3998,9 +4245,9 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__channel-border-radius: 0;
   /* The text/icon color of the component */
-  --str-chat__channel-color: var(--str-chat__text-color);
+  --str-chat__channel-color: var(--text-primary);
   /* The background color of the component */
-  --str-chat__channel-background-color: var(--str-chat__background-color);
+  --str-chat__channel-background-color: transparent;
   /* Box shadow applied to the component */
   --str-chat__channel-box-shadow: none;
   /* Top border of the component */
@@ -4159,10 +4406,10 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
 }
 .str-chat__channel-header .str-chat__channel-header__data__title {
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
 }
 .str-chat__channel-header .str-chat__channel-header__data__subtitle {
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__channel-header__data__subtitle-color);
 }
 
@@ -4170,9 +4417,9 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__channel-list-border-radius: 0;
   /* The text/icon color of the component */
-  --str-chat__channel-list-color: var(--str-chat__text-color);
+  --str-chat__channel-list-color: var(--text-primary);
   /* The background color of the component */
-  --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
+  --str-chat__channel-list-background-color: var(--background-core-elevation-1);
   /* Box shadow applied to the component */
   --str-chat__channel-list-box-shadow: none;
   /* Animation duration used when the component enters or exits */
@@ -4192,7 +4439,7 @@ to create clearer separation from the base surface.
   /* Left (right in RTL layout) border of the component */
   --str-chat__channel-list-border-inline-start: none;
   /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+  --str-chat__channel-list-border-inline-end: 1px solid var(--border-core-default);
   /* The border radius used for the borders of the load more button */
   --str-chat__channel-list-load-more-border-radius: var(
     --str-chat__cta-button-border-radius
@@ -4234,9 +4481,7 @@ to create clearer separation from the base surface.
     --str-chat__cta-button-disabled-color
   );
   /* The text/icon color for the empty list state */
-  --str-chat__channel-list-empty-indicator-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__channel-list-empty-indicator-color: var(--text-secondary);
 }
 
 .str-chat__channel-list {
@@ -4283,7 +4528,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__channel-list .str-chat__channel-list-inner .str-chat__channel-list-inner__main .str-chat__channel-list-empty p {
   color: var(--text-secondary);
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__channel-list .str-chat__load-more-button {
   display: flex;
@@ -4356,7 +4601,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__channel-list__header .str-chat__channel-list__header__title {
   flex: 1;
-  font: var(--str-chat__heading-lg-text);
+  font: var(--str-chat__font-heading-lg);
   color: var(--text-primary);
 }
 
@@ -4449,8 +4694,8 @@ to create clearer separation from the base surface.
 }
 .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 > .str-chat__icon--mute {
   color: var(--text-tertiary);
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 .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 {
   flex-shrink: 0;
@@ -4466,7 +4711,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat {
-  --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
+  --str-chat-selector-background-color: var(--background-core-elevation-1);
   --str-chat-selector-border-color: var(--border-core-subtle);
   --str-chat__chat-view-selector-transition-duration: 180ms;
   --str-chat__chat-view-selector-transition-easing: ease;
@@ -4474,10 +4719,10 @@ to create clearer separation from the base surface.
   --str-chat__chat-view-selector-mobile-width: calc(
     var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px
   );
-  --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
-  --str-chat-selector-button-color-selected: var(--str-chat__text-color);
+  --str-chat-selector-button-color-default: var(--text-tertiary);
+  --str-chat-selector-button-color-selected: var(--text-primary);
   --str-chat-selector-button-background-color-default: transparent;
-  --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color);
+  --str-chat-selector-button-background-color-selected: var(--background-core-surface);
 }
 
 .str-chat__chat-view {
@@ -4486,6 +4731,7 @@ to create clearer separation from the base surface.
   height: 100%;
   min-height: 0;
   position: relative;
+  background-color: var(--str-chat__background-color);
 }
 .str-chat__chat-view .str-chat__chat-view__selector {
   display: flex;
@@ -4499,7 +4745,7 @@ to create clearer separation from the base surface.
   display: flex;
   position: relative;
 }
-.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-container:focus-within .str-chat__chat-view__selector-button-tooltip, .str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-container:hover .str-chat__chat-view__selector-button-tooltip {
+.str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-container:focus-visible + .str-chat__chat-view__selector-button-tooltip, .str-chat__chat-view .str-chat__chat-view__selector .str-chat__chat-view__selector-button-container:hover .str-chat__chat-view__selector-button-tooltip {
   opacity: 1;
   transform: translate3d(0, -50%, 0);
   visibility: visible;
@@ -4512,7 +4758,7 @@ to create clearer separation from the base surface.
   gap: 4px;
   padding: var(--spacing-xs);
   border-radius: var(--radius-md);
-  font: var(--str-chat__caption-emphasis-text);
+  font: var(--str-chat__font-caption-emphasis);
   line-height: 1;
   position: relative;
   background: var(--str-chat-selector-button-background-color-default);
@@ -4566,8 +4812,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat {
-  --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color);
-  --str-chat__date-separator-line-color: var(--str-chat__disabled-color);
+  --str-chat__date-separator-color: var(--chat-text-system);
   --str-chat__date-separator-border-radius: 0;
   --str-chat__date-separator-background-color: transparent;
   --str-chat__date-separator-border-block-start: none;
@@ -4611,10 +4856,7 @@ to create clearer separation from the base surface.
   color: var(--chat-text-system);
   background-color: var(--background-core-surface-subtle);
   border-radius: var(--radius-max);
-  /* metadata/emphasis */
-  font-size: var(--typography-font-size-xs);
-  font-weight: var(--typography-font-weight-semi-bold);
-  line-height: var(--typography-line-height-tight);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 
 .str-chat {
@@ -4624,10 +4866,10 @@ to create clearer separation from the base surface.
   --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
   /* Top border of the component on dragover */
   --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid
-    var(--str-chat__primary-color);
+    var(--accent-primary);
   /* Bottom border of the component on dragover */
   --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid
-    var(--str-chat__primary-color);
+    var(--accent-primary);
   /* Left (right in RTL layout) border of the component on dragover */
   --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
   /* Right (left in RTL layout) border of the component on dragover */
@@ -4679,7 +4921,7 @@ to create clearer separation from the base surface.
   border-inline-start: var(--str-chat__channel-border-inline-start);
   border-inline-end: var(--str-chat__channel-border-inline-end);
   color: var(--text-secondary);
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__empty-channel svg {
   width: 32px;
@@ -4725,7 +4967,7 @@ to create clearer separation from the base surface.
   --str-chat__gallery-nav-background: rgba(255, 255, 255, 0.92);
   --str-chat__gallery-nav-color: #101828;
   --str-chat__gallery-nav-hover-background: #ffffff;
-  --str-chat__gallery-nav-box-shadow: var(--str-chat__box-shadow-elevation-1);
+  --str-chat__gallery-nav-box-shadow: var(--str-chat__box-shadow-2);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -4736,20 +4978,20 @@ to create clearer separation from the base surface.
   min-height: 0;
   padding: 0;
   box-sizing: border-box;
+  backdrop-filter: blur(24px);
 }
 .str-chat.str-chat__modal.str-chat__gallery-modal {
   --str-chat__modal-overlay-color: var(--background-core-scrim);
   --str-chat__modal-overlay-backdrop-filter: none;
 }
 .str-chat .str-chat__gallery__header {
-  position: absolute;
-  inset: var(--spacing-sm) var(--spacing-sm) auto;
-  z-index: 2;
+  padding: var(--spacing-md);
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: start;
   gap: var(--spacing-sm);
   pointer-events: none;
+  width: 100%;
 }
 .str-chat .str-chat__gallery__header-spacer {
   min-width: 0;
@@ -4760,9 +5002,7 @@ to create clearer separation from the base surface.
 }
 .str-chat .str-chat__gallery__title {
   color: var(--str-chat__gallery-foreground);
-  font-size: var(--typography-font-size-sm);
-  font-weight: 600;
-  line-height: var(--typography-line-height-tight);
+  font: var(--str-chat__font-heading-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4771,8 +5011,7 @@ to create clearer separation from the base surface.
   display: block;
   margin-top: 2px;
   color: var(--str-chat__gallery-muted-foreground);
-  font-size: var(--typography-font-size-xs);
-  line-height: var(--typography-line-height-tight);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat .str-chat__gallery__header-actions {
   display: inline-flex;
@@ -4817,18 +5056,13 @@ to create clearer separation from the base surface.
   outline: 2px solid var(--border-utility-focused);
   outline-offset: 2px;
 }
-.str-chat .str-chat__button.str-chat__gallery__action-button .str-chat__button__content,
-.str-chat .str-chat__gallery__action-button .str-chat__button__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.str-chat .str-chat__button.str-chat__gallery__action-button svg,
-.str-chat .str-chat__gallery__action-button svg {
-  width: 1rem;
-  height: 1rem;
+.str-chat .str-chat__button.str-chat__gallery__action-button .str-chat__icon,
+.str-chat .str-chat__gallery__action-button .str-chat__icon {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 .str-chat .str-chat__gallery__main {
+  flex-direction: column;
   position: relative;
   display: flex;
   align-items: center;
@@ -4840,7 +5074,6 @@ to create clearer separation from the base surface.
   overflow: hidden;
   border-radius: 0;
   background: var(--str-chat__gallery-main-background);
-  backdrop-filter: blur(24px);
 }
 .str-chat .str-chat__gallery__slide-container {
   position: relative;
@@ -4850,11 +5083,15 @@ to create clearer separation from the base surface.
   width: 100%;
   height: 100%;
   min-height: 0;
-  padding: 2.5rem 3.5rem 2rem;
+  padding: var(--size-64);
   box-sizing: border-box;
   overflow: hidden;
   touch-action: pan-y pinch-zoom;
 }
+.str-chat .str-chat__gallery__media-container {
+  width: 100%;
+  height: 100%;
+}
 .str-chat .str-chat__gallery__media {
   display: flex;
   align-items: center;
@@ -4932,18 +5169,15 @@ to create clearer separation from the base surface.
   inset-inline-end: var(--spacing-sm);
 }
 .str-chat .str-chat__gallery__position-indicator {
-  position: absolute;
-  left: 50%;
-  bottom: var(--spacing-sm);
-  z-index: 2;
-  transform: translateX(-50%);
   color: var(--str-chat__gallery-foreground);
-  font-size: var(--typography-font-size-xs);
-  font-weight: 500;
-  line-height: var(--typography-line-height-tight);
-  font-variant-numeric: tabular-nums;
+  font: var(--str-chat__font-caption-emphasis);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
   user-select: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
 }
 .str-chat .str-chat__gallery__loading {
   display: flex;
@@ -4961,7 +5195,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-sm);
   width: 100%;
   height: 100%;
-  color: var(--str-chat__text-low-emphasis-color);
+  color: var(--text-tertiary);
   font-size: var(--typography-font-size-sm);
 }
 .str-chat.str-chat__theme-dark .str-chat__gallery {
@@ -5028,25 +5262,25 @@ to create clearer separation from the base surface.
 
 .str-chat__loading-channels-avatar {
   flex-shrink: 0;
-  width: calc(var(--str-chat__spacing-px) * 48);
-  height: calc(var(--str-chat__spacing-px) * 48);
+  width: var(--size-48);
+  height: var(--size-48);
   border-radius: 50%;
 }
 
 .str-chat__loading-channels-username,
 .str-chat__loading-channels-status {
-  height: calc(var(--str-chat__spacing-px) * 20);
+  height: var(--size-20);
   border-radius: 999px;
   -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 94%, rgba(0, 0, 0, 0.7) 98%, transparent 100%);
   mask-image: linear-gradient(90deg, #000 0%, #000 94%, rgba(0, 0, 0, 0.7) 98%, transparent 100%);
 }
 
 .str-chat__loading-channels-username {
-  width: min(62%, var(--str-chat__spacing-px) * 180);
+  width: min(62%, 180px);
 }
 
 .str-chat__loading-channels-status {
-  width: min(84%, var(--str-chat__spacing-px) * 244);
+  width: min(84%, 244px);
 }
 
 @keyframes loading-channels-shimmer {
@@ -5116,7 +5350,7 @@ to create clearer separation from the base surface.
   padding-bottom: var(--spacing-xxs);
 }
 .str-chat__share-location-dialog .str-chat__live-location-activation .str-chat__form__switch-field__label__text {
-  font: var(--str-chat__caption-emphasis-text);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__share-location-dialog .str-chat__live-location-sharing-duration-selector {
   padding-inline: calc(var(--spacing-md) - var(--spacing-xs));
@@ -5135,7 +5369,7 @@ to create clearer separation from the base surface.
   display: flex;
   justify-content: space-between;
   min-width: var(--str-chat__duration-selector-min-width);
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__share-location-dialog .str-chat__live-location-sharing-duration-selector .str-chat__context-menu {
   min-width: var(--str-chat__duration-selector-min-width);
@@ -5204,10 +5438,10 @@ to create clearer separation from the base surface.
   width: 32px;
   padding: 0;
   cursor: pointer;
-  --str-chat-icon-color: var(--str-chat__on-primary-color);
-  border-radius: var(--str-chat__border-radius-circle);
-  color: var(--str-chat__on-primary-color);
-  background-color: var(--str-chat__primary-color);
+  --str-chat-icon-color: var(--text-on-accent);
+  border-radius: var(--radius-max);
+  color: var(--text-on-accent);
+  background-color: var(--accent-primary);
 }
 .str-chat__audio_recorder .str-chat__audio_recorder__complete-button:disabled,
 .str-chat__audio_recorder .str-chat__audio_recorder__stop-button:disabled {
@@ -5215,7 +5449,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__audio_recorder .str-chat__audio_recorder__complete-button .str-chat__loading-indicator svg linearGradient stop:last-child,
 .str-chat__audio_recorder .str-chat__audio_recorder__stop-button .str-chat__loading-indicator svg linearGradient stop:last-child {
-  stop-color: var(--str-chat__background-color);
+  stop-color: var(--background-core-app);
 }
 .str-chat__audio_recorder .str-chat__audio_recorder__stop-button {
   --str-chat-icon-height: 12px;
@@ -5265,52 +5499,44 @@ to create clearer separation from the base surface.
 
 .str-chat {
   /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
-  --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
+  --str-chat__message-options-button-size: var(--size-32);
   --str-chat__message-border-radius: 0;
-  --str-chat__message-color: var(--str-chat__text-color);
   --str-chat__message-link-color: var(--chat-text-link);
-  --str-chat__message-mention-color: var(--str-chat__primary-color);
+  --str-chat__message-mention-color: var(--accent-primary);
   --str-chat__message-background-color: transparent;
-  --str-chat__message-highlighted-background-color: var(
-    --str-chat__message-highlight-color
-  );
-  --str-chat__message-border-block-start: none;
-  --str-chat__message-border-block-end: none;
-  --str-chat__message-border-inline-start: none;
-  --str-chat__message-border-inline-end: none;
-  --str-chat__message-box-shadow: none;
+  --str-chat__message-highlighted-background-color: var(--background-core-highlight);
   --str-chat__message-active-background-color: transparent;
-  --str-chat__message-options-color: var(--button-secondary-text);
-  --str-chat__message-options-hover-background-color: var(
-    --str-chat__tertiary-surface-color
-  );
-  --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
-  --str-chat__message-options-active-color: var(--str-chat__primary-color);
   --str-chat__message-bubble-border-radius: var(--message-bubble-radius-group-bottom);
-  --str-chat__message-bubble-color: var(--chat-text-message);
-  --str-chat__message-bubble-background-color: var(--chat-bg-incoming);
-  --str-chat__own-message-bubble-color: var(--chat-text-message);
-  --str-chat__own-message-bubble-background-color: var(--chat-bg-outgoing);
-  --str-chat__message-bubble-border-block-start: none;
-  --str-chat__message-bubble-border-block-end: none;
-  --str-chat__message-bubble-border-inline-start: none;
-  --str-chat__message-bubble-border-inline-end: none;
-  --str-chat__message-bubble-box-shadow: none;
   --str-chat__blocked-message-border-radius: var(--radius-md);
-  --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
-  --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
-  --str-chat__blocked-message-border-block-start: none;
-  --str-chat__blocked-message-border-block-end: none;
-  --str-chat__blocked-message-border-inline-start: none;
-  --str-chat__blocked-message-border-inline-end: none;
-  --str-chat__blocked-message-box-shadow: none;
   --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1);
   /* Background color for pinned messages (Figma: background/core/highlight) */
   --str-chat__message-pinned-background-color: var(--background-core-highlight);
   /* The maximum allowed width of the message component */
-  --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 400);
+  --str-chat__message-max-width: 400px;
   /* The maximum allowed width of the message component, if it has attachments */
-  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 400);
+  --str-chat__message-with-attachment-max-width: 400px;
+}
+.str-chat .str-chat__message.str-chat__message--me {
+  --chat-bg: var(--chat-bg-outgoing);
+  --chat-bg-attachment: var(--chat-bg-attachment-outgoing);
+  --chat-text: var(--chat-text-outgoing);
+  --chat-border: var(--chat-border-outgoing);
+  --chat-border-on-chat: var(--chat-border-on-chat-outgoing);
+  --chat-reply-indicator: var(--chat-reply-indicator-outgoing);
+  --chat-poll-progress-track: var(--chat-poll-progress-track-outgoing);
+  --chat-poll-progress-fill: var(--chat-poll-progress-fill-outgoing);
+  --chat-thread-connector: var(--chat-thread-connector-outgoing);
+}
+.str-chat .str-chat__message.str-chat__message--other {
+  --chat-bg: var(--chat-bg-incoming);
+  --chat-bg-attachment: var(--chat-bg-attachment-incoming);
+  --chat-text: var(--chat-text-incoming);
+  --chat-border: var(--chat-border-incoming);
+  --chat-border-on-chat: var(--chat-border-on-chat-incoming);
+  --chat-reply-indicator: var(--chat-reply-indicator-incoming);
+  --chat-poll-progress-track: var(--chat-poll-progress-track-incoming);
+  --chat-poll-progress-fill: var(--chat-poll-progress-fill-incoming);
+  --chat-thread-connector: var(--chat-thread-connector-incoming);
 }
 
 /* Make spaces between message groups */
@@ -5336,6 +5562,11 @@ to create clearer separation from the base surface.
   --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
   padding-inline: var(--str-chat__message-composer-padding);
 }
+@media (max-width: 767px) {
+  .str-chat__message {
+    --str-chat-message-options-size: var(--str-chat__message-options-button-size);
+  }
+}
 .str-chat__message .str-chat__message-bubble {
   width: min(100%, var(--str-chat__message-max-width));
   max-width: var(--str-chat__message-max-width);
@@ -5398,7 +5629,7 @@ to create clearer separation from the base surface.
 
 .str-chat__message-mention {
   color: var(--str-chat__message-mention-color);
-  font: var(--str-chat__body-emphasis-text);
+  font: var(--str-chat__font-body-emphasis);
 }
 
 .str-chat__message {
@@ -5410,6 +5641,7 @@ to create clearer separation from the base surface.
   border-block-end: var(--str-chat__message-border-block-end);
   border-inline-start: var(--str-chat__message-border-inline-start);
   border-inline-end: var(--str-chat__message-border-inline-end);
+  color: var(--str-chat__message-color, var(--chat-text));
   display: grid;
   word-wrap: break-word;
   word-break: break-word;
@@ -5424,7 +5656,7 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: center;
   gap: var(--spacing-xxs);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
   color: var(--text-primary-text);
 }
 .str-chat__message .str-chat__message-pin-indicator .str-chat__message-pin-indicator__content .str-chat__message-pin-indicator__icon {
@@ -5553,6 +5785,8 @@ to create clearer separation from the base surface.
   border-block-end: var(--str-chat__message-bubble-border-block-end);
   border-inline-start: var(--str-chat__message-bubble-border-inline-start);
   border-inline-end: var(--str-chat__message-bubble-border-inline-end);
+  color: var(--str-chat__message-bubble-color, inherit);
+  background-color: var(--str-chat__message-bubble-background-color, var(--chat-bg));
   border-radius: var(--message-bubble-radius-group-bottom);
   overflow: hidden;
 }
@@ -5568,7 +5802,8 @@ to create clearer separation from the base surface.
 }
 .str-chat__message.str-chat__message--me .str-chat__message-bubble {
   justify-self: flex-end;
-  background-color: var(--str-chat__own-message-bubble-background-color);
+  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";
@@ -5590,7 +5825,7 @@ to create clearer separation from the base surface.
   color: var(--chat-text-timestamp);
 }
 .str-chat__message .str-chat__message-metadata * {
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__message .str-chat__message-metadata .str-chat__message-metadata__name {
   overflow-y: hidden;
@@ -5619,6 +5854,8 @@ to create clearer separation from the base surface.
   border-block-end: var(--str-chat__blocked-message-border-block-end);
   border-inline-start: var(--str-chat__blocked-message-border-inline-start);
   border-inline-end: var(--str-chat__blocked-message-border-inline-end);
+  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(--spacing-xs);
 }
 .str-chat__message .str-chat__message-error-indicator {
@@ -5640,7 +5877,7 @@ to create clearer separation from the base surface.
   display: block;
   position: absolute;
   top: 8px;
-  inset-inline-end: calc(-1 * calc(var(--str-chat__spacing-px) * 18) / 2);
+  inset-inline-end: calc(-1 * 18px / 2);
 }
 
 .str-chat__message--highlighted {
@@ -5773,7 +6010,7 @@ to create clearer separation from the base surface.
   border-block-end: var(--str-chat__message-also-sent-in-channel-border-block-end);
   border-inline-start: var(--str-chat__message-also-sent-in-channel-border-inline-start);
   border-inline-end: var(--str-chat__message-also-sent-in-channel-border-inline-end);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__message-also-sent-in-channel .str-chat__icon {
   height: var(--spacing-sm);
@@ -5788,7 +6025,7 @@ to create clearer separation from the base surface.
   border: none;
   padding: 0;
   cursor: pointer;
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
   color: var(--text-link);
 }
 
@@ -5824,7 +6061,7 @@ to create clearer separation from the base surface.
   border-radius: var(--radius-xl);
   border: 1px solid var(--border-core-subtle);
   background: var(--background-core-surface-subtle);
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 
 .str-chat {
@@ -5855,10 +6092,10 @@ to create clearer separation from the base surface.
 }
 .str-chat__message-translation-indicator,
 .str-chat__message-translation-indicator .str-chat__message-translation-indicator__translation-toggle {
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__message-translation-indicator .str-chat__message-translation-indicator__sign {
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__message-translation-indicator svg path {
   stroke-width: 1.5px;
@@ -5870,17 +6107,14 @@ to create clearer separation from the base surface.
   );
 }
 .str-chat .str-chat__message .str-chat__quoted-message-preview {
-  background-color: var(--chat-bg-attachment-incoming);
+  background-color: var(--chat-bg-attachment);
   width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--spacing-xs));
   max-width: 100%;
   min-width: 0;
 }
-.str-chat .str-chat__message--me .str-chat__quoted-message-preview {
-  background-color: var(--chat-bg-attachment-outgoing);
-}
 
 .str-chat {
-  --str-chat__message-saved-for-later-color: var(--str-chat__primary-color);
+  --str-chat__message-saved-for-later-color: var(--accent-primary);
   --str-chat__message-saved-for-later-background-color: transparent;
   --str-chat__message-saved-for-later-border-block-start: none;
   --str-chat__message-saved-for-later-border-block-end: none;
@@ -5914,7 +6148,7 @@ to create clearer separation from the base surface.
   border-block-end: var(--str-chat__message-saved-for-later-border-block-end);
   border-inline-start: var(--str-chat__message-saved-for-later-border-inline-start);
   border-inline-end: var(--str-chat__message-saved-for-later-border-inline-end);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__message-saved-for-later svg {
   width: var(--icon-size-xs);
@@ -5941,13 +6175,13 @@ to create clearer separation from the base surface.
   border-block-end: var(--str-chat__message-reminder-border-block-end);
   border-inline-start: var(--str-chat__message-reminder-border-inline-start);
   border-inline-end: var(--str-chat__message-reminder-border-inline-end);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__message-reminder svg path {
   stroke-width: 1.5px;
 }
 .str-chat__message-reminder .str-chat__message-reminder__time-left {
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 
 .str-chat__message-replies-count-button-wrapper {
@@ -5982,7 +6216,7 @@ to create clearer separation from the base surface.
   flex-direction: row;
   align-items: center;
   color: var(--text-link);
-  font: var(--str-chat__heading-xs-text);
+  font: var(--str-chat__font-heading-xs);
 }
 
 .str-chat__message.str-chat__message--me .str-chat__message-replies-count-button-wrapper {
@@ -5996,8 +6230,8 @@ to create clearer separation from the base surface.
 }
 .str-chat__message.str-chat__message--me .str-chat__message-replies-count-button-wrapper::after {
   border-end-end-radius: var(--radius-max);
-  border-inline-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-outgoing);
-  border-block-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-outgoing);
+  border-inline-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector);
+  border-block-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector);
   inset-inline-end: 0;
 }
 
@@ -6012,14 +6246,18 @@ to create clearer separation from the base surface.
 }
 .str-chat__message.str-chat__message--other .str-chat__message-replies-count-button-wrapper::after {
   border-end-start-radius: var(--radius-max);
-  border-inline-start: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-incoming);
-  border-block-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector-incoming);
+  border-inline-start: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector);
+  border-block-end: var(--replies-button-connector-stroke-width) solid var(--chat-thread-connector);
   inset-inline-start: 0;
 }
 
 .str-chat__message-actions-box {
   min-width: 180px;
 }
+.str-chat__message-actions-box.str-chat__message-actions-box--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
 
 .str-chat__message-options {
   grid-area: options;
@@ -6044,11 +6282,6 @@ to create clearer separation from the base surface.
   border-radius: var(--str-chat__message-options-border-radius);
   color: var(--str-chat__message-options-color);
 }
-.str-chat__message-options .str-chat__message-actions-box-button:hover,
-.str-chat__message-options .str-chat__message-reply-in-thread-button:hover,
-.str-chat__message-options .str-chat__message-reactions-button:hover {
-  background-color: var(--str-chat__message-options-hover-background-color);
-}
 .str-chat__message-options .str-chat__message-actions-box-button:active,
 .str-chat__message-options .str-chat__message-reply-in-thread-button:active,
 .str-chat__message-options .str-chat__message-reactions-button:active {
@@ -6058,6 +6291,19 @@ to create clearer separation from the base surface.
   position: relative;
 }
 
+.str-chat .str-chat__message-actions-list-item-button.str-chat__message-actions-list-item-button--react {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .str-chat .str-chat__message-options .str-chat__button.str-chat__message-reactions-button,
+  .str-chat .str-chat__message-options .str-chat__button.str-chat__message-reply-in-thread-button {
+    display: none;
+  }
+  .str-chat .str-chat__message-actions-list-item-button.str-chat__message-actions-list-item-button--react {
+    display: flex;
+  }
+}
 .str-chat__message-bounce-alert {
   max-width: 300px;
 }
@@ -6083,7 +6329,7 @@ to create clearer separation from the base surface.
   --str-chat__attachment-preview-close-icon-border-color: var(
     --control-remove-control-border
   );
-  --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color);
+  --str-chat__attachment-preview-retry-icon-color: var(--accent-primary);
   --str-chat__attachment-preview-download-icon-color: var(--text-secondary);
   --str-chat__attachment-preview-overlay-color: var(--background-core-overlay);
   --str-chat__attachment-preview-image-border-radius: var(
@@ -6417,7 +6663,7 @@ to create clearer separation from the base surface.
   color: var(--text-inverse);
   background-color: var(--background-core-inverse, var(--slate-900));
   text-transform: uppercase;
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__command-chip .str-chat__command-chip__close-button {
   background: none;
@@ -6480,7 +6726,7 @@ to create clearer separation from the base surface.
   background-color: var(--str-chat__dropzone-container-background-color);
   color: var(--str-chat__dropzone-container-color);
   backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
 }
 .str-chat__dropzone-container .str-chat__dropzone-container__content {
   display: flex;
@@ -6544,11 +6790,11 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
 }
 .str-chat__location-preview .str-chat__location-preview__data .str-chat__location-preview__data__title {
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__location-preview .str-chat__location-preview__data .str-chat__location-preview__data__subtitle,
 .str-chat__location-preview .str-chat__location-preview__data .str-chat__location-preview__data__sharing-duration {
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 
 .str-chat__link-preview-list {
@@ -6570,7 +6816,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs);
   padding-inline: var(--spacing-xs) var(--spacing-sm);
   padding-block: var(--spacing-xs);
-  background-color: var(--chat-bg-outgoing);
+  background-color: var(--chat-bg);
   border-radius: var(--message-bubble-radius-attachment);
 }
 .str-chat__link-preview-card .str-chat__tooltip {
@@ -6580,7 +6826,7 @@ to create clearer separation from the base surface.
   overflow-x: clip;
   text-overflow: ellipsis;
   display: block;
-  max-width: calc(var(--str-chat__spacing-px) * 250);
+  max-width: 250px;
   padding-inline: 0.5rem;
 }
 .str-chat__link-preview-card .str-chat__link-preview-card__content {
@@ -6597,11 +6843,11 @@ to create clearer separation from the base surface.
   text-overflow: ellipsis;
 }
 .str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-title {
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-description,
 .str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content__url {
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content__url {
   display: flex;
@@ -6891,7 +7137,7 @@ to create clearer separation from the base surface.
 }
 
 .str-chat__quoted-message-indicator {
-  background-color: var(--chat-reply-indicator-incoming);
+  background-color: var(--chat-reply-indicator, var(--chat-reply-indicator-incoming));
   border-radius: var(--radius-max);
   height: 100%;
   width: 2px;
@@ -7070,7 +7316,7 @@ to create clearer separation from the base surface.
   opacity: 1;
 }
 .str-chat__send-to-channel-checkbox__container .str-chat__send-to-channel-checkbox__field .str-chat__send-to-channel-checkbox__label {
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
   transition: color 0.15s ease, border-color 0.15s ease;
 }
 
@@ -7080,11 +7326,7 @@ to create clearer separation from the base surface.
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
   /* The text/icon color of file attachments */
-  --str-chat__unsupported-attachment-preview-color: var(--str-chat__text-color);
-  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
-  --str-chat__unsupported-attachment-preview-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
+  --str-chat__unsupported-attachment-preview-color: var(--text-primary);
   /* The background color of file attachments */
   --str-chat__unsupported-attachment-preview-background-color: transparent;
   /* Top border of file attachments */
@@ -7115,8 +7357,8 @@ to create clearer separation from the base surface.
   column-gap: var(--spacing-xs);
 }
 .str-chat__attachment-preview-unsupported .str-chat__icon {
-  height: calc(var(--str-chat__spacing-px) * 20);
-  width: calc(var(--str-chat__spacing-px) * 20);
+  height: var(--size-20);
+  width: var(--size-20);
 }
 .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-unsupported__metadata {
   min-width: 0;
@@ -7213,9 +7455,9 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__message-list-border-radius: 0;
   /* The text/icon color of the component */
-  --str-chat__message-list-color: var(--str-chat__text-color);
+  --str-chat__message-list-color: var(--text-primary);
   /* The background color of the component */
-  --str-chat__message-list-background-color: var(--str-chat__background-color);
+  --str-chat__message-list-background-color: var(--background-core-app);
   /* Box shadow applied to the component */
   --str-chat__message-list-box-shadow: none;
   /* Top border of the component */
@@ -7227,9 +7469,9 @@ to create clearer separation from the base surface.
   /* Right (left in RTL layout) border of the component */
   --str-chat__message-list-border-inline-end: none;
   /* The color used for displaying thread replies and thread separator at the start of a thread */
-  --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color);
+  --str-chat__thread-head-start-color: var(--text-tertiary);
   /* The color used for the separator below the first message in a thread */
-  --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color);
+  --str-chat__thread-head-start-border-block-end-color: var(--background-core-surface);
 }
 
 .str-chat__new-message-notification {
@@ -7248,7 +7490,7 @@ to create clearer separation from the base surface.
   padding: var(--spacing-xxs) var(--spacing-sm);
   background-color: var(--background-core-surface-subtle);
   border-radius: var(--radius-max);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
   color: var(--chat-text-system);
 }
 
@@ -7302,7 +7544,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs);
   border-radius: var(--button-radius-lg) 0 0 var(--button-radius-lg);
   padding: var(--button-padding-y-md) var(--spacing-xxs) var(--button-padding-y-md) var(--button-padding-x-with-label-md);
-  font: var(--str-chat__caption-emphasis-text);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat .str-chat__unread-messages-notification button:last-of-type {
   border-radius: 0 var(--button-radius-lg) var(--button-radius-lg) 0;
@@ -7331,7 +7573,7 @@ to create clearer separation from the base surface.
 .str-chat__unread-messages-separator-wrapper .str-chat__unread-messages-separator .str-chat__unread-messages-separator__text {
   padding-inline: var(--spacing-xs) var(--spacing-xxs);
   border-radius: var(--button-radius-lg) 0 0 var(--button-radius-lg);
-  font: var(--str-chat__caption-emphasis-text);
+  font: var(--str-chat__font-caption-emphasis);
   text-transform: lowercase;
 }
 .str-chat__unread-messages-separator-wrapper .str-chat__unread-messages-separator button.str-chat__button--secondary,
@@ -7347,9 +7589,9 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__virtual-list-border-radius: 0;
   /* The text/icon color of the component */
-  --str-chat__virtual-list-color: var(--str-chat__text-color);
+  --str-chat__virtual-list-color: var(--text-primary);
   /* The background color of the component */
-  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
+  --str-chat__virtual-list-background-color: var(--background-core-app);
   /* Box shadow applied to the component */
   --str-chat__virtual-list-box-shadow: none;
   /* Top border of the component */
@@ -7447,7 +7689,7 @@ to create clearer separation from the base surface.
 .str-chat__notification .str-chat__notification-content .str-chat__notification-message {
   flex: 1 1 auto;
   padding-block: var(--spacing-xxxs);
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
   text-align: center;
   white-space: nowrap;
 }
@@ -7616,6 +7858,10 @@ to create clearer separation from the base surface.
   max-width: 300px;
 }
 
+.str-chat__form__input-fieldset .str-chat__form__input-field .str-chat__form__input-field__value .str-chat__form__remove-option-button {
+  color: var(--input-text-icon);
+}
+
 .str-chat .str-chat__poll {
   display: flex;
   flex-direction: column;
@@ -7624,9 +7870,7 @@ to create clearer separation from the base surface.
   width: calc(var(--str-chat__message-with-attachment-max-width) - 2 * var(--spacing-xs));
   max-width: 100%;
   min-width: 260px;
-  font-size: var(--typography-font-size-sm);
-  font-weight: var(--typography-font-weight-regular);
-  line-height: var(--typography-line-height-tight);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat .str-chat__poll button {
   background: none;
@@ -7635,9 +7879,7 @@ to create clearer separation from the base surface.
   cursor: pointer;
 }
 .str-chat .str-chat__poll .str-chat__poll-header .str-chat__poll-title {
-  font-size: var(--typography-font-size-md);
-  font-weight: var(--typography-font-weight-semi-bold);
-  line-height: var(--typography-line-height-normal);
+  font: var(--str-chat__font-body-emphasis);
 }
 .str-chat .str-chat__poll .str-chat__poll-actions {
   display: flex;
@@ -7645,26 +7887,13 @@ to create clearer separation from the base surface.
   align-items: center;
   gap: var(--spacing-xs);
 }
-.str-chat .str-chat__button.str-chat__poll-action {
+.str-chat .str-chat__poll .str-chat__poll-actions .str-chat__button.str-chat__poll-action {
   width: 100%;
-  color: var(--str-chat__primary-color);
-  border: 1px solid var(--chat-border-on-chat-incoming);
-  font-size: var(--typography-font-size-sm);
+  border: 1px solid var(--chat-border-on-chat);
   padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm);
+  font: var(--str-chat__font-body-emphasis);
 }
-.str-chat .str-chat__button.str-chat__poll-action.str-chat__poll-action--additional {
-  border: none;
-}
-.str-chat .str-chat__message--me .str-chat__poll .str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option__votes-bar {
-  background: linear-gradient(to right, var(--chat-poll-progress-fill-outgoing) var(--str-chat__amount-bar-fulfillment), var(--chat-poll-progress-track-outgoing) var(--str-chat__amount-bar-fulfillment));
-}
-.str-chat .str-chat__message--me .str-chat__poll .str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option__votes-bar--winner {
-  background: linear-gradient(to right, var(--chat-poll-progress-fill-outgoing) var(--str-chat__amount-bar-fulfillment), var(--chat-poll-progress-track-outgoing) var(--str-chat__amount-bar-fulfillment));
-}
-.str-chat .str-chat__message--me .str-chat__poll .str-chat__poll-actions .str-chat__poll-action {
-  border: 1px solid var(--chat-border-on-chat-outgoing);
-}
-.str-chat .str-chat__message--me .str-chat__poll .str-chat__poll-actions .str-chat__poll-action.str-chat__poll-action--additional {
+.str-chat .str-chat__poll .str-chat__poll-actions .str-chat__button.str-chat__poll-action.str-chat__poll-action--additional {
   border: none;
 }
 
@@ -7712,7 +7941,7 @@ to create clearer separation from the base surface.
   margin: 0;
 }
 .str-chat__modal__poll-answer-list .str-chat__poll-answer-list .str-chat__poll-answer .str-chat__poll-answer__data .str-chat__poll-answer__text {
-  font: var(--str-chat__body-default-text);
+  font: var(--str-chat__font-body-default);
 }
 .str-chat__modal__poll-answer-list .str-chat__poll-answer-list .str-chat__poll-answer .str-chat__poll-answer__data .str-chat__poll-vote {
   padding-inline: var(--spacing-none);
@@ -7788,7 +8017,7 @@ to create clearer separation from the base surface.
   background-color: var(--background-core-surface-card);
 }
 .str-chat__modal__poll-option-list .str-chat__modal__poll-option-list__body .str-chat__poll-option-list--full .str-chat__poll-option {
-  padding: var(--spacing-sm) var(--spacing-xs);
+  padding: var(--spacing-xs);
   border-radius: var(--radius-lg);
 }
 .str-chat__modal__poll-option-list .str-chat__modal__poll-option-list__body .str-chat__poll-option-list--full .str-chat__poll-option--votable:hover {
@@ -7822,16 +8051,16 @@ to create clearer separation from the base surface.
   grid-row: span 2;
   height: var(--str-chat__poll-checkmark-size);
   width: var(--str-chat__poll-checkmark-size);
-  border-radius: var(--str-chat__border-radius-circle);
-  border: 1px solid var(--str-chat__disabled-color);
+  border-radius: var(--radius-max);
+  border: 1px solid var(--chat-border-on-chat);
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__checkmark--checked {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 11px 10px;
-  background-color: var(--str-chat__primary-color);
-  border-color: var(--str-chat__primary-color);
+  background-color: var(--control-radio-check-bg-selected);
+  border: none;
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data {
   flex: 1;
@@ -7858,19 +8087,19 @@ to create clearer separation from the base surface.
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-votes .str-chat__poll-option-vote-count {
   text-align: right;
-  font: var(--str-chat__metadata-default-text);
-  font-variant-numeric: tabular-nums;
+  font: var(--str-chat__font-metadata-default);
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar {
   grid-column: 2/3;
   grid-row: 2/3;
   height: 8px;
   width: 100%;
-  background: linear-gradient(to right, var(--chat-poll-progress-fill-incoming) var(--str-chat__amount-bar-fulfillment), var(--chat-poll-progress-track-incoming) var(--str-chat__amount-bar-fulfillment));
-  border-radius: calc(var(--str-chat__spacing-px) * 4);
+  background: linear-gradient(to right, var(--chat-poll-progress-fill) var(--str-chat__amount-bar-fulfillment), var(--chat-poll-progress-track) var(--str-chat__amount-bar-fulfillment));
+  border-radius: var(--size-4);
 }
-.str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar--winner {
-  background: linear-gradient(to right, var(--chat-poll-progress-fill-incoming) var(--str-chat__amount-bar-fulfillment), var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment));
+
+.str-chat__message--me .str-chat__poll-option-list .str-chat__checkmark {
+  border: 1px solid var(--chat-border-on-chat-outgoing);
 }
 
 .str-chat__modal__poll-question {
@@ -7884,11 +8113,11 @@ to create clearer separation from the base surface.
   background: var(--background-core-surface-card);
 }
 .str-chat__modal__poll-question .str-chat__modal__poll-question__label {
-  font: var(--str-chat__heading-xs-text);
+  font: var(--str-chat__font-heading-xs);
   color: var(--text-tertiary);
 }
 .str-chat__modal__poll-question .str-chat__modal__poll-question__text {
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
   color: var(--text-primary);
 }
 
@@ -7933,7 +8162,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option .str-chat__poll-option__header .str-chat__poll-option__header__label,
 .str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option .str-chat__poll-option__header .str-chat__poll-option__header__label {
-  font: var(--str-chat__heading-xs-text);
+  font: var(--str-chat__font-heading-xs);
   color: var(--text-tertiary);
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option .str-chat__poll-option__header .str-chat__poll-option__header__title,
@@ -7942,7 +8171,7 @@ to create clearer separation from the base surface.
   align-items: start;
   gap: var(--spacing-md);
   width: 100%;
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
   color: var(--text-primary);
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option .str-chat__poll-option__header .str-chat__poll-option__header__title .str-chat__poll-option__option-text,
@@ -7991,13 +8220,13 @@ to create clearer separation from the base surface.
 .str-chat__modal__poll-results .str-chat__modal__poll-results__options__footer .str-chat__modal__poll-results__options-total-count {
   width: 100%;
   text-align: center;
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__modal__poll-results .str-chat__poll-result-option-vote-counter {
   display: flex;
   gap: var(--spacing-xs);
   align-items: center;
-  font: var(--str-chat__caption-emphasis-text);
+  font: var(--str-chat__font-caption-emphasis);
 }
 .str-chat__modal__poll-results.str-chat__modal__poll-results--option-detail .str-chat__infinite-scroll-paginator {
   flex: 1;
@@ -8024,7 +8253,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-none, 0);
   align-self: stretch;
   width: 100%;
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 .str-chat__poll-vote .str-chat__poll-vote__author {
   flex: 1;
@@ -8049,7 +8278,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs);
   border-radius: var(--radius-4xl, 32px);
   background: var(--background-core-elevation-2, #fff);
-  box-shadow: var(--light-elevation-3);
+  box-shadow: var(--str-chat__box-shadow-3);
 }
 .str-chat__reaction-selector:has(.str-chat__reaction-selector-extended-list) {
   padding: 0;
@@ -8235,7 +8464,7 @@ 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-count {
   display: flex;
   align-items: center;
-  font: var(--str-chat__numeric-md-text);
+  font: var(--str-chat__font-numeric-md);
 }
 .str-chat__message-reactions--bottom .str-chat__message-reactions__list-button,
 .str-chat__message-reactions--bottom .str-chat__message-reactions__list-item-button {
@@ -8286,7 +8515,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__message-reactions-detail {
   font-family: var(--typography-font-family-sans);
-  box-shadow: var(--light-elevation-3);
+  box-shadow: var(--str-chat__box-shadow-3);
   padding-block-start: var(--spacing-xxs);
   display: flex;
   flex-direction: column;
@@ -8378,7 +8607,7 @@ 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-count {
   color: var(--reaction-text);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list-container {
   position: relative;
@@ -8480,7 +8709,7 @@ to create clearer separation from the base surface.
   border: unset;
   border-radius: var(--radius-max);
   color: var(--text-tertiary);
-  font: var(--str-chat__metadata-default-text);
+  font: var(--str-chat__font-metadata-default);
   cursor: pointer;
   align-self: flex-start;
 }
@@ -8578,7 +8807,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__heading-xs-text);
+  font: var(--str-chat__font-heading-xs);
   color: var(--text-primary);
   flex: 1;
   min-width: 0;
@@ -8684,21 +8913,21 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__thread-border-radius: 0;
   /* The text/icon color of the component */
-  --str-chat__thread-color: var(--str-chat__text-color);
+  --str-chat__thread-color: var(--text-primary);
   /* The background color of the component */
-  --str-chat__thread-background-color: var(--str-chat__secondary-background-color);
+  --str-chat__thread-background-color: none;
   /* Top border of the component */
   --str-chat__thread-border-block-start: none;
   /* Bottom border of the component */
   --str-chat__thread-border-block-end: none;
   /* Left (right in RTL layout) border of the component */
-  --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color);
+  --str-chat__thread-border-inline-start: 1px solid var(--border-core-default);
   /* Right (left in RTL layout) border of the component */
   --str-chat__thread-border-inline-end: none;
   /* Box shadow applied to the component */
   --str-chat__thread-box-shadow: none;
   /* The text/icon color used to display less emphasized text in the channel header */
-  --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color);
+  --str-chat__thread-header-info-color: var(--text-secondary);
 }
 
 .str-chat__thread-container {
@@ -8737,14 +8966,14 @@ to create clearer separation from the base surface.
   border-bottom: 1px solid var(--border-core-subtle);
   background: var(--background-core-surface-subtle);
   color: var(--chat-text-system);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 
 .str-chat {
   /* The border radius used for the borders of the thread header */
   --str-chat__thread-header-border-radius: 0;
   /* The text/icon color of the thread header */
-  --str-chat__thread-header-color: var(--str-chat__text-color);
+  --str-chat__thread-header-color: var(--text-primary);
   /* The background color of the thread header */
   --str-chat__thread-header-background-color: var(--background-core-elevation-1);
   /* Top border of the thread header */
@@ -8777,10 +9006,10 @@ to create clearer separation from the base surface.
   border-inline-end: var(--str-chat__thread-header-border-inline-end);
 }
 .str-chat__thread-header .str-chat__thread-header-title {
-  font: var(--str-chat__heading-sm-text);
+  font: var(--str-chat__font-heading-sm);
 }
 .str-chat__thread-header .str-chat__thread-header-subtitle {
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__thread-header-info-color);
 }
 .str-chat__thread-header .str-chat__thread-header-details {
@@ -8817,8 +9046,8 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
-  width: calc(var(--str-chat__spacing-px) * 40);
-  height: calc(var(--str-chat__spacing-px) * 40);
+  width: var(--size-40);
+  height: var(--size-40);
   cursor: pointer;
   background-color: transparent;
   border: none;
@@ -8836,8 +9065,8 @@ to create clearer separation from the base surface.
 
 /* Only available in React SDK. */
 .str-chat {
-  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
-  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
+  --str-chat-unread-count-badge-color: var(--badge-text-on-accent);
+  --str-chat-unread-count-badge-background-color: var(--accent-error);
 }
 
 .str-chat__unread-count-badge {
@@ -8869,7 +9098,6 @@ to create clearer separation from the base surface.
   display: flex;
   align-items: center;
   justify-content: center;
-  font-variant-numeric: tabular-nums;
 }
 .str-chat__unread-count-badge--top-right {
   position: absolute;
@@ -8890,12 +9118,12 @@ to create clearer separation from the base surface.
 
 .str-chat {
   --str-chat__thread-list-border-radius: 0;
-  --str-chat__thread-list-color: var(--str-chat__text-color);
-  --str-chat__thread-list-background-color: var(--str-chat__secondary-background-color);
+  --str-chat__thread-list-color: var(--text-primary);
+  --str-chat__thread-list-background-color: var(--background-core-elevation-1);
   --str-chat__thread-list-border-block-start: none;
   --str-chat__thread-list-border-block-end: none;
   --str-chat__thread-list-border-inline-start: none;
-  --str-chat__thread-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+  --str-chat__thread-list-border-inline-end: 1px solid var(--border-core-default);
   --str-chat__thread-list-box-shadow: none;
   --str-chat__thread-list-transition-duration: var(
     --str-chat__channel-list-transition-duration,
@@ -8963,7 +9191,7 @@ to create clearer separation from the base surface.
   background: unset;
   border: unset;
   border-radius: var(--radius-max);
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
   cursor: pointer;
   display: flex;
   color: var(--text-secondary);
@@ -9032,7 +9260,7 @@ to create clearer separation from the base surface.
 }
 .str-chat__thread-list__header .str-chat__thread-list__header__title {
   flex: 1;
-  font: var(--str-chat__heading-lg-text);
+  font: var(--str-chat__font-heading-lg);
   color: var(--text-primary);
 }
 
@@ -9144,9 +9372,9 @@ to create clearer separation from the base surface.
   /* The border radius used for the borders of the component */
   --str-chat__tooltip-border-radius: var(--radius-md);
   /* The text/icon color of the component */
-  --str-chat__tooltip-color: var(--str-chat__text-color);
+  --str-chat__tooltip-color: var(--text-on-accent);
   /* The background color of the component */
-  --str-chat__tooltip-background-color: var(--background-core-elevation-2);
+  --str-chat__tooltip-background-color: var(--background-core-inverse);
   /* Top border of the component */
   --str-chat__tooltip-border-block-start: none;
   /* Bottom border of the component */
@@ -9156,7 +9384,10 @@ to create clearer separation from the base surface.
   /* Right (left in RTL layout) border of the component */
   --str-chat__tooltip-border-inline-end: none;
   /* Box shadow applied to the component */
-  --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color);
+  --str-chat__tooltip-box-shadow: var(--str-chat__box-shadow-3);
+}
+.str-chat.str-chat__theme-dark {
+  --str-chat__tooltip-background-color: var(--background-core-elevation-2);
 }
 
 .str-chat__tooltip {
@@ -9170,11 +9401,12 @@ to create clearer separation from the base surface.
   border-inline-end: var(--str-chat__tooltip-border-inline-end);
   overflow-y: hidden;
   display: flex;
-  padding: var(--space-8);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
   z-index: 1;
-  max-width: calc(var(--str-chat__spacing-px) * 150);
+  max-width: 150px;
   width: max-content;
-  font: var(--str-chat__metadata-emphasis-text);
+  font: var(--str-chat__font-metadata-emphasis);
 }
 .str-chat__tooltip::after {
   background-color: var(--str-chat__tooltip-background-color);
@@ -9217,9 +9449,8 @@ to create clearer separation from the base surface.
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
   border-radius: var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-group-bottom) var(--message-bubble-radius-tail);
-  background: var(--chat-bg-incoming);
-  border: 1px solid var(--chat-bg-incoming);
-  background: var(--chat-bg-incoming, #ebeef1);
+  border: 1px solid var(--chat-bg);
+  background: var(--chat-bg);
 }
 
 .str-chat__typing-indicator__dots {
@@ -9266,7 +9497,7 @@ to create clearer separation from the base surface.
   gap: var(--spacing-xs, 4px);
   white-space: nowrap;
   color: var(--text-secondary);
-  font: var(--str-chat__caption-default-text);
+  font: var(--str-chat__font-caption-default);
 }
 
 .str-chat__typing-indicator-header__dots {