1 files changed, 54 insertions, 2 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 4ad2dd7..0efe7e9 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -159,9 +159,15 @@ p {
   padding: 8px 16px;
 }
 
-.chats-list h2, .roster-list h2 {
+.chats-list .header, .roster-list .header {
   margin-top: 0.4rem;
   border-bottom: 2px solid black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chats-list h2, .roster-list h2 {
   flex: 0 0 auto;
 }
 
@@ -564,7 +570,7 @@ p {
   z-index: 100;
 }
 
-.overlay-background {
+.overlay-background, .modal-background {
   position: fixed;
   top: 0;
   left: 0;
@@ -577,6 +583,31 @@ p {
   position: absolute;
 }
 
+.modal {
+  position: relative;
+  z-index: 150;
+}
+
+.modal-background {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.modal-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.modal .overlay {
+  x-index: 200;
+}
+
+.modal .overlay-content {
+  z-index: 201;
+}
+
 .personal .overlay-content {
   bottom: 0;
   left: 100%;
@@ -628,6 +659,27 @@ hr {
   width: 100%;
 }
 
+.header .header-icon {
+  position: relative;
+  top: -0.2rem;
+  border-radius: 1em;
+  padding: 4px;
+}
+
+.new-chat:hover, .new-chat.open {
+  background: #00000060;
+}
+
+.new-chat-widget form {
+  border: 2px solid black;
+  padding: 4px;
+  gap: 4px;
+  background-color: #dcdcdc;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
 /* font-families */
 
 /* thai */