diff --git a/css/main.css b/css/main.css
index 7c9cdfb..051dc02 100644
--- a/css/main.css
+++ b/css/main.css
@@ -668,7 +668,7 @@ sm-button[variant=primary] .icon {
   background: rgba(var(--text-color), 0.1);
 }
 
-#warn_no_encryption, .date-card {
+#warn_no_encryption, .date-card, .group-event-card {
   padding: 0.4rem 0.8rem;
   background: rgba(var(--text-color), 0.1);
   font-weight: 500;
@@ -962,8 +962,10 @@ sm-button[variant=primary] .icon {
 
 #selected_contacts_container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
   gap: 1rem;
+  max-height: 8rem;
+  overflow-y: auto;
 }
 
 #contacts, #mails {
@@ -1009,7 +1011,7 @@ sm-button[variant=primary] .icon {
   width: 0.9rem;
 }
 #contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
-  border-radius: 3rem;
+  border-radius: 0.5rem;
   padding: 0.2rem 0.8rem;
 }
 #contacts .header h4, #mails .header h4, #settings_page .header h4 {
@@ -1052,106 +1054,80 @@ sm-button[variant=primary] .icon {
   overflow-y: hidden;
 }
 
-#chat {
+#chat_left,
+#chat_details_panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  overflow-y: auto;
 }
-#chat header {
+
+#chat_details_panel {
+  background: rgba(var(--text-color), 0.04);
+  padding-bottom: 1.5rem;
+}
+#chat_details_panel .card {
+  margin: 0 1rem;
+  padding: 1.5rem 1rem;
+  border-radius: 0.8rem;
+  background: rgba(var(--text-color), 0.06);
+}
+#chat_details_panel .card:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+#chat_details_panel .card > h4 {
+  font-weight: 400;
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+  margin-bottom: 0.5rem;
+}
+#chat_details_panel header {
   padding: 1rem;
   min-height: 4rem;
-  grid-template-columns: auto 1fr auto;
 }
-#chat header .back-button {
-  padding: 0.1rem;
-  stroke-width: 8;
-  margin-right: 0.5rem;
-  stroke: rgba(var(--text-color), 0.8);
-}
-#chat header .initial {
+#chat_details_panel header .icon {
+  height: 2.3rem;
+  width: 2.3rem;
+  padding: 0.7rem;
   cursor: pointer;
-  margin-right: 1rem;
-  height: 2.2rem;
-  width: 2.2rem;
-  flex-shrink: 0;
 }
-#chat header h4 {
+#chat_details_panel .contact {
+  padding: 0.5rem 0;
+}
+#chat_details_panel #chat_profile {
+  display: grid;
+  place-items: center;
+  margin-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+#chat_details_panel #chat_profile .initial {
+  margin-top: -5.5rem;
+  margin-bottom: 1rem;
+  height: 8rem;
+  width: 8rem;
+  border-radius: 50%;
+  font-size: 4rem;
+}
+#chat_details_panel #chat_profile .initial .icon {
+  height: 4rem;
+  width: 4rem;
+}
+#chat_details_panel #chat_profile #chat_name {
   font-weight: 500;
+  font-size: 1.2rem;
+}
+#chat_details_panel #chat_profile #last_interaction_time {
+  color: rgba(var(--text-color), 0.7);
   font-size: 0.9rem;
+  margin-top: 0.5rem;
 }
-#chat header #receiver_name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-#chat #scroll_to_bottom {
-  position: fixed;
-  right: 0;
-  bottom: 4rem;
-  width: 2.6rem;
-  height: 2.6rem;
-  padding: 0.9rem;
-  border-radius: 4rem;
-  z-index: 1;
-  margin: 1.5rem;
-  stroke-width: 8;
-  cursor: pointer;
-  transform: scale(0);
-  transition: transform 0.3s;
-}
-#chat footer #emoji_toggle {
-  align-self: center;
-  padding: 0.6rem;
-  width: 2.6rem;
-  height: 2.6rem;
-  border-radius: 2rem;
-  cursor: pointer;
-}
-#chat footer #emoji_toggle path {
-  fill: rgba(var(--text-color), 0.5);
-}
-#chat footer #emoji_toggle.active path {
-  fill: var(--accent-color);
-}
-#chat footer .flex {
-  align-items: flex-end;
-  padding: 1rem 1rem 1rem 0.4rem;
-}
-#chat footer sm-textarea::part(textarea) {
-  background: rgba(var(--text-color), 0.1);
-  padding-right: 3rem;
-  border-radius: 2rem;
-}
-#chat #send_message_button {
-  position: absolute;
-  right: 1.5rem;
-  transform: scale(0);
-  opacity: 0;
-  pointer-events: none;
-  z-index: 1;
-  align-self: center;
-  height: 2.4rem;
-  width: 2.4rem;
-  padding: 0.5rem;
-  cursor: pointer;
-  stroke: none;
-  fill: rgba(var(--text-color), 0.4);
-  margin-left: 1rem;
-  transition: 0.3s;
-}
-#chat #send_message_button.active {
-  opacity: 1;
-  fill: var(--accent-color);
-  transform: none;
-  pointer-events: all;
-}
-#chat #type_message {
-  margin: 0;
-}
+
 #chat .message {
   position: relative;
-  display: grid;
-  align-items: center;
-  gap: 0.2rem;
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  width: auto;
   font-size: 0.92rem;
   max-width: max-content;
   margin-bottom: 0.2rem;
@@ -1159,8 +1135,13 @@ sm-button[variant=primary] .icon {
   padding: 0.6em 1em;
   transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
+#chat .message .sender-name {
+  font-size: 0.85rem;
+  font-weight: 500;
+  margin-bottom: 0.3rem;
+}
 #chat .message .message-body {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   flex-wrap: wrap;
   overflow-wrap: break-word;
@@ -1171,7 +1152,7 @@ sm-button[variant=primary] .icon {
   -webkit-hyphens: auto;
   hyphens: auto;
   white-space: pre-wrap;
-  line-height: 1.6;
+  line-height: 1.5;
 }
 #chat .message .message-body a {
   color: inherit;
@@ -1185,12 +1166,16 @@ sm-button[variant=primary] .icon {
   white-space: nowrap;
   font-size: 0.8em;
   opacity: 0.8;
+  justify-self: flex-end;
+  padding-left: 1rem;
+  align-self: flex-end;
+  margin-top: 0.2rem;
 }
 #chat .sent {
   margin-left: auto;
+  color: #efefef;
   background: var(--accent-color);
-  color: #f0f0f0;
-  border-radius: 1em 0 1em 1em;
+  border-radius: 0.8rem 0 0.8rem 0.8rem;
 }
 #chat .sent::after {
   content: "";
@@ -1203,12 +1188,9 @@ sm-button[variant=primary] .icon {
   border-width: 0.5em 0.3em 0 0;
   border-color: var(--accent-color) transparent transparent transparent;
 }
-#chat .sent .time {
-  margin-left: auto;
-}
 #chat .received {
   background: rgba(var(--text-color), 0.1);
-  border-radius: 0 1em 1em 1em;
+  border-radius: 0 0.8rem 0.8rem 0.8rem;
 }
 #chat .received::after {
   content: "";
@@ -1231,7 +1213,7 @@ sm-button[variant=primary] .icon {
 }
 #chat .sent + .sent,
 #chat .received + .received {
-  border-radius: 1em;
+  border-radius: 0.8rem;
 }
 #chat .unconfirmed {
   opacity: 0.7;
@@ -1247,6 +1229,98 @@ sm-button[variant=primary] .icon {
     transform: rotate(0) translate(0, 0);
   }
 }
+#chat_header {
+  padding: 1rem;
+  min-height: 4rem;
+  grid-template-columns: auto 1fr auto;
+}
+#chat_header .back-button {
+  padding: 0.1rem;
+  stroke-width: 8;
+  margin-right: 0.5rem;
+  stroke: rgba(var(--text-color), 0.8);
+}
+#chat_header .initial {
+  cursor: pointer;
+  margin-right: 1rem;
+  height: 2.2rem;
+  width: 2.2rem;
+  flex-shrink: 0;
+}
+#chat_header #receiver_name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#scroll_to_bottom {
+  position: absolute;
+  right: 0;
+  bottom: 4rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  padding: 0.9rem;
+  border-radius: 4rem;
+  z-index: 1;
+  margin: 1.5rem;
+  stroke-width: 8;
+  cursor: pointer;
+  transform: scale(0);
+  transition: transform 0.3s;
+}
+
+#chat_footer #emoji_toggle {
+  align-self: center;
+  padding: 0.6rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 2rem;
+  cursor: pointer;
+}
+#chat_footer #emoji_toggle path {
+  fill: rgba(var(--text-color), 0.5);
+}
+#chat_footer #emoji_toggle.active path {
+  fill: var(--accent-color);
+}
+#chat_footer .flex {
+  align-items: flex-end;
+  padding: 1rem 1rem 1rem 0.4rem;
+}
+#chat_footer sm-textarea::part(textarea) {
+  padding-right: 3rem;
+  border-radius: 0.5rem;
+}
+
+#send_message_button {
+  position: absolute;
+  right: 1.5rem;
+  transform: scale(0);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  align-self: center;
+  height: 2.4rem;
+  width: 2.4rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  stroke: none;
+  fill: rgba(var(--text-color), 0.4);
+  margin-left: 1rem;
+  transition: 0.3s;
+}
+#send_message_button.active {
+  opacity: 1;
+  fill: var(--accent-color);
+  transform: none;
+  pointer-events: all;
+}
+
+#type_message {
+  margin: 0;
+}
+
 .big-emoji .message-body {
   font-size: 2.6rem;
 }
@@ -1615,8 +1689,10 @@ sm-panel {
     max-height: 18rem;
   }
 
-  #chat .message .message-body {
-    max-width: 65ch;
+  #chat .message {
+    width: auto;
+    align-self: flex-start;
+    max-width: 55ch;
   }
 
   #chat_page, #mail_page {
@@ -1669,11 +1745,26 @@ sm-panel {
     grid-template-columns: 21rem 1fr;
   }
 
-  #chat header {
-    padding: 0.8rem 1.5rem;
+  #chat.expand-side-panel {
+    grid-template-columns: 1fr 24rem;
   }
-  #chat #messages_container {
-    padding: 1rem 5rem;
+  #chat .active {
+    background: rgba(var(--text-color), 0.1);
+  }
+
+  .contact.active,
+.mail-card.active {
+    background: rgba(var(--text-color), 0.06);
+  }
+
+  .card {
+    display: inline-flex;
+    width: auto;
+  }
+
+  #settings_panel {
+    overflow-y: auto;
+    max-height: 100vh;
   }
 }
 @media (hover: hover) {
diff --git a/css/main.min.css b/css/main.min.css
index 880106f..17aefee 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.page,body,html{height:100%}#landing_page,.sign-in-box,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}.align-center,.popup-header{align-items:center}.contact .last-message,.contact .name,.copy-row .copy,.mail-card .sender,.text-overflow{white-space:nowrap;text-overflow:ellipsis}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body{--accent-color:#5b00d3;--secondary-color:#ffac2e;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#923eff;--secondary-color:#d60739;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}p{line-height:1.6}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none;line-height:1.6}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}strong{font-weight:500}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1}.fab::part(button){padding:.9rem 1.6rem}.fab .icon{margin-left:0!important;margin-right:.5rem;height:.9rem!important;stroke-width:8!important}a:any-link{word-wrap:break-word;color:var(--accent-color);font-weight:500}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;width:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:2rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.card,sm-button{margin:1rem 0}.page{align-items:flex-start;width:100%}.card{display:flex;flex-direction:column}sm-button .icon{margin-right:.4rem}sm-button[variant=primary]{--foreground-color:255,255,255}sm-button[variant=primary] .icon{align-self:center;height:1rem;width:1rem;margin-left:.8rem;stroke-width:6;stroke:#fff}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center;overflow-y:auto}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:rgba(var(--foreground-color),1);font-weight:500}#landing .left p,.contact .last-message,.contact .name{color:rgba(var(--text-color),.8)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing_illustration,.sign-in-box,.sign-in-box form,.sign-in-box sm-button,.sign-in-box sm-panel{width:100%}#landing .left h3{margin-bottom:1rem;font-weight:500}#landing .left p{margin-top:1rem;font-size:1.1rem}.logo-section{padding:1.5rem}#sign_in_popup::part(popup-body){padding:0}.sign-in-box{margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem}.sign-in-box sm-input{margin-top:1.5rem}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:1.5rem}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h3{font-weight:500}.sign-in-box h4{font-weight:500;margin-bottom:1.5rem}.sign-in-box h5{opacity:.8;font-weight:500}.sign-in-box strong{display:flex;background:#ffd92e;padding:.4em .6em;border-radius:.4em;color:#111;margin-top:.5rem}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}.sign-in-box button{margin-top:2rem;padding:.6rem 1.6rem}.sign-in-box sm-button::part(button){padding:.8rem 1.6rem}.sign-in-box p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.sign-in-box #sign_in_with,.sign-in-box sm-button{margin-top:2rem;margin-bottom:0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100vh;display:grid;place-content:center;justify-items:center}#loading_page svg{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}#loading_page .shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);border-radius:50%;animation:scale .5s infinite alternate ease-in;margin-left:1rem}#loading_page h4{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}.initial{justify-content:center;font-size:1.2rem;width:2.5rem;height:2.5rem;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase}.group-icon{height:1.6rem;width:1.6rem;fill:#fff;stroke:none}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.chat,.contact.group{grid-template-columns:auto 1fr auto;grid-template-areas:"dp . time" "dp . menu"}.contact .initial{grid-area:dp}.contact .name{font-size:1em;font-weight:500;overflow:hidden}.contact .last-message{overflow:hidden;font-weight:400;font-size:.9em}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color),1)}.contact .time{font-weight:500;color:rgba(var(--text-color),.7);grid-area:time}#contact_details_popup>.flex:first-of-type{margin:1rem 0}#contact_details_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.85rem;cursor:pointer;stroke-width:8}#contact_details_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row{margin-bottom:1.5rem}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup #contact_initial{height:3.6rem;width:3.6rem;font-size:1.6rem;border-radius:4rem;margin-bottom:1rem}#contact_details_popup #contact_name{border-radius:.5rem;max-width:30ch;padding:.6rem 1.2rem;overflow-wrap:break-word}#contact_details_popup #contact_name:focus{outline:0;background:rgba(var(--text-color),.1)}#warn_no_encryption,.date-card{padding:.4rem .8rem;background:rgba(var(--text-color),.1);font-weight:500;border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center}#warn_no_encryption{background:#fffd8d;color:#111}.mail-card.unread::before{content:"";position:absolute;padding:.4rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.contact .initial::after{content:"";position:absolute;height:calc(100% + .8rem);width:calc(100% + .8rem);border:var(--accent-color) solid;border-radius:100%;transform:scale(.8);opacity:0;transition:transform .3s,opacity .3s}.mail,.mail-card{position:relative}.contact.unread .initial::after{transform:scale(1);opacity:1}.contact.unread .time,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:flex;flex-direction:column;padding:1rem 1.5rem}.mail-card .sender{color:rgba(var(--text-color),.9);font-weight:500;overflow:hidden;margin-right:1rem}.mail-card .date{margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{font-size:1em;margin-top:.5rem;font-weight:500}.mail-card .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color),.8)}#chat .message .message-body,.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail header{align-self:start;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:solid 1px rgba(var(--text-color),.2)}.mail header h4{font-weight:500}.mail header .flo-id{font-weight:400;max-width:90%}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}#main_navbar{position:fixed;flex-direction:column;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#contacts #all_contacts,#mail_contact_list{position:absolute;background:rgba(var(--foreground-color),1);z-index:1}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;top:100%;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{position:relative}#contacts #all_contacts{top:0;bottom:0;left:0;right:0}#contacts #all_contacts .header{padding-top:.7rem}#contacts .option{display:flex;align-items:center;padding:1rem 1.5rem}#contacts .option .icon{margin-right:1rem;stroke:rgba(var(--text-color),.7)}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts #contacts_container{padding-bottom:5rem}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#selected_contacts{padding:1.5rem;background:rgba(var(--text-color),.06)}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:1rem}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100vh;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header sm-tab::part(tab),#mails .header sm-tab::part(tab),#settings_page .header sm-tab::part(tab){padding:.8rem 1rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);transform:scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%}#contacts .header sm-input .icon,#mails .header sm-input .icon,#settings_page .header sm-input .icon{stroke:rgba(var(--text-color),.5);height:.9rem;width:.9rem}#contacts .header sm-input::part(input),#mails .header sm-input::part(input),#settings_page .header sm-input::part(input){border-radius:3rem;padding:.2rem .8rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .icon,#mails .header .icon,#settings_page .header .icon{-webkit-tap-highlight-color:transparent}#contacts .header .flex .hamburger-menu-button,#mails .header .flex .hamburger-menu-button,#settings_page .header .flex .hamburger-menu-button{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#chat #type_message,#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page{overflow-y:hidden}#chat{height:100%}#chat header{padding:1rem;min-height:4rem;grid-template-columns:auto 1fr auto}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem;flex-shrink:0}#chat header h4{font-weight:500;font-size:.9rem}#chat header #receiver_name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#chat #scroll_to_bottom{position:fixed;right:0;bottom:4rem;width:2.6rem;height:2.6rem;padding:.9rem;border-radius:4rem;z-index:1;margin:1.5rem;stroke-width:8;cursor:pointer;transform:scale(0);transition:transform .3s}#chat footer #emoji_toggle{align-self:center;padding:.6rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#chat footer #emoji_toggle path{fill:rgba(var(--text-color),.5)}#chat footer #emoji_toggle.active path{fill:var(--accent-color)}#chat footer .flex{align-items:flex-end;padding:1rem 1rem 1rem .4rem}#chat footer sm-textarea::part(textarea){background:rgba(var(--text-color),.1);padding-right:3rem;border-radius:2rem}#chat #send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#chat #send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}#chat .sent,#chat .sent .time{margin-left:auto}#chat .message{position:relative;display:grid;align-items:center;gap:.2rem;width:100%;font-size:.92rem;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275)}#chat .message .message-body{display:inline-flex;align-items:center;flex-wrap:wrap;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.6}#chat .message .message-body a{color:inherit}#chat .message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0ch}#chat .message .time{white-space:nowrap;font-size:.8em;opacity:.8}#chat .sent{background:var(--accent-color);color:#f0f0f0;border-radius:1em 0 1em 1em}#chat .sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}#chat .received{background:rgba(var(--text-color),.1);border-radius:0 1em 1em}#chat .received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}#chat .received+.received,#chat .sent+.sent{margin-top:0;border-radius:1em}#chat .received+.received::after,#chat .sent+.sent::after{display:none}#chat .unconfirmed{opacity:.7;transform-origin:left;animation:pop .3s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%{transform:rotate(5deg) translate(-.5rem,1rem)}100%{transform:rotate(0) translate(0,0)}}.big-emoji .message-body{font-size:2.6rem}#messages_container{flex:1;padding:0 1rem}#emoji_picker{display:grid;gap:1rem;background:rgba(var(--text-color),.06);border-radius:1rem;margin:0 1rem;box-shadow:0 .2rem .8rem rgba(0,0,0,.3);overflow-y:auto;max-height:30vh}#emoji_picker section{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.6rem,1fr));gap:.5rem;padding:0 1rem;width:100%}#emoji_picker .section-header{grid-column:1/-1;position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);padding:1rem 0;z-index:1}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#inbox_mail_container,#mail,#messages_container,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}#chat_container:empty{display:none}#chat_container:not(:empty)~.empty-state{display:none}#chat_container{padding-bottom:6rem}sm-tab-panels{overflow:hidden auto}sm-panel{width:100%;overflow-y:auto}#inbox_mail_container,#sent_mail_container{padding-bottom:5rem}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:0 1.5rem;align-items:flex-start}#mail .flex{margin-top:1rem}#mail .flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding-left:1rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{padding:0 1.5rem}#settings_page section{max-width:50ch;display:grid;gap:.3rem}#settings_page section sm-button{margin-top:.5rem;margin-bottom:0}#settings_page section:not(:last-of-type){margin-bottom:2rem}#settings_page section.setting-toggle{grid-template-columns:1fr auto}#settings_page section.setting-toggle sm-switch{grid-column:2;grid-row:1/3}#settings_page section.setting-toggle>h4,#settings_page section.setting-toggle>p{grid-column:1}#settings_page #sign_out::part(button){color:var(--error-color)}@media screen and (max-width:640px){.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{text-align:center;font-size:2rem;font-weight:500}#landing .left p{text-align:center}#landing sm-button{display:flex;width:100%!important}#sing_in{max-height:90vh}#landing_illustration{grid-area:illustration}#main_navbar{transform:translateX(-100%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#main_navbar .logo-section{padding:1rem}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#chat_container,#contact_container{gap:.2rem}#chat .message{width:fit-content;max-width:90%}#settings_page{overflow-x:hidden}#settings_page #settings_panel header{position:sticky;top:0;padding:1rem 0;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup::part(popup){width:24rem;min-width:24rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_popup .popup-header{padding-top:1.5rem}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.8rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup::part(popup){min-width:24rem}#compose_mail_popup::part(popup),#reply_mail_popup::part(popup){min-width:36rem}#main{width:100vw;height:100vh;grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message .message-body{max-width:65ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr;box-shadow:0 0 1rem rgba(0,0,0,.1);z-index:1}#settings_page{display:grid;height:100vh;box-shadow:0 0 1rem rgba(0,0,0,.1);grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page #settings_panel{padding:1.5rem}#settings_page .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:21rem 1fr}#chat header{padding:.8rem 1.5rem}#chat #messages_container{padding:1rem 5rem}}@media (hover:hover){.contact:hover,.mail-card:hover,.navbar-item:hover{background:rgba(var(--text-color),.06);cursor:pointer}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}.emoji:hover{background:rgba(var(--text-color),.1)}}@media (hover:none){.contact .menu{display:none}}
\ No newline at end of file
+#landing_page,.sign-in-box,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}p,textarea{line-height:1.6}.align-center,.popup-header{align-items:center}.contact .last-message,.contact .name,.copy-row .copy,.mail-card .sender,.text-overflow{text-overflow:ellipsis;white-space:nowrap}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%}body{--accent-color:#5b00d3;--secondary-color:#ffac2e;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#923eff;--secondary-color:#d60739;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}a:any-link,strong{font-weight:500}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1}.fab::part(button){padding:.9rem 1.6rem}.fab .icon{margin-left:0!important;margin-right:.5rem;height:.9rem!important;stroke-width:8!important}a:any-link{word-wrap:break-word;color:var(--accent-color)}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;width:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:2rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.card,sm-button{margin:1rem 0}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column}sm-button .icon{margin-right:.4rem}sm-button[variant=primary]{--foreground-color:255,255,255}sm-button[variant=primary] .icon{align-self:center;height:1rem;width:1rem;margin-left:.8rem;stroke-width:6;stroke:#fff}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center;overflow-y:auto}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:rgba(var(--foreground-color),1);font-weight:500}#landing .left p,.contact .last-message,.contact .name{color:rgba(var(--text-color),.8)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing_illustration,.sign-in-box,.sign-in-box form,.sign-in-box sm-button,.sign-in-box sm-panel{width:100%}#landing .left h3{margin-bottom:1rem;font-weight:500}#landing .left p{margin-top:1rem;font-size:1.1rem}.logo-section{padding:1.5rem}#sign_in_popup::part(popup-body){padding:0}.sign-in-box{margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem}.sign-in-box sm-input{margin-top:1.5rem}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:1.5rem}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h3{font-weight:500}.sign-in-box h4{font-weight:500;margin-bottom:1.5rem}.sign-in-box h5{opacity:.8;font-weight:500}.sign-in-box strong{display:flex;background:#ffd92e;padding:.4em .6em;border-radius:.4em;color:#111;margin-top:.5rem}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}.sign-in-box button{margin-top:2rem;padding:.6rem 1.6rem}.sign-in-box sm-button::part(button){padding:.8rem 1.6rem}.sign-in-box p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.sign-in-box #sign_in_with,.sign-in-box sm-button{margin-top:2rem;margin-bottom:0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100vh;display:grid;place-content:center;justify-items:center}#loading_page svg{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}#loading_page .shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);border-radius:50%;animation:scale .5s infinite alternate ease-in;margin-left:1rem}#loading_page h4{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}.initial{justify-content:center;font-size:1.2rem;width:2.5rem;height:2.5rem;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase}.group-icon{height:1.6rem;width:1.6rem;fill:#fff;stroke:none}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.chat,.contact.group{grid-template-columns:auto 1fr auto;grid-template-areas:"dp . time" "dp . menu"}.contact .initial{grid-area:dp}.contact .name{font-size:1em;font-weight:500;overflow:hidden}.contact .last-message{overflow:hidden;font-weight:400;font-size:.9em}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color),1)}.contact .time{font-weight:500;color:rgba(var(--text-color),.7);grid-area:time}#contact_details_popup>.flex:first-of-type{margin:1rem 0}#contact_details_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.85rem;cursor:pointer;stroke-width:8}#contact_details_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row{margin-bottom:1.5rem}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup #contact_initial{height:3.6rem;width:3.6rem;font-size:1.6rem;border-radius:4rem;margin-bottom:1rem}#contact_details_popup #contact_name{border-radius:.5rem;max-width:30ch;padding:.6rem 1.2rem;overflow-wrap:break-word}#contact_details_popup #contact_name:focus{outline:0;background:rgba(var(--text-color),.1)}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .8rem;background:rgba(var(--text-color),.1);font-weight:500;border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center}#warn_no_encryption{background:#fffd8d;color:#111}.mail-card.unread::before{content:"";position:absolute;padding:.4rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.contact .initial::after{content:"";position:absolute;height:calc(100% + .8rem);width:calc(100% + .8rem);border:var(--accent-color) solid;border-radius:100%;transform:scale(.8);opacity:0;transition:transform .3s,opacity .3s}.mail,.mail-card{position:relative}.contact.unread .initial::after{transform:scale(1);opacity:1}.contact.unread .time,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:flex;flex-direction:column;padding:1rem 1.5rem}.mail-card .sender{color:rgba(var(--text-color),.9);font-weight:500;overflow:hidden;margin-right:1rem}.mail-card .date{margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{font-size:1em;margin-top:.5rem;font-weight:500}.mail-card .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color),.8)}#chat .message .message-body,.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail header{align-self:start;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:solid 1px rgba(var(--text-color),.2)}.mail header h4{font-weight:500}.mail header .flo-id{font-weight:400;max-width:90%}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}#main_navbar{position:fixed;flex-direction:column;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#contacts #all_contacts,#mail_contact_list{position:absolute;z-index:1;background:rgba(var(--foreground-color),1)}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;top:100%;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{position:relative}#contacts #all_contacts{top:0;bottom:0;left:0;right:0}#contacts #all_contacts .header{padding-top:.7rem}#contacts .option{display:flex;align-items:center;padding:1rem 1.5rem}#contacts .option .icon{margin-right:1rem;stroke:rgba(var(--text-color),.7)}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts #contacts_container{padding-bottom:5rem}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#selected_contacts{padding:1.5rem;background:rgba(var(--text-color),.06)}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:grid;grid-template-columns:repeat(auto-fill,minmax(3rem,1fr));gap:1rem;max-height:8rem;overflow-y:auto}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100vh;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header sm-tab::part(tab),#mails .header sm-tab::part(tab),#settings_page .header sm-tab::part(tab){padding:.8rem 1rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);transform:scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%}#contacts .header sm-input .icon,#mails .header sm-input .icon,#settings_page .header sm-input .icon{stroke:rgba(var(--text-color),.5);height:.9rem;width:.9rem}#contacts .header sm-input::part(input),#mails .header sm-input::part(input),#settings_page .header sm-input::part(input){border-radius:.5rem;padding:.2rem .8rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .icon,#mails .header .icon,#settings_page .header .icon{-webkit-tap-highlight-color:transparent}#contacts .header .flex .hamburger-menu-button,#mails .header .flex .hamburger-menu-button,#settings_page .header .flex .hamburger-menu-button{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button,#type_message{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page{overflow-y:hidden}#chat_details_panel,#chat_left{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}#chat_details_panel{background:rgba(var(--text-color),.04);padding-bottom:1.5rem}#chat_details_panel .card{margin:0 1rem;padding:1.5rem 1rem;border-radius:.8rem;background:rgba(var(--text-color),.06)}#chat_details_panel .card:not(:last-of-type){margin-bottom:1rem}#chat_details_panel .card>h4{font-weight:400;font-size:.9rem;color:rgba(var(--text-color),.8);margin-bottom:.5rem}#chat_details_panel header{padding:1rem;min-height:4rem}#chat_details_panel header .icon{height:2.3rem;width:2.3rem;padding:.7rem;cursor:pointer}#chat_details_panel .contact{padding:.5rem 0}#chat_details_panel #chat_profile{display:grid;place-items:center;margin-top:1.5rem;padding-bottom:1.5rem}#chat_details_panel #chat_profile .initial{margin-top:-5.5rem;margin-bottom:1rem;height:8rem;width:8rem;border-radius:50%;font-size:4rem}#chat_details_panel #chat_profile .initial .icon{height:4rem;width:4rem}#chat_details_panel #chat_profile #chat_name{font-weight:500;font-size:1.2rem}#chat_details_panel #chat_profile #last_interaction_time{color:rgba(var(--text-color),.7);font-size:.9rem;margin-top:.5rem}#chat .message{position:relative;display:flex;flex-direction:column;width:auto;font-size:.92rem;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275)}#chat .message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}#chat .message .message-body{display:flex;align-items:center;flex-wrap:wrap;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}#chat .message .message-body a{color:inherit}#chat .message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0ch}#chat .message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem}#chat .sent{margin-left:auto;color:#efefef;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}#chat .sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}#chat .received{background:rgba(var(--text-color),.1);border-radius:0 .8rem .8rem}#chat .received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}#chat .received+.received,#chat .sent+.sent{margin-top:0;border-radius:.8rem}#chat .received+.received::after,#chat .sent+.sent::after{display:none}#chat .unconfirmed{opacity:.7;transform-origin:left;animation:pop .3s forwards cubic-bezier(.175,.885,.32,1.275)}#scroll_to_bottom,#send_message_button{position:absolute;transform:scale(0);z-index:1;cursor:pointer}@keyframes pop{0%{transform:rotate(5deg) translate(-.5rem,1rem)}100%{transform:rotate(0) translate(0,0)}}#chat_header{padding:1rem;min-height:4rem;grid-template-columns:auto 1fr auto}#chat_header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat_header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem;flex-shrink:0}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scroll_to_bottom{right:0;bottom:4rem;width:2.6rem;height:2.6rem;padding:.9rem;border-radius:4rem;margin:1.5rem;stroke-width:8;transition:transform .3s}#chat_footer #emoji_toggle{align-self:center;padding:.6rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#chat_footer #emoji_toggle path{fill:rgba(var(--text-color),.5)}#chat_footer #emoji_toggle.active path{fill:var(--accent-color)}#chat_footer .flex{align-items:flex-end;padding:1rem 1rem 1rem .4rem}#chat_footer sm-textarea::part(textarea){padding-right:3rem;border-radius:.5rem}#send_message_button{right:1.5rem;opacity:0;pointer-events:none;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}.big-emoji .message-body{font-size:2.6rem}#messages_container{flex:1;padding:0 1rem}#emoji_picker{display:grid;gap:1rem;background:rgba(var(--text-color),.06);border-radius:1rem;margin:0 1rem;box-shadow:0 .2rem .8rem rgba(0,0,0,.3);overflow-y:auto;max-height:30vh}#emoji_picker section{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.6rem,1fr));gap:.5rem;padding:0 1rem;width:100%}#emoji_picker .section-header{grid-column:1/-1;position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);padding:1rem 0;z-index:1}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#inbox_mail_container,#mail,#messages_container,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}#chat_container:empty{display:none}#chat_container:not(:empty)~.empty-state{display:none}#chat_container{padding-bottom:6rem}sm-tab-panels{overflow:hidden auto}sm-panel{width:100%;overflow-y:auto}#inbox_mail_container,#sent_mail_container{padding-bottom:5rem}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:0 1.5rem;align-items:flex-start}#mail .flex{margin-top:1rem}#mail .flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding-left:1rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{padding:0 1.5rem}#settings_page section{max-width:50ch;display:grid;gap:.3rem}#settings_page section sm-button{margin-top:.5rem;margin-bottom:0}#settings_page section:not(:last-of-type){margin-bottom:2rem}#settings_page section.setting-toggle{grid-template-columns:1fr auto}#settings_page section.setting-toggle sm-switch{grid-column:2;grid-row:1/3}#settings_page section.setting-toggle>h4,#settings_page section.setting-toggle>p{grid-column:1}#settings_page #sign_out::part(button){color:var(--error-color)}@media screen and (max-width:640px){.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{text-align:center;font-size:2rem;font-weight:500}#landing .left p{text-align:center}#landing sm-button{display:flex;width:100%!important}#sing_in{max-height:90vh}#landing_illustration{grid-area:illustration}#main_navbar{transform:translateX(-100%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#main_navbar .logo-section{padding:1rem}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#chat_container,#contact_container{gap:.2rem}#chat .message{width:fit-content;max-width:90%}#settings_page{overflow-x:hidden}#settings_page #settings_panel header{position:sticky;top:0;padding:1rem 0;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup::part(popup){width:24rem;min-width:24rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_popup .popup-header{padding-top:1.5rem}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.8rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup::part(popup){min-width:24rem}#compose_mail_popup::part(popup),#reply_mail_popup::part(popup){min-width:36rem}#main{width:100vw;height:100vh;grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr;box-shadow:0 0 1rem rgba(0,0,0,.1);z-index:1}#settings_page{display:grid;height:100vh;box-shadow:0 0 1rem rgba(0,0,0,.1);grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page #settings_panel{padding:1.5rem}#settings_page .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:21rem 1fr}#chat.expand-side-panel{grid-template-columns:1fr 24rem}#chat .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@media (hover:hover){.contact:hover,.mail-card:hover,.navbar-item:hover{background:rgba(var(--text-color),.06);cursor:pointer}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}.emoji:hover{background:rgba(var(--text-color),.1)}}@media (hover:none){.contact .menu{display:none}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index e7b7f66..d7f0ecc 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -620,7 +620,7 @@ sm-button[variant="primary"]{
         }
     }
 }
-#warn_no_encryption, .date-card{
+#warn_no_encryption, .date-card, .group-event-card{
     padding: 0.4rem 0.8rem;
     background: rgba(var(--text-color), 0.1);
     font-weight: 500;
@@ -900,8 +900,10 @@ sm-button[variant="primary"]{
 }
 #selected_contacts_container{
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
     gap: 1rem;
+    max-height: 8rem;
+    overflow-y: auto;
 }
 #contacts, #mails{
     position: relative;
@@ -945,7 +947,7 @@ sm-button[variant="primary"]{
             }
         }
         sm-input::part(input){
-            border-radius: 3rem;
+            border-radius: 0.5rem;
             padding: 0.2rem 0.8rem;
         }
         h4{
@@ -990,115 +992,92 @@ sm-button[variant="primary"]{
 #chat_page{
     overflow-y: hidden;
 }
-#chat{
+#chat_left,
+#chat_details_panel{
+    position: relative;
+    display: flex;
+    flex-direction: column;
     height: 100%;
+    overflow-y: auto;
+}
+#chat_details_panel{
+    background: rgba(var(--text-color), 0.04);
+    padding-bottom: 1.5rem;
+    .card{
+        margin: 0 1rem;
+        padding: 1.5rem 1rem;
+        border-radius: 0.8rem;
+        background: rgba(var(--text-color), 0.06);
+        &:not(:last-of-type){
+            margin-bottom: 1rem;
+        }
+        & > h4{
+            font-weight: 400;
+            font-size: 0.9rem;
+            color: rgba(var(--text-color), 0.8);
+            margin-bottom: 0.5rem;
+        }
+    }
     header{
         padding: 1rem;
         min-height: 4rem;
-        grid-template-columns: auto 1fr auto;
-        .back-button{
-            padding: 0.1rem;
-            stroke-width: 8;
-            margin-right: 0.5rem;
-            stroke: rgba(var(--text-color), 0.8);
+        .icon{
+            height: 2.3rem;
+            width: 2.3rem;
+            padding: 0.7rem;
+            cursor: pointer;
         }
+    }
+    .contact{
+        padding: 0.5rem 0;
+    }
+    #chat_profile{
+        display: grid;
+        place-items: center;
+        margin-top: 1.5rem;
+        padding-bottom: 1.5rem;
         .initial{
-            cursor: pointer;
-            margin-right: 1rem;
-            height: 2.2rem;
-            width: 2.2rem;
-            flex-shrink: 0;
+            margin-top: -5.5rem;
+            margin-bottom: 1rem;
+            height: 8rem;
+            width: 8rem;
+            border-radius: 50%;
+            font-size: 4rem;
+            .icon{
+                height: 4rem;
+                width: 4rem;
+            }
         }
-        h4{
+        #chat_name{
             font-weight: 500;
+            font-size: 1.2rem;
+        }
+        #last_interaction_time{
+            color: rgba(var(--text-color), 0.7);
             font-size: 0.9rem;
-        }
-        #receiver_name{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            margin-top: 0.5rem;
         }
     }
-    #scroll_to_bottom{
-        position: fixed;
-        right: 0;
-        bottom: 4rem;
-        width: 2.6rem;
-        height: 2.6rem;
-        padding: 0.9rem;
-        border-radius: 4rem;
-        z-index: 1;
-        margin: 1.5rem;
-        stroke-width: 8;
-        cursor: pointer;
-        transform: scale(0);
-        transition: transform 0.3s;
-    }
-    footer{
-        #emoji_toggle{
-            align-self: center;
-            padding: 0.6rem;
-            width: 2.6rem;
-            height: 2.6rem;
-            border-radius: 2rem;
-            cursor: pointer;
-            path{
-                fill: rgba(var(--text-color), 0.5);
-            }
-            &.active path{
-                fill: var(--accent-color);
-            }
-        }
-        .flex{
-            align-items: flex-end;
-            padding: 1rem 1rem 1rem 0.4rem;
-        }
-        sm-textarea::part(textarea){
-            background: rgba(var(--text-color), 0.1);
-            padding-right: 3rem;
-            border-radius: 2rem;
-        }
-    }
-    #send_message_button{
-        position: absolute;
-        right: 1.5rem;
-        transform: scale(0);
-        opacity: 0;
-        pointer-events: none;
-        z-index: 1;
-        align-self: center;
-        height: 2.4rem;
-        width: 2.4rem;
-        padding: 0.5rem;
-        cursor: pointer;
-        stroke: none;
-        fill: rgba(var(--text-color), 0.4);
-        margin-left: 1rem;
-        transition: 0.3s;
-        &.active{
-            opacity: 1;
-            fill: var(--accent-color);
-            transform: none;
-            pointer-events: all;
-        }
-    }
-    #type_message{
-        margin: 0;
-    }
+}
+#chat{
     .message{
         position: relative;
-        display: grid;
-        align-items: center;
-        gap: 0.2rem;
-        width: 100%;
+        display: flex;
+        flex-direction: column;
+        width: auto;
         font-size: 0.92rem;
         max-width: max-content;
         margin-bottom: 0.2rem;
         margin-top: 0.8rem;
         padding: 0.6em 1em;
         transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        .sender-name{
+            font-size: 0.85rem;
+            font-weight: 500;
+            margin-bottom: 0.3rem;
+        }
         .message-body{
-            display: inline-flex;
+            display: flex;
             align-items: center;
             flex-wrap: wrap;
             overflow-wrap: break-word;
@@ -1109,7 +1088,7 @@ sm-button[variant="primary"]{
             -webkit-hyphens: auto;
             hyphens: auto;
             white-space: pre-wrap;
-            line-height: 1.6;
+            line-height: 1.5;
             a{
                 color: inherit;
             }
@@ -1123,13 +1102,17 @@ sm-button[variant="primary"]{
             white-space: nowrap;
             font-size: 0.8em;
             opacity: 0.8;   
+            justify-self: flex-end;
+            padding-left: 1rem;
+            align-self: flex-end;
+            margin-top: 0.2rem;
         }
     }
     .sent{
         margin-left: auto;
+        color: #efefef;
         background: var(--accent-color);
-        color: #f0f0f0;
-        border-radius: 1em 0 1em 1em;
+        border-radius: 0.8rem 0 0.8rem 0.8rem;
         &::after{
             content: '';
             position: absolute;
@@ -1141,13 +1124,10 @@ sm-button[variant="primary"]{
             border-width: 0.5em 0.3em 0 0;
             border-color: var(--accent-color) transparent transparent transparent;
         }
-        .time{
-            margin-left: auto;
-        }
     }
     .received{
         background: rgba(var(--text-color), 0.1);
-        border-radius: 0 1em 1em 1em;
+        border-radius: 0 0.8rem 0.8rem 0.8rem;
         &::after{
             content: '';
             position: absolute;
@@ -1170,7 +1150,7 @@ sm-button[variant="primary"]{
     }
     .sent + .sent,
     .received + .received{
-        border-radius: 1em;
+        border-radius: 0.8rem;
     }
     .unconfirmed{
         opacity: 0.7;
@@ -1186,6 +1166,95 @@ sm-button[variant="primary"]{
         transform: rotate(0) translate(0, 0)
     }
 }
+#chat_header{
+    padding: 1rem;
+    min-height: 4rem;
+    grid-template-columns: auto 1fr auto;
+    .back-button{
+        padding: 0.1rem;
+        stroke-width: 8;
+        margin-right: 0.5rem;
+        stroke: rgba(var(--text-color), 0.8);
+    }
+    .initial{
+        cursor: pointer;
+        margin-right: 1rem;
+        height: 2.2rem;
+        width: 2.2rem;
+        flex-shrink: 0;
+    }
+    #receiver_name{
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+#scroll_to_bottom{
+    position: absolute;
+    right: 0;
+    bottom: 4rem;
+    width: 2.6rem;
+    height: 2.6rem;
+    padding: 0.9rem;
+    border-radius: 4rem;
+    z-index: 1;
+    margin: 1.5rem;
+    stroke-width: 8;
+    cursor: pointer;
+    transform: scale(0);
+    transition: transform 0.3s;
+}
+#chat_footer{
+    #emoji_toggle{
+        align-self: center;
+        padding: 0.6rem;
+        width: 2.6rem;
+        height: 2.6rem;
+        border-radius: 2rem;
+        cursor: pointer;
+        path{
+            fill: rgba(var(--text-color), 0.5);
+        }
+        &.active path{
+            fill: var(--accent-color);
+        }
+    }
+    .flex{
+        align-items: flex-end;
+        padding: 1rem 1rem 1rem 0.4rem;
+    }
+    sm-textarea::part(textarea){
+        padding-right: 3rem;
+        border-radius: 0.5rem;
+    }
+}
+#send_message_button{
+    position: absolute;
+    right: 1.5rem;
+    transform: scale(0);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+    align-self: center;
+    height: 2.4rem;
+    width: 2.4rem;
+    padding: 0.5rem;
+    cursor: pointer;
+    stroke: none;
+    fill: rgba(var(--text-color), 0.4);
+    margin-left: 1rem;
+    transition: 0.3s;
+    &.active{
+        opacity: 1;
+        fill: var(--accent-color);
+        transform: none;
+        pointer-events: all;
+    }
+}
+#type_message{
+    margin: 0;
+}
 .big-emoji{
     .message-body{
         font-size: 2.6rem;
@@ -1531,9 +1600,9 @@ sm-panel{
     }
     #chat{
         .message{
-            .message-body{
-                max-width: 65ch ;
-            }
+            width: auto;
+            align-self: flex-start;
+            max-width: 55ch;
         }
     }
     #chat_page, #mail_page{
@@ -1581,13 +1650,25 @@ sm-panel{
         grid-template-columns: 21rem 1fr;
     }
     #chat{
-        header{
-            padding: 0.8rem 1.5rem;
+        &.expand-side-panel{
+            grid-template-columns: 1fr 24rem;
         }
-        #messages_container{
-            padding: 1rem 5rem;
+        .active{
+            background: rgba(var(--text-color), 0.1);
         }
     }
+    .contact.active,
+    .mail-card.active{
+        background: rgba(var(--text-color), 0.06);
+    }
+    .card{
+        display: inline-flex;
+        width: auto;
+    }
+    #settings_panel{
+        overflow-y: auto;
+        max-height: 100vh;
+    }
 }
 @media (hover: hover){
     .contact:hover, .mail-card:hover, .navbar-item:hover{
diff --git a/index.html b/index.html
index f89ebe8..0522d7a 100644
--- a/index.html
+++ b/index.html
@@ -428,35 +428,59 @@
                     </div>
                 </div>
 			</div>
-			<div id="chat" class="flex direction-column hide-on-mobile hide-completely">
-				<header class="grid align-center">
-                    <svg class="icon hide-on-desktop back-button" onclick="goto('chats')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                        <title>Go to chat page</title>
-                        <line x1="1" y1="32" x2="64" y2="32"/>
-                        <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
-                    </svg>
-                    <div class="flex align-center interact" onclick="showPopup('contact_details_popup')">
-                        <div id="receiver_initial" class="initial flex align-center"></div>
-                        <h4 id="receiver_name"></h4>
-                    </div>
-				</header>
-                <h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5>
-				<section id="messages_container" class="flex direction-column">
-                </section>
-                <svg id="scroll_to_bottom" onclick="scrollToBottom()" class="icon" viewBox="0 0 64 64">
-                    <title></title>
-                    <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-                </svg>
-				<footer class="grid">
-                    <div id="emoji_picker" class="hide-completely"></div>
-                    <div class="flex">
-                        <svg id="emoji_toggle" onclick="toggleEmoji()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
-                        <sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
-                        <svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64">
-                            <path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/>
+			<div id="chat" class="grid hide-on-mobile hide-completely">
+                <div id="chat_left">
+                    <header id="chat_header" class="grid align-center">
+                        <svg class="icon hide-on-desktop back-button" onclick="goto('chats')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <title>Go to chat page</title>
+                            <line x1="1" y1="32" x2="64" y2="32"/>
+                            <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
                         </svg>
+                        <div class="flex align-center interact" onclick="showChatDetails(true)">
+                            <div id="receiver_initial" class="initial flex align-center"></div>
+                            <h4 id="receiver_name"></h4>
+                        </div>
+                    </header>
+                    <h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5>
+                    <section id="messages_container" class="flex direction-column">
+                    </section>
+                    <svg id="scroll_to_bottom" onclick="scrollToBottom()" class="icon" viewBox="0 0 64 64">
+                        <title></title>
+                        <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
+                    </svg>
+                    <footer id="chat_footer" class="grid">
+                        <div id="emoji_picker" class="hide-completely"></div>
+                        <div class="flex">
+                            <svg id="emoji_toggle" onclick="toggleEmoji()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
+                            <sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
+                            <svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64">
+                                <path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/>
+                            </svg>
+                        </div>
+                    </footer>
+                </div>
+                <div id="chat_details_panel" class="hide-completely">
+                    <header class="flex align-center">
+                        <svg class="icon" onclick="showChatDetails(false)" viewBox="0 0 64 64">
+                            <title>close</title>
+                            <line x1="64" y1="0" x2="0" y2="64" />
+                            <line x1="64" y1="64" x2="0" y2="0" />
+                        </svg>
+                    </header>
+                    <div id="chat_profile" class="card">
+                        <div id="chat_dp" class="initial flex align-center"></div>
+                        <h3 id="chat_name"></h3>
+                        <p id="last_interaction_time"></p>
                     </div>
-				</footer>
+                    <div id="group_description_card" class="card hide-completely">
+                        <h4>Group description</h4>
+                        <p id="group_description"></p>
+                    </div>
+                    <div id="group_members_card" class="card hide-completely">
+                        <h4>Group members</h4>
+                        <div id="group_members_list"></div>
+                    </div>
+                </div>
 			</div>
 		</section>
 		<section class="page grid hide-completely" id="mail_page">
@@ -1107,12 +1131,13 @@
             //clear Rendered Elements
             let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', 'messages_container',
                  'receiver_name', 'mail_contact_list'
-            ]
+                ]
             //, "backup_info"
             elementsToReset.forEach(e => clearElement(getRef(e)))
-
+            
             floDapps.setCustomPrivKeyInput(signIn)
-
+            
+            chatMutationObserver.observe(getRef('messages_container'), {childList: true, subtree: true})
             //invoke the startup functions
             floDapps.launchStartUp().then(result => {
                 console.log(result)
@@ -1229,28 +1254,32 @@
                 card.querySelector('.mail-content').textContent = content
                 return card
             },
-            async contactCard(floID, name, type, options = {}){
-                let {prepend = false, markUnread = false} = options
+            contactCard(floID, name, type, options = {}){
+                let {prepend = false, markUnread = false, contactOnly = false} = options
                 let card = getRef('contact_template').content.cloneNode(true),
                     cardContainer = card.firstElementChild
                 cardContainer.setAttribute("name", name || 'Unknown')
                 cardContainer.setAttribute("flo-id", floID)
-                cardContainer.querySelector('.name').textContent = name || floID
                 let initial = card.querySelector('.initial')
                 let color = contactColor(floID)
-                //cardContainer.setAttribute("text-color", randomColor.primary)
+
                 if(type === 'group'){
                     initial.innerHTML = `
                     <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
                     `
+                    cardContainer.querySelector('.name').textContent = floGlobals.groups[floID].name
                 }
                 else{
                     initial.textContent = name ? name.charAt(0) : floID.charAt(0)
+                    cardContainer.querySelector('.name').textContent = name || floID
                 }
                 cardContainer.setAttribute("background-color", color)
                 initial.setAttribute(`style`, `background-color: ${color};`)     
-                if(type === 'contact'){
-                    cardContainer.classList.add('contact')
+                
+                if(contactOnly){
+                    return card;
+                } 
+                else if(type === 'contact'){
                     let duplicateCard = card.cloneNode(true);
                     getRef('contacts_container').append(card);
                     getRef('mail_contact_list').append(duplicateCard);
@@ -1288,7 +1317,11 @@
                     .catch(error => console.error(error))
                     if(prepend){
                         getRef('chat_container').prepend(card);
-                        getRef('chat_container').children[0].click()
+                        activeChat['receiver'] = floID
+                        if(activeChat['chatCard'])
+                            activeChat['chatCard'].classList.remove('active')
+                        getRef('chat_container').children[0].classList.add('active')
+                        activeChat['chatCard'] = getRef('chat_container').children[0]
                     }
                     else{
                         getRef('chat_container').append(card);
@@ -1296,10 +1329,11 @@
                 }
             },
             messageBubble(msg){
-                console.log(msg)
-                let {admin = false, newMembers = [], groupID, name, sender, floID, message, time: timestamp, category, unconfirmed = false} = msg
+                let {admin = false, newMembers = [], groupID, name, sender, floID, message, time: timestamp, category, unconfirmed = false, updateChatCard = false} = msg
                 let card = getRef('message_template').content.cloneNode(true),
-                    cardContainer = card.querySelector('.message')
+                    cardContainer = card.querySelector('.message'),
+                    messageContent = cardContainer.children[0],
+                    messageTime = cardContainer.children[1]
 
                 if(activeChat.isGroup){
                     floID = groupID
@@ -1307,24 +1341,39 @@
                 }
 
                 if(message){
+
+                    if(updateChatCard && activeChat.isGroup && sender === myFloID) return
+
                     cardContainer.id = `${floID}_${timestamp}`
                     if(unconfirmed)
                         cardContainer.classList.add('unconfirmed')
                 
                     cardContainer.classList.add(category)
+                    
+                    if(sender && sender !== myFloID){
+                        let senderName = document.createElement('div')
+                        senderName.classList.add('sender-name')
+                        senderName.style.color = contactColor(sender)
+                        senderName.textContent = floGlobals.contacts[sender] || sender
+                        cardContainer.prepend(senderName)
+
+                        messageContent = cardContainer.children[1]
+                        messageTime = cardContainer.children[2]
+                    }
+                    
                     if(isValidUrl(message)){
                         const anchorTag = document.createElement('a')
                         anchorTag.href = message
                         anchorTag.target="_blank"
                         anchorTag.rel="noopener"
                         anchorTag.textContent = message
-                        cardContainer.children[0].append(anchorTag)
+                        messageContent.append(anchorTag)
                     }
                     else{
                         let [messageBody, isOnlyEmoji] = isEmoji(message)
                         if(isOnlyEmoji)
                             cardContainer.classList.add('big-emoji')
-                        cardContainer.children[0].append(messageBody)
+                        messageContent.append(messageBody)
                     }
                     let time = new Date(timestamp).toString(),
                         minutes = String(new Date(timestamp).getMinutes()),
@@ -1333,7 +1382,7 @@
                     minutes = minutes.length === 1 ? `0${minutes}` : minutes
                     let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
     
-                    cardContainer.children[1].textContent = finalHours
+                    messageTime.textContent = finalHours
                     if(currentFloID !== floID){
                         currentDate = null
                         currentFloID = floID
@@ -1354,7 +1403,20 @@
                         return card;
                 }
                 else if(admin){
-
+                    if(newMembers.length){
+                        const {admin} = floGlobals.groups[groupID]
+                        newMembers.forEach(member => {
+                            let eventCard = document.createElement('p')
+                            eventCard.classList.add('group-event-card')
+                            let eventMessage = ''
+                            if(member === myFloID)
+                                eventMessage = `${floGlobals.contacts[admin] || admin} added you`
+                            else    
+                                eventMessage = `${floGlobals.contacts[admin] || admin} added ${member}`
+                            eventCard.textContent = eventMessage
+                            return eventCard
+                        })
+                    }
                 }
 
 			},
@@ -1395,6 +1457,7 @@
         
 
         function renderDirectUI(data) {
+            console.log('called DM')
             renderMessages(data.messages, {updateChatCard: true});
             renderMailList(data.mails)
             //let order = Object.keys(data.messages).map(a => a.split('_')).sort((a, b) => a[0] - b[0]).map(a => a[1])
@@ -1406,8 +1469,9 @@
                 notify(`${Object.keys(data.mails).length} new mail(s)`)
             }
         }
-
+        
         function renderGroupUI(data){
+            console.log('called grouu')
             renderMessages(data.messages, {updateChatCard: true});
         }
 
@@ -1525,10 +1589,6 @@
                 if(target.dataset.target)
                     showPanel(target, target.dataset.target)
             }
-            else if(e.target.closest('.contact') && e.target.closest('#mail_contact_list')){
-                getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id')
-                getRef('mail_contact_list').classList.add('hide-completely')
-            }
             if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){
                 let targetButton = e.target.closest('.navbar-item'),
                 targetPage = getRef(targetButton.dataset.target)
@@ -1593,19 +1653,31 @@
             }
         })
 
+        getRef('mail_contact_list').addEventListener('click', e => {
+            if(e.target.closest('.contact')){
+                getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id')
+                getRef('mail_contact_list').classList.add('hide-completely')
+            }
+        })
+
+
         let clickedContact = {}
-        getRef('contacts').addEventListener('click', e => {
+
+        let selectedGroupMembers = new Set()
+
+        getRef('chat_page').addEventListener('click', e => {
             //detect click on chat cards
             if (e.target.closest(".contact")){
                 const contact = e.target.closest(".contact")
                 clickedContact['card'] = contact
                 clickedContact['floID'] = contact.getAttribute("flo-id")
                 clickedContact['name'] = contact.getAttribute("name")
-                if(e.target.closest(".initial") || e.target.closest(".icon")){
+                if(e.target.closest(".initial") || e.target.closest(".menu")){
                     showPopup('contact_details_popup')
                 }
                 else if(isCreatingGroup){
                     // code for adding group members
+                    selectContact(contact)
                 }
                 else{
                     createRipple(e, contact)
@@ -1628,6 +1700,95 @@
             }
         })
 
+        function selectContact(contact){
+                
+            if(!selectedGroupMembers.has(clickedContact.floID)){
+                
+                let selectedContact = clickedContact['card'].querySelector('.initial').cloneNode(true);
+                let selectedContactsContainer = getRef('selected_contacts_container');
+
+                selectedContact.setAttribute('floID' , clickedContact['floID'] );
+                selectedContact.onclick = removeContactCard;
+
+                // adding animation to contactCard
+                let animatingCard = addAnimate();
+
+                mygroup.push(clickedContact['floID']);
+                selectedContactsContainer.appendChild(selectedContact);
+                selectedContact.appendChild(closeIcon);
+                selectedContact.animate(animatingCard[0], animatingCard[1]);
+
+                selectedContact.style.margin = "8px";
+                selectedContact.style.cursor = "pointer";
+                clickedContact['card'].querySelector('.initial').appendChild(tickIcon);
+                tickIcon.animate(animatingCard[0], animatingCard[1]); 
+            }      
+            
+            else{
+                let selectedContactsContainer = getRef('selected_contacts_container');
+                let removeIndex = mygroup.indexOf(clickedContact['floID']);
+                let removeContact = selectedContactsContainer.querySelector('div:nth-of-type('+ (removeIndex + 1)+ ')');
+                let tickIcon = clickedContact['card'].querySelector('.initial').querySelector('img');
+                let animatingCardRemove = removeAnimate();
+
+
+                if(removeIndex > -1){
+                    mygroup.splice(removeIndex,1);
+                }
+
+                removeContact.animate(animatingCardRemove[0],animatingCardRemove[1]);
+                tickIcon.animate(animatingCardRemove[0], animatingCardRemove[1]);
+                
+                setTimeout( function(){
+                    
+                    removeContact.remove();
+                    tickIcon.remove();
+
+                },300)
+            }
+
+    }
+
+    let mygroup = []
+    function clearAllMember(){
+        mygroup=[];
+        let selectedContactsContainer = getRef('selected_contacts_container');
+        let contacts = getRef('contacts').getElementsByClassName('initial');
+
+        selectedContactsContainer.innerHTML = "";
+       
+        for(let i =0 ; i< contacts.length ; i++){
+            if(contacts[i].querySelector('img'))
+              contacts[i].querySelector('img').remove();
+        }
+        
+
+    }
+
+    function removeContactCard(){
+        let contactFloID = this.getAttribute("floID");
+        let removeIndex = mygroup.indexOf(contactFloID);
+        let tickIcon = getRef('contacts').querySelector('[flo-id=' + contactFloID +']').querySelector('.initial').querySelector('img');
+        let animatingCardRemove = removeAnimate();
+        let removeCard = this;
+
+        if(removeIndex > -1){
+             mygroup.splice(removeIndex,1);
+
+            }
+
+        removeCard.animate(animatingCardRemove[0],animatingCardRemove[1]);
+        tickIcon.animate(animatingCardRemove[0], animatingCardRemove[1]);
+         
+
+         setTimeout(function(){
+        
+            removeCard.remove();
+            tickIcon.remove();
+        },300)
+    }
+
+
         const emojis = [
             "<", "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗","😙", "😚", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", 
             "🤓", "😎", "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡", "🤬", "🤯", "😳", "🥵", "🥶", 
@@ -1966,7 +2127,6 @@
                 msgObj['category'] = 'sent'
             }
             getRef('messages_container').append(render.messageBubble(msgObj))
-            scrollToBottom(true)
             const contact = getRef('chat_container').querySelector(`.chat[flo-id="${receiver}"], .group[flo-id="${receiver}"]`)
             if(contact){
                 if(activeChat['chatCard'] !== getRef('chat_container').children[0]){
@@ -1975,7 +2135,7 @@
                     activeChat['chatCard'] = cloneContact
                     getRef('chat_container').prepend(cloneContact)
                     animateTo(getRef('chat_container').children[0], [
-                            {transform: 'translateY(1rem)'},
+                        {transform: 'translateY(1rem)'},
                             {transform: 'none'},
                         ],
                         {
@@ -1989,14 +2149,15 @@
                 messenger.addChat(receiver)
                 render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', {prepend: true})
             }
+            scrollToBottom()
             if(activeChat.isGroup)
                 messenger.sendGroupMessage(message, receiver).then(data => {
                     console.log('sent group message')
-                    getRef('messages_container').querySelector(`#${receiver}_${time}`).remove()
+                    getRef('messages_container').querySelector(`#${receiver}_${time}`).classList.remove('unconfirmed')
                     activeChat.chatCard.querySelector('.last-message').textContent = `You: ${message}`
                     activeChat.chatCard.querySelector('.time').textContent = getFormatedTime(Date.now(), true)
                 }).catch(error => notify(error, "error"));
-                else
+            else
                 messenger.sendMessage(message, receiver).then(data => {
                     getRef('messages_container').querySelector(`#${receiver}_${time}`).classList.remove('unconfirmed')
                     activeChat.chatCard.querySelector('.last-message').textContent = message
@@ -2047,7 +2208,6 @@
                     type = 'group'
                 render.contactCard(floID, floGlobals.contacts[floID], type, {markUnread})
             }
-            chatMutationObserver.observe(getRef('messages_container'), {childList: true})
         }
 
         function renderMarked(data) {
@@ -2058,7 +2218,7 @@
             }
         }
 
-        function scrollToBottom(smooth = false){
+        function scrollToBottom(){
             getRef('messages_container').scrollTo(0, getRef('messages_container').scrollHeight)
         }
 
@@ -2069,59 +2229,65 @@
             let messages
             if(reRender){
                 activeChat['allMessages'] = Object.values(data)
-                startIndex = (activeChat['allMessages'].length - 20) > 0 ? activeChat['allMessages'].length - 20 : 0
+                startIndex = activeChat['allMessages'].length > 20 ? activeChat['allMessages'].length - 20 : 0
                 endIndex = activeChat['allMessages'].length
                 messages = activeChat['allMessages']
                 renderedDates.clear()
             }
             else if(lazyLoad){
                 messages = activeChat['allMessages']
-                startIndex = startIndex > 20 ? startIndex -= 20 : 0
+                endIndex = startIndex
+                startIndex = endIndex > 20 ? endIndex - 20 : 0
                 markUnread = false
             }
             else{
                 messages = Object.values(data)
-                startIndex = 0
-                endIndex = messages.length  
+                if(messages.length){
+                    startIndex = 0
+                    endIndex = messages.length  
+                }
             }
 
-            for (let i = startIndex; i < endIndex; i++) {
-                let {floID, groupID, sender, message, time, category} = messages[i]
-                //Stops message from rendering in wrong chat window
-                if(activeChat['receiver'] && activeChat['receiver'] === (floID || groupID))
-                    frag.append(render.messageBubble(messages[i]))
-                const contact = getRef('chat_container').querySelector(`.chat[flo-id='${floID}']`)
-                if (markUnread && contact){
-                    contact.classList.add("unread");
-                    if(contact !== getRef('chat_container').children[0]){
-                        const cloneContact = contact.cloneNode(true)
-                        contact.remove()
-                        getRef('chat_container').prepend(cloneContact)
-                        animateTo(getRef('chat_container').children[0], [
-                                {transform: 'translateY(1rem)'},
-                                {transform: 'none'},
-                            ],
-                            {
-                                easing: 'ease',
-                                duration: 300
-                            }
-                        )
+            if(messages && messages.length){
+                for (let i = startIndex; i < endIndex; i++) {
+                    let {floID, groupID, sender, message, time, category} = messages[i]
+                    //Stops message from rendering in wrong chat window
+                    if(activeChat['receiver'] && ( activeChat['receiver'] === floID || activeChat['receiver'] === groupID)){
+                        frag.append(render.messageBubble({...messages[i], updateChatCard}))
                     }
-                }
-                if(updateChatCard){
-                    const chatCard = getRef('chat_container').querySelector(`.contact[flo-id="${floID || groupID}"]`)
-                    let finalMessage
-                    if(floGlobals.contacts[sender])
-                        finalMessage = `${floGlobals.contacts[sender]}: ${message}`
-                    else if(sender === myFloID)
-                        finalMessage = `You: ${message}`
-                    else 
-                        finalMessage = message
-                    chatCard.querySelector('.last-message').textContent = finalMessage
-                    chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
-                }
-            } 
-            endIndex = startIndex
+                    const contact = getRef('chat_container').querySelector(`.chat[flo-id='${floID}']`)
+                    if (markUnread && contact){
+                        contact.classList.add("unread");
+                        if(contact !== getRef('chat_container').children[0]){
+                            const cloneContact = contact.cloneNode(true)
+                            contact.remove()
+                            getRef('chat_container').prepend(cloneContact)
+                            animateTo(getRef('chat_container').children[0], [
+                                    {transform: 'translateY(1rem)'},
+                                    {transform: 'none'},
+                                ],
+                                {
+                                    easing: 'ease',
+                                    duration: 300
+                                }
+                            )
+                        }
+                    }
+                    if(updateChatCard){
+                        const chatCard = getRef('chat_container').querySelector(`.contact[flo-id="${floID || groupID}"]`)
+                        let finalMessage
+                        if(floGlobals.contacts[sender])
+                            finalMessage = `${floGlobals.contacts[sender]}: ${message}`
+                        else if(sender === myFloID)
+                            finalMessage = `You: ${message}`
+                        else 
+                            finalMessage = message
+                        chatCard.querySelector('.last-message').textContent = finalMessage
+                        chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
+                    }
+                } 
+            }
+            
             if(!lazyLoad && !reRender){
                 endIndex = messages.length
                 getRef('messages_container').append(frag)
@@ -2143,7 +2309,7 @@
         const chatMutationObserver = new MutationObserver(
             (mutations, observer) => {
                 for(const mutation of mutations) {
-                    if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                    if (mutation.type === 'childList' && mutation.addedNodes.length && getRef('messages_container').firstElementChild) {
                         chatMessageObserver.observe(getRef('messages_container').firstElementChild)
                         chatScrollInfo['scrollTop'] += (getRef('messages_container').scrollHeight - chatScrollInfo['scrollHeight'])
                         chatScrollInfo['scrollHeight'] = getRef('messages_container').scrollHeight
@@ -2175,12 +2341,36 @@
                 getRef("receiver_initial").innerHTML = `
                     <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
                     `
+                getRef("chat_dp").innerHTML = `
+                    <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
+                    `
+                getRef("receiver_name").textContent = floGlobals.groups[floID].name;
+                getRef("chat_name").textContent = floGlobals.groups[floID].name;
+                getRef("last_interaction_time").textContent = `Created ${getFormatedTime(floGlobals.groups[floID].created)}`;
+                
+                getRef('group_members_list').innerHTML = ''
+                floGlobals.groups[floID].members.forEach(member => {
+                    console.log(render.contactCard(member, floGlobals.contacts[member] || '', 'contact', {contactOnly: true}))
+                    frag.append(render.contactCard(member, floGlobals.contacts[member] || '', 'contact', {contactOnly: true}))
+                })
+                getRef('group_members_list').append(frag)
+
+                getRef("group_description_card").classList.remove('hide-completely')
+                getRef("group_members_card").classList.remove('hide-completely')
+                getRef("group_description").textContent = floGlobals.groups[floID].description;
             }
             else{
                 getRef("receiver_initial").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' ';
+                getRef("chat_dp").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' ';
+                getRef("receiver_name").textContent = floGlobals.contacts[floID] || floID || ' ';
+                getRef("chat_name").textContent = floGlobals.contacts[floID] || floID || ' ';
+                getRef("last_interaction_time").textContent = ``;
+                
+                getRef("group_description_card").classList.add('hide-completely')
+                getRef("group_members_card").classList.add('hide-completely')
             }
             getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
-            getRef("receiver_name").textContent = floGlobals.contacts[floID] || floID || ' ';
+            getRef("chat_dp").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
             if (floGlobals.pubKeys[floID] || activeChat.isGroup)
                 getRef("warn_no_encryption").classList.add("hide-completely");
             else
@@ -2433,6 +2623,19 @@
                 getRef(target).children[1].focusIn()
         }
 
+        function showChatDetails(show){
+            if(show){
+                getRef('chat').classList.add('expand-side-panel')
+                getRef('chat_left').classList.add('hide-on-mobile')    
+                getRef('chat_details_panel').classList.remove('hide-completely')
+            }
+            else{
+                getRef('chat').classList.remove('expand-side-panel')
+                getRef('chat_left').classList.remove('hide-on-mobile')    
+                getRef('chat_details_panel').classList.add('hide-completely')    
+            }
+        }
+
     </script>
 
 <script id="init_lib" version="1.0.1">