Currently messaging has the appearance and behaviour of a persistent drawer, similar to the blocks drawer. We would like to update this to behave more like features such as the notifications popover, where it is "floating" and only visible while it has focus. The requirements are:

1. Shift the pane to the left slightly (eg 20px) so that it is not hard against the right margin.
2. Adjust the height to 90% so it does not touch the bottom of the screen.
3. Change the "top" from 60px to 72px, so that it is not touching the top pane of the page (this will align it with the top of the notifications popover).
4. Replace the box shadow with what the notifications popover is using (not sure if it's a preset, but the outcome is border: 1px solid #ddd ) - this  provides a defined outline of a floating box, rather than an affixed drawer.
5. Hide messaging if it loses focus (eg if you click somewhere else on the page). I would expect it will remain in the same state while you remain on a page, so for example if you click out of it to copy some text (or by accident), you can pick up where you left off.
6. Remove all animations (ie it should not slide in/out from the right of the page).
7. Remove the closing 'x' button at the top right (but retain the same padding between the top of the panel and the search input). Visibility is not controlled by focus (and also by clicking the messaging icon, which is already possible).
8. Add the "up" triange at the bottom of the messaging icon, consistent with the notifications icon when that is opened.

An added benefit of this change is that this will reduce complexity when implementing the AI drawer, as it will only require interacting with the blocks drawer. All of the other items occupying a similar space on the page (notifications popover, user dropdown, and now messaging) will naturally be hidden because clicking the AI option will trigger non-persistent items to auto collapse/hide.

Example outcome (mocked in-browser from the above requirements):