Fix outstanding UX issues with replies/mentions/keyword notifs (#28270)

* Fix outstanding UX issues with replies/mentions/keyword notifs

* Use createRoot instead of deprecated ReactDOM.render

I foresee this change being made across the codebase shortly
and want to proactively prevent my PR from falling behind

* Clean up react root on unmount

* Remove addition of left-edge highlight on message mentions

It is clear that it would be best for me to address
this piece in a separate PR.

* Update call to ReactRootManager.render

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/elements/_Pill.pcss

@@ -26,7 +26,8 @@ Please see LICENSE files in the repository root for full details.
     }
 
     &.mx_UserPill_me,
-    &.mx_AtRoomPill {
+    &.mx_AtRoomPill,
+    &.mx_KeywordPill {
         background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
     }
 
@@ -45,7 +46,8 @@ Please see LICENSE files in the repository root for full details.
     }
 
     /* We don't want to indicate clickability */
-    &.mx_AtRoomPill:hover {
+    &.mx_AtRoomPill:hover,
+    &.mx_KeywordPill:hover {
         background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
         cursor: unset;
     }

res/css/views/rooms/_EventTile.pcss

@@ -135,12 +135,6 @@ $left-gutter: 64px;
         }
     }
 
-    &.mx_EventTile_highlight,
-    &.mx_EventTile_highlight .markdown-body,
-    &.mx_EventTile_highlight .mx_EventTile_edited {
-        color: $alert;
-    }
-
     &.mx_EventTile_bubbleContainer {
         display: grid;
         grid-template-columns: 1fr 100px;