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

[YayoKB]

Is your feature request related to a problem? Please describe.
I need a more concise, clear way of ways to use the middleware to customise CSS/styling.

Additional context
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>