botframework-webchat-fluent-theme 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/components/theme/Theme.module.css

@@ -1,37 +1,72 @@
+:global {
+  /* biome-ignore format: do not print each class on the new line */
+  .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o, .p, .q, .r, .s, .t, .v, .w, .u, .x, .y, .z,
+  .A, .B, .C, .D, .E, .F, .G, .H, .I, .J, .K, .L, .M, .N, .O, .P, .Q, .R, .S, .T, .V, .W, .U, .X, .Y, .Z {
+    /* esbuild considers empty global classes as used and removes them due to lack of rules */
+  }
+}
 
 :global(.webchat-fluent).theme {
   display: contents;
 
+  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);
   --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);
+  --webchat-colorNeutralForeground1Hover: var(--colorNeutralForeground1Hover, #242424);
+  --webchat-colorNeutralForeground1Pressed: var(--colorNeutralForeground1Pressed, #242424);
   --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);
-  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
-
   --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);
   --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);
   --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);
+  --webchat-colorNeutralForeground3: var(--colorNeutralForeground3, #616161);
+  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
+  --webchat-colorNeutralForeground5: var(--colorNeutralForeground5, #7e7e7e);
 
-  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);
+  --webchat-colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand, #fff);
 
+  --webchat-colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled, #f0f0f0);
   --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);
+  --webchat-colorNeutralBackground1Hover: var(--colorNeutralBackground1Hover, #f5f5f5);
+  --webchat-colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed, #e0e0e0);
+  --webchat-colorNeutralBackground3: var(--colorNeutralBackground3, #f5f5f5);
   --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
+  --webchat-colorNeutralBackground6: var(--colorNeutralBackground6, #e6e6e6);
+
+  --webchat-colorNeutralStencil1: var(--colorNeutralStencil1, #e6e6e6); /* #575757 for dark mode */
+  --webchat-colorNeutralStencil2: var(--colorNeutralStencil2, #fafafa); /* #333333 for dark mode */
+
+  --webchat-colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient, rgba(0, 0, 0, 0.12));
+  --webchat-colorNeutralShadowKey: var(--colorNeutralShadowKey, rgba(0, 0, 0, 0.14));
 
+  --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
+
+  --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
   --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
-  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
+  --webchat-colorNeutralStroke1Hover: var(--colorNeutralStroke1Hover, #c7c7c7);
+  --webchat-colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed, #b3b3b3);
   --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);
-  
+  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
+
   --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);
 
   --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);
+  --webchat-colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed, #01384d);
 
+  --webchat-colorTransparentStroke: var(--colorTransparentStroke, transparent);
+
+  --webchat-colorBrandForeground1: var(--colorBrandForeground1, #01678c);
   --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);
   --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);
 
   --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);
   --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);
   --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);
-  --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);  
+  --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);
 
+  --webchat-colorBrandBackground: var(--colorBrandBackground, #077fab);
+  --webchat-colorBrandBackgroundHover: var(--colorBrandBackgroundHover, #06729a);
+  --webchat-colorBrandBackgroundPressed: var(--colorBrandBackgroundPressed, #044760);
+  --webchat-colorBrandBackground2: var(--colorBrandBackground2, #def2fc);
   --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);
   --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);
 
@@ -45,31 +80,113 @@
   --webchat-colorGray190: var(--colorGray190, #201f1e);
   --webchat-colorGray200: var(--colorGray200, #1b1a19);
 
-  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */
-  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);
-  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);
-  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);
+  /* New greys from the link above not exposed by Fluent */
+  --webchat-colorGrey8: #141414;
+  --webchat-colorGrey14: #242424;
+  --webchat-colorGrey92: #ebebeb;
+  --webchat-colorGrey98: #fafafa;
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
+  --webchat-shadow2: var(--shadow2, 0 0 2px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 14%));
+  --webchat-shadow4: var(--shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));
   --webchat-shadow16: var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108));
+  --webchat-shadow64: var(--shadow64, 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14));
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */
+  --webchat-spacingHorizontalNone: var(--spacingHorizontalNone, 0);
+  --webchat-spacingHorizontalXXS: var(--spacingHorizontalXXS, 2px);
+  --webchat-spacingHorizontalXS: var(--spacingHorizontalXS, 4px);
+  --webchat-spacingHorizontalSNudge: var(--spacingHorizontalSNudge, 6px);
+  --webchat-spacingHorizontalS: var(--spacingHorizontalS, 8px);
   --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);
+  --webchat-spacingHorizontalM: var(--spacingHorizontalM, 12px);
+  --webchat-spacingHorizontalL: var(--spacingHorizontalL, 16px);
+  --webchat-spacingHorizontalXL: var(--spacingHorizontalXL, 20px);
+  --webchat-spacingHorizontalXXL: var(--spacingHorizontalXXL, 24px);
+  --webchat-spacingHorizontalXXXL: var(--spacingHorizontalXXXL, 32px);
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */
+  --webchat-spacingVerticalNone: var(--spacingVerticalNone, 0);
+  --webchat-spacingVerticalXXS: var(--spacingVerticalXXS, 2px);
+  --webchat-spacingVerticalXS: var(--spacingVerticalXS, 4px);
+  --webchat-spacingVerticalSNudge: var(--spacingVerticalSNudge, 6px);
+  --webchat-spacingVerticalS: var(--spacingVerticalS, 8px);
+  --webchat-spacingVerticalMNudge: var(--spacingVerticalMNudge, 10px);
+  --webchat-spacingVerticalM: var(--spacingVerticalM, 12px);
+  --webchat-spacingVerticalL: var(--spacingVerticalL, 16px);
+  --webchat-spacingVerticalXL: var(--spacingVerticalXL, 20px);
+  --webchat-spacingVerticalXXL: var(--spacingVerticalXXL, 24px);
+  --webchat-spacingVerticalXXXL: var(--spacingVerticalXXXL, 32px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
-  --webchat-fontFamilyBase: var(--fontFamilyBase, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
-  --webchat-fontFamilyNumeric: var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
+  --webchat-fontFamilyBase: var(
+    --fontFamilyBase,
+    'Segoe UI',
+    'Segoe UI Web (West European)',
+    -apple-system,
+    BlinkMacSystemFont,
+    Roboto,
+    'Helvetica Neue',
+    sans-serif
+  );
+  --webchat-fontFamilyMonospace: var(--fontFamilyMonospace, Consolas, 'Courier New', Courier, monospace);
+  --webchat-fontFamilyNumeric: var(
+    --fontFamilyNumeric,
+    Bahnschrift,
+    'Segoe UI',
+    'Segoe UI Web (West European)',
+    -apple-system,
+    BlinkMacSystemFont,
+    Roboto,
+    'Helvetica Neue',
+    sans-serif
+  );
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
+  --webchat-fontWeightRegular: var(--fontWeightRegular, 400);
   --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);
-  
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
+  --webchat-fontSizeBase100: var(--fontSizeBase100, 10px);
+  --webchat-fontSizeBase200: var(--fontSizeBase200, 12px);
+  --webchat-fontSizeBase300: var(--fontSizeBase300, 14px);
+  --webchat-fontSizeBase400: var(--fontSizeBase400, 16px);
+  --webchat-fontSizeBase500: var(--fontSizeBase500, 20px);
+  --webchat-fontSizeBase600: var(--fontSizeBase600, 24px);
+  --webchat-fontSizeHero700: var(--fontSizeHero700, 28px);
+  --webchat-fontSizeHero800: var(--fontSizeHero800, 32px);
+  --webchat-fontSizeHero900: var(--fontSizeHero900, 40px);
+
+  --webchat-lineHeightBase100: var(--lineHeightBase100, 14px);
+  --webchat-lineHeightBase200: var(--lineHeightBase200, 16px);
+  --webchat-lineHeightBase300: var(--lineHeightBase300, 20px);
+  --webchat-lineHeightBase400: var(--lineHeightBase400, 22px);
+  --webchat-lineHeightBase500: var(--lineHeightBase500, 28px);
+  --webchat-lineHeightBase600: var(--lineHeightBase600, 32px);
+  --webchat-lineHeightHero700: var(--lineHeightHero700, 36px);
+  --webchat-lineHeightHero800: var(--lineHeightHero800, 40px);
+  --webchat-lineHeightHero900: var(--lineHeightHero900, 52px);
+  --webchat-lineHeightHero1000: var(--lineHeightHero1000, 92px);
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */
+  --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);
+  --webchat-borderRadiusMedium: var(--borderRadiusMedium, 4px);
+  --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);
+  --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/strokeWidths.ts */
+  --webchat-strokeWidthThin: var(--strokeWidthThin, 1px);
+  --webchat-strokeWidthThick: var(--strokeWidthThick, 2px);
   --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
 
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts */
   --webchat-durationUltraFast: var(--durationUltraFast, 0);
   --webchat-durationNormal: var(--durationNormal, 200ms);
+  --webchat-durationUltraSlow: var(--durationUltraSlow, 500ms);
 
-  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
-  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts */
+  --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1, 0, 1, 1));
+  --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0, 0, 0, 1));
 }
 
 @media (prefers-reduced-motion) {
@@ -77,4 +194,537 @@
     --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__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__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-spacingHorizontalXL)
+    var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalMNudge);
+}
+
+/* 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);
+}
+
+/* Scrollbars */
+:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body),
+:global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block']),
+:global(.webchat-fluent).theme :global(.webchat__feedback-form-text-area-input--scroll),
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__body) {
+  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
+  scrollbar-color: unset;
+  scrollbar-width: unset;
+  /* Firefox */
+  -moz-scrollbar-color: var(--webchat-colorNeutralForeground5) transparent;
+  -moz-scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: var(--webchat-spacingVerticalMNudge);
+    width: var(--webchat-spacingVerticalMNudge);
+    visibility: hidden;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  &:hover::-webkit-scrollbar {
+    height: var(--webchat-spacingVerticalMNudge);
+    width: var(--webchat-spacingVerticalMNudge);
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--webchat-colorNeutralForeground5);
+    border-radius: 10px;
+    border-right: 4px solid transparent;
+    border: 3px solid transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb:hover {
+    background-clip: padding-box;
+    background-color: var(--webchat-colorNeutralForeground5);
+    border-radius: 10px;
+    border-right: 2px solid transparent;
+    border: 1px solid transparent;
+  }
+}
+
+:global(.webchat-fluent).theme.variant-copilot
+  :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
+  scrollbar-gutter: stable;
+}
+
+/* Transcript focus indicator color when in focus-visible state */
+:global(.webchat-fluent).theme
+  :global(
+    .webchat__basic-transcript
+    .webchat__basic-transcript__terminator:focus-visible
+    + .webchat__basic-transcript__focus-indicator
+  ) {
+  border-color: var(--webchat-colorStrokeFocus2);
+}
+
+/* Transcript Activity indicator without focus-visible state */
+:global(.webchat-fluent).theme
+  :global(.webchat__basic-transcript:not(:focus-visible) .webchat__basic-transcript__activity-indicator--focus) {
+  /* Hide activity focus when no focus-visible state */
+  display: none;
+}
+
+/* Transcript Focus indicator when activity focused */
+:global(.webchat-fluent).theme
+  :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) {
+  :global(.webchat__basic-transcript__focus-indicator) {
+    /* Hide transcript focus when an activity is focused */
+    display: none;
+  }
+}
+
+/* Transcript focused activity */
+:global(.webchat-fluent).theme
+  :global(
+    .webchat__basic-transcript:focus-visible
+    .webchat__basic-transcript__activity:has(.webchat__basic-transcript__activity-indicator--focus)
+  ) {
+  :global(.webchat__basic-transcript__activity-indicator--focus) {
+    /* Hide transcript activity focus when the activity is focused */
+    display: none;
+  }
+
+  :global(.webchat__bubble)::after,
+  :global(.pre-chat-message-activity)::after {
+    border-radius: var(--webchat__bubble--border-radius);
+    content: '';
+    inset: 0;
+    outline-offset: 0;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    pointer-events: none;
+    position: absolute;
+  }
+
+  :global(.pre-chat-message-activity)::after {
+    border-radius: var(--webchat-borderRadiusMedium);
+    outline-offset: -3px;
+  }
+
+  :global(.liner-message-activity__text) {
+    border-radius: 20px;
+    outline-offset: 4px;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  }
+}
+
+/* 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(.webchat__basic-transcript__activity: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-colorTransparentBackground);
+  }
+
+  :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-image) {
+    fill: currentColor;
+  }
+}
+
+/* Code block */
+:global(.webchat-fluent).theme :global(.webchat__code-block) {
+  border: none;
+  font-family: var(--webchat-fontFamilyMonospace);
+  font-size: var(--webchat-fontSizeBase300);
+
+  --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
+  --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
+
+  :global(.webchat__code-block-copy-button) {
+    background: transparent;
+    border: none;
+    color: var(--webchat__code-block__copy-button--color);
+    height: 20px;
+    margin-inline-start: var(--webchat-spacingHorizontalS);
+    padding: 0;
+    width: 20px;
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+
+    :global(.webchat__code-block-copy-button__icon) {
+      background-color: currentColor;
+    }
+
+    &:hover {
+      background: var(--webchat__code-block__copy-button--background);
+      color: var(--webchat__code-block__copy-button--color);
+    }
+
+    &:active {
+      background: var(--webchat__code-block__copy-button--background);
+      color: var(--webchat__code-block__copy-button--color);
+    }
+
+    &:focus {
+      color: var(--webchat__code-block__copy-button--color);
+      outline-color: currentColor;
+    }
+  }
+
+  &:global(:has(.webchat__code-block__body:focus-visible)):focus-within {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
+
+    :global(.webchat__code-block__body) {
+      outline: none;
+    }
+  }
+
+  &:global(:has(> .webchat__code-block__theme--github-dark-default)) {
+    --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey8));
+    --webchat__code-block__copy-button--background: var(
+      --codeBlockCopyButtonBackgroundPressed,
+      var(--webchat-colorGrey14)
+    );
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonForeground, var(--webchat__color--code-block));
+    --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey98));
+  }
+
+  &:global(:has(> .webchat__code-block__theme--github-light-default)) {
+    --webchat__background--code-block: var(--codeBlockBackground, var(--webchat-colorGrey98));
+    --webchat__code-block__copy-button--background: var(--codeBlockBackgroundPressed, var(--webchat-colorGrey92));
+    --webchat__code-block__copy-button--color: var(--codeBlockCopyButtonForeground, var(--webchat__color--code-block));
+    --webchat__color--code-block: var(--codeBlockForeground, var(--webchat-colorGrey8));
+  }
+}
+
+/* View Code dialog */
+:global(.webchat-fluent).theme :global(.webchat__modal-dialog.webchat__view-code-dialog) {
+  :global(.webchat__modal-dialog__close-button-layout) {
+    display: flex;
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__modal-dialog__close-button) {
+    align-items: center;
+    aspect-ratio: 1;
+    display: flex;
+    height: var(--webchat-lineHeightBase300);
+    justify-content: center;
+    padding: 0;
+    width: unset;
+  }
+
+  :global(.webchat__code-block-copy-button) {
+    --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
+    --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
+
+    margin-block-start: var(--webchat-spacingVerticalS);
+    position: absolute;
+    right: 32px;
+    top: 0;
+  }
+
+  :global(.webchat__modal-dialog__box) {
+    width: fit-content;
+  }
+
+  :global(.webchat__modal-dialog__body) {
+    margin: 0;
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
+  }
+
+  :global(.webchat__view-code-dialog__title) {
+    font-size: var(--webchat-fontSizeBase300);
+    font-weight: var(--webchat-fontWeightSemibold);
+    line-height: var(--webchat-lineHeightBase300);
+  }
+
+  :global(.webchat__view-code-dialog__body) {
+    font-family: var(--webchat-fontFamilyMonospace);
+    font-size: var(--webchat-fontSizeBase300);
+    margin: 0 calc(var(--webchat-spacingHorizontalM) * -1);
+    padding: 0 var(--webchat-spacingHorizontalM);
+  }
+
+  :global(.webchat__view-code-dialog__footer) {
+    color: var(--webchat-colorNeutralForeground4);
+    font-size: var(--webchat-fontSizeBase100);
+    line-height: var(--webchat-lineHeightBase100);
+  }
+
+  :global(.webchat__view-code-dialog__link) {
+    color: var(--webchat-colorBrandForegroundLink);
+    text-decoration-color: transparent;
+
+    &:target {
+      color: var(--webchat-colorBrandForegroundLinkSelected);
+    }
+    &:hover {
+      color: var(--webchat-colorBrandForegroundLinkHover);
+      text-decoration: underline 1px currentColor;
+    }
+    &:active {
+      color: var(--webchat-colorBrandForegroundLinkPressed);
+    }
+    &:focus-visible {
+      outline: none;
+      text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+    }
+  }
+}
+
+/* Activity button */
+:global(.webchat-fluent).theme :global(.webchat__activity-button) {
+  background: var(--webchat-colorNeutralBackground1);
+  border-radius: var(--webchat-borderRadiusMedium);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+  color: var(--webchat-colorNeutralForeground1);
+  gap: var(--webchat-spacingHorizontalXS);
+  padding: 5px var(--webchat-spacingHorizontalM);
+
+  &:hover {
+    background: var(--webchat-colorNeutralBackground1Hover);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+    color: var(--webchat-colorNeutralForeground1Hover);
+  }
+
+  &:active {
+    background: var(--webchat-colorNeutralBackground1Pressed);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+    color: var(--webchat-colorNeutralForeground1Pressed);
+  }
+
+  &:focus-visible {
+    background: var(--webchat-colorNeutralBackground1);
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
+  }
+
+  &[aria-disabled='true'] {
+    background: var(--webchat-colorNeutralBackgroundDisabled);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStrokeDisabled);
+    color: var(--webchat-colorNeutralForegroundDisabled);
+  }
+
+  :global(.webchat__activity-button__icon) {
+    height: 20px;
+    width: 20px;
+  }
+}
+
+/* Copy button */
+:global(.webchat-fluent).theme :global(.webchat__activity-copy-button) {
+  :global(.webchat__activity-copy-button__copied-text) {
+    background-color: var(--webchat-colorNeutralBackground1);
+  }
+
+  &:global(.webchat__activity-copy-button--copied) :global(.webchat__activity-copy-button__copied-text) {
+    animation-duration: var(--webchat-durationUltraSlow);
+  }
+}
+
+/* Monochrome image masker */
+:global(.webchat-fluent).theme :global(.webchat__monochrome-image-masker) {
+  background-color: currentColor;
+  height: 1em;
+  width: 1em;
+}
+
+/* Feedback button */
+:global(.webchat-fluent).theme :global(.webchat__thumb-button) {
+  color: var(--webchat-colorNeutralForeground1);
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+  }
+}
+
+/* Tooltip */
+:global(.webchat-fluent).theme :global(.webchat__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 :global(.webchat__feedback-form) {
+  gap: var(--webchat-spacingVerticalXS);
+
+  :global(.webchat__feedback-form__body) {
+    font-family: var(--webchat-fontFamilyBase);
+    color: var(--webchat-colorNeutralForeground1);
+    font-size: var(--webchat-fontSizeBase300);
+    font-weight: var(--webchat-fontWeightRegular);
+    line-height: var(--webchat-lineHeightBase300);
+  }
+  
+  :global(.webchat__feedback-form__caption) {
+    font-family: var(--webchat-fontFamilyBase);
+    color: var(--webchat-colorNeutralForeground1);
+    font-size: var(--webchat-fontSizeBase100);
+    font-weight: var(--webchat-fontWeightRegular);
+    line-height: var(--webchat-lineHeightBase200);
+  }
+  
+  :global(.webchat__feedback-form__submit-button) {
+    background-color: var(--webchat-colorBrandBackground);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForegroundOnBrand);
+    cursor: pointer;
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  
+    &:hover {
+      background-color: var(--webchat-colorBrandBackgroundHover);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundHover);
+    }
+  
+    &:focus-visible {
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+    }
+  
+    &:active {
+      background-color: var(--webchat-colorBrandBackgroundPressed);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundPressed);
+    }
+  }
+  
+  :global(.webchat__feedback-form__cancel-button) {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForeground1);
+    cursor: pointer;
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  
+    &:hover {
+      background-color: var(--webchat-colorNeutralBackground1Hover);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+    }
+  
+    &:focus-visible {
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+    }
+  
+    &:active {
+      background-color: var(--webchat-colorNeutralBackground1Pressed);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+    }
+  }
+  
+  :global(.webchat__feedback-form-text-area) {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    line-height: var(--webchat-lineHeightBase300);
+    gap: var(--webchat-spacingVerticalSNudge);
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
+    &::after {
+      border-bottom-left-radius: var(--webchat-borderRadiusMedium);
+      border-bottom-right-radius: var(--webchat-borderRadiusMedium);
+      border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
+      clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    }
+    &:focus-within {
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    }
+    &:focus-within::after {
+      clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    }
+  }  
 }