From bc3c00abb00c623482eedb6cb87f84dd846adbb7 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 09:50:51 -0700
Subject: [PATCH 01/16] Convert the tooltip to CSS Modules and style it in
 Fluent through the CSS module theme

The tooltip keeps its webchat__tooltip class names through webChatPrefixedClassName.
---
 .../src/Tooltip/private/Tooltip.module.css    | 67 +++++++++++++++++++
 .../component/src/Tooltip/private/Tooltip.tsx | 33 ++++++---
 .../src/components/theme/Theme.module.css     |  2 +-
 3 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 packages/component/src/Tooltip/private/Tooltip.module.css

diff --git a/packages/component/src/Tooltip/private/Tooltip.module.css b/packages/component/src/Tooltip/private/Tooltip.module.css
new file mode 100644
index 0000000000..402fedb3fc
--- /dev/null
+++ b/packages/component/src/Tooltip/private/Tooltip.module.css
@@ -0,0 +1,67 @@
+/* The tooltip positions itself against its parent, which can be any element. The hashed class name scopes this rule. */
+:has(> .tooltip) {
+  position: relative;
+
+  /* For <button>, the tooltip will be placed inside <button>. */
+  /* For <input type="checkbox/radio">, the tooltip will be placed after <input>. */
+  &:is(:hover, :focus-visible, :active) > .tooltip,
+  &:has(:is(:hover, :focus-visible, :active)) > .tooltip {
+    opacity: 1;
+    transition-delay: 400ms;
+  }
+}
+
+:global(.webchat) .tooltip {
+  --webchat__tooltip-tip-size: 8.484px;
+  --webchat__tooltip-background: #fff;
+  --webchat__tooltip-anchor-inline-start: 50%;
+
+  background: var(--webchat__tooltip-background);
+  border-radius: 4px;
+  color: #242424;
+  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.14)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.12));
+  font-size: 12px;
+  inline-size: max-content;
+  isolation: isolate;
+  line-height: 16px;
+  margin: 0;
+  max-inline-size: 30ch;
+  opacity: 0;
+  padding: 6px 12px;
+  pointer-events: none;
+  position: absolute;
+  text-align: start;
+  transition: opacity 0.2s ease;
+  user-select: none;
+  will-change: filter;
+
+  &::after {
+    background: inherit;
+    color: currentColor;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+
+  &.tooltip--block-start,
+  &.tooltip--block-end {
+    text-align: center;
+  }
+
+  &.tooltip--block-start {
+    inset-block-end: calc(100% + 7px);
+    inset-inline-start: 50%;
+    transform: translate(calc(-1 * var(--webchat__tooltip-anchor-inline-start)), 0);
+
+    &::after {
+      border: 1px solid var(--webchat__tooltip-background);
+      border-bottom-left-radius: 2px;
+      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+      height: var(--webchat__tooltip-tip-size);
+      inset-block-start: calc(100% - 6px);
+      inset-inline-start: calc(var(--webchat__tooltip-anchor-inline-start) - var(--webchat__tooltip-tip-size) / 2);
+      transform: rotate(-45deg);
+      width: var(--webchat__tooltip-tip-size);
+    }
+  }
+}
diff --git a/packages/component/src/Tooltip/private/Tooltip.tsx b/packages/component/src/Tooltip/private/Tooltip.tsx
index 6cdc2bb3b4..8dc1790ee8 100644
--- a/packages/component/src/Tooltip/private/Tooltip.tsx
+++ b/packages/component/src/Tooltip/private/Tooltip.tsx
@@ -1,19 +1,31 @@
+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, type ReactNode } from 'react';
-import { useStyleSet } from '../../hooks';
+import React, { memo } from 'react';
+import { literal, object, optional, pipe, readonly, string } from 'valibot';
 
-type TooltipProps = Readonly<{
-  children: ReactNode;
-  className?: string | undefined;
-  position?: 'block-start';
-}>;
+import styles from './Tooltip.module.css';
 
-function Tooltip({ children, className, position = 'block-start' }: TooltipProps) {
-  const [{ tooltip: tooltipClassName }] = useStyleSet();
+const tooltipPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    position: optional(literal('block-start'))
+  }),
+  readonly()
+);
+
+type TooltipProps = InferReactProps<typeof tooltipPropsSchema>;
+
+function Tooltip(props: TooltipProps) {
+  const { children, className, position = 'block-start' } = validateProps(tooltipPropsSchema, props);
+
+  // Keeps the "webchat__tooltip" class names.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
 
   return (
     <span
-      className={cx('webchat__tooltip', className, tooltipClassName, `webchat__tooltip--${position}`)}
+      className={cx(classNames['tooltip'], className, classNames[`tooltip--${position}`])}
       /* @ts-expect-error: inert unknown attribute */
       inert="true"
       role="tooltip"
@@ -24,3 +36,4 @@ function Tooltip({ children, className, position = 'block-start' }: TooltipProps
 }
 
 export default memo(Tooltip);
+export { tooltipPropsSchema, type TooltipProps };
diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css
index ebb0305177..d21e6f474b 100644
--- a/packages/fluent-theme/src/components/theme/Theme.module.css
+++ b/packages/fluent-theme/src/components/theme/Theme.module.css
@@ -300,7 +300,7 @@
 }
 
 /* Tooltip */
-:global(.webchat-fluent).theme :global(.webchat__tooltip) {
+:global(.webchat-fluent).theme .tooltip {
   --webchat__tooltip-background: var(--tooltip-background, var(--webchat-colorNeutralBackground1));
 
   color: var(--webchat-colorNeutralForeground1);

From 1919d153e68f10ab0b5a40470b9365c53066dbc7 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 09:52:55 -0700
Subject: [PATCH 02/16] Convert the modal dialog to CSS Modules and style it in
 Fluent through the CSS module theme

The dialog keeps its webchat__modal-dialog class names through webChatPrefixedClassName,
so ViewCodeDialog.module.css and tests still select them.
---
 .../Text/private/ViewCodeDialog.module.css    |   5 +-
 .../ModalDialog/private/Popover.module.css    | 104 +++++++++++++
 .../providers/ModalDialog/private/Popover.tsx | 114 ++++++++------
 .../src/components/theme/Theme.module.css     | 124 +---------------
 .../private/fluentCSSModuleTheme.module.css   | 139 ++++++++++++++++--
 5 files changed, 304 insertions(+), 182 deletions(-)
 create mode 100644 packages/component/src/providers/ModalDialog/private/Popover.module.css

diff --git a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
index 10dc6c50e4..0b94a6e997 100644
--- a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
+++ b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
@@ -1,4 +1,5 @@
-:global(.webchat) .view-code-dialog {
+/* The modal dialog rules (Popover.module.css) can come later in the stylesheet: out-specify them instead of relying on order. */
+:global(.webchat) .view-code-dialog:global(.webchat__modal-dialog) {
   box-sizing: border-box;
   display: grid;
   height: 100%;
@@ -8,7 +9,7 @@
   place-items: center;
 }
 
-:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__box) {
+:global(.webchat) .view-code-dialog:global(.webchat__modal-dialog) :global(.webchat__modal-dialog__box) {
   display: flex;
   flex-direction: column;
   max-height: 100%;
diff --git a/packages/component/src/providers/ModalDialog/private/Popover.module.css b/packages/component/src/providers/ModalDialog/private/Popover.module.css
new file mode 100644
index 0000000000..14242398d9
--- /dev/null
+++ b/packages/component/src/providers/ModalDialog/private/Popover.module.css
@@ -0,0 +1,104 @@
+/* TODO: Add a dark theme once we defined the link color and stuff for Markdown. */
+:global(.webchat) .modal-dialog {
+  font-family: var(--webchat__font--primary);
+  max-height: calc(100% - 32px);
+  max-width: calc(100% - 32px);
+  width: 100%;
+
+  @media (forced-colors: none) {
+    background-color: transparent;
+    border: 0;
+  }
+
+  /* Assume the content is being prepared, so we hide the whole dialog until content appears in the DOM. */
+  /* Use opacity to still be able to set focus on the first available control (close button). */
+  &:has(.modal-dialog__body:empty) {
+    opacity: 0;
+  }
+
+  .modal-dialog__box {
+    border-radius: 2px;
+    overflow: hidden;
+    margin: auto;
+
+    @media screen and (max-width: 639px) {
+      max-width: unset;
+    }
+
+    @media screen and (min-width: 640px) {
+      max-width: 60%;
+      min-width: calc(640px - 2em - 6px); /* Browser natively do "100% - 2em - 6px". */
+      width: 60%;
+    }
+
+    @media (forced-colors: none) {
+      /* From Power BI: */
+      /* box-shadow: 0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%); */
+      /* From Fluent (depth-16 for teaching callouts): */
+      /* box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12); */
+      background-color: White;
+      box-shadow:
+        0px 8px 16px rgba(0, 0, 0, 0.14),
+        0px 0px 2px rgba(0, 0, 0, 0.12);
+    }
+
+    @media (forced-colors: active) {
+      /* In high-contrast mode, we use "outline" instead of "box-shadow". */
+      outline-color: ButtonBorder;
+      outline-style: solid;
+      outline-width: 4px;
+    }
+  }
+
+  .modal-dialog__close-button-layout {
+    float: right;
+    padding: var(--webchat__padding--regular);
+  }
+
+  .modal-dialog__close-button {
+    height: 30px;
+    width: 30px;
+    padding: 0;
+
+    --webchat__component-icon--size: 16px;
+
+    @media (forced-colors: none) {
+      appearance: none;
+      background-color: transparent;
+      border-color: transparent;
+      border-radius: 4px;
+      border-style: solid;
+      border-width: 2px;
+      color: #999;
+      outline: 0;
+    }
+  }
+
+  .modal-dialog__close-button:focus {
+    @media (forced-colors: none) {
+      border-color: black;
+
+      &:active {
+        background-color: #edebe9; /* neutralLight (gray30) */
+      }
+
+      &:not(:active):hover {
+        background-color: #f3f2f1; /* neutralLighter (gray20) */
+      }
+    }
+  }
+
+  .modal-dialog__close-button-icon {
+    @media (forced-colors: none) {
+      color: #323130; /* neutralPrimary (gray160) */
+    }
+
+    @media (forced-colors: active) {
+      color: currentcolor;
+    }
+  }
+
+  .modal-dialog__body {
+    margin: calc(var(--webchat__padding--regular) * 2);
+  }
+}
diff --git a/packages/component/src/providers/ModalDialog/private/Popover.tsx b/packages/component/src/providers/ModalDialog/private/Popover.tsx
index 16d02e88aa..df46d23684 100644
--- a/packages/component/src/providers/ModalDialog/private/Popover.tsx
+++ b/packages/component/src/providers/ModalDialog/private/Popover.tsx
@@ -1,65 +1,81 @@
+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 classNames from 'classnames';
-import React, { memo, type PropsWithChildren, useCallback, useLayoutEffect, useRef } from 'react';
+import cx from 'classnames';
+import React, { memo, useCallback, useLayoutEffect, useRef } from 'react';
+import { custom, function_, is, object, optional, pipe, readonly, string } from 'valibot';
 
 import { ComponentIcon } from '../../../Icon';
-import useStyleSet from '../../../hooks/useStyleSet';
+
+import styles from './Popover.module.css';
 
 const { useLocalizer } = hooks;
 
-type Props = Readonly<
-  PropsWithChildren<{
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    className?: string;
-    onDismiss?: () => void;
-  }>
->;
+const modalDialogPropsSchema = pipe(
+  object({
+    'aria-label': optional(string()),
+    'aria-labelledby': optional(string()),
+    children: optional(reactNode()),
+    className: optional(string()),
+    onDismiss: optional(custom<() => void>(value => is(function_(), value)))
+  }),
+  readonly()
+);
+
+type ModalDialogProps = InferReactProps<typeof modalDialogPropsSchema>;
 
-const ModalDialog = memo(
-  ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, onDismiss }: Props) => {
-    const [{ modalDialog: modalDialogStyleSet }] = useStyleSet();
-    const dialogRef = useRef<HTMLDialogElement>(null);
-    const localize = useLocalizer();
+function ModalDialog(props: ModalDialogProps) {
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className,
+    onDismiss
+  } = validateProps(modalDialogPropsSchema, props);
 
-    const closeButtonAlt = localize('CLOSE_BUTTON_ALT');
+  // Keeps the "webchat__modal-dialog" class names.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const localize = useLocalizer();
 
-    const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]);
+  const closeButtonAlt = localize('CLOSE_BUTTON_ALT');
 
-    useLayoutEffect(() => dialogRef.current?.showModal(), [dialogRef]);
+  const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]);
 
-    return (
-      <dialog
-        // When "aria-labelledby" is set, it must not set "aria-label".
-        aria-label={!ariaLabelledBy ? ariaLabel : undefined}
-        aria-labelledby={ariaLabelledBy}
-        className={classNames('webchat__modal-dialog', className, modalDialogStyleSet + '')}
-        onClose={onDismiss}
-        open={false}
-        ref={dialogRef}
-        role="dialog"
-      >
-        <div className="webchat__modal-dialog__box">
-          {/* The __scrollable layer is for hiding scrollbar at corners.
-              Without this layer, the scrollbar will show and overflow the border-radius.
+  useLayoutEffect(() => dialogRef.current?.showModal(), [dialogRef]);
+
+  return (
+    <dialog
+      // When "aria-labelledby" is set, it must not set "aria-label".
+      aria-label={!ariaLabelledBy ? ariaLabel : undefined}
+      aria-labelledby={ariaLabelledBy}
+      className={cx(classNames['modal-dialog'], className)}
+      onClose={onDismiss}
+      open={false}
+      ref={dialogRef}
+      role="dialog"
+    >
+      <div className={classNames['modal-dialog__box']}>
+        {/* The __scrollable layer is for hiding scrollbar at corners.
+            Without this layer, the scrollbar will show and overflow the border-radius.
             This impact will be more visible if we temporarily set border-radius: 20px. */}
-          <div className="webchat__modal-dialog__close-button-layout">
-            <button
-              aria-label={closeButtonAlt}
-              className="webchat__modal-dialog__close-button"
-              onClick={handleCloseButtonClick}
-              type="button"
-            >
-              <ComponentIcon appearance="text" className="webchat__modal-dialog__close-button-icon" icon="dismiss" />
-            </button>
-          </div>
-          <div className="webchat__modal-dialog__body">{children}</div>
+        <div className={classNames['modal-dialog__close-button-layout']}>
+          <button
+            aria-label={closeButtonAlt}
+            className={classNames['modal-dialog__close-button']}
+            onClick={handleCloseButtonClick}
+            type="button"
+          >
+            <ComponentIcon appearance="text" className={classNames['modal-dialog__close-button-icon']} icon="dismiss" />
+          </button>
         </div>
-      </dialog>
-    );
-  }
-);
+        <div className={classNames['modal-dialog__body']}>{children}</div>
+      </div>
+    </dialog>
+  );
+}
 
 ModalDialog.displayName = 'ModalDialog';
 
-export default ModalDialog;
+export default memo(ModalDialog);
+export { modalDialogPropsSchema, type ModalDialogProps };
diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css
index d21e6f474b..c0e9344c1a 100644
--- a/packages/fluent-theme/src/components/theme/Theme.module.css
+++ b/packages/fluent-theme/src/components/theme/Theme.module.css
@@ -187,129 +187,13 @@
   --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0, 0, 0, 1));
 }
 
+.variant-copilot {
+  --webchat-preserve-reason: target-class;
+}
+
 @media (prefers-reduced-motion) {
   :global(.webchat-fluent).theme {
     --webchat-durationUltraFast: 0.01ms;
     --webchat-durationNormal: 0.01ms;
   }
 }
-
-/* Style Options override */
-:global(.webchat-fluent).theme :global(.webchat__css-custom-properties) {
-  --webchat__color--accent: var(--webchat-colorBrandForeground1);
-  --webchat__color--subtle: var(--webchat-colorNeutralForeground2);
-  --webchat__color--timestamp: var(--webchat-colorNeutralForeground3);
-  --webchat__font--primary: var(--webchat-fontFamilyBase);
-  --webchat__font-size--small: var(--webchat-fontSizeBase200);
-  --webchat__font-size--medium: var(--webchat-fontSizeBase300);
-  --webchat__line-height--small: var(--webchat-lineHeightBase200);
-  --webchat__line-height--medium: var(--webchat-lineHeightBase300);
-  --webchat__max-width--bubble: var(--webchat-bubble-maxWidth);
-  --webchat__max-width--attachment-bubble: var(--webchat-bubble-maxWidth);
-  --webchat__min-height--bubble: var(--webchat-bubble-minHeight);
-  --webchat__padding--regular: var(--webchat-spacingVerticalS);
-  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalMNudge)
-    var(--webchat-spacingHorizontalMNudge);
-  --webchat__transition-duration: var(--webchat-durationNormal);
-  --webchat__transition-easing: var(--webchat-curveDecelerateMid);
-  --webchat__border-animation--color-1: #464feb;
-  --webchat__border-animation--color-2: #47cffa;
-  --webchat__border-animation--color-3: #b47cf8;
-}
-
-:global(.webchat-fluent).theme.variant-copilot :global(.webchat__css-custom-properties) {
-  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalL)
-    var(--webchat-spacingVerticalL) var(--webchat-spacingHorizontalSNudge);
-  --webchat__max-height--image-bubble: max(480px, 90cqb);
-}
-
-/* Transcript surface */
-:global(.webchat-fluent).theme :global(.webchat__surface) {
-  background-color: var(--webchat__color--surface);
-}
-
-:global(.webchat-fluent).theme.variant-copilot :global(.webchat__surface) {
-  box-sizing: border-box;
-  padding-inline-start: var(--webchat-spacingHorizontalMNudge);
-}
-
-:global(.webchat-fluent).theme.variant-copilot
-  :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
-  scrollbar-gutter: stable;
-}
-
-/* Transcript filer in copilot variant */
-:global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__filler) {
-  /* No filler unless pre-chat activity, see next rule */
-  flex-grow: 0;
-}
-
-/* Transcript with a single pre-chat activity */
-:global(.webchat-fluent).theme
-  :global(
-    .webchat__basic-transcript:has(.part-grouping-decorator:only-child):has(.pre-chat-message-activity)
-    .webchat__basic-transcript__filler
-  ) {
-  /* limit grow to half of the size to center the activity */
-  flex-grow: 0.5;
-}
-
-/* Modal */
-:global(.webchat-fluent).theme :global(.webchat__modal-dialog) {
-  height: 100%;
-  display: grid;
-  place-items: center;
-
-  &::backdrop {
-    background-color: var(--webchat-colorBackgroundOverlay);
-  }
-
-  :global(.webchat__modal-dialog__box) {
-    background-color: var(--webchat-colorNeutralBackground1);
-    border-radius: var(--webchat-borderRadiusXLarge);
-    position: relative;
-    color: var(--webchat-colorNeutralForeground1);
-    box-shadow: var(--webchat-shadow64);
-  }
-
-  :global(.webchat__modal-dialog__close-button) {
-    color: var(--webchat-colorNeutralForeground1);
-    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-  }
-
-  /* TODO: align with original fluent modal styles in WebChat as they don't match v9 anymore */
-  :global(.webchat__modal-dialog__close-button):not(:active):hover {
-    background-color: var(--webchat-colorNeutralBackground3);
-  }
-
-  :global(.webchat__modal-dialog__close-button):focus:active {
-    background-color: var(--webchat-colorNeutralBackground4);
-  }
-
-  :global(.webchat__modal-dialog__close-button):not(:focus-visible) {
-    border: none;
-  }
-
-  :global(.webchat__modal-dialog__close-button):focus {
-    border-color: var(--webchat-colorStrokeFocus2);
-  }
-
-  :global(.webchat__modal-dialog__close-button-icon) {
-    color: currentColor;
-  }
-}
-
-/* Tooltip */
-:global(.webchat-fluent).theme .tooltip {
-  --webchat__tooltip-background: var(--tooltip-background, var(--webchat-colorNeutralBackground1));
-
-  color: var(--webchat-colorNeutralForeground1);
-  filter: drop-shadow(0 0 2px var(--webchat-colorNeutralShadowAmbient))
-    drop-shadow(0 4px 8px var(--webchat-colorNeutralShadowKey));
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase200);
-  font-weight: var(--webchat-fontWeightRegular);
-  line-height: var(--webchat-lineHeightBase200);
-  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
-  transition: opacity var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-}
diff --git a/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css b/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css
index f7b4e3775d..1d8eeda5f0 100644
--- a/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css
+++ b/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css
@@ -29,23 +29,23 @@
     }
   }
 
-  .stacked-layout .bubble :global(.webchat__fileContent__badge) {
+  .stacked-layout .bubble .fileContent__badge {
     cursor: default;
     font-size: var(--webchat-fontSizeBase300);
     line-height: var(--webchat-lineHeightBase300);
 
-    :global(.webchat__fileContent__fileName) {
+    .fileContent__fileName {
       color: var(--webchat-colorBrandForegroundLink);
       font-family: inherit;
     }
 
-    :global(.webchat__fileContent__size) {
+    .fileContent__size {
       color: var(--webchat-colorNeutralForeground2);
       font-family: inherit;
     }
   }
 
-  .stacked-layout .bubble :global(.webchat__fileContent__downloadIcon) {
+  .stacked-layout .bubble .fileContent__downloadIcon {
     color: var(--webchat-colorBrandForegroundLink);
   }
   /* #endregion */
@@ -973,11 +973,50 @@
 
 /* #region Theme */
 
+/* Style Options override */
+:global(.webchat-fluent).theme .css-custom-properties {
+  --webchat__color--accent: var(--webchat-colorBrandForeground1);
+  --webchat__color--subtle: var(--webchat-colorNeutralForeground2);
+  --webchat__color--timestamp: var(--webchat-colorNeutralForeground3);
+  --webchat__font--primary: var(--webchat-fontFamilyBase);
+  --webchat__font-size--small: var(--webchat-fontSizeBase200);
+  --webchat__font-size--medium: var(--webchat-fontSizeBase300);
+  --webchat__line-height--small: var(--webchat-lineHeightBase200);
+  --webchat__line-height--medium: var(--webchat-lineHeightBase300);
+  --webchat__max-width--bubble: var(--webchat-bubble-maxWidth);
+  --webchat__max-width--attachment-bubble: var(--webchat-bubble-maxWidth);
+  --webchat__min-height--bubble: var(--webchat-bubble-minHeight);
+  --webchat__padding--regular: var(--webchat-spacingVerticalS);
+  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalMNudge)
+    var(--webchat-spacingHorizontalMNudge);
+  --webchat__transition-duration: var(--webchat-durationNormal);
+  --webchat__transition-easing: var(--webchat-curveDecelerateMid);
+  --webchat__border-animation--color-1: #464feb;
+  --webchat__border-animation--color-2: #47cffa;
+  --webchat__border-animation--color-3: #b47cf8;
+}
+
+:global(.webchat-fluent).theme.variant-copilot .css-custom-properties {
+  --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalL)
+    var(--webchat-spacingVerticalL) var(--webchat-spacingHorizontalSNudge);
+  --webchat__max-height--image-bubble: max(480px, 90cqb);
+}
+
+/* Transcript surface */
+:global(.webchat-fluent).theme .surface {
+  background-color: var(--webchat__color--surface);
+}
+
+:global(.webchat-fluent).theme.variant-copilot .surface {
+  box-sizing: border-box;
+  padding-inline-start: var(--webchat-spacingHorizontalMNudge);
+}
+
 /* Scrollbars */
 :global(.webchat-fluent).theme .code-block-content .code-block-content__code-block,
 :global(.webchat-fluent).theme .send-box-attachment-bar.send-box-attachment-bar--as-list-item,
 :global(.webchat-fluent).theme .text-area.text-area--scroll,
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
+:global(.webchat-fluent).theme .basic-transcript .basic-transcript__scrollable,
 :global(.webchat-fluent).theme .render-markdown [data-math-type='block'],
 :global(.webchat-fluent).theme .view-code-dialog__body,
 :global(.webchat-fluent).theme :global(.view-code-dialog__code-body) {
@@ -1029,6 +1068,10 @@
   --webchat__transcript--spacing: var(--webchat-spacingVerticalM);
 }
 
+:global(.webchat-fluent).theme.variant-copilot .basic-transcript .basic-transcript__scrollable {
+  scrollbar-gutter: stable;
+}
+
 /* Transcript focus indicator color */
 :global(.webchat-fluent).theme .transcript-focus-area__transcript-indicator {
   --webchat__color--transcript-visual-keyboard-indicator: var(--webchat-colorStrokeFocus2);
@@ -1056,7 +1099,7 @@
   }
 
   /* Transcript activity focused directly */
-  > :global(.webchat__focus-trap) > :global(.webchat__basic-transcript__activity-body) .bubble {
+  > .focus-trap > .basic-transcript__activity-body .bubble {
     display: grid;
     grid-template-areas: 'focused-content';
     position: static;
@@ -1124,6 +1167,65 @@
   }
 }
 
+/* Transcript filer in copilot variant */
+:global(.webchat-fluent).theme.variant-copilot .basic-transcript .basic-transcript__filler {
+  /* No filler unless pre-chat activity, see next rule */
+  flex-grow: 0;
+}
+
+/* Transcript with a single pre-chat activity */
+:global(.webchat-fluent).theme
+  .basic-transcript:has(:global(.part-grouping-decorator):only-child):has(:global(.pre-chat-message-activity))
+  .basic-transcript__filler {
+  /* limit grow to half of the size to center the activity */
+  flex-grow: 0.5;
+}
+
+/* Modal */
+:global(.webchat-fluent).theme .modal-dialog {
+  height: 100%;
+  display: grid;
+  place-items: center;
+
+  &::backdrop {
+    background-color: var(--webchat-colorBackgroundOverlay);
+  }
+
+  .modal-dialog__box {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border-radius: var(--webchat-borderRadiusXLarge);
+    position: relative;
+    color: var(--webchat-colorNeutralForeground1);
+    box-shadow: var(--webchat-shadow64);
+  }
+
+  .modal-dialog__close-button {
+    color: var(--webchat-colorNeutralForeground1);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  }
+
+  /* TODO: align with original fluent modal styles in WebChat as they don't match v9 anymore */
+  .modal-dialog__close-button:not(:active):hover {
+    background-color: var(--webchat-colorNeutralBackground3);
+  }
+
+  .modal-dialog__close-button:focus:active {
+    background-color: var(--webchat-colorNeutralBackground4);
+  }
+
+  .modal-dialog__close-button:not(:focus-visible) {
+    border: none;
+  }
+
+  .modal-dialog__close-button:focus {
+    border-color: var(--webchat-colorStrokeFocus2);
+  }
+
+  .modal-dialog__close-button-icon {
+    color: currentColor;
+  }
+}
+
 /* Code block */
 :global(.webchat-fluent).theme .code-block {
   border: none;
@@ -1205,13 +1307,13 @@
 }
 
 /* View Code dialog */
-:global(.webchat-fluent).theme :global(.webchat__modal-dialog).view-code-dialog {
-  :global(.webchat__modal-dialog__close-button-layout) {
+:global(.webchat-fluent).theme .modal-dialog.view-code-dialog {
+  .modal-dialog__close-button-layout {
     display: flex;
     padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalS);
   }
 
-  :global(.webchat__modal-dialog__close-button) {
+  .modal-dialog__close-button {
     align-items: center;
     aspect-ratio: 1;
     display: flex;
@@ -1231,11 +1333,11 @@
     top: 0;
   }
 
-  :global(.webchat__modal-dialog__box) {
+  .modal-dialog__box {
     width: fit-content;
   }
 
-  :global(.webchat__modal-dialog__body) {
+  .modal-dialog__body {
     margin: 0;
     padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
   }
@@ -1355,6 +1457,21 @@
   }
 }
 
+/* Tooltip */
+:global(.webchat-fluent).theme .tooltip {
+  --webchat__tooltip-background: var(--tooltip-background, var(--webchat-colorNeutralBackground1));
+
+  color: var(--webchat-colorNeutralForeground1);
+  filter: drop-shadow(0 0 2px var(--webchat-colorNeutralShadowAmbient))
+    drop-shadow(0 4px 8px var(--webchat-colorNeutralShadowKey));
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: var(--webchat-fontSizeBase200);
+  font-weight: var(--webchat-fontWeightRegular);
+  line-height: var(--webchat-lineHeightBase200);
+  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
+  transition: opacity var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+}
+
 /* Feedback Form */
 :global(.webchat-fluent).theme .feedback-form {
   .feedback-form__form-header {

From ddf6762761bda90704009bca62d6469ab70ca0fc Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 09:54:49 -0700
Subject: [PATCH 03/16] Convert the file attachment classes to CSS Modules and
 style them in Fluent through the CSS module theme

FileContent's local styles moved to FileContent.module.css; its class names keep the webchat__ prefix,
so the option-driven "fileContent" style set entry still applies the style options and nothing renders differently.
---
 .../src/Attachment/FileContent.module.css     | 23 +++++++++
 .../component/src/Attachment/FileContent.tsx  | 47 ++++++++-----------
 2 files changed, 42 insertions(+), 28 deletions(-)
 create mode 100644 packages/component/src/Attachment/FileContent.module.css

diff --git a/packages/component/src/Attachment/FileContent.module.css b/packages/component/src/Attachment/FileContent.module.css
new file mode 100644
index 0000000000..305e66aff3
--- /dev/null
+++ b/packages/component/src/Attachment/FileContent.module.css
@@ -0,0 +1,23 @@
+/* Style options apply through the "fileContent" style set entry, which selects the "webchat__fileContent" class names. */
+:global(.webchat) .fileContent {
+  display: flex;
+
+  .fileContent__buttonLink {
+    display: flex;
+    flex: 1;
+  }
+
+  .fileContent__badge {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .fileContent__downloadIcon:not(*),
+  .fileContent__fileName:not(*),
+  .fileContent__size:not(*) {
+    /* No styles of their own here: the rule declares the local names, so useStyles() returns them and themes can style them. */
+    /* Lightning CSS does not export local names of empty rules, and ":not(*)" never matches. */
+    display: none;
+  }
+}
diff --git a/packages/component/src/Attachment/FileContent.tsx b/packages/component/src/Attachment/FileContent.tsx
index 9fefdb737a..a9443c9dc8 100644
--- a/packages/component/src/Attachment/FileContent.tsx
+++ b/packages/component/src/Attachment/FileContent.tsx
@@ -1,29 +1,16 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import React, { memo } from 'react';
+import cx from 'classnames';
+import React, { Fragment, memo } from 'react';
 import { boolean, number, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
 import { ComponentIcon } from '../Icon';
 
-const { useByteFormatter, useDirection, useLocalizer } = hooks;
-
-const ROOT_STYLE = {
-  display: 'flex',
-
-  '& .webchat__fileContent__buttonLink': {
-    display: 'flex',
-    flex: 1
-  },
+import styles from './FileContent.module.css';
 
-  '& .webchat__fileContent__badge': {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column'
-  }
-};
+const { useByteFormatter, useDirection, useLocalizer } = hooks;
 
 // TODO: Consider using `useSanitizeHrefCallback`, which underlying use `sanitize-html` or whatever in HTML content transformer.
 const ALLOWED_PROTOCOLS = ['blob:', 'data:', 'http:', 'https:'];
@@ -50,28 +37,31 @@ type FileContentBadgeProps = InferInput<typeof fileContentBadgePropsSchema>;
 const FileContentBadge = (props: FileContentBadgeProps) => {
   const { downloadIcon = false, fileName, size } = validateProps(fileContentBadgePropsSchema, props);
 
+  // Keeps the "webchat__fileContent" class names.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
   const [direction] = useDirection();
   const formatByte = useByteFormatter();
 
   const localizedSize = typeof size === 'number' && formatByte(size);
 
   return (
-    <React.Fragment>
-      <div aria-hidden={true} className="webchat__fileContent__badge">
-        <div className="webchat__fileContent__fileName">{fileName}</div>
-        {!!localizedSize && <div className="webchat__fileContent__size">{localizedSize}</div>}
+    <Fragment>
+      <div aria-hidden={true} className={classNames['fileContent__badge']}>
+        <div className={classNames['fileContent__fileName']}>{fileName}</div>
+        {!!localizedSize && <div className={classNames['fileContent__size']}>{localizedSize}</div>}
       </div>
       {downloadIcon && (
         <ComponentIcon
           appearance="text"
-          className={classNames(
-            'webchat__fileContent__downloadIcon',
+          className={cx(
+            classNames['fileContent__downloadIcon'],
+            // The "fileContent" style set entry, which applies the style options, selects this modifier.
             direction === 'rtl' && 'webchat__fileContent__downloadIcon--rtl'
           )}
           icon="download"
         />
       )}
-    </React.Fragment>
+    </Fragment>
   );
 };
 
@@ -90,10 +80,11 @@ const fileContentPropsSchema = pipe(
 function FileContent(props: FileContentProps) {
   const { className, href, fileName, size } = validateProps(fileContentPropsSchema, props);
 
+  // Keeps the "webchat__fileContent" class names.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
   const [{ fileContent: fileContentStyleSet }] = useStyleSet();
   const localize = useLocalizer();
   const localizeBytes = useByteFormatter();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const localizedSize = typeof size === 'number' && localizeBytes(size);
 
@@ -112,13 +103,13 @@ function FileContent(props: FileContentProps) {
   );
 
   return (
-    <div className={classNames('webchat__fileContent', rootClassName, fileContentStyleSet + '', className)}>
+    <div className={cx(classNames['fileContent'], fileContentStyleSet + '', className)}>
       {sanitizedHref ? (
         // URL is sanitized.
         // eslint-disable-next-line react/forbid-elements
         <a
           aria-label={alt}
-          className="webchat__fileContent__buttonLink"
+          className={classNames['fileContent__buttonLink']}
           download={fileName}
           href={sanitizedHref}
           rel="noopener noreferrer"

From 6b6fe9a0f468dfea7a23677f6ca118c75125c448 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 09:57:48 -0700
Subject: [PATCH 04/16] Convert the transcript classes that Fluent styles to
 CSS Modules and style them through the CSS module theme

basic-transcript, __scrollable, __filler (BasicTranscript local styles), __activity-body (ActivityRow)
and focus-trap (FocusTrap) come from CSS modules and keep their webchat__ class names, which code
and tests still query.
---
 .../component/src/BasicTranscript.module.css  | 27 +++++++++++
 packages/component/src/BasicTranscript.tsx    | 46 ++++---------------
 .../src/Transcript/ActivityRow.module.css     |  5 ++
 .../component/src/Transcript/ActivityRow.tsx  |  9 +++-
 .../src/Transcript/FocusTrap.module.css       |  5 ++
 .../component/src/Transcript/FocusTrap.tsx    |  7 ++-
 6 files changed, 60 insertions(+), 39 deletions(-)
 create mode 100644 packages/component/src/BasicTranscript.module.css
 create mode 100644 packages/component/src/Transcript/ActivityRow.module.css
 create mode 100644 packages/component/src/Transcript/FocusTrap.module.css

diff --git a/packages/component/src/BasicTranscript.module.css b/packages/component/src/BasicTranscript.module.css
new file mode 100644
index 0000000000..1ae315438d
--- /dev/null
+++ b/packages/component/src/BasicTranscript.module.css
@@ -0,0 +1,27 @@
+:global(.webchat) .basic-transcript {
+  /* The element is also the transcript focus area, which TranscriptFocus.module.css lays out as a grid. */
+  overflow: hidden;
+  /* Make sure to set "position: relative" here to form another stacking context for the scroll-to-end button. */
+  /* Stacking context help isolating elements that use "z-index" from global pollution. */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
+  position: relative;
+
+  .basic-transcript__filler {
+    flex: 1;
+  }
+
+  .basic-transcript__scrollable {
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :global(.webchat__basic-transcript__transcript) {
+    list-style-type: none;
+  }
+
+  :global(.webchat__basic-transcript__activity-focus-target) {
+    pointer-events: none;
+  }
+}
diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
index 763cc6ab73..126b0e2360 100644
--- a/packages/component/src/BasicTranscript.tsx
+++ b/packages/component/src/BasicTranscript.tsx
@@ -1,6 +1,7 @@
 // TODO: [P2] Fix ESLint error `no-use-before-define`
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import React, {
@@ -37,7 +38,6 @@ import { type ActivityElementMap } from './Transcript/types';
 import FocusRedirector from './Utils/FocusRedirector';
 import inputtableKey from './Utils/TypeFocusSink/inputtableKey';
 import { android } from './Utils/detectBrowser';
-import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useDispatchScrollPosition from './hooks/internal/useDispatchScrollPosition';
 import useDispatchTranscriptFocusByActivityKey from './hooks/internal/useDispatchTranscriptFocusByActivityKey';
 import useNonce from './hooks/internal/useNonce';
@@ -65,6 +65,8 @@ import useFocusRelativeActivity from './providers/TranscriptFocus/useFocusRelati
 import useFocusedExplicitly from './providers/TranscriptFocus/useFocusedExplicitly';
 import useFocusedKey from './providers/TranscriptFocus/useFocusedKey';
 
+import styles from './BasicTranscript.module.css';
+
 const {
   useActivityKeys,
   useDirection,
@@ -77,37 +79,6 @@ const {
   useStyleOptions
 } = hooks;
 
-const ROOT_STYLE = {
-  '&.webchat__basic-transcript': {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    // Make sure to set "position: relative" here to form another stacking context for the scroll-to-end button.
-    // Stacking context help isolating elements that use "z-index" from global pollution.
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-    position: 'relative',
-
-    '& .webchat__basic-transcript__filler': {
-      flex: 1
-    },
-
-    '& .webchat__basic-transcript__scrollable': {
-      display: 'flex',
-      flexDirection: 'column',
-      overflowX: 'hidden',
-      WebkitOverflowScrolling: 'touch'
-    },
-
-    '& .webchat__basic-transcript__transcript': {
-      listStyleType: 'none'
-    },
-
-    '& .webchat__basic-transcript__activity-focus-target': {
-      pointerEvents: 'none'
-    }
-  }
-};
-
 type ScrollBehavior = 'auto' | 'smooth';
 type ScrollToOptions = { behavior?: ScrollBehavior };
 type ScrollToPosition = { activityID?: string; scrollTop?: number };
@@ -135,8 +106,9 @@ const InternalTranscript = memo(
       const getActivityByKey = useGetActivityByKey();
       const getKeyByActivityId = useGetKeyByActivityId();
       const localize = useLocalizer();
-      const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
       const rootElementRef = useRef<HTMLDivElement>(null);
+      // Keeps the "webchat__basic-transcript" class names.
+      const transcriptClassNames = useStyles(styles, webChatPrefixedClassName);
 
       const focusedKeyRef = useValueRef(focusedKey);
       const transcriptAriaLabel = localize('TRANSCRIPT_ARIA_LABEL_ALT');
@@ -444,7 +416,7 @@ const InternalTranscript = memo(
           // We are disabling `aria-activedescendant` for Android. See <ActivityRow> for details.
           aria-activedescendant={android ? undefined : activeDescendantId}
           aria-label={transcriptAriaLabel}
-          className={classNames('webchat__basic-transcript', rootClassName, (className || '') + '')}
+          className={classNames(transcriptClassNames['basic-transcript'], (className || '') + '')}
           dir={direction}
           onFocus={handleFocus}
           onKeyDown={handleTranscriptKeyDown}
@@ -488,6 +460,8 @@ const InternalTranscriptScrollable = ({ children, onFocusFiller }: InternalTrans
   const [sticky]: [boolean] = useSticky();
   const localize = useLocalizer();
   const markAllAsAcknowledged = useMarkAllAsAcknowledged();
+  // Keeps the "webchat__basic-transcript" class names.
+  const transcriptClassNames = useStyles(styles, webChatPrefixedClassName);
 
   const prevSticky = usePrevious(sticky);
   const transcriptRoleDescription = localize('TRANSCRIPT_ARIA_ROLE_ALT');
@@ -505,8 +479,8 @@ const InternalTranscriptScrollable = ({ children, onFocusFiller }: InternalTrans
 
   return (
     <React.Fragment>
-      <ReactScrollToBottomPanel className="webchat__basic-transcript__scrollable">
-        <div aria-hidden={true} className="webchat__basic-transcript__filler" onFocus={onFocusFiller} />
+      <ReactScrollToBottomPanel className={transcriptClassNames['basic-transcript__scrollable']}>
+        <div aria-hidden={true} className={transcriptClassNames['basic-transcript__filler']} onFocus={onFocusFiller} />
         {hasAnyChild && (
           <TranscriptActivityList
             aria-roledescription={transcriptRoleDescription}
diff --git a/packages/component/src/Transcript/ActivityRow.module.css b/packages/component/src/Transcript/ActivityRow.module.css
new file mode 100644
index 0000000000..1431f7b063
--- /dev/null
+++ b/packages/component/src/Transcript/ActivityRow.module.css
@@ -0,0 +1,5 @@
+/* No styles of its own: the rule declares the local name, so useStyles() returns it and themes can style it. */
+/* Lightning CSS does not export local names of empty rules, and ":not(*)" never matches. */
+:global(.webchat) .basic-transcript__activity-body:not(*) {
+  display: none;
+}
diff --git a/packages/component/src/Transcript/ActivityRow.tsx b/packages/component/src/Transcript/ActivityRow.tsx
index 5395988b41..706f6a27fb 100644
--- a/packages/component/src/Transcript/ActivityRow.tsx
+++ b/packages/component/src/Transcript/ActivityRow.tsx
@@ -1,3 +1,4 @@
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -20,6 +21,8 @@ import {
 } from './TranscriptFocus';
 import useActivityAccessibleName from './useActivityAccessibleName';
 
+import styles from './ActivityRow.module.css';
+
 import type { WebChatActivity } from 'botframework-webchat-core';
 import type { MouseEventHandler, PropsWithChildren } from 'react';
 
@@ -32,6 +35,8 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
   const [readActivityKeys] = useActivityKeysByRead();
   const activityRef = useRefFrom(activity);
   const bodyRef = useRef<HTMLDivElement>();
+  // Keeps the "webchat__basic-transcript__activity-body" class name.
+  const activityRowClassNames = useStyles(styles, webChatPrefixedClassName);
   const focusByActivityKey = useFocusByActivityKey();
   const getKeyByActivity = useGetKeyByActivity();
   // TODO: [P2] #2858 We should use core/definitions/speakingActivity for this predicate instead
@@ -66,11 +71,11 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
 
   const focusTrapChildren = useMemo(
     () => (
-      <div className="webchat__basic-transcript__activity-body" ref={bodyRef}>
+      <div className={activityRowClassNames['basic-transcript__activity-body']} ref={bodyRef}>
         {children}
       </div>
     ),
-    [bodyRef, children]
+    [activityRowClassNames, bodyRef, children]
   );
 
   const activityIdRef = useRefFrom(activity.id);
diff --git a/packages/component/src/Transcript/FocusTrap.module.css b/packages/component/src/Transcript/FocusTrap.module.css
new file mode 100644
index 0000000000..3395fc0583
--- /dev/null
+++ b/packages/component/src/Transcript/FocusTrap.module.css
@@ -0,0 +1,5 @@
+/* No styles of its own: the rule declares the local name, so useStyles() returns it and themes can style it. */
+/* Lightning CSS does not export local names of empty rules, and ":not(*)" never matches. */
+:global(.webchat) .focus-trap:not(*) {
+  display: none;
+}
diff --git a/packages/component/src/Transcript/FocusTrap.tsx b/packages/component/src/Transcript/FocusTrap.tsx
index 2740af2158..3d4d4abcc2 100644
--- a/packages/component/src/Transcript/FocusTrap.tsx
+++ b/packages/component/src/Transcript/FocusTrap.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-magic-numbers */
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import React, {
   Fragment,
   memo,
@@ -12,6 +13,8 @@ import React, {
 import tabbableElements from '../Utils/tabbableElements';
 import { useRefFrom } from 'use-ref-from';
 
+import styles from './FocusTrap.module.css';
+
 // Media elements with native controls (`<audio controls>` and `<video controls>`) have their own tab stops,
 // such as play, volume, and more options. These tab stops are in a closed shadow tree: we cannot focus them,
 // and their keystrokes do not reach us. The browser moves focus through them on TAB,
@@ -32,6 +35,8 @@ const FocusTrap = ({
   targetClassName?: string | undefined;
 }>) => {
   const bodyRef = useRef<HTMLDivElement>();
+  // Keeps the "webchat__focus-trap" class name, which also finds nested traps below.
+  const classNames = useStyles(styles, webChatPrefixedClassName);
   const guardRef = useRef<HTMLDivElement>();
   const lastFocused = useRef<HTMLElement>();
   const onFocusRef = useRefFrom(onFocus);
@@ -138,7 +143,7 @@ const FocusTrap = ({
   return (
     <Fragment>
       <div
-        className="webchat__focus-trap"
+        className={classNames['focus-trap']}
         onBlur={handleBlur}
         onFocus={handleFocus}
         onKeyDown={handleBodyKeyDown}

From 2f71e36a0001c2743ef3e065fb1f5f273e67533d Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 09:59:10 -0700
Subject: [PATCH 05/16] Convert the root surface and style options container
 classes to CSS Modules and style them through the CSS module theme

webchat__surface (BasicWebChat local styles; the option-driven root style set entry stays) and
webchat__css-custom-properties (Composer local styles) come from CSS modules and keep their names;
CSSCustomPropertiesContainer still selects the latter for the style options.
---
 .../component/src/BasicWebChat.module.css     |  4 ++++
 packages/component/src/BasicWebChat.tsx       | 13 +++++------
 packages/component/src/Composer.module.css    | 11 ++++++++++
 packages/component/src/Composer.tsx           | 22 +++++--------------
 4 files changed, 27 insertions(+), 23 deletions(-)
 create mode 100644 packages/component/src/BasicWebChat.module.css
 create mode 100644 packages/component/src/Composer.module.css

diff --git a/packages/component/src/BasicWebChat.module.css b/packages/component/src/BasicWebChat.module.css
new file mode 100644
index 0000000000..827d905653
--- /dev/null
+++ b/packages/component/src/BasicWebChat.module.css
@@ -0,0 +1,4 @@
+:global(.webchat) .surface {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/component/src/BasicWebChat.tsx b/packages/component/src/BasicWebChat.tsx
index f910c43d18..1a2411f06c 100644
--- a/packages/component/src/BasicWebChat.tsx
+++ b/packages/component/src/BasicWebChat.tsx
@@ -2,6 +2,7 @@
 /* eslint react/no-unsafe: off */
 
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import { SendBoxMiddlewareProxy, hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import React, { memo, useRef } from 'react';
@@ -14,12 +15,9 @@ import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useStyleSet from './hooks/useStyleSet';
 import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
 
-const { useStyleOptions } = hooks;
+import styles from './BasicWebChat.module.css';
 
-const ROOT_STYLE = {
-  display: 'flex',
-  flexDirection: 'column'
-};
+const { useStyleOptions } = hooks;
 
 const CONNECTIVITY_STATUS_STYLE = {
   flexShrink: 0
@@ -53,19 +51,20 @@ function BasicWebChat(props: BasicWebChatProps) {
   const { className, role } = validateProps(basicWebChatPropsSchema, props, 'strict');
 
   const rootRef = useRef<HTMLDivElement>(null);
+  // Keeps the "webchat__surface" class name.
+  const basicWebChatClassNames = useStyles(styles, webChatPrefixedClassName);
   const [{ root: rootStyleSet }] = useStyleSet();
   const [options] = useStyleOptions();
   const styleToEmotionObject = useStyleToEmotionObject();
 
   const connectivityStatusClassName = styleToEmotionObject(CONNECTIVITY_STATUS_STYLE) + '';
-  const rootClassName = styleToEmotionObject(ROOT_STYLE) + '';
   const sendBoxClassName = styleToEmotionObject(SEND_BOX_CSS) + '';
   const toasterClassName = styleToEmotionObject(TOASTER_STYLE) + '';
   const transcriptClassName = styleToEmotionObject(TRANSCRIPT_STYLE) + '';
 
   return (
     <AccessKeySinkSurface
-      className={classNames('webchat__surface', rootClassName, rootStyleSet + '', className)}
+      className={classNames(basicWebChatClassNames['surface'], rootStyleSet + '', className)}
       ref={rootRef}
       role={role}
     >
diff --git a/packages/component/src/Composer.module.css b/packages/component/src/Composer.module.css
new file mode 100644
index 0000000000..7dff6c19be
--- /dev/null
+++ b/packages/component/src/Composer.module.css
@@ -0,0 +1,11 @@
+:global(.webchat).css-custom-properties {
+  :global(.webchat__live-region) {
+    color: transparent;
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx
index 789ae10e19..4f34cef390 100644
--- a/packages/component/src/Composer.tsx
+++ b/packages/component/src/Composer.tsx
@@ -2,6 +2,7 @@
 
 import { singleToArray } from '@msinternal/botframework-webchat-base/utils';
 import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
 import {
   Composer as APIComposer,
   AttachmentForScreenReaderMiddleware,
@@ -67,6 +68,8 @@ import { type FocusTranscriptInit } from './types/internal/FocusTranscriptInit';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import mapMap from './Utils/mapMap';
 
+import styles from './Composer.module.css';
+
 const { useGetActivityByKey, useReferenceGrammarID, useStyleOptions, useTrackException } = hooks;
 
 function styleSetToEmotionObjects(styleToEmotionObject, styleSet) {
@@ -79,23 +82,10 @@ type ComposerCoreUIProps = {
   readonly storeDebugAPI?: StoreDebugAPI | undefined;
 };
 
-const ROOT_STYLE = {
-  '&.webchat__css-custom-properties': {
-    '& .webchat__live-region': {
-      color: 'transparent',
-      height: 1,
-      overflow: 'hidden',
-      position: 'absolute',
-      top: 0,
-      whiteSpace: 'nowrap',
-      width: 1
-    }
-  }
-};
-
 const ComposerCoreUI = memo(({ children, nonce, storeDebugAPI }: ComposerCoreUIProps) => {
   const [{ assistiveTechnologyAnnouncementTransport, internalLiveRegionFadeAfter }] = useStyleOptions();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  // Keeps the "webchat__css-custom-properties" class name.
+  const composerClassNames = useStyles(styles, webChatPrefixedClassName);
   const rootRef = useRef<HTMLDivElement>(null);
   const trackException = useTrackException();
 
@@ -130,7 +120,7 @@ const ComposerCoreUI = memo(({ children, nonce, storeDebugAPI }: ComposerCoreUIP
 
   return (
     <CSSCustomPropertiesContainer
-      className={classNames('webchat', 'webchat__css-custom-properties', rootClassName)}
+      className={classNames('webchat', composerClassNames['css-custom-properties'])}
       nonce={nonce}
       ref={rootRef}
     >

From 67aee9a3ff7c7167260bff3a4820e6425bcab6b6 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 19:14:01 -0700
Subject: [PATCH 06/16] Keep class names of rules without styles through
 --webchat-preserve-reason, as in the activity button

FileContent, ActivityRow and FocusTrap declared local names for themes with ":not(*)" rules. They now use the
declaration that the build strips once the class map is built.
---
 .../component/src/Attachment/FileContent.module.css    | 10 ++++------
 .../component/src/Transcript/ActivityRow.module.css    |  6 ++----
 packages/component/src/Transcript/FocusTrap.module.css |  6 ++----
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/component/src/Attachment/FileContent.module.css b/packages/component/src/Attachment/FileContent.module.css
index 305e66aff3..7022209892 100644
--- a/packages/component/src/Attachment/FileContent.module.css
+++ b/packages/component/src/Attachment/FileContent.module.css
@@ -13,11 +13,9 @@
     flex-direction: column;
   }
 
-  .fileContent__downloadIcon:not(*),
-  .fileContent__fileName:not(*),
-  .fileContent__size:not(*) {
-    /* No styles of their own here: the rule declares the local names, so useStyles() returns them and themes can style them. */
-    /* Lightning CSS does not export local names of empty rules, and ":not(*)" never matches. */
-    display: none;
+  .fileContent__downloadIcon,
+  .fileContent__fileName,
+  .fileContent__size {
+    --webchat-preserve-reason: target-class;
   }
 }
diff --git a/packages/component/src/Transcript/ActivityRow.module.css b/packages/component/src/Transcript/ActivityRow.module.css
index 1431f7b063..67dfab1a33 100644
--- a/packages/component/src/Transcript/ActivityRow.module.css
+++ b/packages/component/src/Transcript/ActivityRow.module.css
@@ -1,5 +1,3 @@
-/* No styles of its own: the rule declares the local name, so useStyles() returns it and themes can style it. */
-/* Lightning CSS does not export local names of empty rules, and ":not(*)" never matches. */
-:global(.webchat) .basic-transcript__activity-body:not(*) {
-  display: none;
+:global(.webchat) .basic-transcript__activity-body {
+  --webchat-preserve-reason: target-class;
 }
diff --git a/packages/component/src/Transcript/FocusTrap.module.css b/packages/component/src/Transcript/FocusTrap.module.css
index 3395fc0583..f854a75539 100644
--- a/packages/component/src/Transcript/FocusTrap.module.css
+++ b/packages/component/src/Transcript/FocusTrap.module.css
@@ -1,5 +1,3 @@
-/* No styles of its own: the rule declares the local name, so useStyles() returns it and themes can style it. */
-/* Lightning CSS does not export local names of empty rules, and ":not(*)" never matches. */
-:global(.webchat) .focus-trap:not(*) {
-  display: none;
+:global(.webchat) .focus-trap {
+  --webchat-preserve-reason: target-class;
 }

From 50eb0faaac241c95fa55bf78481bd886f8182d24 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 20:23:48 -0700
Subject: [PATCH 07/16] Deprecate the modalDialog and tooltip style set
 entries, which are no longer used for rendering

Like the entries in #5881: customizing them has no effect, and their styles are in Popover.module.css and
Tooltip.module.css.
---
 packages/component/src/Styles/StyleSet/ModalDialog.ts |  5 +++++
 packages/component/src/Styles/StyleSet/Tooltip.ts     |  5 +++++
 packages/component/src/Styles/createStyleSet.ts       | 10 ++++++++++
 3 files changed, 20 insertions(+)

diff --git a/packages/component/src/Styles/StyleSet/ModalDialog.ts b/packages/component/src/Styles/StyleSet/ModalDialog.ts
index 592288e2ea..2ee26a8ce2 100644
--- a/packages/component/src/Styles/StyleSet/ModalDialog.ts
+++ b/packages/component/src/Styles/StyleSet/ModalDialog.ts
@@ -6,6 +6,11 @@ const LIGHT_THEME_SELECTOR = '@media (forced-colors: none)';
 
 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/providers/ModalDialog/private/Popover.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default function createModalDialogStyleSet() {
   return {
     '&.webchat__modal-dialog': {
diff --git a/packages/component/src/Styles/StyleSet/Tooltip.ts b/packages/component/src/Styles/StyleSet/Tooltip.ts
index 66fd76d03c..a60965575a 100644
--- a/packages/component/src/Styles/StyleSet/Tooltip.ts
+++ b/packages/component/src/Styles/StyleSet/Tooltip.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/Tooltip/private/Tooltip.module.css`.
+ * This style set will be removed on or after 2028-10-16.
+ */
 export default () => ({
   '*:has(> &.webchat__tooltip)': {
     position: 'relative',
diff --git a/packages/component/src/Styles/createStyleSet.ts b/packages/component/src/Styles/createStyleSet.ts
index 1ffd81555e..2d2508d368 100644
--- a/packages/component/src/Styles/createStyleSet.ts
+++ b/packages/component/src/Styles/createStyleSet.ts
@@ -153,6 +153,11 @@ export default function createStyleSet(styleOptions: StyleOptions) {
      * This style set will be removed on or after 2028-10-16.
      */
     linkDefinitions: createLinkDefinitionsStyle(),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/providers/ModalDialog/private/Popover.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     modalDialog: createModalDialogStyle(),
     /**
      * @deprecated Not used for rendering since 4.19.0 (PR #5670), customizing it has no effect.
@@ -178,6 +183,11 @@ export default function createStyleSet(styleOptions: StyleOptions) {
      * This style set will be removed on or after 2028-10-16.
      */
     thumbButton: createThumbButtonStyle(),
+    /**
+     * @deprecated Not used for rendering since 4.19.3, customizing it has no effect.
+     * The live styles are in `packages/component/src/Tooltip/private/Tooltip.module.css`.
+     * This style set will be removed on or after 2028-10-16.
+     */
     tooltip: createTooltipStyle()
   } as const);
 }

From 5cd6455fc39ee60e3d440478aa59f7fbb9adf98e Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 20:38:58 -0700
Subject: [PATCH 08/16] Add the changelog fragment

---
 .changelog/5997-fix-css-fluent-context-2.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .changelog/5997-fix-css-fluent-context-2.md

diff --git a/.changelog/5997-fix-css-fluent-context-2.md b/.changelog/5997-fix-css-fluent-context-2.md
new file mode 100644
index 0000000000..33964be87d
--- /dev/null
+++ b/.changelog/5997-fix-css-fluent-context-2.md
@@ -0,0 +1,3 @@
+### Removed
+
+- 💥 Style set entries `modalDialog` and `tooltip` are no longer used for rendering and are being deprecated, customizing them has no effect, they will be removed on or after 2028-10-16; their styles moved to CSS modules that keep the `webchat__modal-dialog` and `webchat__tooltip` class names, which hosts can style instead, in PR [#5997](https://github.com/microsoft/BotFramework-WebChat/pull/5997), by [@OEvgeny](https://github.com/OEvgeny)

From 4c191e54510ea1fda3f1bb04fbea60c64b7882fc Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Fri, 30 Oct 2026 20:39:29 -0700
Subject: [PATCH 09/16] Add the Changed entry to the changelog fragment

---
 .changelog/5997-fix-css-fluent-context-2.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.changelog/5997-fix-css-fluent-context-2.md b/.changelog/5997-fix-css-fluent-context-2.md
index 33964be87d..180ec4ed15 100644
--- a/.changelog/5997-fix-css-fluent-context-2.md
+++ b/.changelog/5997-fix-css-fluent-context-2.md
@@ -1,3 +1,7 @@
+### Changed
+
+- Converted the tooltip, modal dialog, file attachment and transcript root classes to CSS Modules, keeping their `webchat__` class names, so Fluent styles them through the CSS module theme, in PR [#5997](https://github.com/microsoft/BotFramework-WebChat/pull/5997), by [@OEvgeny](https://github.com/OEvgeny)
+
 ### Removed
 
 - 💥 Style set entries `modalDialog` and `tooltip` are no longer used for rendering and are being deprecated, customizing them has no effect, they will be removed on or after 2028-10-16; their styles moved to CSS modules that keep the `webchat__modal-dialog` and `webchat__tooltip` class names, which hosts can style instead, in PR [#5997](https://github.com/microsoft/BotFramework-WebChat/pull/5997), by [@OEvgeny](https://github.com/OEvgeny)

From cb28b4e0ff73da28975704c39b01886495444190 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Sat, 31 Oct 2026 00:45:52 -0700
Subject: [PATCH 10/16] Shorten the Removed changelog entry to one clause, with
 the details in the pull request

---
 .changelog/5997-fix-css-fluent-context-2.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changelog/5997-fix-css-fluent-context-2.md b/.changelog/5997-fix-css-fluent-context-2.md
index 180ec4ed15..f44635dce9 100644
--- a/.changelog/5997-fix-css-fluent-context-2.md
+++ b/.changelog/5997-fix-css-fluent-context-2.md
@@ -4,4 +4,4 @@
 
 ### Removed
 
-- 💥 Style set entries `modalDialog` and `tooltip` are no longer used for rendering and are being deprecated, customizing them has no effect, they will be removed on or after 2028-10-16; their styles moved to CSS modules that keep the `webchat__modal-dialog` and `webchat__tooltip` class names, which hosts can style instead, in PR [#5997](https://github.com/microsoft/BotFramework-WebChat/pull/5997), by [@OEvgeny](https://github.com/OEvgeny)
+- 💥 Deprecated the `modalDialog` and `tooltip` style set entries, which no longer affect rendering, in PR [#5997](https://github.com/microsoft/BotFramework-WebChat/pull/5997), by [@OEvgeny](https://github.com/OEvgeny)

From 669255251652800e5f703fdd47bbf7d634a4d966 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Sun, 1 Nov 2026 12:04:47 -0800
Subject: [PATCH 11/16] Scope the tooltip's parent rule under .webchat, as the
 other Web Chat CSS modules are

The lightning-css vibe-grep rule now also accepts ".webchat :has(> .w<hash>_", for a rule on the parent of a class.
---
 packages/component/src/Tooltip/private/Tooltip.module.css | 4 ++--
 packages/vibe-grep/src/rules/lightning-css.yaml           | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/component/src/Tooltip/private/Tooltip.module.css b/packages/component/src/Tooltip/private/Tooltip.module.css
index 402fedb3fc..d17580161c 100644
--- a/packages/component/src/Tooltip/private/Tooltip.module.css
+++ b/packages/component/src/Tooltip/private/Tooltip.module.css
@@ -1,5 +1,5 @@
-/* The tooltip positions itself against its parent, which can be any element. The hashed class name scopes this rule. */
-:has(> .tooltip) {
+/* The tooltip positions itself against its parent, which can be any element. */
+:global(.webchat) :has(> .tooltip) {
   position: relative;
 
   /* For <button>, the tooltip will be placed inside <button>. */
diff --git a/packages/vibe-grep/src/rules/lightning-css.yaml b/packages/vibe-grep/src/rules/lightning-css.yaml
index a163f6b026..c1e5e2ea0b 100644
--- a/packages/vibe-grep/src/rules/lightning-css.yaml
+++ b/packages/vibe-grep/src/rules/lightning-css.yaml
@@ -3,6 +3,7 @@
 # - Starting from .webchat or .webchat-<themaPackageName>
 # - Followed by optional modifier class
 # - Followed by zero or more spaces
+# - Followed by an optional ":has(> ", for a rule on the parent of a class (e.g. the tooltip)
 # - Followed by a class selector with a 6-character file hash
 # - Followed by an underscore
 
@@ -11,7 +12,7 @@ language: Css
 rule:
   kind: selectors > descendant_selector
   not:
-    regex: "\\.(webchat|webchat-\\w*)(\\.\\w+--[\\w-]+)?\\s*\\.w[a-zA-Z0-9\\-_]{6}_"
+    regex: "\\.(webchat|webchat-\\w*)(\\.\\w+--[\\w-]+)?\\s*(:has\\(>\\s*)?\\.w[a-zA-Z0-9\\-_]{6}_"
 
 description: "Check if CSS is compiled by Lightning CSS plugin conforms to expected selector pattern"
 message: "Output CSS does not conform to Lightning CSS selector pattern. Check that the CSS file is compiled correctly."

From 5114be99efa5fa4283735fa0676195cc0c74fc38 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Sun, 1 Nov 2026 12:12:17 -0800
Subject: [PATCH 12/16] Fold ActivityRow.module.css into
 BasicTranscript.module.css

Its only class, basic-transcript__activity-body, belongs to the transcript. FocusTrap.module.css stays: FocusTrap is also
used by part grouping.
---
 packages/component/src/BasicTranscript.module.css        | 5 +++++
 packages/component/src/Transcript/ActivityRow.module.css | 3 ---
 packages/component/src/Transcript/ActivityRow.tsx        | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)
 delete mode 100644 packages/component/src/Transcript/ActivityRow.module.css

diff --git a/packages/component/src/BasicTranscript.module.css b/packages/component/src/BasicTranscript.module.css
index 1ae315438d..ad1916e448 100644
--- a/packages/component/src/BasicTranscript.module.css
+++ b/packages/component/src/BasicTranscript.module.css
@@ -10,6 +10,11 @@
     flex: 1;
   }
 
+  /* ActivityRow: no styles of its own, themes style it. */
+  .basic-transcript__activity-body {
+    --webchat-preserve-reason: target-class;
+  }
+
   .basic-transcript__scrollable {
     display: flex;
     flex-direction: column;
diff --git a/packages/component/src/Transcript/ActivityRow.module.css b/packages/component/src/Transcript/ActivityRow.module.css
deleted file mode 100644
index 67dfab1a33..0000000000
--- a/packages/component/src/Transcript/ActivityRow.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-:global(.webchat) .basic-transcript__activity-body {
-  --webchat-preserve-reason: target-class;
-}
diff --git a/packages/component/src/Transcript/ActivityRow.tsx b/packages/component/src/Transcript/ActivityRow.tsx
index 706f6a27fb..f93ba99b9c 100644
--- a/packages/component/src/Transcript/ActivityRow.tsx
+++ b/packages/component/src/Transcript/ActivityRow.tsx
@@ -21,7 +21,7 @@ import {
 } from './TranscriptFocus';
 import useActivityAccessibleName from './useActivityAccessibleName';
 
-import styles from './ActivityRow.module.css';
+import styles from '../BasicTranscript.module.css';
 
 import type { WebChatActivity } from 'botframework-webchat-core';
 import type { MouseEventHandler, PropsWithChildren } from 'react';
@@ -36,7 +36,7 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
   const activityRef = useRefFrom(activity);
   const bodyRef = useRef<HTMLDivElement>();
   // Keeps the "webchat__basic-transcript__activity-body" class name.
-  const activityRowClassNames = useStyles(styles, webChatPrefixedClassName);
+  const basicTranscriptClassNames = useStyles(styles, webChatPrefixedClassName);
   const focusByActivityKey = useFocusByActivityKey();
   const getKeyByActivity = useGetKeyByActivity();
   // TODO: [P2] #2858 We should use core/definitions/speakingActivity for this predicate instead
@@ -71,11 +71,11 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
 
   const focusTrapChildren = useMemo(
     () => (
-      <div className={activityRowClassNames['basic-transcript__activity-body']} ref={bodyRef}>
+      <div className={basicTranscriptClassNames['basic-transcript__activity-body']} ref={bodyRef}>
         {children}
       </div>
     ),
-    [activityRowClassNames, bodyRef, children]
+    [basicTranscriptClassNames, bodyRef, children]
   );
 
   const activityIdRef = useRefFrom(activity.id);

From 90202317d7d52aa5f217534ba91d454f09a29406 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Mon, 2 Nov 2026 17:33:26 -0800
Subject: [PATCH 13/16] Style the view code dialog's parts through a CSS module
 theme instead of the modal dialog's readable class names

showModal() takes a CSS module theme, which ModalDialogComposer provides to the dialog. ViewCodeDialog passes its own
class names for the dialog's parts, so its rules no longer depend on webchat__modal-dialog.
---
 .../Text/private/ActivityViewCodeButton.tsx   | 11 +++++++++-
 .../Text/private/ViewCodeDialog.module.css    | 11 +++++-----
 .../ModalDialog/ModalDialogComposer.tsx       | 21 ++++++++++++-------
 .../providers/ModalDialog/private/Context.ts  |  3 +++
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
index 1727a9e470..087a1ee0e0 100644
--- a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
+++ b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
@@ -13,6 +13,14 @@ import styles from './ViewCodeDialog.module.css';
 
 const { useLocalizer } = hooks;
 
+// Class names of this module for the modal dialog's parts, which ViewCodeDialog.module.css styles.
+const modalDialogTheme = Object.freeze({
+  'modal-dialog': styles['modal-dialog'],
+  'modal-dialog__body': styles['modal-dialog__body'],
+  'modal-dialog__box': styles['modal-dialog__box'],
+  'modal-dialog__close-button-layout': styles['modal-dialog__close-button-layout']
+});
+
 const activityViewCodeButtonPropsSchema = pipe(
   object({
     className: optional(string()),
@@ -45,8 +53,9 @@ const ActivityViewCodeButton = (props: ActivityViewCodeButtonProps) => {
         </CodeContent>
       ),
       {
+        'aria-label': localize('ACTIVITY_CODE_ALT', title ?? ''),
         className: classNames['view-code-dialog'],
-        'aria-label': localize('ACTIVITY_CODE_ALT', title ?? '')
+        cssModuleTheme: modalDialogTheme
       }
     );
   }, [code, isAIGenerated, language, localize, showModal, title, classNames]);
diff --git a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
index 0b94a6e997..b54cf53f39 100644
--- a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
+++ b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
@@ -1,5 +1,6 @@
-/* The modal dialog rules (Popover.module.css) can come later in the stylesheet: out-specify them instead of relying on order. */
-:global(.webchat) .view-code-dialog:global(.webchat__modal-dialog) {
+/* The modal dialog renders with this module as its CSS module theme (see ActivityViewCodeButton), so its parts get the
+   local names below. The modal dialog rules (Popover.module.css) can come later in the stylesheet: out-specify them. */
+:global(.webchat) .view-code-dialog.modal-dialog {
   box-sizing: border-box;
   display: grid;
   height: 100%;
@@ -9,7 +10,7 @@
   place-items: center;
 }
 
-:global(.webchat) .view-code-dialog:global(.webchat__modal-dialog) :global(.webchat__modal-dialog__box) {
+:global(.webchat) .view-code-dialog.modal-dialog .modal-dialog__box {
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -17,12 +18,12 @@
   position: relative;
 }
 
-:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__close-button-layout) {
+:global(.webchat) .view-code-dialog .modal-dialog__close-button-layout {
   position: absolute;
   right: 0;
 }
 
-:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__body) {
+:global(.webchat) .view-code-dialog .modal-dialog__body {
   display: flex;
   flex-direction: column;
   gap: var(--webchat__padding--regular);
diff --git a/packages/component/src/providers/ModalDialog/ModalDialogComposer.tsx b/packages/component/src/providers/ModalDialog/ModalDialogComposer.tsx
index 595a6572c6..4e240c8c79 100644
--- a/packages/component/src/providers/ModalDialog/ModalDialogComposer.tsx
+++ b/packages/component/src/providers/ModalDialog/ModalDialogComposer.tsx
@@ -1,3 +1,4 @@
+import { CSSModuleThemeComposer } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo, type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import Context from './private/Context';
@@ -13,6 +14,8 @@ type RenderFunctionAndDialogInit = Readonly<[RenderFunction, DialogInit | undefi
 
 type Props = Readonly<{ children?: ReactNode }>;
 
+const EMPTY_THEME = Object.freeze({});
+
 const ModalDialogComposer = memo(({ children }: Props) => {
   const [renderFunctionAndDialogInit, setRenderFunctionAndDialogInit] = useState<
     RenderFunctionAndDialogInit | undefined
@@ -30,14 +33,16 @@ const ModalDialogComposer = memo(({ children }: Props) => {
     <Context.Provider value={context}>
       {children}
       {renderFunctionAndDialogInit && (
-        <ModalDialog
-          aria-label={renderFunctionAndDialogInit[1]?.['aria-label']}
-          aria-labelledby={renderFunctionAndDialogInit[1]?.['aria-labelledby']}
-          className={renderFunctionAndDialogInit[1]?.className}
-          onDismiss={close}
-        >
-          {renderFunctionAndDialogInit[0]()}
-        </ModalDialog>
+        <CSSModuleThemeComposer theme={renderFunctionAndDialogInit[1]?.cssModuleTheme ?? EMPTY_THEME}>
+          <ModalDialog
+            aria-label={renderFunctionAndDialogInit[1]?.['aria-label']}
+            aria-labelledby={renderFunctionAndDialogInit[1]?.['aria-labelledby']}
+            className={renderFunctionAndDialogInit[1]?.className}
+            onDismiss={close}
+          >
+            {renderFunctionAndDialogInit[0]()}
+          </ModalDialog>
+        </CSSModuleThemeComposer>
       )}
     </Context.Provider>
   );
diff --git a/packages/component/src/providers/ModalDialog/private/Context.ts b/packages/component/src/providers/ModalDialog/private/Context.ts
index 7ba3a66a3c..064a6a6527 100644
--- a/packages/component/src/providers/ModalDialog/private/Context.ts
+++ b/packages/component/src/providers/ModalDialog/private/Context.ts
@@ -1,9 +1,12 @@
+import { type CSSModuleTheme } from '@msinternal/botframework-webchat-styles/react';
 import { createContext, type ReactNode } from 'react';
 
 type DialogInit = {
   'aria-label'?: string;
   'aria-labelledby'?: string;
   className?: string;
+  /** Class names for the local names of the dialog's parts (e.g. "modal-dialog__box"), so the caller can style them. */
+  cssModuleTheme?: CSSModuleTheme | undefined;
 };
 
 type RenderFunction = () => ReactNode;

From a6e951f55c7bde057b705a835df461905841d723 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Mon, 2 Nov 2026 18:25:00 -0800
Subject: [PATCH 14/16] Move the view code dialog's rules for the modal
 dialog's parts into a module passed whole as its theme

Replaces the hand-picked list of class names with ViewCodeDialogTheme.module.css. Its class names only reach this
dialog, and ":is(dialog)" out-specifies Popover.module.css as ".view-code-dialog" did.
---
 .../Text/private/ActivityViewCodeButton.tsx   | 11 ++-----
 .../Text/private/ViewCodeDialog.module.css    | 32 -------------------
 .../private/ViewCodeDialogTheme.module.css    | 32 +++++++++++++++++++
 3 files changed, 34 insertions(+), 41 deletions(-)
 create mode 100644 packages/component/src/Attachment/Text/private/ViewCodeDialogTheme.module.css

diff --git a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
index 087a1ee0e0..fddc8dce7e 100644
--- a/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
+++ b/packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx
@@ -10,17 +10,10 @@ import ActivityButton from './ActivityButton';
 import CodeContent from './CodeContent';
 
 import styles from './ViewCodeDialog.module.css';
+import themeStyles from './ViewCodeDialogTheme.module.css';
 
 const { useLocalizer } = hooks;
 
-// Class names of this module for the modal dialog's parts, which ViewCodeDialog.module.css styles.
-const modalDialogTheme = Object.freeze({
-  'modal-dialog': styles['modal-dialog'],
-  'modal-dialog__body': styles['modal-dialog__body'],
-  'modal-dialog__box': styles['modal-dialog__box'],
-  'modal-dialog__close-button-layout': styles['modal-dialog__close-button-layout']
-});
-
 const activityViewCodeButtonPropsSchema = pipe(
   object({
     className: optional(string()),
@@ -55,7 +48,7 @@ const ActivityViewCodeButton = (props: ActivityViewCodeButtonProps) => {
       {
         'aria-label': localize('ACTIVITY_CODE_ALT', title ?? ''),
         className: classNames['view-code-dialog'],
-        cssModuleTheme: modalDialogTheme
+        cssModuleTheme: themeStyles
       }
     );
   }, [code, isAIGenerated, language, localize, showModal, title, classNames]);
diff --git a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
index b54cf53f39..e5b268b7d2 100644
--- a/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
+++ b/packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css
@@ -1,35 +1,3 @@
-/* The modal dialog renders with this module as its CSS module theme (see ActivityViewCodeButton), so its parts get the
-   local names below. The modal dialog rules (Popover.module.css) can come later in the stylesheet: out-specify them. */
-:global(.webchat) .view-code-dialog.modal-dialog {
-  box-sizing: border-box;
-  display: grid;
-  height: 100%;
-  max-height: 100vh;
-  overflow: hidden;
-  padding: 1rem;
-  place-items: center;
-}
-
-:global(.webchat) .view-code-dialog.modal-dialog .modal-dialog__box {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
-  position: relative;
-}
-
-:global(.webchat) .view-code-dialog .modal-dialog__close-button-layout {
-  position: absolute;
-  right: 0;
-}
-
-:global(.webchat) .view-code-dialog .modal-dialog__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--webchat__padding--regular);
-  overflow: hidden;
-}
-
 :global(.webchat) .view-code-dialog__header {
   align-items: center;
   display: flex;
diff --git a/packages/component/src/Attachment/Text/private/ViewCodeDialogTheme.module.css b/packages/component/src/Attachment/Text/private/ViewCodeDialogTheme.module.css
new file mode 100644
index 0000000000..3a8c1104b4
--- /dev/null
+++ b/packages/component/src/Attachment/Text/private/ViewCodeDialogTheme.module.css
@@ -0,0 +1,32 @@
+/* The CSS module theme of the view code dialog: ActivityViewCodeButton passes it whole to showModal(), so the modal
+   dialog's parts get these class names, and only in this dialog. */
+/* The modal dialog rules (Popover.module.css) can come later in the stylesheet: ":is(dialog)" out-specifies them. */
+:global(.webchat) .modal-dialog:is(dialog) {
+  box-sizing: border-box;
+  display: grid;
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  padding: 1rem;
+  place-items: center;
+
+  .modal-dialog__box {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    max-width: 100%;
+    position: relative;
+  }
+
+  .modal-dialog__close-button-layout {
+    position: absolute;
+    right: 0;
+  }
+
+  .modal-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--webchat__padding--regular);
+    overflow: hidden;
+  }
+}

From 646267821a3bbea487767f16e4325d1eaaed44f3 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Mon, 2 Nov 2026 18:55:37 -0800
Subject: [PATCH 15/16] Turn the transcript list and activity focus target
 classes into BasicTranscript.module.css local names

They keep their webchat__ class names on the DOM; BasicTranscript.module.css no longer selects them through :global().
---
 packages/component/src/BasicTranscript.module.css | 4 ++--
 packages/component/src/BasicTranscript.tsx        | 2 +-
 packages/component/src/Transcript/ActivityRow.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/component/src/BasicTranscript.module.css b/packages/component/src/BasicTranscript.module.css
index ad1916e448..009f0a845b 100644
--- a/packages/component/src/BasicTranscript.module.css
+++ b/packages/component/src/BasicTranscript.module.css
@@ -22,11 +22,11 @@
     -webkit-overflow-scrolling: touch;
   }
 
-  :global(.webchat__basic-transcript__transcript) {
+  .basic-transcript__transcript {
     list-style-type: none;
   }
 
-  :global(.webchat__basic-transcript__activity-focus-target) {
+  .basic-transcript__activity-focus-target {
     pointer-events: none;
   }
 }
diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
index 126b0e2360..7c4374ecea 100644
--- a/packages/component/src/BasicTranscript.tsx
+++ b/packages/component/src/BasicTranscript.tsx
@@ -484,7 +484,7 @@ const InternalTranscriptScrollable = ({ children, onFocusFiller }: InternalTrans
         {hasAnyChild && (
           <TranscriptActivityList
             aria-roledescription={transcriptRoleDescription}
-            className={classNames(activitiesStyleSet + '', 'webchat__basic-transcript__transcript')}
+            className={classNames(activitiesStyleSet + '', transcriptClassNames['basic-transcript__transcript'])}
             role="feed"
           >
             {children}
diff --git a/packages/component/src/Transcript/ActivityRow.tsx b/packages/component/src/Transcript/ActivityRow.tsx
index f93ba99b9c..7b65d4f1c8 100644
--- a/packages/component/src/Transcript/ActivityRow.tsx
+++ b/packages/component/src/Transcript/ActivityRow.tsx
@@ -150,7 +150,7 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
       <FocusTrap
         onFocus={handleDescendantFocus}
         onLeave={handleLeaveFocusTrap}
-        targetClassName="webchat__basic-transcript__activity-focus-target"
+        targetClassName={basicTranscriptClassNames['basic-transcript__activity-focus-target']}
       >
         {focusTrapChildren}
       </FocusTrap>

From 6b09b1ece323e4f62b3c01f520a7a6c415ecda0a Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Mon, 2 Nov 2026 21:39:07 -0800
Subject: [PATCH 16/16] Keep Fluent's hover background on the focused modal
 dialog close button

Popover.module.css is injected after the Fluent stylesheet, so its focused hover rule tied with
Fluent's hover rule and won with its light gray background, also in dark themes.
---
 .../modalDialog.closeButton.hover.dark.html   | 112 ++++++++++++++++++
 ...log.closeButton.hover.dark.html.snap-1.png | Bin 0 -> 18921 bytes
 ...log.closeButton.hover.dark.html.snap-2.png | Bin 0 -> 18921 bytes
 .../private/fluentCSSModuleTheme.module.css   |   4 +-
 4 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html
 create mode 100644 __tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html.snap-1.png
 create mode 100644 __tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html.snap-2.png

diff --git a/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html b/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html
new file mode 100644
index 0000000000..d5a873a30d
--- /dev/null
+++ b/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <title>Fluent Theme (dark): focused modal dialog close button on hover</title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "@fluentui/react-provider": "/__dist__/packages/test/test-assets/out/@fluentui/react-provider.js",
+          "@fluentui/tokens": "/__dist__/packages/test/test-assets/out/@fluentui/tokens.js",
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "react": "https://esm.sh/react@18",
+          "react-dom": "https://esm.sh/react-dom@18",
+          "react-dom/": "https://esm.sh/react-dom@18/",
+          "react-jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
+        }
+      }
+    </script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <style>
+      .fui-FluentProvider {
+        display: contents;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="module">
+      import { FluentProvider } from '@fluentui/react-provider';
+      import { webDarkTheme } from '@fluentui/tokens';
+      import { waitFor } from '@testduet/wait-for';
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          WebChat: { FluentThemeProvider, ReactWebChat, testIds }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        // Fluent shortens its transitions with reduced motion, so the hover background shows without fading in.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-reduced-motion', value: 'reduce' }]
+        });
+
+        createRoot(document.getElementById('webchat')).render(
+          React.createElement(
+            FluentProvider,
+            { className: 'fui-FluentProvider', theme: webDarkTheme },
+            React.createElement(
+              FluentThemeProvider,
+              null,
+              React.createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
+            )
+          )
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: A message with AI-generated code.
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              isBasedOn: { '@type': 'SoftwareSourceCode', programmingLanguage: 'javascript', text: 'const x = 1;' },
+              keywords: ['AIGeneratedContent'],
+              type: 'https://schema.org/Message'
+            }
+          ],
+          from: { role: 'bot' },
+          text: 'Here is a sample in JavaScript.',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: The "View code" dialog is opened with the keyboard.
+        document.querySelector(`[data-testid="${testIds.viewCodeButton}"]`).focus();
+        await host.sendKeys('ENTER');
+
+        await waitFor(() => expect(document.querySelector('dialog[open] pre.shiki')).toBeTruthy());
+
+        const closeButton = document.querySelector('dialog[open] button[aria-label="Close"]');
+
+        // THEN: The close button should have focus.
+        expect(document.activeElement).toBe(closeButton);
+
+        // THEN: The focused close button shows the focus border.
+        await host.snapshot('local');
+
+        // WHEN: The pointer hovers over the focused close button.
+        await host.hover(closeButton);
+
+        await waitFor(() => expect(closeButton.matches(':hover')).toBe(true));
+        expect(document.activeElement).toBe(closeButton);
+
+        // THEN: The close button background should turn darker (Fluent's dark hover color), not light gray.
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html.snap-1.png b/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html.snap-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b65a8745c23ff0e849a63acf5e5a5f4def68c92b
GIT binary patch
literal 18921
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
D=@d3^

literal 0
HcmV?d00001

diff --git a/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html.snap-2.png b/__tests__/html2/fluentTheme/modalDialog.closeButton.hover.dark.html.snap-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3c36c80965424b623bd8f075ba8016977e1355e
GIT binary patch
literal 18921
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

literal 0
HcmV?d00001

diff --git a/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css b/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css
index 1d8eeda5f0..64202c66ce 100644
--- a/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css
+++ b/packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css
@@ -1205,7 +1205,9 @@
   }
 
   /* TODO: align with original fluent modal styles in WebChat as they don't match v9 anymore */
-  .modal-dialog__close-button:not(:active):hover {
+  /* Popover.module.css can come later in the stylesheet: the ":focus" selector out-specifies its focused hover rule. */
+  .modal-dialog__close-button:not(:active):hover,
+  .modal-dialog__close-button:focus:not(:active):hover {
     background-color: var(--webchat-colorNeutralBackground3);
   }