diff --git a/.changelog/6024-fix-css-modules-option-free-styles-2.md b/.changelog/6024-fix-css-modules-option-free-styles-2.md
new file mode 100644
index 0000000000..5831ed8b46
--- /dev/null
+++ b/.changelog/6024-fix-css-modules-option-free-styles-2.md
@@ -0,0 +1,7 @@
+### Changed
+
+- Converted the chat history box, image avatar, error box, transcript list and media attachments to CSS Modules with `webchat__` class names, and `videoHeight` to `--webchat__height--video`, in PR [#6024](https://github.com/microsoft/BotFramework-WebChat/pull/6024), by [@OEvgeny](https://github.com/OEvgeny)
+
+### Removed
+
+- 💥 Deprecated the `activities`, `audioAttachment`, `audioContent`, `chatHistoryBox`, `errorBox`, `imageAvatar`, `videoAttachment`, `videoContent`, `vimeoContent` and `youTubeContent` style set entries, which no longer affect rendering, and removed the unused `webchat__chat-history-box__toolbar--rtl` class, in PR [#6024](https://github.com/microsoft/BotFramework-WebChat/pull/6024), by [@OEvgeny](https://github.com/OEvgeny)
diff --git a/__tests__/html2/rtl/scrollToEndButton.html b/__tests__/html2/rtl/scrollToEndButton.html
new file mode 100644
index 0000000000..182cfd8520
--- /dev/null
+++ b/__tests__/html2/rtl/scrollToEndButton.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, renderWebChat } from 'botframework-webchat';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        // GIVEN: Web Chat in Hebrew (right-to-left) on a left-to-right page.
+        renderWebChat(
+          { directLine, locale: 'he-IL', store, styleOptions: { hideSendBox: true } },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: Enough messages to scroll the transcript.
+        for (let index = 1; index <= 20; index++) {
+          // eslint-disable-next-line no-await-in-loop
+          await directLine.emulateIncomingActivity({ from: { role: 'bot' }, text: `הודעה ${index}`, type: 'message' });
+        }
+
+        await pageConditions.numActivitiesShown(20);
+        await pageConditions.scrollToBottomCompleted();
+
+        // WHEN: The user scrolls to the top and a new message arrives.
+        await pageObjects.scrollToTop();
+        await directLine.emulateIncomingActivity({ from: { role: 'bot' }, text: 'הודעה חדשה', type: 'message' });
+
+        // THEN: The "New messages" button should show, laid out right-to-left.
+        await pageConditions.scrollToEndButtonShown();
+        await pageConditions.scrollStabilized(0);
+
+        expect(pageElements.scrollToEndButton().matches(':dir(rtl)')).toBe(true);
+
+        // THEN: The button should be at the bottom-left corner of the transcript, the end side in right-to-left.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/rtl/scrollToEndButton.html.snap-1.png b/__tests__/html2/rtl/scrollToEndButton.html.snap-1.png
new file mode 100644
index 0000000000..734c851112
Binary files /dev/null and b/__tests__/html2/rtl/scrollToEndButton.html.snap-1.png differ
diff --git a/__tests__/html2/styleOptions/videoHeight.html b/__tests__/html2/styleOptions/videoHeight.html
new file mode 100644
index 0000000000..ad551e9325
--- /dev/null
+++ b/__tests__/html2/styleOptions/videoHeight.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createStoreWithOptions, renderWebChat } from 'botframework-webchat';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        // GIVEN: Web Chat with a video height of 135 pixels, half of the default 270 pixels.
+        renderWebChat(
+          { directLine, store, styleOptions: { hideSendBox: true, videoHeight: 135 } },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // WHEN: The bot sends a video attachment.
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              contentType: 'video/webm',
+              // `VideoContent` parses the URL with `new URL()`, so it must be absolute.
+              contentUrl: new URL('/assets/dark-gray-video.webm', location.href).href,
+              name: 'Dark gray video'
+            }
+          ],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+        await pageConditions.mediaBufferStabilized(document.querySelector('video'));
+
+        // THEN: The video player should be 135 pixels tall.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/styleOptions/videoHeight.html.snap-1.png b/__tests__/html2/styleOptions/videoHeight.html.snap-1.png
new file mode 100644
index 0000000000..09005d6e11
Binary files /dev/null and b/__tests__/html2/styleOptions/videoHeight.html.snap-1.png differ
diff --git a/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.module.css b/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.module.css
index 506606a1ac..bfacfac7ac 100644
--- a/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.module.css
+++ b/packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.module.css
@@ -26,7 +26,7 @@
         display: block;
       }
 
-      /* Same two-tone focus indicator as video attachments, see `Styles/StyleSet/VideoAttachment.ts` in the component package. */
+      /* Same two-tone focus indicator as video attachments, see `Attachment/MediaAttachment.module.css` in the component package. */
       /* It follows the clipped top corners. When the bubble does not clip the video, the video is rounded like the indicator. */
       > video:focus-visible {
         border-radius: inherit;
diff --git a/packages/component/src/Attachment/AudioAttachment.js b/packages/component/src/Attachment/AudioAttachment.js
index f04c6da71e..86824ba5dc 100644
--- a/packages/component/src/Attachment/AudioAttachment.js
+++ b/packages/component/src/Attachment/AudioAttachment.js
@@ -1,9 +1,11 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import React from 'react';
 import { object, optional, pipe, readonly, string } from 'valibot';
 
 import AudioContent from './AudioContent';
-import useStyleSet from '../hooks/useStyleSet';
+
+import styles from './MediaAttachment.module.css';
 
 const audioAttachmentPropsSchema = pipe(
   object({
@@ -21,10 +23,10 @@ const audioAttachmentPropsSchema = pipe(
 const AudioAttachment = props => {
   const { attachment } = validateProps(audioAttachmentPropsSchema, props);
 
-  const [{ audioAttachment: audioAttachmentStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
   return (
-    <div className={audioAttachmentStyleSet}>
+    <div className={classNames['audio-attachment']}>
       <AudioContent alt={attachment.name} src={attachment.contentUrl} />
     </div>
   );
diff --git a/packages/component/src/Attachment/AudioContent.tsx b/packages/component/src/Attachment/AudioContent.tsx
index 711f5d55b2..bab37819c8 100644
--- a/packages/component/src/Attachment/AudioContent.tsx
+++ b/packages/component/src/Attachment/AudioContent.tsx
@@ -1,8 +1,9 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { boolean, object, optional, pipe, readonly, string } from 'valibot';
 
-import useStyleSet from '../hooks/useStyleSet';
+import styles from './MediaAttachment.module.css';
 
 const audioContentPropsSchema = pipe(
   object({
@@ -15,17 +16,18 @@ const audioContentPropsSchema = pipe(
   readonly()
 );
 
-type AudioContentProps = InferInput<typeof audioContentPropsSchema>;
+type AudioContentProps = InferReactProps<typeof audioContentPropsSchema>;
 
 function AudioContent(props: AudioContentProps) {
   const { alt, autoPlay = false, loop = false, src } = validateProps(audioContentPropsSchema, props);
-  const [{ audioContent: audioContentStyleSet }] = useStyleSet();
+
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
   return (
     <audio
       aria-label={alt}
       autoPlay={autoPlay}
-      className={audioContentStyleSet}
+      className={classNames['audio-content']}
       controls={true}
       loop={loop}
       src={src}
diff --git a/packages/component/src/Attachment/HTMLVideoContent.tsx b/packages/component/src/Attachment/HTMLVideoContent.tsx
index c558f195b3..79f28e25a7 100644
--- a/packages/component/src/Attachment/HTMLVideoContent.tsx
+++ b/packages/component/src/Attachment/HTMLVideoContent.tsx
@@ -1,8 +1,9 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { boolean, object, optional, pipe, readonly, string } from 'valibot';
 
-import useStyleSet from '../hooks/useStyleSet';
+import styles from './MediaAttachment.module.css';
 
 const htmlVideoContentPropsSchema = pipe(
   object({
@@ -15,18 +16,18 @@ const htmlVideoContentPropsSchema = pipe(
   readonly()
 );
 
-type HTMLVideoContentProps = InferInput<typeof htmlVideoContentPropsSchema>;
+type HTMLVideoContentProps = InferReactProps<typeof htmlVideoContentPropsSchema>;
 
 function HTMLVideoContent(props: HTMLVideoContentProps) {
   const { alt, autoPlay = false, loop = false, poster, src } = validateProps(htmlVideoContentPropsSchema, props);
 
-  const [{ videoContent: videoContentStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
   return (
     <video
       aria-label={alt}
       autoPlay={autoPlay}
-      className={videoContentStyleSet}
+      className={classNames['video-content']}
       controls={true}
       loop={loop}
       poster={poster}
diff --git a/packages/component/src/Attachment/MediaAttachment.module.css b/packages/component/src/Attachment/MediaAttachment.module.css
new file mode 100644
index 0000000000..360d4f0062
--- /dev/null
+++ b/packages/component/src/Attachment/MediaAttachment.module.css
@@ -0,0 +1,74 @@
+/* #region Attachments */
+
+:global(.webchat) .audio-attachment {
+  display: flex;
+  min-height: var(--webchat__size--avatar);
+  position: relative;
+
+  /* The browser draws the focus ring of <audio> outside of the player, where the bubble clips it, and under the player controls. */
+  /* Draw the focus indicator on top of the player instead, in the same pill shape as the player (Chromium uses `border-radius: 100px`). */
+  > audio:focus-visible {
+    outline: 0;
+  }
+
+  &:has(> audio:focus-visible)::after {
+    border-color: var(--webchat__color--transcript-visual-keyboard-indicator);
+    border-radius: 100px;
+    border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+}
+
+:global(.webchat) .video-attachment {
+  /* Same corners as the bubble, which clips the player. */
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  /* The browser draws the focus ring of <video> outside of the player, where the bubble clips it. The rest is not visible over a dark video. */
+  /* Draw a two-tone focus indicator on top of the player instead: the ring, and a band in the bubble background color to separate it from the video. */
+  /* The indicator follows the bubble corners. When the bubble has padding and does not clip the player, the player is rounded like the indicator. */
+  > video:focus-visible {
+    border-radius: inherit;
+    outline: 0;
+  }
+
+  &:has(> video:focus-visible)::after {
+    border-color: var(--webchat__color--transcript-visual-keyboard-indicator);
+    border-radius: inherit;
+    border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
+    box-shadow: inset 0 0 0 2px var(--webchat__background--bubble);
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+}
+
+/* #endregion */
+
+/* #region Players */
+
+:global(.webchat) .audio-content {
+  width: 100%;
+}
+
+:global(.webchat) .video-content {
+  height: var(--webchat__height--video);
+  width: 100%;
+}
+
+:global(.webchat) .vimeo-content,
+:global(.webchat) .youtube-content {
+  border: 0;
+  height: var(--webchat__height--video);
+  width: 100%;
+}
+
+/* #endregion */
diff --git a/packages/component/src/Attachment/VideoAttachment.js b/packages/component/src/Attachment/VideoAttachment.js
index 64a28b4314..777933339b 100644
--- a/packages/component/src/Attachment/VideoAttachment.js
+++ b/packages/component/src/Attachment/VideoAttachment.js
@@ -1,16 +1,11 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import React from 'react';
 import { object, optional, pipe, readonly, string } from 'valibot';
 
-import useStyleSet from '../hooks/useStyleSet';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import VideoContent from './VideoContent';
 
-const ROOT_STYLE = {
-  display: 'flex',
-  flexDirection: 'column'
-};
+import styles from './MediaAttachment.module.css';
 
 const videoAttachmentPropsSchema = pipe(
   object({
@@ -27,11 +22,11 @@ const videoAttachmentPropsSchema = pipe(
 
 const VideoAttachment = props => {
   const { attachment } = validateProps(videoAttachmentPropsSchema, props);
-  const [{ videoAttachment: videoAttachmentStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
   return (
-    <div className={classNames(rootClassName, videoAttachmentStyleSet + '')}>
+    <div className={classNames['video-attachment']}>
       <VideoContent alt={attachment.name} src={attachment.contentUrl} />
     </div>
   );
diff --git a/packages/component/src/Attachment/VideoContent.spec.tsx b/packages/component/src/Attachment/VideoContent.spec.tsx
index e38b3ef7ec..bcaafa0ba8 100644
--- a/packages/component/src/Attachment/VideoContent.spec.tsx
+++ b/packages/component/src/Attachment/VideoContent.spec.tsx
@@ -12,8 +12,8 @@ jest.mock('@msinternal/botframework-webchat-react-valibot', () => ({
   validateProps: (_: unknown, props: unknown) => props
 }));
 
-// The video player needs the Web Chat context, it is not under test.
-jest.mock('../hooks/useStyleSet', () => () => [{ videoContent: '' }]);
+// Unit tests do not load CSS, styles are not under test.
+jest.mock('./MediaAttachment.module.css', () => ({}));
 
 test.each([
   ['root-relative', '/videos/intro.mp4'],
diff --git a/packages/component/src/Attachment/VimeoContent.tsx b/packages/component/src/Attachment/VimeoContent.tsx
index d6a8d22ead..066e81f75d 100644
--- a/packages/component/src/Attachment/VimeoContent.tsx
+++ b/packages/component/src/Attachment/VimeoContent.tsx
@@ -1,9 +1,10 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { boolean, object, optional, pipe, readonly, string } from 'valibot';
 
-import useStyleSet from '../hooks/useStyleSet';
+import styles from './MediaAttachment.module.css';
 
 const { useLocalizer } = hooks;
 
@@ -17,12 +18,12 @@ const vimeoContentPropsSchema = pipe(
   readonly()
 );
 
-type VimeoContentProps = InferInput<typeof vimeoContentPropsSchema>;
+type VimeoContentProps = InferReactProps<typeof vimeoContentPropsSchema>;
 
 function VimeoContent(props: VimeoContentProps) {
   const { alt, autoPlay = false, embedID, loop = false } = validateProps(vimeoContentPropsSchema, props);
 
-  const [{ vimeoContent: vimeoContentStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles, webChatPrefixedClassName);
   const localize = useLocalizer();
 
   const search = new URLSearchParams({
@@ -39,7 +40,7 @@ function VimeoContent(props: VimeoContentProps) {
     <iframe
       allowFullScreen={true}
       aria-label={alt}
-      className={vimeoContentStyleSet}
+      className={classNames['vimeo-content']}
       sandbox="allow-same-origin allow-scripts"
       src={`https://player.vimeo.com/video/${encodeURI(embedID)}?${search}`}
       title={title}
diff --git a/packages/component/src/Attachment/YouTubeContent.tsx b/packages/component/src/Attachment/YouTubeContent.tsx
index 6d97640f94..32a41971eb 100644
--- a/packages/component/src/Attachment/YouTubeContent.tsx
+++ b/packages/component/src/Attachment/YouTubeContent.tsx
@@ -1,9 +1,10 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { boolean, object, optional, pipe, readonly, string } from 'valibot';
 
-import useStyleSet from '../hooks/useStyleSet';
+import styles from './MediaAttachment.module.css';
 
 const { useLocalizer } = hooks;
 
@@ -17,12 +18,12 @@ const youTubeContentPropsSchema = pipe(
   readonly()
 );
 
-type YouTubeContentProps = InferInput<typeof youTubeContentPropsSchema>;
+type YouTubeContentProps = InferReactProps<typeof youTubeContentPropsSchema>;
 
 function YouTubeContent(props: YouTubeContentProps) {
   const { alt, autoPlay = false, embedID, loop = false } = validateProps(youTubeContentPropsSchema, props);
 
-  const [{ youTubeContent: youTubeContentStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles, webChatPrefixedClassName);
   const localize = useLocalizer();
 
   const search = new URLSearchParams({
@@ -37,7 +38,7 @@ function YouTubeContent(props: YouTubeContentProps) {
     <iframe
       allowFullScreen={true}
       aria-label={alt}
-      className={youTubeContentStyleSet}
+      className={classNames['youtube-content']}
       sandbox="allow-same-origin allow-scripts"
       src={`https://youtube.com/embed/${embedID}?${search}`}
       title={title}
diff --git a/packages/component/src/Avatar/ImageAvatar.module.css b/packages/component/src/Avatar/ImageAvatar.module.css
new file mode 100644
index 0000000000..7cafc071fe
--- /dev/null
+++ b/packages/component/src/Avatar/ImageAvatar.module.css
@@ -0,0 +1,13 @@
+:global(.webchat) .imageAvatar {
+  align-items: center;
+  display: flex;
+  height: var(--webchat__size--avatar);
+  justify-content: center;
+  overflow: clip;
+  width: var(--webchat__size--avatar);
+
+  .imageAvatar__image {
+    height: auto;
+    width: 100%;
+  }
+}
diff --git a/packages/component/src/Avatar/ImageAvatar.tsx b/packages/component/src/Avatar/ImageAvatar.tsx
index d456f400f4..8e97eee482 100644
--- a/packages/component/src/Avatar/ImageAvatar.tsx
+++ b/packages/component/src/Avatar/ImageAvatar.tsx
@@ -1,21 +1,13 @@
+import { validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
 import React, { memo } from 'react';
-import { boolean, object, pipe, readonly, type InferInput } from 'valibot';
+import { boolean, object, pipe, readonly } from 'valibot';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import useStyleSet from '../hooks/useStyleSet';
+import styles from './ImageAvatar.module.css';
 
 const { useAvatarForBot, useAvatarForUser } = hooks;
 
-const ROOT_STYLE = {
-  '& .webchat__imageAvatar__image': {
-    width: '100%',
-    height: 'auto'
-  }
-};
-
 const imageAvatarPropsSchema = pipe(
   object({
     fromUser: boolean()
@@ -23,22 +15,22 @@ const imageAvatarPropsSchema = pipe(
   readonly()
 );
 
-type ImageAvatarProps = InferInput<typeof imageAvatarPropsSchema>;
+type ImageAvatarProps = InferReactProps<typeof imageAvatarPropsSchema>;
 
 const ImageAvatar = (props: ImageAvatarProps) => {
   const { fromUser } = validateProps(imageAvatarPropsSchema, props);
 
   const [{ image: avatarImageForBot }] = useAvatarForBot();
   const [{ image: avatarImageForUser }] = useAvatarForUser();
-  const [{ imageAvatar: imageAvatarStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  // Keeps the "webchat__imageAvatar" class names.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
   const avatarImage = fromUser ? avatarImageForUser : avatarImageForBot;
 
   return (
     !!avatarImage && (
-      <div className={classNames('webchat__imageAvatar', rootClassName, imageAvatarStyleSet + '')}>
-        <img alt="" className="webchat__imageAvatar__image" src={fromUser ? avatarImageForUser : avatarImageForBot} />
+      <div className={classNames['imageAvatar']}>
+        <img alt="" className={classNames['imageAvatar__image']} src={avatarImage} />
       </div>
     )
   );
diff --git a/packages/component/src/BasicTranscript.module.css b/packages/component/src/BasicTranscript.module.css
index 009f0a845b..bad1480ebc 100644
--- a/packages/component/src/BasicTranscript.module.css
+++ b/packages/component/src/BasicTranscript.module.css
@@ -24,6 +24,9 @@
 
   .basic-transcript__transcript {
     list-style-type: none;
+    margin: 0;
+    /* Block padding comes from `TranscriptFocus.module.css`, which ties with this rule on specificity. */
+    padding-inline: 0;
   }
 
   .basic-transcript__activity-focus-target {
diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
index 7c4374ecea..73f04f09fc 100644
--- a/packages/component/src/BasicTranscript.tsx
+++ b/packages/component/src/BasicTranscript.tsx
@@ -52,7 +52,6 @@ import {
   type TranscriptScrollRelativeOptions
 } from './hooks/transcriptScrollRelative';
 import useFocus from './hooks/useFocus';
-import useStyleSet from './hooks/useStyleSet';
 import ChatHistoryDOMComposer from './providers/ChatHistoryDOM/ChatHistoryDOMComposer';
 import useActivityElementMapRef from './providers/ChatHistoryDOM/useActivityElementRef';
 import GroupedRenderingActivitiesComposer from './providers/GroupedRenderingActivities/GroupedRenderingActivitiesComposer';
@@ -456,7 +455,6 @@ type InternalTranscriptScrollableProps = Readonly<{
 
 // Separating high-frequency hooks to improve performance.
 const InternalTranscriptScrollable = ({ children, onFocusFiller }: InternalTranscriptScrollableProps) => {
-  const [{ activities: activitiesStyleSet }] = useStyleSet();
   const [sticky]: [boolean] = useSticky();
   const localize = useLocalizer();
   const markAllAsAcknowledged = useMarkAllAsAcknowledged();
@@ -484,7 +482,7 @@ const InternalTranscriptScrollable = ({ children, onFocusFiller }: InternalTrans
         {hasAnyChild && (
           <TranscriptActivityList
             aria-roledescription={transcriptRoleDescription}
-            className={classNames(activitiesStyleSet + '', transcriptClassNames['basic-transcript__transcript'])}
+            className={transcriptClassNames['basic-transcript__transcript']}
             role="feed"
           >
             {children}
diff --git a/packages/component/src/ChatHistory/ChatHistoryBox.module.css b/packages/component/src/ChatHistory/ChatHistoryBox.module.css
new file mode 100644
index 0000000000..8154872208
--- /dev/null
+++ b/packages/component/src/ChatHistory/ChatHistoryBox.module.css
@@ -0,0 +1,14 @@
+:global(.webchat) .chat-history-box {
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+  position: relative;
+
+  .chat-history-box__toolbar {
+    inset-block-end: 5px;
+    inset-inline-end: 20px;
+    isolation: isolate;
+    position: absolute;
+    z-index: 1;
+  }
+}
diff --git a/packages/component/src/ChatHistory/ChatHistoryBox.tsx b/packages/component/src/ChatHistory/ChatHistoryBox.tsx
index ba35f162a4..0a8873b6f6 100644
--- a/packages/component/src/ChatHistory/ChatHistoryBox.tsx
+++ b/packages/component/src/ChatHistory/ChatHistoryBox.tsx
@@ -1,9 +1,10 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
+import { reactNode, validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
 import React, { memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { object, optional, pipe, readonly, string } from 'valibot';
 
-import { useStyleSet } from '../hooks';
+import styles from './ChatHistoryBox.module.css';
 
 const chatHistoryBoxPropsSchema = pipe(
   object({
@@ -13,14 +14,15 @@ const chatHistoryBoxPropsSchema = pipe(
   readonly()
 );
 
-type ChatHistoryBoxProps = InferInput<typeof chatHistoryBoxPropsSchema>;
+type ChatHistoryBoxProps = InferReactProps<typeof chatHistoryBoxPropsSchema>;
 
 function ChatHistoryBox(props: ChatHistoryBoxProps) {
   const { children, className } = validateProps(chatHistoryBoxPropsSchema, props);
 
-  const [{ chatHistoryBox }] = useStyleSet();
+  // Keeps the "webchat__chat-history-box" class names.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
-  return <div className={classNames('webchat__chat-history-box', className, chatHistoryBox)}>{children}</div>;
+  return <div className={cx(classNames['chat-history-box'], className)}>{children}</div>;
 }
 
 export default memo(ChatHistoryBox);
diff --git a/packages/component/src/ChatHistory/ChatHistoryToolbar.tsx b/packages/component/src/ChatHistory/ChatHistoryToolbar.tsx
index 4e45cdb3b3..c68bf68619 100644
--- a/packages/component/src/ChatHistory/ChatHistoryToolbar.tsx
+++ b/packages/component/src/ChatHistory/ChatHistoryToolbar.tsx
@@ -1,8 +1,10 @@
+import { reactNode, validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
 import React, { memo } from 'react';
-import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+import { object, optional, pipe, readonly } from 'valibot';
+
+import styles from './ChatHistoryBox.module.css';
 
 const { useDirection } = hooks;
 
@@ -13,20 +15,18 @@ const chatHistoryToolbarPropsSchema = pipe(
   readonly()
 );
 
-type ChatHistoryToolbarProps = InferInput<typeof chatHistoryToolbarPropsSchema>;
+type ChatHistoryToolbarProps = InferReactProps<typeof chatHistoryToolbarPropsSchema>;
 
 function ChatHistoryToolbar(props: ChatHistoryToolbarProps) {
   const { children } = validateProps(chatHistoryToolbarPropsSchema, props);
 
   const [direction] = useDirection();
+  // Keeps the "webchat__chat-history-box__toolbar" class name.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
+  // The toolbar is outside of the transcript, which sets its own `dir`, so it needs `dir` for its logical position.
   return (
-    <div
-      className={classNames(
-        'webchat__chat-history-box__toolbar',
-        direction === 'rtl' ? 'webchat__chat-history-box__toolbar--rtl' : ''
-      )}
-    >
+    <div className={classNames['chat-history-box__toolbar']} dir={direction}>
       {children}
     </div>
   );
diff --git a/packages/component/src/ErrorBox.module.css b/packages/component/src/ErrorBox.module.css
new file mode 100644
index 0000000000..2c23eb74b6
--- /dev/null
+++ b/packages/component/src/ErrorBox.module.css
@@ -0,0 +1,31 @@
+:global(.webchat) .error-box {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--webchat__font--primary);
+  margin: 0;
+  max-height: 200px;
+  min-height: 20px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  > :first-child {
+    background-color: #b60000; /* WCAG AAA: Contrast ratio >= 7:1. */
+    color: White;
+    padding: 5px 10px;
+  }
+
+  > :last-child {
+    border-color: #b60000; /* WCAG AAA: Contrast ratio >= 7:1. */
+    border-style: dashed;
+    border-width: 0 2px 2px;
+    margin: 0;
+    overflow-y: auto;
+    padding: 10px;
+
+    > pre {
+      font-family: var(--webchat__font--monospace);
+      font-size: 60%;
+      margin: 0;
+    }
+  }
+}
diff --git a/packages/component/src/ErrorBox.tsx b/packages/component/src/ErrorBox.tsx
index 69bf38ece5..2e6a898faf 100644
--- a/packages/component/src/ErrorBox.tsx
+++ b/packages/component/src/ErrorBox.tsx
@@ -1,13 +1,15 @@
 /* eslint no-console: "off" */
 
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import React, { Fragment, memo, useEffect } from 'react';
-import { object, optional, pipe, readonly, string, unknown, type InferInput } from 'valibot';
+import { object, optional, pipe, readonly, string, unknown } from 'valibot';
 
-import useStyleSet from './hooks/useStyleSet';
 import ScreenReaderText from './ScreenReaderText';
 
+import styles from './ErrorBox.module.css';
+
 const { useLocalizer, useTrackException } = hooks;
 
 /**
@@ -24,7 +26,7 @@ const errorBoxPropsSchema = pipe(
 /**
  * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
  */
-type ErrorBoxProps = InferInput<typeof errorBoxPropsSchema>;
+type ErrorBoxProps = InferReactProps<typeof errorBoxPropsSchema>;
 
 /**
  * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
@@ -32,7 +34,7 @@ type ErrorBoxProps = InferInput<typeof errorBoxPropsSchema>;
 function ErrorBox(props: ErrorBoxProps) {
   const { error, type = '' } = validateProps(errorBoxPropsSchema, props);
 
-  const [{ errorBox: errorBoxStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles, webChatPrefixedClassName);
   const localize = useLocalizer();
   const trackException = useTrackException();
 
@@ -52,7 +54,7 @@ function ErrorBox(props: ErrorBoxProps) {
   return (
     <Fragment>
       <ScreenReaderText text={localize('ACTIVITY_ERROR_BOX_TITLE')} />
-      <div className={errorBoxStyleSet}>
+      <div className={classNames['error-box']}>
         <div>{type}</div>
         {/* The callstack between production and development are different, thus, we should hide it for visual regression test */}
         {error instanceof Error ? (
diff --git a/packages/component/src/Styles/CSSCustomPropertiesContainer.tsx b/packages/component/src/Styles/CSSCustomPropertiesContainer.tsx
index 78a4413720..da52b3f17b 100644
--- a/packages/component/src/Styles/CSSCustomPropertiesContainer.tsx
+++ b/packages/component/src/Styles/CSSCustomPropertiesContainer.tsx
@@ -98,7 +98,8 @@ function CustomPropertiesContainer(props: CustomPropertiesContainerProps, ref: R
       transcriptVisualKeyboardIndicatorStyle,
       transcriptVisualKeyboardIndicatorWidth,
       transitionDuration,
-      transitionEasing
+      transitionEasing,
+      videoHeight
     } = styleOptions;
 
     let bundleStyleProps = '';
@@ -155,6 +156,7 @@ function CustomPropertiesContainer(props: CustomPropertiesContainerProps, ref: R
   ${CustomPropertyNames.FontPrimary}: ${primaryFont};
   ${CustomPropertyNames.FontSizeSmall}: ${fontSizeSmall};
   ${CustomPropertyNames.FontSizeTranscriptTerminator}: ${transcriptTerminatorFontSize}px;
+  ${CustomPropertyNames.HeightVideo}: ${typeof videoHeight === 'number' ? `${videoHeight}px` : videoHeight || 'unset'};
   ${CustomPropertyNames.IconURLExternalLink}: ${markdownExternalLinkIconImage};
   ${CustomPropertyNames.MaxHeightImageBubble}: ${bubbleImageMaxHeight}px;
   ${CustomPropertyNames.MaxHeightSendBoxAttachmentBar}: ${sendBoxAttachmentBarMaxHeight}px;
diff --git a/packages/component/src/Styles/CustomPropertyNames.ts b/packages/component/src/Styles/CustomPropertyNames.ts
index 919b5afb0d..b72deaf992 100644
--- a/packages/component/src/Styles/CustomPropertyNames.ts
+++ b/packages/component/src/Styles/CustomPropertyNames.ts
@@ -53,6 +53,7 @@ const CustomPropertyNames = Object.freeze({
   FontMonospace: '--webchat__font--monospace',
   FontSizeSmall: '--webchat__font-size--small',
   FontSizeTranscriptTerminator: '--webchat__font-size--transcript-terminator',
+  HeightVideo: '--webchat__height--video',
   IconURLExternalLink: '--webchat__icon-url--external-link',
   MaxHeightImageBubble: '--webchat__max-height--image-bubble',
   MaxHeightSendBoxAttachmentBar: '--webchat__max-height--send-box-attachment-bar',
diff --git a/packages/component/src/Styles/StyleSet/Activities.ts b/packages/component/src/Styles/StyleSet/Activities.ts
index d122087312..724a0453e7 100644
--- a/packages/component/src/Styles/StyleSet/Activities.ts
+++ b/packages/component/src/Styles/StyleSet/Activities.ts
@@ -1,3 +1,8 @@
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/BasicTranscript.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createActivitiesStyle() {
   return {
     margin: 0,
diff --git a/packages/component/src/Styles/StyleSet/AudioAttachment.ts b/packages/component/src/Styles/StyleSet/AudioAttachment.ts
index 33ae3ad10d..2315408901 100644
--- a/packages/component/src/Styles/StyleSet/AudioAttachment.ts
+++ b/packages/component/src/Styles/StyleSet/AudioAttachment.ts
@@ -1,5 +1,10 @@
 import CSSTokens from '../CSSTokens';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function AudioAttachment() {
   return {
     // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons.
diff --git a/packages/component/src/Styles/StyleSet/AudioContent.ts b/packages/component/src/Styles/StyleSet/AudioContent.ts
index d8b8dc6a2a..f8c393ce9a 100644
--- a/packages/component/src/Styles/StyleSet/AudioContent.ts
+++ b/packages/component/src/Styles/StyleSet/AudioContent.ts
@@ -1,3 +1,8 @@
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function AudioContent() {
   return {
     width: '100%'
diff --git a/packages/component/src/Styles/StyleSet/ChatHistoryBox.ts b/packages/component/src/Styles/StyleSet/ChatHistoryBox.ts
index fe94c5209a..2394d38047 100644
--- a/packages/component/src/Styles/StyleSet/ChatHistoryBox.ts
+++ b/packages/component/src/Styles/StyleSet/ChatHistoryBox.ts
@@ -1,3 +1,8 @@
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/ChatHistory/ChatHistoryBox.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createChatHistoryBoxStyleSet() {
   return {
     '&.webchat__chat-history-box': {
diff --git a/packages/component/src/Styles/StyleSet/ErrorBox.ts b/packages/component/src/Styles/StyleSet/ErrorBox.ts
index 16c9cc90cb..e8203ab429 100644
--- a/packages/component/src/Styles/StyleSet/ErrorBox.ts
+++ b/packages/component/src/Styles/StyleSet/ErrorBox.ts
@@ -1,5 +1,10 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/ErrorBox.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createErrorBoxStyle({ monospaceFont, primaryFont }: StrictStyleOptions) {
   return {
     // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons.
diff --git a/packages/component/src/Styles/StyleSet/ImageAvatar.ts b/packages/component/src/Styles/StyleSet/ImageAvatar.ts
index 59735b438a..c542712552 100644
--- a/packages/component/src/Styles/StyleSet/ImageAvatar.ts
+++ b/packages/component/src/Styles/StyleSet/ImageAvatar.ts
@@ -1,5 +1,10 @@
 import CSSTokens from '../CSSTokens';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Avatar/ImageAvatar.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createImageAvatarStyle() {
   return {
     alignItems: 'center',
diff --git a/packages/component/src/Styles/StyleSet/VideoAttachment.ts b/packages/component/src/Styles/StyleSet/VideoAttachment.ts
index 34f3072f23..d8365f6d62 100644
--- a/packages/component/src/Styles/StyleSet/VideoAttachment.ts
+++ b/packages/component/src/Styles/StyleSet/VideoAttachment.ts
@@ -1,5 +1,10 @@
 import CSSTokens from '../CSSTokens';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createVideoAttachmentStyle() {
   return {
     // Same corners as the bubble, which clips the player.
diff --git a/packages/component/src/Styles/StyleSet/VideoContent.ts b/packages/component/src/Styles/StyleSet/VideoContent.ts
index 9c23dcda52..a0b29099e9 100644
--- a/packages/component/src/Styles/StyleSet/VideoContent.ts
+++ b/packages/component/src/Styles/StyleSet/VideoContent.ts
@@ -1,5 +1,10 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createVideoContentStyle({ videoHeight }: StrictStyleOptions) {
   return {
     height: videoHeight,
diff --git a/packages/component/src/Styles/StyleSet/VimeoContent.ts b/packages/component/src/Styles/StyleSet/VimeoContent.ts
index 02e2764862..66a8c581c6 100644
--- a/packages/component/src/Styles/StyleSet/VimeoContent.ts
+++ b/packages/component/src/Styles/StyleSet/VimeoContent.ts
@@ -1,5 +1,10 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createVimeoContentStyle({ videoHeight }: StrictStyleOptions) {
   return {
     border: 0,
diff --git a/packages/component/src/Styles/StyleSet/YouTubeContent.ts b/packages/component/src/Styles/StyleSet/YouTubeContent.ts
index 27cfd14749..e4d0dd20a1 100644
--- a/packages/component/src/Styles/StyleSet/YouTubeContent.ts
+++ b/packages/component/src/Styles/StyleSet/YouTubeContent.ts
@@ -1,5 +1,10 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
+/**
+ * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+ * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createYouTubeContentStyle({ videoHeight }: StrictStyleOptions) {
   return {
     border: 0,
diff --git a/packages/component/src/Styles/createStyleSet.ts b/packages/component/src/Styles/createStyleSet.ts
index 2d2508d368..4cd8ea917e 100644
--- a/packages/component/src/Styles/createStyleSet.ts
+++ b/packages/component/src/Styles/createStyleSet.ts
@@ -57,6 +57,11 @@ export default function createStyleSet(styleOptions: StyleOptions) {
   const strictStyleOptions = normalizeStyleOptions(styleOptions);
 
   return Object.freeze({
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/BasicTranscript.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     activities: createActivitiesStyle(),
     /**
      * @deprecated Not used for rendering since 4.19.0 (PR #5670), customizing it has no effect.
@@ -70,7 +75,17 @@ export default function createStyleSet(styleOptions: StyleOptions) {
      * This style set will be removed on or after 2028-10-16.
      */
     activityCopyButton: createActivityCopyButtonStyle(),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     audioAttachment: createAudioAttachmentStyle(),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     audioContent: createAudioContentStyle(),
     autoResizeTextArea: createAutoResizeTextAreaStyle(strictStyleOptions),
     avatar: createAvatarStyle(strictStyleOptions),
@@ -106,9 +121,19 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     carouselFlipper: createCarouselFlipper(strictStyleOptions),
     connectivityNotification: createConnectivityNotification(strictStyleOptions),
     dictationInterims: createDictationInterimsStyle(strictStyleOptions),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/ErrorBox.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     errorBox: createErrorBoxStyle(strictStyleOptions),
     errorNotification: createErrorNotificationStyle(strictStyleOptions),
     fileContent: createFileContentStyle(strictStyleOptions),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Avatar/ImageAvatar.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     imageAvatar: createImageAvatarStyle(),
     initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
     microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
@@ -132,14 +157,39 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     typingAnimation: createTypingAnimationStyle(strictStyleOptions),
     typingIndicator: createTypingIndicatorStyle(strictStyleOptions),
     uploadButton: createUploadButtonStyle(strictStyleOptions),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     videoAttachment: createVideoAttachmentStyle(),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     videoContent: createVideoContentStyle(strictStyleOptions),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     vimeoContent: createVimeoContentStyle(strictStyleOptions),
     warningNotification: createWarningNotificationStyle(strictStyleOptions),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Attachment/MediaAttachment.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     youTubeContent: createYouTubeContentStyle(strictStyleOptions),
 
     // Following styles follows new house rules:
     // - Use CSS var instead of strictStyleOptions
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/ChatHistory/ChatHistoryBox.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     chatHistoryBox: createChatHistoryBoxStyleSet(),
     /**
      * @deprecated Not used for rendering since 4.19.0 (PR #5670), customizing it has no effect.