styling

src/style.css

@@ -123,6 +123,9 @@ html {
   &.bottom {
     margin-bottom: 15px;
   }
+  &:hover {
+    background-color: #444;
+  }
   position: relative;
   &.sending {
     color: #777;
@@ -136,7 +139,7 @@ html {
     border-radius: 100%;
     cursor: pointer;
     &:active {
-      top: 1px;
+      transform: translateY(1px);
     }
   }
   .messageAuthor {
@@ -147,6 +150,7 @@ html {
       &:hover {
         text-decoration: underline;
       }
+      color: var(--role-color);
     }
     .messageTimestamp {
       font-weight: initial;
@@ -177,6 +181,52 @@ html {
     font-size: 8pt;
     display: inline;
   }
+  .messageHoverActions {
+    position: absolute;
+    right: 0;
+    top: -15px;
+  }
+}
+
+.reply {
+  margin-left: 31px;
+  position: relative;
+  &>span {
+    cursor: pointer;
+    color: var(--role-color);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .replyBorderThing {
+    width: 24px;
+    height: 9px;
+    display: inline;
+    position: absolute;
+    transform: translateY(7px);
+    left: -28px;
+    border-left: solid #595a63 2px;
+    border-top: solid #595a63 2px;
+    border-top-left-radius: 6px;
+  }
+  .replyContent {
+    top: -1px;
+    position: relative;
+    display: inline;
+    color: #999;
+    &:hover {
+      color: white;
+      cursor: pointer;
+    }
+  }
+  .badge {
+    background-color: var(--badge-color);
+    max-width: fit-content;
+    padding: 2px;
+    border-radius: 10%;
+    font-size: 8pt;
+    display: inline;
+  }
 }
 
 .textbox {
@@ -185,6 +235,8 @@ html {
   bottom: 5px;
   right: 5px;
   width: calc(100% - 250px);
+  max-height: 208px;
+  overflow-y: scroll;
   background-color: #222;
 }
 .editor:empty:before {