Fix undefined and misnamed CSS variables in Fluent theme and decorator styles

[Eugene (OEvgeny)]

Some Fluent theme and decorator styles use CSS variables that are undefined or misnamed, so the header width, the citation hover border, and the third fade color fall back to the wrong values.

Changelog Entry

Fixed

• Fixed undefined or misnamed CSS variables: CopilotMessageHeader is limited to the maximum message bubble width again instead of spanning the full transcript width in the Fluent theme, citation links in the Fluent theme use the brand stroke color for their hover border instead of the text color, and --webchat-borderFlair-color3Fade and --webchat-borderLoader-color3Fade now set the third fade color of the border flair and loader, in PR #5890, by @OEvgeny

Description

A cross-check of the var(--webchat…) uses in the CSS modules of component and fluent-theme against the defined names found three bugs:

• CopilotMessageHeader limits its width with --webchat__bubble--max-width. feat: fold activity decorator into part grouping #5608 renamed that variable to --webchat-part-grouping__bubble--max-width but missed this file, so the header has no max width. In the Fluent variant, when Web Chat is wider than 450px, a long bot name and the "AI-generated content may be incorrect" badge run past the message bubble to the edge of the transcript.
• Citation links in the Fluent theme set their hover border to --webchat-colorBrandStroke2Hover. feat: fluent expansion #5258 added the hover and pressed border colors but mapped only the Stroke2Pressed token, so the hover border takes the text color (#0f548c instead of #77b7f7 with webLightTheme).
• In the border flair and loader, the third fade color reads the --webchat-…-color1Fade hook instead of --webchat-…-color3Fade, so hosts cannot set it.

Design

• The Copilot variant header does not change: it sets the variable to 100%, and the header already fills the row there.
• The fallback for --webchat-colorBrandStroke2Hover (used without a FluentProvider) is #5fc7f3. Fluent maps colorBrandStroke2Hover to brand[120] (#77b7f7 in webLightTheme). The neighboring fallbacks use a teal ramp at Fluent's positions (colorBrandStroke2 #9edcf7 is [140], colorBrandBackground2Pressed #7fd2f5 is [130]), which has no [120] value, so #5fc7f3 continues its evenly spaced [160] to [130] steps by one step. The same extrapolation gives Fluent's own web and Teams [120] within 5/255.
• color3Fade falls back to the color1Fade hook, then transparent. Hosts that set only color1Fade see no change. Without hooks, all fades stay transparent.

Specific Changes

• CopilotMessageHeader.module.css: max-width uses --webchat-part-grouping__bubble--max-width
• Fluent Theme.module.css: added --webchat-colorBrandStroke2Hover, mapped to the Fluent colorBrandStroke2Hover token
• BorderFlair.module.css, BorderLoader.module.css: color3Fade reads --webchat-borderFlair-color3Fade / --webchat-borderLoader-color3Fade
• Added part-grouping/copilotMessageHeader.html and copilotMessageHeader.copilot.html: CopilotMessageHeader as the PartGroupDecorator header for a bot with a long name, checks name, tooltip, and badge, snapshot (the Copilot variant snapshot is the same as before the fix)
• Added fluentTheme/citation.hover.html: hovers a citation, checks :hover, snapshot
• Added decorator/borderFadeColors.html: sets the fade color hooks, freezes the loader and the flair, checks which one is shown, snapshots

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.