From 12110b8903b1612083288f63071987982f7d0048 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Thu, 5 Nov 2026 12:43:55 -0800
Subject: [PATCH 1/3] Convert chat history box, image avatar, error box,
 transcript list and media attachments to CSS modules

- 10 option-free style set entries move to CSS modules with webchat__ class names
  (useStyles + webChatPrefixedClassName); the 6 media entries share MediaAttachment.module.css
- videoHeight reaches CSS as --webchat__height--video
- activities: margin and padding-inline only, TranscriptFocus keeps padding-block
- Scroll-to-end toolbar: inset-inline-end + its own dir, --rtl class dropped
- @deprecated (since 4.19.3, removal on or after 2028-10-16) on the 10 entries
- New tests: rtl/scrollToEndButton.html, styleOptions/videoHeight.html
---
 __tests__/html2/rtl/scrollToEndButton.html    |  61 +++++++++++++++
 .../rtl/scrollToEndButton.html.snap-1.png     | Bin 0 -> 13846 bytes
 __tests__/html2/styleOptions/videoHeight.html |  59 ++++++++++++++
 .../styleOptions/videoHeight.html.snap-1.png  | Bin 0 -> 6054 bytes
 .../AnimationCardContent.module.css           |   2 +-
 .../src/Attachment/AudioAttachment.js         |   8 +-
 .../component/src/Attachment/AudioContent.tsx |  14 ++--
 .../src/Attachment/HTMLVideoContent.tsx       |  13 +--
 .../src/Attachment/MediaAttachment.module.css |  74 ++++++++++++++++++
 .../src/Attachment/VideoAttachment.js         |  15 ++--
 .../src/Attachment/VideoContent.spec.tsx      |   4 +-
 .../component/src/Attachment/VimeoContent.tsx |  13 +--
 .../src/Attachment/YouTubeContent.tsx         |  13 +--
 .../src/Avatar/ImageAvatar.module.css         |  13 +++
 packages/component/src/Avatar/ImageAvatar.tsx |  26 +++---
 .../component/src/BasicTranscript.module.css  |   3 +
 packages/component/src/BasicTranscript.tsx    |   4 +-
 .../src/ChatHistory/ChatHistoryBox.module.css |  14 ++++
 .../src/ChatHistory/ChatHistoryBox.tsx        |  16 ++--
 .../src/ChatHistory/ChatHistoryToolbar.tsx    |  20 ++---
 packages/component/src/ErrorBox.module.css    |  31 ++++++++
 packages/component/src/ErrorBox.tsx           |  14 ++--
 .../Styles/CSSCustomPropertiesContainer.tsx   |   4 +-
 .../src/Styles/CustomPropertyNames.ts         |   1 +
 .../src/Styles/StyleSet/Activities.ts         |   5 ++
 .../src/Styles/StyleSet/AudioAttachment.ts    |   5 ++
 .../src/Styles/StyleSet/AudioContent.ts       |   5 ++
 .../src/Styles/StyleSet/ChatHistoryBox.ts     |   5 ++
 .../component/src/Styles/StyleSet/ErrorBox.ts |   5 ++
 .../src/Styles/StyleSet/ImageAvatar.ts        |   5 ++
 .../src/Styles/StyleSet/VideoAttachment.ts    |   5 ++
 .../src/Styles/StyleSet/VideoContent.ts       |   5 ++
 .../src/Styles/StyleSet/VimeoContent.ts       |   5 ++
 .../src/Styles/StyleSet/YouTubeContent.ts     |   5 ++
 .../component/src/Styles/createStyleSet.ts    |  50 ++++++++++++
 35 files changed, 438 insertions(+), 84 deletions(-)
 create mode 100644 __tests__/html2/rtl/scrollToEndButton.html
 create mode 100644 __tests__/html2/rtl/scrollToEndButton.html.snap-1.png
 create mode 100644 __tests__/html2/styleOptions/videoHeight.html
 create mode 100644 __tests__/html2/styleOptions/videoHeight.html.snap-1.png
 create mode 100644 packages/component/src/Attachment/MediaAttachment.module.css
 create mode 100644 packages/component/src/Avatar/ImageAvatar.module.css
 create mode 100644 packages/component/src/ChatHistory/ChatHistoryBox.module.css
 create mode 100644 packages/component/src/ErrorBox.module.css

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 0000000000000000000000000000000000000000..734c851112236de0da1fa65547747f3ea82a9672
GIT binary patch
literal 13846
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

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..09005d6e11b5b647b2c70f402be4f2b71966d48d
GIT binary patch
literal 6054
zcmeI0SzOcCw#V^Mp_NHRL@<b!7PSr((->y3Dh>#U3^ETQLxapi7!#}rPJ}8V$fzI$
zNJs<>2$)1c0}27uB*>J=jKqKtk^q6^Y-mr<r}y56`*0r4Lm&VD{~p#_d;Qn%yY}_7
zHYb!eXl{^^kx@Ez^4K{UnRS6OGXF^a`XAtpS#0zd8JUeTr;Z(Qh|T{z7<bFVZ>4qi
z{kfQSCyTpDn>Kdu$t&Jp3@ct|xAS12jDER(V6ndLaO#bwlZ@mW5AFn_l5Z%iw-4J}
z?i{?S_`#NA>s(UmE~)MLFeaks$42_UiJF%8FDnoVmP!mo9R<eqkzIUBSDXzN>bE#I
zrety9wCu*s$~$!-7H15SbHZfwhh#1^uX~vyd+i(fjjDft_&X$jC&S;r!QYkPzqux+
zZ^Zbu-#g&`H0<@A@0A|M<Q(#Q^W>NJy0(SS?ugI0QW6(Wo0*^`%N6$6kjF3N=zTue
zf*8cd*8?&A!Qf$b_|?s=2l^1WDyN8|tmCB&cVAwG+*w3hM(iD*^#6bmRNro?p7VNE
zlj?$#)Et9s_wfH+ZS2)1Z(i>9qpejKL&wXMZC|f`>bNDlbYW-IH}dnZEG9QAua5a1
z(ycE0(8}O}p4`vbVT!{ay$vww2ZxeZXXvE)_SX0*;RT8*2cc`D!HP-x8yh=*AFk25
zQ&~CHm-hBAi@^REsekRtm7$#Q)!qE6G{4T=ZR@$HWvSfyuGDI~Gq=i7)@Mtz4{crg
z<sWmvLM(%Am<nXJ#+qq|M%MQChg>mm^fB;<0Nej+rNh;suTNx$S$F}<ez&z*|C+s8
zst&}XdCkI<HAmASnD4Fb{S>5x{XsDR*r4<8g>%Axgg`NWx}|?jL%v0SWb%Iv_+$08
zMe*T^!(eCUKZk)$!L&`7f7|eXK4$yg_hxw@2c;4bmHrgE8b3Mx5$A&7hOv7JTlass
zaPvT+cwmAJlBS-6630qnNX*2Ym!8ei^b&g85xy+EONPnZNhpnW7}6g~UAep0Ub5JQ
zKCJrYaQ`L#gt;_sq5!!gO+DGnI`42Wbw!wG80k;m!xWi{2Kc>QDB(auq&9ka*593B
z5!<qz{djRauO3c(Huna-Jfcmi<`SB0ip<D^i_c|M+!JSC(JR9~UY4hfey>-No~Dgj
z=%GrY*Ea8pr9o{>W?!01W;3!q<3IUkn6hr&u|C{8dLT5;%CVxb-x@yXpvSynTjSa3
zi!m%?mux-YI^V=uA&9C>Mt?i1Y&zc^pK?_}T{61cyaAZeRK)Bw@RZDDbHZAbq`;|0
z?aJJIBs)$oaY&&kcKEtcppB`3(YI~xxYyFV?83P5`%Rx~+LsskUBEeF;@Cc(1WDl+
z>@G@-$SN=7ou@7_wIyHDl&)(M#M4bPk4|Mytw+dPCP8sp@>)^dj^{mKW_*kht*$?$
zDPC8))I-g^49ymn<I;tXD`X=|(hs{js%Em`K69h5N4`Kn#092R>f+;i@pkkBdJUs@
zK(GiJN})+yH*V?DusYS*$7m=;)pKR)ymX<}e472xlUh&a1xJo|7*6Czt{!P+2U)~+
z%e)q^c|t3iaa`SFzMi^LH6FdYAnKh)K)#*)@NcceS@Q(p=Uv8B@!$;03tMcjZzNsj
zo6laiO`JTcJ;nB^r5_ek*AWv2xj)!)7HIGgvVf%l_0NxZv$tp&1XEa@!EEwNdR1vl
zujV$u=CPD&c}UoEBQE|u8*g|?D-)Jp^{}SLGr{r5lz8A4IcDboTDp=YnU>_qF=)SF
z3t0F@Xzqr|B`%Q@g8ybH5I&_vp`B5CL~|rF;kHK|ss5@(l6mY*!$hIKH!XJb_6et~
zsUW6tVlV?vz|`g{JM5fN7K}}OsnlD+ny*x_AAnP(GQN5w>@oHF@~b+-G{{7><5?27
z+=bH$5@<TUm0u)X&Xs3Ls450re688i+YHpGj&?<;jVVe?pR+s;-xmPGEq#<XcNP&(
zb#FQWv9rTfI2{;guHbY?)Ez>4C@Rv_hTg21dR{?8Z8E0mT{q5>yeGP|hF90`nZP5F
zI;!8>7&Dg%HX1aacXmX<+`5+ZYgy<hyy?QnD<g6DezF+~WNw$FnJ*7%T7lFd7S3r#
z7xc0qLm1=fz|hV-_)L0eqVLs;PGy9gTj;nTh5Mu!Q^|%BWpSNmQ{&L0#g0nLQ1oEK
zwBe}U0zSYrs8tIIiMY4$Y{GPgBA&*@olfBA1`#TBn##%q6p?_4CXXNDaR``kHkKi5
zVhad;2I9}P3C8t6CUUtpPmdSPo{uiCPh-<}-DJ6ilA}o@gr@1r7VivGVfo%u)?el7
zJGH)E&3XTYP1SQ57!nX4$~cTzk>0LHeP+{@r+>IE+xL8;c6l!&yj4pCa`dUc1Xh>l
zo^)j@oh-s53@bHq-Y$zd(h%%6`t!ciRcGg??K!P|_VBdNM87&Ci?rqS+$OKuJG<J8
z9rM$6#Fry$zkR3p9e(p!J|-rBd^ARdlY5<UMI~+yCRk|EmW1{CWy4HNvp#M(k&x@6
z$2CYP!DMC?sit>nybqiDu92;kce&yOsYJtf#AsyO+(WFejpr*gt4G#~1A`yOCrtSp
zr$G+gcR&0<d|mL?Ra{<eI(mQ*!pgM|4QP7nrpEom#x8OONP`4CW8l$NcZ}ImpnB4Y
zp9bp7>!}`lg1uIZZfm54enOxOW71tA9^o`Q^)A$WiMB`hD>d6iA1=AHDaIq4$nA0!
ze>U?zj(l$o=ka<$$qAyIg>#iE>k`D=a76Q=(fbTUo0u)4?DBe21{EZe^I(ny^8~C_
zRc`7Nv0L;(`>x7CLT0Y(xeCL!eV(&7!ec|-q4-ByrJlF_KQf8DT|HFVNv++a!gq@K
zi)Np+oFs3noqQ`Xycl1)3nZB7`n;YZsB*m(SeQzc2#7FPmHmM0!}7f78*Vyv@MCWE
z0})mp5i_QIBR7H?z0pMvL7qU0dSa&~>w^l4JM|EkecSBZZfcUyGh`8={R#c~lgBpa
zrl0XUr<2Az3*7dVk!|s6-LB(-*dIvWxns>k(c=DAzV?3WK%g{}!79KAoZZA;`t#Fq
zNmjVF5$H&H`;_3S*_X>ICV!Y4dXo2T`$CS%u<1QBC35(=(9d4rS2h<^*fOms^Pd_(
zT@3}=)aY#&(9i^uJjhGj*Ldq4YI0#DgJ?>c?dM494)!sV5JyHoUQuC#GJ{@h_hLz0
zYW<m6cUzQ=@xq?tzX@1wL{URki;DTPsk&ifXTRcU7xiTBPJ$J51}zoi*7MS)mTY(x
z>DtR5<ps&nMY%{uX=WoU^2K^}hNKbUX7wYsFuoEoPfUG5m)Zwltc+(Yn0Fg3oVFW(
zeth)6O{XKYiSI6al6Ia+Gv?gfT`40YZ@YRIaOgZZ6PDzC%DaOTrq((rI4zN8$Dw;I
z539pcEN8uZRz(ID6?Bbt-B!y{-80t5SU1R{wrq!h?TP&^AV1vFgOOvF6kkx6DDLM_
zBuiYba`f{8pjoXu5-yP!dzb^7{G*z7J?;Trg)5Ijy`l{pwnlMFGC<OLY+LFGFniDD
z4bGsD1+|R3k0_J+tq^<lMO(AQ(Rj^hk2+U-Wcl&*+?RFSimKH>VDlqRA4N}jU<sZ*
ziUg0J5$Lm}8$92)yt=8*iF$86QtQtk+-5d4f5H}d!nx%^*dkC)y7JibW&Ymen6|zA
z*!Z!1UcH`<72_;~1(0!J<>`W~{FuI9U`GNi9j&doHPbi5K?A}%?oA3PS}wC@*-C+_
zc9Hjn%p7#6Nj|CNa56i_uM{)03u*8%Syr>KP*V}e+b`5im>YiY#e%M$S2cYN!&Huz
z4s7GpmZ!+@DpBXaK{8x+cbgif6gL?#6wmK9s@k45@nann!!}RM+2cOr9L&@>UG*(f
z!9k(eG2NAr3lC)*NPp|krp%YBiM-$sT$m_fZ4vVVx~bZAKZa2GYx724O*|bQ(3x*2
z3HS=PXi<Ku7ijGJTk7UcU0*>%CUlRkVeT3<ma+drg5R|6v~k>q3HulOVvckG;QaG(
z4Ow9k2CT}WPf?Z4Vas8Wf1s#lzeXB7jI~YmAS6@Q8bRyG=`hd@(YuQoIy0cr>b&LR
zd;rAONT_&HxAFRB%x?P2@_OI90g!!?iH}P7O}a}JZzk(}e+qyES-@83yu|(B+k<(l
z()tjTRiL3l6q@t$PzZG?{~PQI9k1H?>v{$Mj+}4-^E|vn6LVXd%^!Ps-A&1v&+x|Y
zYB2d}xCJA*Rnn!WsM?-Far%H64lfAbudp(YHRnkVYk8|xzHmMo;S%^VO>3;Znpx+i
z5~%C{uyv>>5qiYBz=(7|u+jdOu%36g<l<=9F|Up>XO@HNwD*p|bBg*lQkhFHRbC)M
zdJ$;Dn6}N9$fxP?$1LM$vv<wc$L6MPNBZguw(+%b>YG@KIO(ktoUwS@O??AhsIoUx
zlk2nZ4@j2_5Bm|)YWY_@{|l8XC-3@K3$b<;Htw)~wJ*6JzII8blj8g4?p}HA#4n*J
zex4jFB&e(6&8{@aIa&0WNMi`S;9Pg9xB03<_I{UlGC^sTw6%`RvsZf2?DZX$-)esE
zdj7{HTQ#LQoC)X;wKzr!e+gIuwJ>DOA&`ZANy6TM6+usEGOTSBH68WACoM_BFX8~E
z&g<^D4_yUkIp<n@<kBasD6Xd=av}s^dsc?R!KdCs%~t`9TJe@wX3%J$fjp{IQqPX(
zmS%ez0i5F!sVL9_t|I$YP)GWc>44Y!p8UeQvdUgX0Qv9fd7;L#&U*rxijD+Ci(dht
z-zK7n$T%Wp32;M$h@HTFq1QNByvU!ZCoMIrQ^I;YkUT(?q$J7Wgq};yMSz&W$&MEp
zECY}^`bkUkn*E?>#a(nz#+V8}0A8I=QMLJSG1EF8nP(CgK|ivJ7072JTA(*w`W#@M
z(0xQc7~rH@3FuJ-j>LGTs;x;lh)P#3ENGQF<d|5K`R=3JL!J)t>N#x1<p*|IlTSx5
zLCKC-qJ0+X5@>xvL1^H28t+qT1p(XYc1eH0H0a9=kOz`}^b`ZM1@o8Xcf>9XrQsAn
z<_GfdWsDPC|5B_3Z_J5kKhPD|8Hqp-@&K~46Zv#*t)@3qgQU@VYIlJ{fJU}^#B0!N
ztTH<psHWHJ0^A`U4X`~T_1y7tUar#<V>ml@<b-z86A3;tKViCIVzqRl#Juy++kNHG
z-1skY&ZU+);fy!0w2%XDLwer)oRIWrd<(g#qH63`Oo^F;x;q=_ej(^M_~Ue3=H0ST
zUc(tREZHSGP~@N^(f0<8edQ}mOp}M|I;V%5n(eT1u<PaZD<CKj>yRL6`dq9Ykx;#g
z`B4MF0aA6;r+1B?&+RKCk-@1m1|E)Y0gP+&eOZyTz2uNx#()HQ#Ie}*YB2XP(9@ot
zDrjzWk4L?e1tPlS-pQbnbxswVY#b3|HSyuVn~*1OEu)3igE9TgPFWR`$1FYEmgq<#
zS=cyB+m71=9G~w(OZct}iC<pGBL~7;g&R(;#IalgK*M1t*t<{qGbuHG_LVxC7v!}n
z**_@pR)T1DH_HSNL{p(fG`OLtt0XdIaCfC`^4Au3PyB!GtfeY4GEylDDLoBt+vQfJ
bRaRzmr24sBoqML>jm)XzHpd7*d;j`R-jN~&

literal 0
HcmV?d00001

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.

From e457e217ccccc2798eb66c2ab06ecb3043da9839 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Thu, 5 Nov 2026 14:32:22 -0800
Subject: [PATCH 2/3] Add the changelog fragment

---
 .changelog/6024-fix-css-modules-option-free-styles-2.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .changelog/6024-fix-css-modules-option-free-styles-2.md

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..c34068f3a2
--- /dev/null
+++ b/.changelog/6024-fix-css-modules-option-free-styles-2.md
@@ -0,0 +1,3 @@
+### 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)

From 02d3df8b6cbe330f7ca5cdedd1c273e072ffc72f Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Thu, 5 Nov 2026 14:32:45 -0800
Subject: [PATCH 3/3] Add the Changed entry to the changelog fragment

---
 .changelog/6024-fix-css-modules-option-free-styles-2.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.changelog/6024-fix-css-modules-option-free-styles-2.md b/.changelog/6024-fix-css-modules-option-free-styles-2.md
index c34068f3a2..5831ed8b46 100644
--- a/.changelog/6024-fix-css-modules-option-free-styles-2.md
+++ b/.changelog/6024-fix-css-modules-option-free-styles-2.md
@@ -1,3 +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)