stream-chat-react/dist/css/index.css

React components to create chat conversations or livestream style chat

@charset "UTF-8";
@media (prefers-reduced-motion: reduce) {
  .str-chat,
  .str-chat *,
  .str-chat *::before,
  .str-chat *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .str-chat__attachment-selector__menu-button__icon {
    transform: none;
  }
}
.str-chat__prepare-rotate45 {
  transition: transform 200ms ease;
  transform: rotate(0);
  transform-origin: center center;
}

.str-chat__rotate45 {
  transform: rotate(45deg);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
/**
 * Do not edit directly, this file was auto-generated.
 */
.str-chat,
.str-chat__theme-dark .str-chat__theme-inverse {
  --str-chat__base-transparent-0: rgba(255, 255, 255, 0);
  --str-chat__base-transparent-white-10: rgba(255, 255, 255, 0.1);
  --str-chat__base-transparent-white-20: rgba(255, 255, 255, 0.2);
  --str-chat__base-transparent-white-30: rgba(255, 255, 255, 0.3);
  --str-chat__base-transparent-white-70: rgba(255, 255, 255, 0.7);
  --str-chat__base-transparent-black-5: rgba(
    0,
    0,
    0,
    0.05
  ); /** Used for bg in closeButton */
  --str-chat__base-transparent-black-10: rgba(
    0,
    0,
    0,
    0.1
  ); /** Used for bg in closeButton */
  --str-chat__base-transparent-black-70: rgba(
    0,
    0,
    0,
    0.7
  ); /** Used for bg in closeButton */
  --str-chat__base-black: #000000;
  --str-chat__base-white: #ffffff;
  --str-chat__slate-50: #f6f8fa;
  --str-chat__slate-100: #ebeef1;
  --str-chat__slate-150: #d5dbe1;
  --str-chat__slate-200: #c0c8d2;
  --str-chat__slate-300: #a3acba;
  --str-chat__slate-400: #87909f;
  --str-chat__slate-500: #687385;
  --str-chat__slate-600: #545969;
  --str-chat__slate-700: #414552;
  --str-chat__slate-800: #30313d;
  --str-chat__slate-900: #1a1b25;
  --str-chat__neutral-50: #f8f8f8;
  --str-chat__neutral-100: #efefef;
  --str-chat__neutral-150: #d8d8d8;
  --str-chat__neutral-200: #c4c4c4;
  --str-chat__neutral-300: #ababab;
  --str-chat__neutral-400: #8f8f8f;
  --str-chat__neutral-500: #6a6a6a;
  --str-chat__neutral-600: #565656;
  --str-chat__neutral-700: #464646;
  --str-chat__neutral-800: #323232;
  --str-chat__neutral-900: #1c1c1c;
  --str-chat__blue-50: #f3f7ff;
  --str-chat__blue-100: #e3edff;
  --str-chat__blue-150: #c3d9ff;
  --str-chat__blue-200: #a5c5ff;
  --str-chat__blue-300: #78a8ff;
  --str-chat__blue-400: #4586ff;
  --str-chat__blue-500: #005fff;
  --str-chat__blue-600: #1b53bd;
  --str-chat__blue-700: #19418d;
  --str-chat__blue-800: #142f63;
  --str-chat__blue-900: #091a3b;
  --str-chat__cyan-50: #f1fbfc;
  --str-chat__cyan-100: #d1f3f6;
  --str-chat__cyan-150: #a9e4ea;
  --str-chat__cyan-200: #72d7e0;
  --str-chat__cyan-300: #45bcc7;
  --str-chat__cyan-400: #1e9ea9;
  --str-chat__cyan-500: #248088;
  --str-chat__cyan-600: #006970;
  --str-chat__cyan-700: #065056;
  --str-chat__cyan-800: #003a3f;
  --str-chat__cyan-900: #002124;
  --str-chat__green-50: #e1ffee;
  --str-chat__green-100: #bdfcdb;
  --str-chat__green-150: #8febbd;
  --str-chat__green-200: #59dea3;
  --str-chat__green-300: #00c384;
  --str-chat__green-400: #00a46e;
  --str-chat__green-500: #277e59;
  --str-chat__green-600: #006643;
  --str-chat__green-700: #004f33;
  --str-chat__green-800: #003a25;
  --str-chat__green-900: #002213;
  --str-chat__purple-50: #f7f8ff;
  --str-chat__purple-100: #ecedff;
  --str-chat__purple-150: #d4d7ff;
  --str-chat__purple-200: #c1c5ff;
  --str-chat__purple-300: #a1a3ff;
  --str-chat__purple-400: #8482fc;
  --str-chat__purple-500: #644af9;
  --str-chat__purple-600: #553bd8;
  --str-chat__purple-700: #4032a1;
  --str-chat__purple-800: #2e2576;
  --str-chat__purple-900: #1a114d;
  --str-chat__yellow-50: #fef9da;
  --str-chat__yellow-100: #fcedb9;
  --str-chat__yellow-150: #fcd579;
  --str-chat__yellow-200: #f6bf57;
  --str-chat__yellow-300: #fa922b;
  --str-chat__yellow-400: #f26d10;
  --str-chat__yellow-500: #c84801;
  --str-chat__yellow-600: #a82c00;
  --str-chat__yellow-700: #842106;
  --str-chat__yellow-800: #5f1a05;
  --str-chat__yellow-900: #331302;
  --str-chat__red-50: #fff5fa;
  --str-chat__red-100: #ffe7f2;
  --str-chat__red-150: #ffccdf;
  --str-chat__red-200: #ffb1cd;
  --str-chat__red-300: #fe87a1;
  --str-chat__red-400: #fc526a;
  --str-chat__red-500: #d90d10;
  --str-chat__red-600: #b3093c;
  --str-chat__red-700: #890d37;
  --str-chat__red-800: #68052b;
  --str-chat__red-900: #3e021a;
  --str-chat__violet-50: #fef4ff;
  --str-chat__violet-100: #fbe8fe;
  --str-chat__violet-150: #f7cffc;
  --str-chat__violet-200: #eeb5f4;
  --str-chat__violet-300: #e68bec;
  --str-chat__violet-400: #d75fe7;
  --str-chat__violet-500: #b716ca;
  --str-chat__violet-600: #9d00ae;
  --str-chat__violet-700: #7c0089;
  --str-chat__violet-800: #5c0066;
  --str-chat__violet-900: #36003d;
  --str-chat__lime-50: #f1fde8;
  --str-chat__lime-100: #d4ffb0;
  --str-chat__lime-150: #b1ee79;
  --str-chat__lime-200: #9cda5d;
  --str-chat__lime-300: #78c100;
  --str-chat__lime-400: #639e11;
  --str-chat__lime-500: #4b7a0a;
  --str-chat__lime-600: #3e6213;
  --str-chat__lime-700: #355315;
  --str-chat__lime-800: #203a00;
  --str-chat__lime-900: #112100;
  --str-chat__size-2: 2px;
  --str-chat__size-4: 4px;
  --str-chat__size-6: 6px;
  --str-chat__size-8: 8px;
  --str-chat__size-12: 12px;
  --str-chat__size-16: 16px;
  --str-chat__size-20: 20px;
  --str-chat__size-24: 24px;
  --str-chat__size-32: 32px;
  --str-chat__size-40: 40px;
  --str-chat__size-48: 48px;
  --str-chat__size-64: 64px;
  --str-chat__size-28: 28px;
  --str-chat__size-80: 80px;
  --str-chat__size-128: 128px;
  --str-chat__size-240: 240px;
  --str-chat__size-320: 320px;
  --str-chat__size-480: 480px;
  --str-chat__size-560: 560px;
  --str-chat__size-640: 640px;
  --str-chat__size-760: 760px;
  --str-chat__size-144: 144px;
  --str-chat__size-208: 208px;
  --str-chat__size-56: 56px;
  --str-chat__radius-0: 0px;
  --str-chat__radius-2: 2px;
  --str-chat__radius-4: 4px;
  --str-chat__radius-6: 6px;
  --str-chat__radius-8: 8px;
  --str-chat__radius-12: 12px;
  --str-chat__radius-16: 16px;
  --str-chat__radius-20: 20px;
  --str-chat__radius-24: 24px;
  --str-chat__radius-32: 32px;
  --str-chat__radius-full: 9999px;
  --str-chat__space-0: 0px;
  --str-chat__space-2: 2px;
  --str-chat__space-4: 4px;
  --str-chat__space-8: 8px;
  --str-chat__space-12: 12px;
  --str-chat__space-16: 16px;
  --str-chat__space-20: 20px;
  --str-chat__space-24: 24px;
  --str-chat__space-32: 32px;
  --str-chat__space-40: 40px;
  --str-chat__space-48: 48px;
  --str-chat__space-64: 64px;
  --str-chat__space-80: 80px;
  --str-chat__w100: 1px;
  --str-chat__w150: 1.5px;
  --str-chat__w200: 2px;
  --str-chat__w300: 3px;
  --str-chat__w400: 4px;
  --str-chat__w120: 1.2px;
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__font-weight-w400: 400;
  --str-chat__font-weight-w500: 500;
  --str-chat__font-weight-w600: 600;
  --str-chat__font-weight-w700: 700;
  --str-chat__font-size-size-8: 8px;
  --str-chat__font-size-size-10: 10px;
  --str-chat__font-size-size-11: 11px;
  --str-chat__font-size-size-12: 12px;
  --str-chat__font-size-size-13: 13px;
  --str-chat__font-size-size-14: 14px;
  --str-chat__font-size-size-16: 16px;
  --str-chat__font-size-size-15: 15px;
  --str-chat__font-size-size-17: 17px;
  --str-chat__font-size-size-18: 18px;
  --str-chat__font-size-size-20: 20px;
  --str-chat__font-size-size-22: 22px;
  --str-chat__font-size-size-24: 24px;
  --str-chat__font-size-size-28: 28px;
  --str-chat__font-size-size-32: 32px;
  --str-chat__font-size-size-40: 40px;
  --str-chat__font-size-size-48: 48px;
  --str-chat__font-size-size-64: 64px;
  --str-chat__line-height-line-height-8: 8px;
  --str-chat__line-height-line-height-10: 10px;
  --str-chat__line-height-line-height-12: 12px;
  --str-chat__line-height-line-height-13: 13px;
  --str-chat__line-height-line-height-14: 14px;
  --str-chat__line-height-line-height-15: 15px;
  --str-chat__line-height-line-height-16: 16px;
  --str-chat__line-height-line-height-17: 17px;
  --str-chat__line-height-line-height-18: 18px;
  --str-chat__line-height-line-height-20: 20px;
  --str-chat__line-height-line-height-24: 24px;
  --str-chat__line-height-line-height-28: 28px;
  --str-chat__line-height-line-height-32: 32px;
  --str-chat__line-height-line-height-40: 40px;
  --str-chat__line-height-line-height-48: 48px;
  --str-chat__typography-font-weight-regular: 400;
  --str-chat__typography-font-weight-medium: 500;
  --str-chat__typography-font-weight-semi-bold: 600;
  --str-chat__typography-font-weight-bold: 700;
  --str-chat__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. */
  --str-chat__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);
  --str-chat__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);
  --str-chat__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);
  --str-chat__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);
  --str-chat__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);
  --str-chat__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);
  --str-chat__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);
  --str-chat__button-padding-y-lg: 14px;
  --str-chat__button-padding-y-md: 10px;
  --str-chat__button-padding-y-sm: 6px;
  --str-chat__button-padding-y-xs: 4px;
  --str-chat__button-padding-x-icon-only-lg: 14px;
  --str-chat__button-padding-x-icon-only-md: 10px;
  --str-chat__button-padding-x-icon-only-sm: 6px;
  --str-chat__button-padding-x-icon-only-xs: 4px;
  --str-chat__button-padding-x-with-label-lg: 16px;
  --str-chat__button-padding-x-with-label-md: 16px;
  --str-chat__button-padding-x-with-label-sm: 16px;
  --str-chat__button-padding-x-with-label-xs: 12px;
  --str-chat__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. */
  --str-chat__background-core-overlay-dark: rgba(
    26,
    27,
    37,
    0.25
  ); /** A dark semi-transparent layer. Used for image overlays. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__border-utility-hover: rgba(
    26,
    27,
    37,
    0.1
  ); /** Applied on pointer hover over bordered interactive elements. */
  --str-chat__border-utility-pressed: rgba(
    26,
    27,
    37,
    0.2
  ); /** Applied during an active press on bordered interactive elements. */
  --str-chat__border-utility-selected: rgba(
    26,
    27,
    37,
    0.15
  ); /** Border for selected or active items. Used for highlighted list items and active controls. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__system-bg-blur: rgba(255, 255, 255, 0.01);
  --str-chat__system-scrollbar: rgba(0, 0, 0, 0.5);
  --str-chat__badge-bg-overlay: rgba(0, 0, 0, 0.75);
  --str-chat__control-play-button-bg: rgba(0, 0, 0, 0.75);
  --str-chat__typography-font-family-sans: var(--str-chat__font-family-geist);
  --str-chat__typography-font-family-mono: var(--str-chat__font-family-geist-mono);
  --str-chat__typography-font-size-xxs: var(
    --str-chat__font-size-size-10
  ); /** Micro text such as timestamps or subtle metadata. */
  --str-chat__typography-font-size-xs: var(
    --str-chat__font-size-size-12
  ); /** Compact secondary text, small UI labels. */
  --str-chat__typography-font-size-sm: var(
    --str-chat__font-size-size-14
  ); /** Default mobile body size, small controls. */
  --str-chat__typography-font-size-md: var(
    --str-chat__font-size-size-16
  ); /** Default desktop body size, main text. */
  --str-chat__typography-font-size-lg: var(
    --str-chat__font-size-size-18
  ); /** Medium emphasis, section labels. */
  --str-chat__typography-font-size-xl: var(
    --str-chat__font-size-size-20
  ); /** Small headings. */
  --str-chat__typography-font-size-2xl: var(
    --str-chat__font-size-size-24
  ); /** Section titles, important headings. */
  --str-chat__typography-font-size-micro: var(
    --str-chat__font-size-size-8
  ); /** Micro text such as timestamps or subtle metadata. */
  --str-chat__typography-line-height-tight: var(
    --str-chat__line-height-line-height-16
  ); /** Compact text, headers, UI labels. */
  --str-chat__typography-line-height-normal: var(
    --str-chat__line-height-line-height-20
  ); /** Default reading line-height for sizes 14–16px. */
  --str-chat__typography-line-height-relaxed: var(
    --str-chat__line-height-line-height-24
  ); /** For larger text sizes or multiline descriptions. */
  --str-chat__radius-none: var(--str-chat__radius-0);
  --str-chat__radius-xxs: var(--str-chat__radius-2);
  --str-chat__radius-xs: var(--str-chat__radius-4);
  --str-chat__radius-sm: var(--str-chat__radius-6);
  --str-chat__radius-md: var(--str-chat__radius-8);
  --str-chat__radius-lg: var(--str-chat__radius-12);
  --str-chat__radius-xl: var(--str-chat__radius-16);
  --str-chat__radius-2xl: var(--str-chat__radius-20);
  --str-chat__radius-max: var(--str-chat__radius-full);
  --str-chat__radius-3xl: var(--str-chat__radius-24);
  --str-chat__radius-4xl: var(--str-chat__radius-32);
  --str-chat__spacing-none: var(
    --str-chat__space-0
  ); /** No spacing. Used for tight component joins. */
  --str-chat__spacing-xxs: var(
    --str-chat__space-4
  ); /** Base unit. Minimal padding, tight gaps. */
  --str-chat__spacing-xs: var(
    --str-chat__space-8
  ); /** Small padding and default vertical gaps. */
  --str-chat__spacing-sm: var(
    --str-chat__space-12
  ); /** Common internal spacing in inputs and buttons. */
  --str-chat__spacing-md: var(
    --str-chat__space-16
  ); /** Default large padding for sections and cards. */
  --str-chat__spacing-xl: var(
    --str-chat__space-24
  ); /** Comfortable spacing for chat bubbles and list items. */
  --str-chat__spacing-2xl: var(
    --str-chat__space-32
  ); /** Larger spacing for panels, modals, and gutters. */
  --str-chat__spacing-3xl: var(
    --str-chat__space-40
  ); /** Used for wide layout spacing and breathing room. */
  --str-chat__spacing-lg: var(
    --str-chat__space-20
  ); /** Medium spacing for grouping elements and section breaks. */
  --str-chat__spacing-xxxs: var(--str-chat__space-2);
  --str-chat__device-safe-area-bottom: var(--str-chat__space-0);
  --str-chat__device-safe-area-top: var(--str-chat__space-0);
  --str-chat__button-radius-lg: var(--str-chat__radius-full);
  --str-chat__button-radius-md: var(--str-chat__radius-full);
  --str-chat__button-radius-sm: var(--str-chat__radius-full);
  --str-chat__button-radius-full: var(--str-chat__radius-full);
  --str-chat__button-visual-height-sm: var(--str-chat__size-32);
  --str-chat__button-visual-height-md: var(--str-chat__size-40);
  --str-chat__button-visual-height-lg: var(--str-chat__size-48);
  --str-chat__button-visual-height-xs: var(--str-chat__size-24);
  /**
   * 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.
   */
  --str-chat__button-hit-target-min-height: var(--str-chat__size-48);
  /**
   * 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.
   */
  --str-chat__button-hit-target-min-width: var(--str-chat__size-48);
  --str-chat__button-primary-bg-liquid-glass: var(--str-chat__base-transparent-0);
  --str-chat__icon-size-xs: var(--str-chat__size-12);
  --str-chat__icon-size-sm: var(--str-chat__size-16);
  --str-chat__icon-size-md: var(--str-chat__size-20);
  --str-chat__icon-size-lg: var(--str-chat__size-32);
  --str-chat__icon-stroke-subtle: var(--str-chat__w120);
  --str-chat__icon-stroke-default: var(--str-chat__w150);
  --str-chat__icon-stroke-emphasis: var(--str-chat__w200);
  --str-chat__emoji-md: var(--str-chat__font-size-size-24);
  --str-chat__emoji-lg: var(--str-chat__font-size-size-32);
  --str-chat__emoji-xl: var(--str-chat__font-size-size-48);
  --str-chat__emoji-2xl: var(--str-chat__font-size-size-64);
  --str-chat__background-core-highlight: var(
    --str-chat__yellow-50
  ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */
  --str-chat__chat-waveform-bar: var(--str-chat__border-core-opacity-strong);
  --str-chat__control-checkbox-bg: var(--str-chat__base-transparent-0);
  --str-chat__control-playback-thumb-border-default: var(
    --str-chat__border-core-opacity-strong
  );
  --str-chat__control-radio-button-bg: var(--str-chat__base-transparent-0);
  --str-chat__control-radio-check-bg: var(--str-chat__base-transparent-0);
  --str-chat__avatar-palette-bg-1: var(--str-chat__blue-150);
  --str-chat__avatar-palette-bg-2: var(--str-chat__cyan-150);
  --str-chat__avatar-palette-bg-3: var(--str-chat__green-150);
  --str-chat__avatar-palette-bg-4: var(--str-chat__purple-150);
  --str-chat__avatar-palette-bg-5: var(--str-chat__yellow-150);
  --str-chat__avatar-palette-text-1: var(--str-chat__blue-900);
  --str-chat__avatar-palette-text-2: var(--str-chat__cyan-900);
  --str-chat__avatar-palette-text-3: var(--str-chat__green-900);
  --str-chat__avatar-palette-text-4: var(--str-chat__purple-900);
  --str-chat__avatar-palette-text-5: var(--str-chat__yellow-900);
  --str-chat__accent-success: var(
    --str-chat__green-400
  ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */
  --str-chat__accent-warning: var(
    --str-chat__yellow-400
  ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */
  --str-chat__accent-error: var(
    --str-chat__red-500
  ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */
  --str-chat__brand-50: var(--str-chat__blue-50);
  --str-chat__brand-100: var(--str-chat__blue-100);
  --str-chat__brand-150: var(--str-chat__blue-150);
  --str-chat__brand-200: var(--str-chat__blue-200);
  --str-chat__brand-300: var(--str-chat__blue-300);
  --str-chat__brand-400: var(--str-chat__blue-400);
  --str-chat__brand-500: var(--str-chat__blue-500);
  --str-chat__brand-600: var(--str-chat__blue-600);
  --str-chat__brand-700: var(--str-chat__blue-700);
  --str-chat__brand-800: var(--str-chat__blue-800);
  --str-chat__brand-900: var(--str-chat__blue-900);
  --str-chat__skeleton-loading-base: var(
    --str-chat__base-transparent-0
  ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */
  --str-chat__skeleton-loading-highlight: var(
    --str-chat__background-core-overlay-light
  ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */
  --str-chat__chrome-0: var(--str-chat__base-white);
  --str-chat__chrome-50: var(--str-chat__slate-50);
  --str-chat__chrome-100: var(--str-chat__slate-100);
  --str-chat__chrome-150: var(--str-chat__slate-150);
  --str-chat__chrome-200: var(--str-chat__slate-200);
  --str-chat__chrome-300: var(--str-chat__slate-300);
  --str-chat__chrome-400: var(--str-chat__slate-400);
  --str-chat__chrome-500: var(--str-chat__slate-500);
  --str-chat__chrome-600: var(--str-chat__slate-600);
  --str-chat__chrome-700: var(--str-chat__slate-700);
  --str-chat__chrome-800: var(--str-chat__slate-800);
  --str-chat__chrome-900: var(--str-chat__slate-900);
  --str-chat__chrome-1000: var(--str-chat__base-black);
  --str-chat__device-radius: var(--str-chat__radius-md);
  --str-chat__message-bubble-radius-group-top: var(--str-chat__radius-2xl);
  --str-chat__message-bubble-radius-group-middle: var(--str-chat__radius-2xl);
  --str-chat__message-bubble-radius-group-bottom: var(--str-chat__radius-2xl);
  --str-chat__message-bubble-radius-tail: var(--str-chat__radius-none);
  --str-chat__message-bubble-radius-attachment: var(--str-chat__radius-lg);
  --str-chat__message-bubble-radius-attachment-inline: var(--str-chat__radius-md);
  --str-chat__composer-radius-fixed: var(--str-chat__radius-3xl);
  --str-chat__composer-radius-floating: var(--str-chat__radius-3xl);
  --str-chat__button-primary-border: var(--str-chat__brand-200);
  --str-chat__button-destructive-bg: var(--str-chat__accent-error);
  --str-chat__button-destructive-text: var(--str-chat__accent-error);
  --str-chat__button-destructive-border: var(--str-chat__accent-error);
  --str-chat__emoji-sm: var(--str-chat__typography-font-size-md);
  --str-chat__background-core-app: var(
    --str-chat__chrome-0
  ); /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */
  --str-chat__background-core-elevation-0: var(
    --str-chat__chrome-0
  ); /** 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. */
  --str-chat__background-core-elevation-1: var(
    --str-chat__chrome-0
  ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */
  --str-chat__background-core-elevation-2: var(
    --str-chat__chrome-0
  ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */
  --str-chat__background-core-elevation-3: var(
    --str-chat__chrome-0
  ); /** Used for badge counts that float above other UI elements. */
  --str-chat__background-core-surface-default: var(
    --str-chat__chrome-100
  ); /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */
  --str-chat__background-core-surface-subtle: var(
    --str-chat__chrome-50
  ); /** A slightly receded background. Used for secondary containers or to create soft visual separation. */
  --str-chat__background-core-surface-card: var(
    --str-chat__chrome-50
  ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */
  --str-chat__background-core-surface-strong: var(
    --str-chat__chrome-150
  ); /** A more prominent background. Used for elements that need to stand out from the main surface. */
  --str-chat__background-core-inverse: var(
    --str-chat__chrome-1000
  ); /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */
  --str-chat__background-core-on-accent: var(
    --str-chat__chrome-0
  ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */
  --str-chat__background-utility-disabled: var(
    --str-chat__chrome-100
  ); /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */
  --str-chat__border-utility-focused: var(
    --str-chat__brand-150
  ); /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */
  --str-chat__border-utility-success: var(
    --str-chat__accent-success
  ); /** Border for positive or confirmed states. Used on validated inputs and success indicators. */
  --str-chat__border-utility-warning: var(
    --str-chat__accent-warning
  ); /** Border for cautionary states. Used on inputs or elements requiring attention. */
  --str-chat__border-utility-error: var(
    --str-chat__accent-error
  ); /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */
  --str-chat__border-utility-disabled: var(
    --str-chat__chrome-100
  ); /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */
  --str-chat__border-utility-disabled-on-surface: var(
    --str-chat__chrome-150
  ); /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */
  --str-chat__border-core-default: var(
    --str-chat__chrome-150
  ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */
  --str-chat__border-core-subtle: var(
    --str-chat__chrome-100
  ); /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */
  --str-chat__border-core-strong: var(
    --str-chat__chrome-300
  ); /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */
  --str-chat__border-core-inverse: var(
    --str-chat__chrome-0
  ); /** Used on dark backgrounds. */
  --str-chat__border-core-on-accent: var(
    --str-chat__chrome-0
  ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */
  --str-chat__border-core-on-surface: var(
    --str-chat__chrome-300
  ); /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */
  --str-chat__border-core-on-inverse: var(
    --str-chat__chrome-0
  ); /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */
  --str-chat__chat-bg-outgoing: var(
    --str-chat__brand-100
  ); /** Outgoing bubble background. */
  --str-chat__chat-bg-attachment-outgoing: var(
    --str-chat__brand-150
  ); /** Attachment card in outgoing bubble. */
  --str-chat__chat-text-outgoing: var(--str-chat__brand-900); /** Message body text. */
  --str-chat__chat-border-outgoing: var(--str-chat__brand-100);
  --str-chat__chat-border-on-chat-outgoing: var(--str-chat__brand-300);
  --str-chat__chat-reply-indicator-incoming: var(
    --str-chat__chrome-400
  ); /** Reply indicator shading for incoming. */
  --str-chat__chat-reply-indicator-outgoing: var(
    --str-chat__brand-400
  ); /** Reply indicator shading for outgoing. */
  --str-chat__chat-poll-progress-track-outgoing: var(--str-chat__brand-200);
  --str-chat__chat-thread-connector-outgoing: var(--str-chat__brand-150);
  --str-chat__presence-bg-online: var(
    --str-chat__accent-success
  ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
  --str-chat__system-text: var(--str-chat__chrome-1000);
  --str-chat__badge-bg-error: var(--str-chat__accent-error);
  --str-chat__badge-bg-inverse: var(--str-chat__chrome-1000);
  --str-chat__text-primary: var(
    --str-chat__chrome-900
  ); /** Main body text. Used for message content, titles, and any text that carries primary meaning. */
  --str-chat__text-secondary: var(
    --str-chat__chrome-700
  ); /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */
  --str-chat__text-tertiary: var(
    --str-chat__chrome-500
  ); /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */
  --str-chat__text-on-inverse: var(
    --str-chat__chrome-0
  ); /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */
  --str-chat__text-on-accent: var(
    --str-chat__chrome-0
  ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */
  --str-chat__text-disabled: var(
    --str-chat__chrome-300
  ); /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */
  --str-chat__text-link: var(
    --str-chat__brand-500
  ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */
  --str-chat__avatar-bg-default: var(--str-chat__avatar-palette-bg-1);
  --str-chat__avatar-bg-placeholder: var(--str-chat__chrome-150);
  --str-chat__avatar-text-default: var(--str-chat__avatar-palette-text-1);
  --str-chat__avatar-text-placeholder: var(--str-chat__chrome-500);
  --str-chat__avatar-presence-bg-online: var(
    --str-chat__accent-success
  ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
  --str-chat__accent-primary: var(
    --str-chat__brand-500
  ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */
  --str-chat__accent-neutral: var(
    --str-chat__chrome-500
  ); /** A mid-tone gray for de-emphasized UI elements. */
  --str-chat__button-primary-bg: var(--str-chat__accent-primary);
  --str-chat__button-primary-text: var(--str-chat__accent-primary);
  --str-chat__button-primary-text-on-accent: var(--str-chat__text-on-accent);
  --str-chat__button-primary-text-on-dark: var(--str-chat__text-on-inverse);
  --str-chat__button-primary-border-on-dark: var(--str-chat__border-core-on-inverse);
  --str-chat__button-secondary-bg: var(--str-chat__background-core-surface-default);
  --str-chat__button-secondary-bg-liquid-glass: var(
    --str-chat__background-core-elevation-0
  );
  --str-chat__button-secondary-text: var(--str-chat__text-primary);
  --str-chat__button-secondary-text-on-accent: var(--str-chat__text-primary);
  --str-chat__button-secondary-text-on-dark: var(--str-chat__text-on-inverse);
  --str-chat__button-secondary-border: var(--str-chat__border-core-default);
  --str-chat__button-secondary-border-on-dark: var(--str-chat__border-core-on-inverse);
  --str-chat__button-destructive-bg-liquid-glass: var(
    --str-chat__background-core-elevation-0
  );
  --str-chat__button-destructive-text-on-accent: var(--str-chat__text-on-accent);
  --str-chat__button-destructive-text-on-dark: var(--str-chat__text-on-inverse);
  --str-chat__button-destructive-border-on-dark: var(--str-chat__text-on-inverse);
  --str-chat__border-utility-active: var(
    --str-chat__accent-primary
  ); /** Active input border. Used for focused text fields and selected form elements. */
  --str-chat__chat-bg-incoming: var(
    --str-chat__background-core-surface-default
  ); /** Incoming bubble background. */
  --str-chat__chat-bg-attachment-incoming: var(
    --str-chat__background-core-surface-strong
  ); /** Attachment card in incoming bubble. */
  --str-chat__chat-text-incoming: var(--str-chat__text-primary); /** Message body text. */
  --str-chat__chat-text-username: var(--str-chat__text-secondary); /** Username label. */
  --str-chat__chat-text-timestamp: var(--str-chat__text-tertiary); /** Time labels. */
  --str-chat__chat-text-read: var(--str-chat__accent-primary);
  --str-chat__chat-text-mention: var(--str-chat__text-link); /** Mention styling. */
  --str-chat__chat-text-link: var(
    --str-chat__text-link
  ); /** Links inside message bubbles. */
  --str-chat__chat-text-reaction: var(
    --str-chat__text-secondary
  ); /** Reaction count text. */
  --str-chat__chat-text-system: var(
    --str-chat__text-secondary
  ); /** System messages like date separators. */
  --str-chat__chat-border-incoming: var(--str-chat__border-core-subtle);
  --str-chat__chat-border-on-chat-incoming: var(--str-chat__border-core-strong);
  --str-chat__chat-waveform-bar-playing: var(--str-chat__accent-primary);
  --str-chat__chat-poll-progress-fill-outgoing: var(--str-chat__accent-primary);
  --str-chat__chat-thread-connector-incoming: var(--str-chat__border-core-default);
  --str-chat__input-text-default: var(
    --str-chat__text-primary
  ); /** Main text inside the chat input. */
  --str-chat__input-text-placeholder: var(
    --str-chat__text-tertiary
  ); /** Placeholder text for the input. Lower emphasis than main text. */
  --str-chat__input-text-disabled: var(
    --str-chat__text-disabled
  ); /** Placeholder text for the input. Lower emphasis than main text. */
  --str-chat__input-text-icon: var(
    --str-chat__text-tertiary
  ); /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */
  --str-chat__input-send-icon: var(
    --str-chat__accent-primary
  ); /** Default send icon color in the input. Uses the brand accent. */
  --str-chat__input-send-icon-disabled: var(
    --str-chat__text-disabled
  ); /** Send icon when disabled (e.g. empty input). */
  --str-chat__reaction-bg: var(--str-chat__background-core-elevation-3);
  --str-chat__reaction-border: var(--str-chat__border-core-default);
  --str-chat__reaction-text: var(--str-chat__text-primary);
  --str-chat__reaction-emoji: var(--str-chat__text-primary);
  --str-chat__presence-border: var(
    --str-chat__border-core-inverse
  ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
  --str-chat__presence-bg-offline: var(
    --str-chat__accent-neutral
  ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
  --str-chat__system-caret: var(--str-chat__accent-primary);
  --str-chat__badge-bg-default: var(--str-chat__background-core-elevation-3);
  --str-chat__badge-bg-primary: var(--str-chat__accent-primary);
  --str-chat__badge-bg-neutral: var(--str-chat__accent-neutral);
  --str-chat__badge-text: var(--str-chat__text-primary);
  --str-chat__badge-text-on-inverse: var(--str-chat__text-on-inverse);
  --str-chat__badge-text-on-accent: var(--str-chat__text-on-accent);
  --str-chat__badge-border: var(--str-chat__border-core-on-inverse);
  --str-chat__control-remove-control-bg: var(--str-chat__background-core-inverse);
  --str-chat__control-remove-control-icon: var(--str-chat__text-on-inverse);
  --str-chat__control-remove-control-border: var(--str-chat__border-core-on-inverse);
  --str-chat__control-progress-bar-fill: var(--str-chat__accent-neutral);
  --str-chat__control-progress-bar-track: var(--str-chat__background-core-surface-strong);
  --str-chat__control-toggle-switch-bg: var(--str-chat__accent-neutral);
  --str-chat__control-toggle-switch-bg-selected: var(--str-chat__accent-primary);
  --str-chat__control-toggle-switch-bg-disabled: var(
    --str-chat__background-utility-disabled
  );
  --str-chat__control-toggle-switch-knob: var(--str-chat__background-core-on-accent);
  --str-chat__control-playback-toggle-text: var(--str-chat__text-primary);
  --str-chat__control-playback-toggle-border: var(--str-chat__border-core-default);
  --str-chat__control-checkbox-border: var(--str-chat__border-core-default);
  --str-chat__control-checkbox-bg-selected: var(--str-chat__accent-primary);
  --str-chat__control-checkbox-icon: var(--str-chat__text-on-accent);
  --str-chat__control-play-button-icon: var(--str-chat__text-on-accent);
  --str-chat__control-playback-thumb-bg-default: var(
    --str-chat__background-core-on-accent
  );
  --str-chat__control-playback-thumb-bg-active: var(--str-chat__accent-primary);
  --str-chat__control-playback-thumb-border-active: var(
    --str-chat__border-core-on-accent
  );
  --str-chat__control-radio-button-border: var(--str-chat__border-core-default);
  --str-chat__control-radio-button-bg-selected: var(--str-chat__accent-primary);
  --str-chat__control-radio-button-indicator: var(--str-chat__text-on-accent);
  --str-chat__control-radio-check-border: var(--str-chat__border-core-default);
  --str-chat__control-radio-check-bg-selected: var(--str-chat__accent-primary);
  --str-chat__control-radio-check-icon: var(--str-chat__text-on-accent);
  --str-chat__control-chip-border: var(--str-chat__border-core-default);
  --str-chat__control-chip-text: var(--str-chat__text-primary);
  --str-chat__avatar-presence-bg-offline: var(
    --str-chat__accent-neutral
  ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
  --str-chat__avatar-presence-border: var(
    --str-chat__border-core-on-inverse
  ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
  --str-chat__chat-text-typing-indicator: var(
    --str-chat__chat-text-incoming
  ); /** Typing indicator chip. */
  --str-chat__chat-poll-progress-track-incoming: var(
    --str-chat__control-progress-bar-track
  );
  --str-chat__chat-poll-progress-fill-incoming: var(
    --str-chat__control-progress-bar-fill
  );
}

.str-chat__theme-dark,
.str-chat:not(.str-chat__theme-dark) *:not(.str-chat__theme-dark) .str-chat__theme-inverse {
  --str-chat__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. */
  --str-chat__background-core-overlay-dark: rgba(
    0,
    0,
    0,
    0.5
  ); /** A dark semi-transparent layer. Used for image overlays. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__border-utility-selected: rgba(
    255,
    255,
    255,
    0.15
  ); /** Border for selected or active items. Used for highlighted list items and active controls. */
  --str-chat__border-utility-hover: rgba(
    255,
    255,
    255,
    0.1
  ); /** Applied on pointer hover over bordered interactive elements. */
  --str-chat__border-utility-pressed: rgba(
    255,
    255,
    255,
    0.2
  ); /** Applied during an active press on bordered interactive elements. */
  --str-chat__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. */
  --str-chat__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. */
  --str-chat__system-bg-blur: rgba(0, 0, 0, 0.01);
  --str-chat__system-scrollbar: rgba(255, 255, 255, 0.5);
  /**
   * 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.
   */
  --str-chat__background-core-highlight: var(
    --str-chat__yellow-800
  ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */
  --str-chat__avatar-palette-bg-1: var(--str-chat__blue-600);
  --str-chat__avatar-palette-bg-2: var(--str-chat__cyan-600);
  --str-chat__avatar-palette-bg-3: var(--str-chat__green-600);
  --str-chat__avatar-palette-bg-4: var(--str-chat__purple-600);
  --str-chat__avatar-palette-bg-5: var(--str-chat__yellow-600);
  --str-chat__avatar-palette-text-1: var(--str-chat__blue-100);
  --str-chat__avatar-palette-text-2: var(--str-chat__cyan-100);
  --str-chat__avatar-palette-text-3: var(--str-chat__green-100);
  --str-chat__avatar-palette-text-4: var(--str-chat__purple-100);
  --str-chat__avatar-palette-text-5: var(--str-chat__yellow-100);
  --str-chat__accent-success: var(
    --str-chat__green-300
  ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */
  --str-chat__accent-warning: var(
    --str-chat__yellow-300
  ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */
  --str-chat__accent-error: var(
    --str-chat__red-400
  ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */
  --str-chat__brand-50: var(--str-chat__blue-900);
  --str-chat__brand-100: var(--str-chat__blue-800);
  --str-chat__brand-150: var(--str-chat__blue-700);
  --str-chat__brand-200: var(--str-chat__blue-600);
  --str-chat__brand-300: var(--str-chat__blue-500);
  --str-chat__brand-500: var(--str-chat__blue-300);
  --str-chat__brand-600: var(--str-chat__blue-200);
  --str-chat__brand-700: var(--str-chat__blue-150);
  --str-chat__brand-800: var(--str-chat__blue-100);
  --str-chat__brand-900: var(--str-chat__blue-50);
  --str-chat__chrome-0: var(--str-chat__base-black);
  --str-chat__chrome-50: var(--str-chat__neutral-900);
  --str-chat__chrome-100: var(--str-chat__neutral-800);
  --str-chat__chrome-150: var(--str-chat__neutral-700);
  --str-chat__chrome-200: var(--str-chat__neutral-600);
  --str-chat__chrome-300: var(--str-chat__neutral-500);
  --str-chat__chrome-400: var(--str-chat__neutral-400);
  --str-chat__chrome-500: var(--str-chat__neutral-300);
  --str-chat__chrome-600: var(--str-chat__neutral-200);
  --str-chat__chrome-700: var(--str-chat__neutral-150);
  --str-chat__chrome-800: var(--str-chat__neutral-100);
  --str-chat__chrome-900: var(--str-chat__neutral-50);
  --str-chat__chrome-1000: var(--str-chat__base-white);
  --str-chat__background-core-elevation-1: var(
    --str-chat__chrome-50
  ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */
  --str-chat__background-core-elevation-2: var(
    --str-chat__chrome-100
  ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */
  --str-chat__background-core-elevation-3: var(
    --str-chat__chrome-200
  ); /** Used for badge counts that float above other UI elements. */
  --str-chat__background-core-surface-card: var(
    --str-chat__chrome-100
  ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */
  --str-chat__background-core-on-accent: var(
    --str-chat__chrome-1000
  ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */
  --str-chat__border-core-default: var(
    --str-chat__chrome-200
  ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */
  --str-chat__border-core-on-accent: var(
    --str-chat__chrome-1000
  ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */
  --str-chat__text-on-accent: var(
    --str-chat__chrome-1000
  ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */
  --str-chat__text-link: var(
    --str-chat__brand-600
  ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */
  --str-chat__accent-primary: var(
    --str-chat__brand-400
  ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */
}

/* Numeric styles are used for compact, layout-critical UI elements such as:
    - badge counts,
    - avatar initials,
    - keyboard key labels, and
    - numeric labels inside pills.
    Numeric tokens are classified as layout-stable UI indicators, not content text. */
.str-chat {
  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
  --str-chat__font-family:
    var(--str-chat__typography-font-family-sans), -apple-system, BlinkMacSystemFont,
    avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu,
    roboto, noto, helvetica, arial, sans-serif;
  --str-chat__font-heading-xs: normal var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-sm) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-heading-sm: normal var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-md) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-heading-md: normal var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-lg) /
    var(--str-chat__typography-line-height-relaxed) var(--str-chat__font-family);
  --str-chat__font-heading-lg: normal var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-xl) /
    var(--str-chat__typography-line-height-relaxed) var(--str-chat__font-family);
  --str-chat__font-body-default: normal var(--str-chat__typography-font-weight-regular)
    var(--str-chat__typography-font-size-md) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-body-emphasis: normal var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-md) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-body-link: normal var(--str-chat__typography-font-weight-regular)
    var(--str-chat__typography-font-size-md) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-body-link-emphasis: normal
    var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-md) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-caption-default: normal var(--str-chat__typography-font-weight-regular)
    var(--str-chat__typography-font-size-sm) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-caption-emphasis: normal
    var(--str-chat__typography-font-weight-semi-bold)
    var(--str-chat__typography-font-size-sm) /
    var(--str-chat__typography-line-height-normal) var(--str-chat__font-family);
  --str-chat__font-caption-lin