How do I style Adaptive Cards and their children when using Omnichannel Live Chat Widget / BotFramework WebChat?

What I'm using:

• an embedded Omnichannel Live Chat Widget in a content snippet on a Power Apps page (as outlined here)
• the out-of-the-box script as outlined here
• an adaptiveCardsHostConfig (but it doesn't cover all the things I need to style)

I'm trying to style the adaptive cards and their content (such as the inputs, Action.OpenUrl items, etc.) beyond just basic styling. I want to be able to change the border radius, padding, etc. of these elements.

The most customization I can seem to do easily on adaptive cards' children is inside the webChatStyles prop:

cardEmphasisBackgroundColor: "red",
cardPushButtonTextColor: "green",
cardPushButtonBackgroundColor: "blue",

I know about the middleware, but there are three I've seen on the BotFramework-WebChat repo and have no idea which one to use and how to access it when using Omnichannel:

• activityMiddleware
• attachmentMiddleware
• cardActionMiddleware

Here is my script that contains the lcw() function:

    <script>
      function lcw() {
        return {
          styleProps: {
            generalStyles: {
              borderRadius: "12px",
              minWidth: "400px",
            },
          },
          controlProps: {
            hideFooter: true,
          },
          webChatContainerProps: {
            webChatStyles: {
              accent: "magenta !important",
              subtle: "lime !important",
              cardEmphasisBackgroundColor: "red",
              cardPushButtonTextColor: "red",
              cardPushButtonBackgroundColor: "red",
              backgroundColor: "#f3f4f7",
              bubbleBackground: "#e7ecf4",
              bubbleTextColor: "#3C4E6D",
              // other styles
            },
            webChatProps: {
              adaptiveCardsHostConfig: {
                allowCustomStyle: true,
                supportsInteractivity: true,
                containerStyles: {
                  // containerStyles
                },
                adaptiveCard: {
                  allowCustomStyle: true,
                },
              },
            },
            renderingMiddlewareProps: {
              attachmentAdaptiveCardStyles: {
                borderStyle: "solid",
                borderColor: "red",
                borderWidth: "2px",
              },
              userMessageStyleProps: {
                fontSize: "1rem",
                lineHeight: "1.5",
              },
              systemMessageStyleProps: {
                fontSize: "1rem",
                lineHeight: "1.5",
              },
            },
          },
        };
      }
    </script>

And here is the script that contains the Omnichannel bundle:

<script
      v2
      id="Microsoft_Omnichannel_LCWidget"
      src="https://oc-cdn-public-eur.azureedge.net/livechatwidget/scripts/LiveChatBootstrapper.js"
      data-app-id="APP_ID"
      data-lcw-version="prod"
      data-org-id="ORG_ID"
      data-org-url="ORG_URL"
      data-customization-callback="lcw"
      data-font-family-override="system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"
      data-color-override="#2d8dd2"
    >
</script>

Looking at the Omnichannel Chat Widget README doc, it looks like you have a few options that may work for you. However, before I get into those details, please keep in mind that I have only set this chat widget up a few times and never with any customizations. So, I can only speak to what I see in the docs. Okay...moving on.

Under Stateful Components, the WebChatContainer component is listed. This uses the IWebChatContainerStatefulProps interface which includes the webChatStyles, webChatProps, storeMiddlewares, and adaptiveCardStyles properties.

• webChatStyles: Here you can pass in various StyleOptions which affect how Web Chat looks and/or functions when loaded. For adaptive cards, you probably won't find too much here to help, directly, but it's worth a look.
• webChatProps: There are several properties that can be defined here which come from the IWebChatProps interface. In particular is the adaptiveCardsHostConfig property which would allow you to pass in style rules via your own defined HostConfig.
• storeMiddlewares: You can utilize the activityMiddleware to look for any adaptive cards passing thru Web Chat and update the styling of them before they are rendered (see this post). A benefit to this is you can style individual cards, sets of cards, or all cards depending on how you track them. There is one caveat. I don't know if you are persisting conversations across sessions (I'm not even sure if that is possible using the chat widget), but if you are then be aware that because updates are implemented as the containing activity is processed by Web Chat, if a page refresh occurs and the previous conversation is loaded back in, any styling updates will be lost since the activity was already processed and is merely being displayed at this point. There is nothing to trigger the update, again. If conversations are not being persisted, then this isn't a problem. Also, it may be necessary to wrap the middleware's code-to-be-executed in a timeout of about 300 ms so the styling can be implemented before the activity is processed. Only necessary if you don't see the changes taking place.
• adaptiveCardStyles: This uses the IAdaptiveCardStyles interface. It only offers a small selection of properties, but it may be enough.

Hope of help!