Bug/Feature Req: ChatMessage misaligning avatar and message when timestamp or user tag disabled - No ability to remedy using stylesheets due to nesting of multiple Shadow DOMs

[DmitriyLeybel]

Panel==1.3.6

I'm attempting to style the Chat messages and feed, and am running into some issues.
For instance, when I remove the user tag, and time tag from the messages, they misalign with the avatar.
In addition, I wanted to make other customization to the message(color, alignment, font, etc) so I figured I'd adjust the elements via stylesheets.

Below is my failed attempt at attaching styles to the elements I'm trying to style, along with a flexbox overlay to illustrate the layout a bit better.

chat_stylesheet = """
    bk-panel-models-layout-Column.right, bk-Row.chat-message {
    align-items: center; 
    margin: 5px 10px;
    }
    """
msg1 = pn.chat.ChatMessage("Message 1!", reactions=[], reaction_icons={},
        show_copy_icon=False, show_user=False, show_timestamp=False,
        show_avatar=True, stylesheets=[chat_stylesheet])
msg2 = pn.chat.ChatMessage("Message 2!")

chat_feed = pn.chat.ChatFeed(msg1, msg2)
chat_feed.send(msg1)
chat_feed.send(msg2)
chat_server = chat_feed.show(port=24246)

This particular set of Chat components is very powerful, and would greatly benefit from the ability to be skinned with CSS without the hard limitations of all of the nested Shadow DOMs.
Given the current LLM trend, I believe that stronger chat tools can definitely shine a spotlight on Panel.

I think my workaround for the time-being will be to use stylesheets with individual objects sent as messages, and potentially create ReactiveHTML components which can utilize JS scripting to reach into the Shadow DOMs.

[ahuang11]

This should be partially addressed in:
#6346