assets/css/chat.css

@@ -36,6 +36,15 @@ body, html {
     /*justify-self: flex-end;*/
 }
 
+.message-box-mine, .message-box-alien {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.message-box-mine, .message-box-alien {
+    border-radius: 10px;
+}
+
+
 .message-box-alien {
     margin-left: 5px;
     margin-right: auto;
@@ -104,6 +113,12 @@ body, html {
     display: inline;
 }
 
+.message-box-button:hover {
+    transform: scale(1.1);
+    transition: transform 0.2s;
+}
+
+
 .message-box-msg{
     word-wrap: break-word;
 }
@@ -112,7 +127,14 @@ body, html {
     min-height: 20px;
 }
 
+#chat-widget {
+    background: linear-gradient(to bottom, #f1f1f1, #e0e0e0);
+}
+
+
 #message-input {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 20px;
     padding: 15px;
     height: auto;
     width: 100%;
@@ -124,6 +146,8 @@ body, html {
     margin: 10px;
 }
 
+
+
 .message-in-popup-preview{
     border: 4px solid red;
     width: 80%;