: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-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-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-colorBackgroundOverlay: var(
    --colorBackgroundOverlay,
    rgba(0, 0, 0, 0.4)
  ); /* rgba(0, 0, 0, 0.5) for dark mode */
  --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));

  --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
  --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
  --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-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);

  --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);

  --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);

  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts */
  --webchat-colorGray30: var(--colorGray30, #edebe9);
  --webchat-colorGray160: var(--colorGray160, #323130);
  --webchat-colorGray190: var(--colorGray190, #201f1e);
  --webchat-colorGray200: var(--colorGray200, #1b1a19);

  /* 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-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);
  --webchat-borderRadius2XLarge: var(--borderRadius2XLarge, 12px);

  /* 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, 50ms);
  --webchat-durationNormal: var(--durationNormal, 200ms);
  --webchat-durationUltraSlow: var(--durationUltraSlow, 500ms);

  /* 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) {
  :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);
}

/* Scrollbars */
:global(.webchat-fluent).theme :global(.code-block-content .code-block-content__code-block),
:global(.webchat-fluent).theme :global(.send-box-attachment-bar.send-box-attachment-bar--as-list-item),
:global(.webchat-fluent).theme :global(.text-area.text-area--scroll),
:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
:global(.webchat-fluent).theme :global(.render-markdown [data-math-type='block']),
:global(.webchat-fluent).theme :global(.view-code-dialog__body),
:global(.webchat-fluent).theme :global(.view-code-dialog__code-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);
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  &:hover::-webkit-scrollbar-thumb,
  &:has(> :global(.text-area-input:focus))::-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(.transcript-focus-area) {
  --webchat__transcript--spacing: var(--webchat-spacingVerticalM);
}

: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(
    .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible)
    + .transcript-focus-area__transcript-indicator
  ) {
  border-color: var(--webchat-colorStrokeFocus2);
}

/* Transcript Content indicator without focus-visible state */
:global(.webchat-fluent).theme :global(.transcript-focus-area:not(:focus-visible) .transcript-focus-area__indicator) {
  /* Hide activity focus when no focus-visible state */
  display: none;
}

/* Transcript Focus indicator when content focused */
:global(.webchat-fluent).theme
  :global(.transcript-focus-area:focus-visible:has(.transcript-focus-area__content--focused)) {
  :global(.transcript-focus-area__transcript-indicator) {
    /* Hide transcript focus when an activity is focused */
    display: none;
  }
}

/* Transcript focused content */
:global(.webchat-fluent).theme :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
  :global(.transcript-focus-area__indicator) {
    /* Hide transcript activity focus when the content is focused */
    display: none;
  }

  /* Transcript activity focused directly */
  > :global(.webchat__focus-trap > .webchat__basic-transcript__activity-body .bubble) {
    display: grid;
    grid-template-areas: 'focused-content';
    position: static;

    :global(.bubble__content) {
      grid-area: focused-content;
    }

    &::after {
      border-radius: var(--webchat-part-grouping__bubble--border-radius);
      content: '';
      grid-area: focused-content;
      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
      pointer-events: none;
    }
  }

  &:has(:global(.collapsible-grouping))
    > :global(.transcript-focus-area__content-overlay .transcript-focus-area__indicator) {
    display: none;
  }

  :global(.collapsible-grouping)::after {
    border-radius: var(--webchat-part-grouping__bubble--border-radius);
    border: none;
    content: '';
    inset: 0;
    isolation: isolate;
    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
    pointer-events: none;
    position: absolute;
  }

  :global(.activity-decorator .bubble .bubble__nub-pad) {
    display: none;
  }

  :global(.pre-chat-message-activity)::after {
    border-radius: var(--webchat-part-grouping__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 focused content copilot variant */
:global(.webchat-fluent).theme.variant-copilot
  :global(.transcript-focus-area:focus-visible .transcript-focus-area__content--focused) {
  :global(.collapsible-grouping)::after {
    inset: -4px;
  }
}

/* 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;
  }
}

/* Code block */
:global(.webchat-fluent).theme :global(.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(.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(.code-block-copy-button__icon) {
      --webchat__component-icon--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(.code-block__body:focus-visible)):focus-within {
    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);

    :global(.code-block__body) {
      outline: none;
    }
  }

  :global(.code-block__body) {
    /* TODO: what is the right value? The value below matches "normal" for contents display */
    line-height: 1.435;
  }

  &:global(:has(> .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(> .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.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(.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(.view-code-dialog__title) {
    font-size: var(--webchat-fontSizeBase300);
    font-weight: var(--webchat-fontWeightSemibold);
    line-height: var(--webchat-lineHeightBase300);
  }

  :global(.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(.code-block__body) {
    /* TODO: what is the right value? The value below matches "normal" for block display */
    line-height: normal;
  }

  :global(.view-code-dialog__footer) {
    color: var(--webchat-colorNeutralForeground4);
    font-size: var(--webchat-fontSizeBase100);
    line-height: var(--webchat-lineHeightBase100);
  }

  :global(.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(.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(.activity-button__icon) {
    height: 20px;
    width: 20px;

    --webchat__component-icon--color: var(--webchat-colorNeutralForeground2);
  }
}

/* Copy button */
:global(.webchat-fluent).theme :global(.activity-copy-button) {
  :global(.activity-copy-button__copied-text) {
    background-color: var(--webchat-colorNeutralBackground1);
  }

  &:global(.activity-copy-button--copied) :global(.activity-copy-button__copied-text) {
    animation-duration: var(--webchat-durationUltraSlow);
  }
}

/* Feedback button */
:global(.webchat-fluent).theme :global(.thumb-button),
:global(.webchat-fluent).theme :global(.thumb-button.thumb-button--large) {
  :global(.thumb-button__image) {
    color: var(--webchat-colorNeutralForeground1);
  }

  &:has(:global(.thumb-button__input):focus-visible) {
    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
  }

  &:has(:global(.thumb-button__input)[aria-disabled='true']) :global(.thumb-button__image) {
    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(.feedback-form) {
  :global(.feedback-form__form-header) {
    color: var(--webchat-colorNeutralForeground1);
    font-size: var(--webchat-fontSizeBase300);
    font-weight: var(--webchat-fontWeightRegular);
    line-height: var(--webchat-lineHeightBase300);
  }

  :global(.feedback-form__form) {
    gap: var(--webchat-spacingVerticalXS);
  }

  :global(.feedback-form__form-footer) {
    color: var(--webchat-colorNeutralForeground1);
    font-size: var(--webchat-fontSizeBase100);
    font-weight: var(--webchat-fontWeightRegular);
    line-height: var(--webchat-lineHeightBase200);
  }

  :global(.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-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(.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-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);
      color: currentColor;
    }

    &: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(.feedback-form__text-box) {
    background-color: var(--webchat-colorNeutralBackground1);
    border-radius: var(--webchat-borderRadiusMedium);
    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
    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%);
    }
    &: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);
    }
  }
}