diff --git a/css/main.css b/css/main.css
index e239fc9..723f8c8 100644
--- a/css/main.css
+++ b/css/main.css
@@ -293,6 +293,7 @@ strip-select {
 }
 
 strip-option {
+  position: relative;
   font-size: 0.8rem;
   --border-radius: 0.2rem;
   -webkit-user-select: none;
@@ -353,7 +354,7 @@ ol li::before {
   text-overflow: ellipsis;
 }
 
-.breakable {
+.wrap-around {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -1450,13 +1451,14 @@ sm-button[variant=primary] {
   position: absolute;
   top: 0;
   right: 0;
+  min-width: 2.7ch;
   font-size: 0.8rem;
-  padding: 0.3rem;
+  padding: 0.2rem;
   background: var(--danger-color);
   color: rgba(var(--background-color), 1);
-  aspect-ratio: 1/1;
+  line-height: 1;
   font-weight: 700;
-  border-radius: 0.3rem;
+  border-radius: 1rem;
   margin: 0.3rem;
 }
 
@@ -1523,6 +1525,18 @@ sm-button[variant=primary] {
   overflow-y: auto;
 }
 
+#mail_type_selector {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+#mail_type_selector strip-option {
+  --padding: 0.5rem 1.2rem;
+}
+#mail_type_selector strip-option .badge {
+  margin: 0rem;
+}
+
 #contacts,
 #mails,
 #settings {
@@ -1799,6 +1813,9 @@ sm-button[variant=primary] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+#chat_header .group-icon {
+  padding: 0.1rem;
+}
 
 #scroll_to_bottom {
   position: absolute;
@@ -2315,6 +2332,11 @@ sm-button[variant=primary] {
     padding: 1rem 4rem;
     padding-top: 0;
   }
+
+  #chat_page,
+#mail_page {
+    grid-template-columns: 21rem 1fr;
+  }
 }
 @media only screen and (min-width: 1280px) {
   #landing {
diff --git a/css/main.min.css b/css/main.min.css
index ca10048..fda1f74 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--dark-red: #d40e1e;--red: #f50000;--kinda-pink: #e40273;--purple: #462191;--shady-blue: #324de6;--nice-blue: #256eff;--maybe-cyan: #00b0ff;--teal: #00bcd4;--mint-green: #16c79a;--yellowish-green: #66bb6a;--greenish-yellow: #8bc34a;--dark-teal: #11698e;--tangerine: #ff6f00;--orange: #ff9100;--redish-orange: #ff3d00;color:rgba(var(--text-color), 1);background:rgba(var(--foreground-color), 1);overflow-y:hidden}body #scroll_to_bottom{background:rgba(var(--foreground-color), 1);box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5);--dark-red: #ff5e7e;--red: #ff6098;--kinda-pink: #c44ae6;--purple: #9565f7;--shady-blue: #8295fb;--nice-blue: #86afff;--maybe-cyan: #66cfff;--teal: #6aeeff;--mint-green: #4dffd2;--yellowish-green: #9effa2;--greenish-yellow: #c7fc8b;--dark-teal: #51cbff;--tangerine: #ffac6d;--orange: #ffbe68;--redish-orange: #ff8560}body[data-theme=dark] .initial{box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message{color:rgba(var(--text-color), 1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.1)),rgba(var(--foreground-color), 1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.warning{line-height:normal;padding:1rem;background-color:khaki;border-radius:.5rem;font-weight:500;color:rgba(0,0,0,.7)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.1)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .6rem}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem;aspect-ratio:1/1;background-color:transparent}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}fieldset{border:none}input{accent-color:var(--accent-color)}input[type=range]:active{cursor:-webkit-grab;cursor:grab}sm-copy{font-size:.9rem}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-textarea{--max-height: 32ch}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{--padding: 0.8rem;font-size:.9rem}sm-option{font-size:.9rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul,ol{list-style:none}ol{counter-reset:item}ol li{position:relative;display:flex;align-items:flex-start;counter-increment:item}ol li:not(:last-of-type){padding-bottom:1.5rem}ol li:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:calc(100% - 2.2rem);background:var(--accent-color);margin-left:.7rem;margin-top:2rem}ol li::before{content:counter(item);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;font-weight:500;margin-top:.15rem;margin-right:1rem;line-height:1;width:1.5rem;height:1.5rem;border-radius:100%;flex-shrink:0;color:rgba(var(--text-color), 0.8);background:rgba(var(--text-color), 0.1)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);font-weight:500;margin-bottom:.2rem}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-bottom-0-5{margin-bottom:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2;border-radius:.5rem;padding:.8rem 1rem}.fab .icon{margin-right:.5rem}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.page{height:100%}.page__header{display:flex;justify-content:space-between;margin-bottom:1.5rem;min-height:8rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem}.flo-icon{margin-right:.3rem;height:1.5rem;width:1.5rem}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{width:100%;height:100%}.inner-page{background-color:rgba(var(--foreground-color), 0.5)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{color:rgba(var(--text-color), 0.8)}#flo_id_warning{padding-bottom:1.5rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}#flo_id_warning .icon{height:4rem;width:4rem;padding:1rem;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8);margin-bottom:1.5rem}.tip{font-size:.9rem;color:rgba(var(--text-color), 0.8)}sm-button[variant=primary]{--foreground-color: 255, 255, 255}.danger{color:var(--error-color)}.logo-section{display:flex;position:relative;align-items:center;height:-webkit-max-content;height:-moz-max-content;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%;height:100%;padding:0 1.5rem;align-items:center}#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:var(--accent-color);margin-bottom:.5rem;font-weight:500}#landing .left sm-button{margin:1.5rem 0 2rem 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}#landing .left h3{margin-bottom:1rem;font-weight:500}#landing .left p{margin-top:1rem;font-size:1.1rem;color:rgba(var(--text-color), 0.8)}#landing .left .flex sm-button:first-of-type{margin-right:1rem}.logo-section{padding:1.5rem}#landing_illustration{position:relative;width:100%}@-webkit-keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading{height:100%;display:grid;place-content:center;justify-items:center}.page__loader{z-index:1;transform-origin:bottom;height:6rem;width:6rem;-webkit-animation:bounce .5s infinite alternate ease-in;animation:bounce .5s infinite alternate ease-in}.shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color), 0.1);border-radius:50%;-webkit-animation:scale .5s infinite alternate ease-in;animation:scale .5s infinite alternate ease-in;margin-left:1rem}.page__tag-line{margin-top:2rem}@-webkit-keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(0.8)}}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(0.8)}}@-webkit-keyframes scale{0%{transform:scale(0.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes scale{0%{transform:scale(0.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}#background_overlay,#background_image{position:fixed;height:100%;width:100%}#background_overlay{background-color:red;z-index:-1;background-color:rgba(var(--foreground-color), var(--opacity, 0.6));transition:background-color .3s}#background_image{z-index:-2;-o-object-fit:cover;object-fit:cover;filter:blur(var(--blur, 1rem));transform:scale(calc(1 + var(--scale, 1.1) / 10))}#background_image[src=""],#background_image:not([src]){display:none}#main_page{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:1fr auto}.initial{position:relative;justify-content:center;font-size:1.2rem;font-weight:500;width:2.8rem;height:2.8rem;aspect-ratio:1/1;color:rgba(var(--foreground-color), 1);box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--contact-color, --accent-color)}.group-icon{height:1.6rem;width:1.6rem;fill:rgba(var(--foreground-color), 1)}.contact{position:relative;display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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 . ."}.contact.admin{grid-template-columns:auto 1fr auto}.contact.selected{background-color:rgba(var(--text-color), 0.06)}.contact .initial{grid-area:dp}.contact .name,.contact .last-message{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:rgba(var(--text-color), 0.8)}.contact .name{width:100%;font-size:1em;font-weight:500}.contact .span-2{display:flex;justify-content:space-between;grid-column:2/4;width:100%;gap:.5rem}.contact .last-message{font-weight:400;font-size:.9em}.contact .menu{justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color), 1)}.contact .time{color:rgba(var(--text-color), 0.7);grid-area:time;font-size:.8rem}.selectable-contact,.group-member,.blocked-id,.contact-list__item{gap:1rem;padding:.5rem 0}.selectable-contact{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.selectable-contact input{margin-left:auto}.group-member{display:flex;align-items:center}.group-member .admin-tag{margin-left:auto;padding:.1rem .6rem;font-size:.8rem;border-radius:3rem;background-color:rgba(var(--text-color), 0.1)}.contact-list__item{display:flex;text-align:left;justify-content:flex-start;width:100%;padding:.5rem}.contact-list__item:focus{background-color:rgba(var(--text-color), 0.03)}#selected_contacts_container{display:flex;overflow:auto hidden}#selected_contacts_container:not(:empty){padding:.5rem 0;margin:.5rem 0;border-bottom:solid thin rgba(var(--text-color), 0.1)}#selected_contacts_container .contact-preview{display:flex;flex-shrink:0;align-items:center;cursor:pointer;margin-right:.3rem;background:rgba(var(--text-color), 0.1);padding-left:.2rem;border-radius:2rem;transform-origin:left;overflow:hidden}#selected_contacts_container .contact-preview .initial{width:1.6rem;height:1.6rem;font-size:.9rem}#selected_contacts_container .contact-preview .name{font-size:.9rem;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#contact_details_popup .popup-section{margin:1.5rem 0}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .group-icon{padding:.2rem;height:3rem;width:3rem}#contact_initial{height:4.6rem;width:4.6rem;font-size:2.4rem;border-radius:4rem;margin-top:3rem;margin-bottom:.5rem;background-color:var(--contact-color, --accent-color)}#contact_name{margin:.5rem 0}#contact_name::part(text){font-size:1.2rem;font-weight:500}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .6rem;font-weight:500;font-size:.8rem;background-color:rgba(var(--text-color), 0.04);border-radius:.3rem;color:rgba(var(--text-color), 0.8);margin:1rem 0;justify-self:center;align-self:center;text-align:center}#warn_no_encryption+#warn_no_encryption,#warn_no_encryption+.date-card,#warn_no_encryption+.group-event-card,.date-card+#warn_no_encryption,.date-card+.date-card,.date-card+.group-event-card,.group-event-card+#warn_no_encryption,.group-event-card+.date-card,.group-event-card+.group-event-card{margin-top:0}.group-event-card{font-size:.8rem;font-weight:400}#warn_no_encryption{background:#fffd8d;color:#111}.contact .initial::after,.mail-card .initial::after{content:"";position:absolute;bottom:-0.1rem;right:-0.1rem;height:1rem;width:1rem;background:var(--accent-color);border-radius:100%;border:solid rgba(var(--foreground-color), 1) 1px;transform:scale(0);transition:transform .3s}.contact.unread .initial::after,.mail-card.unread .initial::after{transform:scale(1)}.mail-card.unread .time,.mail-card.unread .date,.contact.unread .time,.contact.unread .date{color:var(--accent-color)}.mail-card.unread h4,.contact.unread h4{color:rgba(var(--text-color), 1)}.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p,.contact.unread h4,.contact.unread h5,.contact.unread p{font-weight:700}.mail-card{position:relative;display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;grid-template-columns:auto 1fr auto;grid-template-areas:"dp sender date" "dp subject subject" "dp desc desc"}.mail-card .initial{grid-area:dp;align-self:flex-start;height:2rem;width:2rem;font-size:1rem}.mail-card .sender{width:100%;font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mail-card .subject{grid-area:subject;font-size:1em;margin-top:.3rem;font-weight:500}.mail-card .description{grid-area:desc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color), 0.8)}.date{grid-area:date;margin-left:auto;white-space:nowrap;font-size:.8rem;color:rgba(var(--text-color), 0.8)}@-webkit-keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail{position:relative;padding:1.5rem}.mail:not(:first-of-type){margin-top:1.5rem;background-color:rgba(var(--text-color), 0.03);padding-bottom:2rem;margin-inline:1rem;border-radius:.5rem;overflow:hidden}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color), 0.2)}.mail .mail-header{align-self:start;margin-bottom:1.5rem;gap:1rem}.mail .initial{background-color:var(--contact-color, --accent-color);margin:0;height:2rem;width:2rem}.mail .sender-name{font-weight:500;margin-bottom:.5rem}.mail .flo-id{font-weight:400;max-width:90%}.mail .mail-subject,.mail .mail-content{overflow-wrap:break-word;word-wrap:break-word}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:-webkit-max-content;height:-moz-max-content;height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.nav-item:last-of-type{margin-top:auto}.badge{display:flex;align-items:center;justify-content:center;content:attr(data-notifications);position:absolute;top:0;right:0;font-size:.8rem;padding:.3rem;background:var(--danger-color);color:rgba(var(--background-color), 1);aspect-ratio:1/1;font-weight:700;border-radius:.3rem;margin:.3rem}#auto_complete_contact{position:relative}#mail_contact_list{max-height:40vh;overflow-y:auto;position:absolute;top:100%;background:rgba(var(--foreground-color), 1);z-index:1;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;overflow-x:hidden}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts .scrolling-wrapper .empty-state{padding:1.5rem;text-align:center}#contacts_container .contact{padding:.5rem 0}#group_creation_process .group-icon{background-color:var(--accent-color);justify-self:center;height:8rem;width:8rem;margin-bottom:1rem;padding:2rem;border-radius:50%;font-size:4rem}#contacts,#mails{position:relative;grid-template-rows:-webkit-max-content 1fr;grid-template-rows:max-content 1fr}#mail_sections{overflow-y:auto}#contacts,#mails,#settings{height:100%;overflow-y:hidden}#contacts .header,#mails .header,#settings .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color), 1)}#contacts .header sm-input,#mails .header sm-input,#settings .header sm-input{width:100%}#contacts .header h4,#mails .header h4,#settings .header h4{text-transform:capitalize;font-weight:500}#contacts .header .flex h4,#mails .header .flex h4,#settings .header .flex h4{flex:1}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings .header .flex sm-menu{margin-right:-0.7rem}#contacts .header sm-button,#mails .header sm-button,#settings .header sm-button{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_search_field .icon-only{margin-left:-0.5rem;margin-right:.5rem}#search_chats{--min-height: 3rem}#chat_page,#mail_page,#settings{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}#group_members_list{margin-top:.5rem}#group_members_list .contact{padding:.5rem 0}#chat_view,#mail{background-color:rgba(var(--foreground-color), 0.3)}#chat_view{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}.message{position:relative;display:flex;flex-wrap:wrap;width:auto;font-size:.92rem;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}.message .message-body{display:flex;align-items:center;flex-wrap:wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}.message .message-body a{color:inherit}.message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0}.message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem;margin-left:auto}.sent{margin-left:auto;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}.sent>*{color:rgba(var(--background-color), 1)}.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 transparent}.received{margin-right:auto;background:rgba(var(--text-color), 0.1);border-radius:0 .8rem .8rem .8rem}.received::after{content:"";position:absolute;left:-0.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color), 0.1) transparent transparent}.sent+.sent,.received+.received{margin-top:0}.sent+.sent::after,.received+.received::after{display:none}.sent+.sent,.received+.received{border-radius:.8rem}.distinct-sender{display:grid;border-radius:0 .8rem .8rem .8rem !important;margin-top:.8rem !important}.distinct-sender::after{display:flex !important;content:"";position:absolute;left:-0.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color), 0.1) transparent transparent}.unconfirmed{opacity:.7;transform-origin:left;-webkit-animation:pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}@-webkit-keyframes pop{0%{transform:rotate(5deg) translate(-0.5rem, 1rem)}100%{transform:rotate(0) translate(0, 0)}}@keyframes pop{0%{transform:rotate(5deg) translate(-0.5rem, 1rem)}100%{transform:rotate(0) translate(0, 0)}}.back-button{padding:.5rem;margin-left:-0.5rem}#chat_header{padding:.5rem 1rem;align-content:center;grid-template-columns:minmax(0, 1fr)}#chat_header .flex{height:100%}#chat_header #chat_details_button{background-color:rgba(var(--text-color), 0.06);border-radius:2rem;justify-self:center;padding:.3rem}#chat_header .initial{cursor:pointer;height:1.8rem;width:1.8rem;flex-shrink:0;font-size:1rem}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scroll_to_bottom{position:absolute;display:flex;right:0;bottom:3rem;border-radius:4rem;z-index:1;aspect-ratio:1/1;margin:1.5rem;transform:scale(0);transition:transform .2s}#scroll_to_bottom button{border-radius:4rem}#scroll_to_bottom.new-message::after{position:absolute;content:"";top:0;right:0;z-index:2;padding:.5rem;border-radius:50%;background:#00e676}.no-transformations{transform:none !important}#chat_footer .flex{align-items:flex-end;padding:.5rem 1rem .5rem .5rem}#emoji_toggle{align-self:center;padding:.6rem;margin-right:.5rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#emoji_toggle path{fill:rgba(var(--text-color), 0.5)}#emoji_toggle.active path{fill:var(--accent-color)}#send_message_button{align-self:center;padding:.5rem .8rem;margin-left:.5rem;opacity:.5;font-weight:500}#send_message_button:not(:disabled){opacity:1;color:var(--accent-color)}#type_message{margin:0;--border-radius: 0.5rem;--background: rgba(var(--text-color), 0.1)}#messages_container{flex:1;padding:0 1rem}#emoji_picker{--background: rgba(var(--text-color), 0.06);--border-size: 0;--input-border-color: none;--input-padding: 0.4rem 1rem;--outline-color: var(--accent-color);--input-font-color: rgba(var(--text-color), 1);--input-placeholder-color: rgba(var(--text-color), 0.6);--indicator-color: var(--accent-color);--button-hover-background: rgba(var(--text-color), 0.2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;max-height:40vh}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center}.icon--big{height:8rem;width:8rem;margin-bottom:1.5rem;justify-self:center}#messages_container,#chats_list,#inbox_mail_container,#sent_mail_container,#mail{width:100%;flex-direction:column;height:100%;overflow-y:auto}#chats_list{padding-bottom:6rem}.mail-container{height:100%;flex-direction:column;overflow-y:auto}#inbox_mail_container,#sent_mail_container{gap:.2rem;padding-bottom:6rem}.has-bg-image .received,.has-bg-image .group-event-card,.has-bg-image .date-card{background:rgba(var(--foreground-color), 1)}.has-bg-image .received::after{border-color:transparent rgba(var(--foreground-color), 0.6) transparent transparent}.has-bg-image #emoji_picker{--background: rgba(var(--foreground-color), 0.6)}.has-bg-image #emoji_toggle path{fill:rgba(var(--text-color), 0.8)}.has-bg-image sm-textarea{--background: rgba(var(--foreground-color), 0.6)}#mail{align-items:flex-start;padding-bottom:1.5rem}#mail>.flex{padding:0 1.5rem;margin-top:2rem}#mail>.flex sm-button:first-of-type{margin-right:.5rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9;color:inherit}.sidebar-item .icon{margin-right:1em;width:1em}#settings #settings_sidebar header{padding:1rem 1.5rem}#settings .flex sm-button{margin:0;margin-left:1rem}#settings sm-switch{padding:1rem 1.5rem;display:flex;margin-bottom:1rem;width:min(60ch,100%)}#settings sm-switch .flex{margin-right:1rem}#settings sm-switch h4{margin-bottom:.5rem}#settings sm-button{width:100%}#settings #settings_title{text-transform:capitalize}#settings #settings_sidebar{height:100%}#settings #settings_panel{overflow-y:auto;height:100%}#settings section{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.5rem;width:min(60ch,100%)}#settings section .button{align-self:flex-start}#settings #sign_out::part(button){color:var(--error-color)}#settings color-grid{margin:.5rem 0 1.5rem 0;width:min(60ch,100%)}#settings #chat_preview{margin-top:1rem;padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.06)}#settings #bg_preview_container{padding:1rem 0;gap:.5rem;flex-wrap:wrap}#settings .bg-preview{position:relative;display:grid;place-items:center;height:8rem;width:8rem;cursor:pointer;border-radius:1rem;overflow:hidden;background:rgba(var(--text-color), 0.1)}#settings .bg-preview--selected::after{content:"";position:absolute;height:100%;width:100%;border-radius:inherit;box-shadow:0 0 0 .5rem var(--accent-color) inset}#settings .bg-preview input{display:none}#settings .bg-preview__image{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}.option{width:100%;justify-content:flex-start;padding:.8rem 0;color:var(--accent-color)}.option .icon{fill:var(--accent-color);margin-right:1rem}.option--danger{color:var(--danger-color)}.option--danger .icon{fill:var(--danger-color)}@media screen and (max-width: 640px){sm-popup{--border-radius: 1rem 1rem 0 0}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{font-size:2rem;font-weight:500}#landing sm-button{width:100%;display:flex;width:100% !important}#landing_illustration{grid-area:illustration}.frame form,#sign_in form{height:100%}.frame .h2,#sign_in .h2{margin-top:3rem}.frame sm-button[variant=primary],#sign_in sm-button[variant=primary]{margin-top:auto}#main_navbar.hide-away{bottom:0;left:0;right:0}#chats_list,#contact_container{gap:.2rem}#chat_view .message{width:auto;max-width:90%}#chat_header{grid-template-columns:auto minmax(0, 1fr)}#chat_header #chat_details_button{max-width:calc(100% - 2rem);margin-left:-1.7rem}#settings{overflow-x:hidden}#settings #settings_header{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:1rem 1.5rem;margin-bottom:.5rem;background:linear-gradient(rgba(var(--background-color), 0.8), rgba(var(--background-color), 0));-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}.hide-on-mobile{display:none !important}}@media screen and (min-width: 40rem){.hide-on-desktop{display:none !important}.page{padding-bottom:0}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.logo-section{padding:2rem 3rem 0 3rem;margin:.5rem 0}sm-popup{--width: 24rem;--min-width: 24rem;--border-radius: 0.5rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#sign_in{width:24rem}#main_page{grid-template-columns:-webkit-min-content 1fr;grid-template-columns:min-content 1fr;grid-template-rows:1fr;grid-template-areas:"nav .";overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;background-color:rgba(var(--foreground-color), 0.3);border-right:solid thin rgba(var(--text-color), 0.1)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}#add_contact_popup{--min-width: 24rem}#compose_mail_popup,#reply_mail_popup{--min-width: 36rem}#emoji_picker{max-height:18rem}#chat_view .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{display:grid;grid-template-columns:19rem 1fr}#chat_page>:first-child,#mail_page>:first-child{border-right:solid thin rgba(var(--text-color), 0.1)}#settings{display:grid;grid-template-columns:14rem 1fr}#settings>:first-child{border-right:solid thin rgba(var(--text-color), 0.1)}#settings sm-button{width:-webkit-max-content;width:-moz-max-content;width:max-content}#settings .active{background:rgba(var(--text-color), 0.1)}#settings .panel>*:first-of-type{margin-top:.5rem}.contact.active,.mail-card.active{background:rgba(var(--text-color), 0.06)}#contact_details_popup.is-group{--width: 52rem}#contact_details_popup.is-group #contact_details_section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}#contact_details_popup.is-group #contact_details_section>:first-child{padding-right:1.5rem;border-right:thin solid rgba(var(--text-color), 0.3)}}@media only screen and (max-width: 1280px){.hide-on-medium{display:none !important}}@media only screen and (min-width: 1080px){#chat_view #messages_container{padding:1rem 4rem;padding-top:0}}@media only screen and (min-width: 1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#emoji_picker{--num-columns: 16}.contact.active,.mail-card.active{background:rgba(var(--text-color), 0.06)}}@media(hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interactive:hover{background-color:rgba(var(--text-color), 0.06)}.emoji:hover{cursor:pointer;background:rgba(var(--text-color), 0.06)}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}}@media(hover: none){.contact-preview,.contact{-webkit-tap-highlight-color:transparent}.contact .menu{display:none}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--dark-red: #d40e1e;--red: #f50000;--kinda-pink: #e40273;--purple: #462191;--shady-blue: #324de6;--nice-blue: #256eff;--maybe-cyan: #00b0ff;--teal: #00bcd4;--mint-green: #16c79a;--yellowish-green: #66bb6a;--greenish-yellow: #8bc34a;--dark-teal: #11698e;--tangerine: #ff6f00;--orange: #ff9100;--redish-orange: #ff3d00;color:rgba(var(--text-color), 1);background:rgba(var(--foreground-color), 1);overflow-y:hidden}body #scroll_to_bottom{background:rgba(var(--foreground-color), 1);box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5);--dark-red: #ff5e7e;--red: #ff6098;--kinda-pink: #c44ae6;--purple: #9565f7;--shady-blue: #8295fb;--nice-blue: #86afff;--maybe-cyan: #66cfff;--teal: #6aeeff;--mint-green: #4dffd2;--yellowish-green: #9effa2;--greenish-yellow: #c7fc8b;--dark-teal: #51cbff;--tangerine: #ffac6d;--orange: #ffbe68;--redish-orange: #ff8560}body[data-theme=dark] .initial{box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message{color:rgba(var(--text-color), 1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.1)),rgba(var(--foreground-color), 1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.warning{line-height:normal;padding:1rem;background-color:khaki;border-radius:.5rem;font-weight:500;color:rgba(0,0,0,.7)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.1)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .6rem}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem;aspect-ratio:1/1;background-color:transparent}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}fieldset{border:none}input{accent-color:var(--accent-color)}input[type=range]:active{cursor:-webkit-grab;cursor:grab}sm-copy{font-size:.9rem}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-textarea{--max-height: 32ch}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{--padding: 0.8rem;font-size:.9rem}sm-option{font-size:.9rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{position:relative;font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul,ol{list-style:none}ol{counter-reset:item}ol li{position:relative;display:flex;align-items:flex-start;counter-increment:item}ol li:not(:last-of-type){padding-bottom:1.5rem}ol li:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:calc(100% - 2.2rem);background:var(--accent-color);margin-left:.7rem;margin-top:2rem}ol li::before{content:counter(item);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;font-weight:500;margin-top:.15rem;margin-right:1rem;line-height:1;width:1.5rem;height:1.5rem;border-radius:100%;flex-shrink:0;color:rgba(var(--text-color), 0.8);background:rgba(var(--text-color), 0.1)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);font-weight:500;margin-bottom:.2rem}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interactive{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.margin-left-auto{margin-left:auto}.margin-bottom-0-5{margin-bottom:.5rem}.margin-block-1{margin-block:1rem}.margin-block-1-5{margin-block:1.5rem}.margin-inline-1{margin-inline:1rem}.margin-inline-1-5{margin-inline:1.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2;border-radius:.5rem;padding:.8rem 1rem}.fab .icon{margin-right:.5rem}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.page{height:100%}.page__header{display:flex;justify-content:space-between;margin-bottom:1.5rem;min-height:8rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem}.flo-icon{margin-right:.3rem;height:1.5rem;width:1.5rem}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{width:100%;height:100%}.inner-page{background-color:rgba(var(--foreground-color), 0.5)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{color:rgba(var(--text-color), 0.8)}#flo_id_warning{padding-bottom:1.5rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}#flo_id_warning .icon{height:4rem;width:4rem;padding:1rem;background-color:#ffc107;border-radius:3rem;fill:rgba(0,0,0,.8);margin-bottom:1.5rem}.tip{font-size:.9rem;color:rgba(var(--text-color), 0.8)}sm-button[variant=primary]{--foreground-color: 255, 255, 255}.danger{color:var(--error-color)}.logo-section{display:flex;position:relative;align-items:center;height:-webkit-max-content;height:-moz-max-content;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%;height:100%;padding:0 1.5rem;align-items:center}#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:var(--accent-color);margin-bottom:.5rem;font-weight:500}#landing .left sm-button{margin:1.5rem 0 2rem 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}#landing .left h3{margin-bottom:1rem;font-weight:500}#landing .left p{margin-top:1rem;font-size:1.1rem;color:rgba(var(--text-color), 0.8)}#landing .left .flex sm-button:first-of-type{margin-right:1rem}.logo-section{padding:1.5rem}#landing_illustration{position:relative;width:100%}@-webkit-keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading{height:100%;display:grid;place-content:center;justify-items:center}.page__loader{z-index:1;transform-origin:bottom;height:6rem;width:6rem;-webkit-animation:bounce .5s infinite alternate ease-in;animation:bounce .5s infinite alternate ease-in}.shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color), 0.1);border-radius:50%;-webkit-animation:scale .5s infinite alternate ease-in;animation:scale .5s infinite alternate ease-in;margin-left:1rem}.page__tag-line{margin-top:2rem}@-webkit-keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(0.8)}}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(0.8)}}@-webkit-keyframes scale{0%{transform:scale(0.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes scale{0%{transform:scale(0.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}#background_overlay,#background_image{position:fixed;height:100%;width:100%}#background_overlay{background-color:red;z-index:-1;background-color:rgba(var(--foreground-color), var(--opacity, 0.6));transition:background-color .3s}#background_image{z-index:-2;-o-object-fit:cover;object-fit:cover;filter:blur(var(--blur, 1rem));transform:scale(calc(1 + var(--scale, 1.1) / 10))}#background_image[src=""],#background_image:not([src]){display:none}#main_page{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:1fr auto}.initial{position:relative;justify-content:center;font-size:1.2rem;font-weight:500;width:2.8rem;height:2.8rem;aspect-ratio:1/1;color:rgba(var(--foreground-color), 1);box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--contact-color, --accent-color)}.group-icon{height:1.6rem;width:1.6rem;fill:rgba(var(--foreground-color), 1)}.contact{position:relative;display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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 . ."}.contact.admin{grid-template-columns:auto 1fr auto}.contact.selected{background-color:rgba(var(--text-color), 0.06)}.contact .initial{grid-area:dp}.contact .name,.contact .last-message{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:rgba(var(--text-color), 0.8)}.contact .name{width:100%;font-size:1em;font-weight:500}.contact .span-2{display:flex;justify-content:space-between;grid-column:2/4;width:100%;gap:.5rem}.contact .last-message{font-weight:400;font-size:.9em}.contact .menu{justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color), 1)}.contact .time{color:rgba(var(--text-color), 0.7);grid-area:time;font-size:.8rem}.selectable-contact,.group-member,.blocked-id,.contact-list__item{gap:1rem;padding:.5rem 0}.selectable-contact{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.selectable-contact input{margin-left:auto}.group-member{display:flex;align-items:center}.group-member .admin-tag{margin-left:auto;padding:.1rem .6rem;font-size:.8rem;border-radius:3rem;background-color:rgba(var(--text-color), 0.1)}.contact-list__item{display:flex;text-align:left;justify-content:flex-start;width:100%;padding:.5rem}.contact-list__item:focus{background-color:rgba(var(--text-color), 0.03)}#selected_contacts_container{display:flex;overflow:auto hidden}#selected_contacts_container:not(:empty){padding:.5rem 0;margin:.5rem 0;border-bottom:solid thin rgba(var(--text-color), 0.1)}#selected_contacts_container .contact-preview{display:flex;flex-shrink:0;align-items:center;cursor:pointer;margin-right:.3rem;background:rgba(var(--text-color), 0.1);padding-left:.2rem;border-radius:2rem;transform-origin:left;overflow:hidden}#selected_contacts_container .contact-preview .initial{width:1.6rem;height:1.6rem;font-size:.9rem}#selected_contacts_container .contact-preview .name{font-size:.9rem;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#contact_details_popup .popup-section{margin:1.5rem 0}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .group-icon{padding:.2rem;height:3rem;width:3rem}#contact_initial{height:4.6rem;width:4.6rem;font-size:2.4rem;border-radius:4rem;margin-top:3rem;margin-bottom:.5rem;background-color:var(--contact-color, --accent-color)}#contact_name{margin:.5rem 0}#contact_name::part(text){font-size:1.2rem;font-weight:500}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .6rem;font-weight:500;font-size:.8rem;background-color:rgba(var(--text-color), 0.04);border-radius:.3rem;color:rgba(var(--text-color), 0.8);margin:1rem 0;justify-self:center;align-self:center;text-align:center}#warn_no_encryption+#warn_no_encryption,#warn_no_encryption+.date-card,#warn_no_encryption+.group-event-card,.date-card+#warn_no_encryption,.date-card+.date-card,.date-card+.group-event-card,.group-event-card+#warn_no_encryption,.group-event-card+.date-card,.group-event-card+.group-event-card{margin-top:0}.group-event-card{font-size:.8rem;font-weight:400}#warn_no_encryption{background:#fffd8d;color:#111}.contact .initial::after,.mail-card .initial::after{content:"";position:absolute;bottom:-0.1rem;right:-0.1rem;height:1rem;width:1rem;background:var(--accent-color);border-radius:100%;border:solid rgba(var(--foreground-color), 1) 1px;transform:scale(0);transition:transform .3s}.contact.unread .initial::after,.mail-card.unread .initial::after{transform:scale(1)}.mail-card.unread .time,.mail-card.unread .date,.contact.unread .time,.contact.unread .date{color:var(--accent-color)}.mail-card.unread h4,.contact.unread h4{color:rgba(var(--text-color), 1)}.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p,.contact.unread h4,.contact.unread h5,.contact.unread p{font-weight:700}.mail-card{position:relative;display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;grid-template-columns:auto 1fr auto;grid-template-areas:"dp sender date" "dp subject subject" "dp desc desc"}.mail-card .initial{grid-area:dp;align-self:flex-start;height:2rem;width:2rem;font-size:1rem}.mail-card .sender{width:100%;font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mail-card .subject{grid-area:subject;font-size:1em;margin-top:.3rem;font-weight:500}.mail-card .description{grid-area:desc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color), 0.8)}.date{grid-area:date;margin-left:auto;white-space:nowrap;font-size:.8rem;color:rgba(var(--text-color), 0.8)}@-webkit-keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail{position:relative;padding:1.5rem}.mail:not(:first-of-type){margin-top:1.5rem;background-color:rgba(var(--text-color), 0.03);padding-bottom:2rem;margin-inline:1rem;border-radius:.5rem;overflow:hidden}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color), 0.2)}.mail .mail-header{align-self:start;margin-bottom:1.5rem;gap:1rem}.mail .initial{background-color:var(--contact-color, --accent-color);margin:0;height:2rem;width:2rem}.mail .sender-name{font-weight:500;margin-bottom:.5rem}.mail .flo-id{font-weight:400;max-width:90%}.mail .mail-subject,.mail .mail-content{overflow-wrap:break-word;word-wrap:break-word}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:-webkit-max-content;height:-moz-max-content;height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.nav-item:last-of-type{margin-top:auto}.badge{display:flex;align-items:center;justify-content:center;content:attr(data-notifications);position:absolute;top:0;right:0;min-width:2.7ch;font-size:.8rem;padding:.2rem;background:var(--danger-color);color:rgba(var(--background-color), 1);line-height:1;font-weight:700;border-radius:1rem;margin:.3rem}#auto_complete_contact{position:relative}#mail_contact_list{max-height:40vh;overflow-y:auto;position:absolute;top:100%;background:rgba(var(--foreground-color), 1);z-index:1;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;overflow-x:hidden}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts .scrolling-wrapper .empty-state{padding:1.5rem;text-align:center}#contacts_container .contact{padding:.5rem 0}#group_creation_process .group-icon{background-color:var(--accent-color);justify-self:center;height:8rem;width:8rem;margin-bottom:1rem;padding:2rem;border-radius:50%;font-size:4rem}#contacts,#mails{position:relative;grid-template-rows:-webkit-max-content 1fr;grid-template-rows:max-content 1fr}#mail_sections{overflow-y:auto}#mail_type_selector{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}#mail_type_selector strip-option{--padding: 0.5rem 1.2rem}#mail_type_selector strip-option .badge{margin:0rem}#contacts,#mails,#settings{height:100%;overflow-y:hidden}#contacts .header,#mails .header,#settings .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color), 1)}#contacts .header sm-input,#mails .header sm-input,#settings .header sm-input{width:100%}#contacts .header h4,#mails .header h4,#settings .header h4{text-transform:capitalize;font-weight:500}#contacts .header .flex h4,#mails .header .flex h4,#settings .header .flex h4{flex:1}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings .header .flex sm-menu{margin-right:-0.7rem}#contacts .header sm-button,#mails .header sm-button,#settings .header sm-button{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_search_field .icon-only{margin-left:-0.5rem;margin-right:.5rem}#search_chats{--min-height: 3rem}#chat_page,#mail_page,#settings{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}#group_members_list{margin-top:.5rem}#group_members_list .contact{padding:.5rem 0}#chat_view,#mail{background-color:rgba(var(--foreground-color), 0.3)}#chat_view{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}.message{position:relative;display:flex;flex-wrap:wrap;width:auto;font-size:.92rem;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}.message .message-body{display:flex;align-items:center;flex-wrap:wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}.message .message-body a{color:inherit}.message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0}.message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem;margin-left:auto}.sent{margin-left:auto;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}.sent>*{color:rgba(var(--background-color), 1)}.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 transparent}.received{margin-right:auto;background:rgba(var(--text-color), 0.1);border-radius:0 .8rem .8rem .8rem}.received::after{content:"";position:absolute;left:-0.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color), 0.1) transparent transparent}.sent+.sent,.received+.received{margin-top:0}.sent+.sent::after,.received+.received::after{display:none}.sent+.sent,.received+.received{border-radius:.8rem}.distinct-sender{display:grid;border-radius:0 .8rem .8rem .8rem !important;margin-top:.8rem !important}.distinct-sender::after{display:flex !important;content:"";position:absolute;left:-0.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color), 0.1) transparent transparent}.unconfirmed{opacity:.7;transform-origin:left;-webkit-animation:pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}@-webkit-keyframes pop{0%{transform:rotate(5deg) translate(-0.5rem, 1rem)}100%{transform:rotate(0) translate(0, 0)}}@keyframes pop{0%{transform:rotate(5deg) translate(-0.5rem, 1rem)}100%{transform:rotate(0) translate(0, 0)}}.back-button{padding:.5rem;margin-left:-0.5rem}#chat_header{padding:.5rem 1rem;align-content:center;grid-template-columns:minmax(0, 1fr)}#chat_header .flex{height:100%}#chat_header #chat_details_button{background-color:rgba(var(--text-color), 0.06);border-radius:2rem;justify-self:center;padding:.3rem}#chat_header .initial{cursor:pointer;height:1.8rem;width:1.8rem;flex-shrink:0;font-size:1rem}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#chat_header .group-icon{padding:.1rem}#scroll_to_bottom{position:absolute;display:flex;right:0;bottom:3rem;border-radius:4rem;z-index:1;aspect-ratio:1/1;margin:1.5rem;transform:scale(0);transition:transform .2s}#scroll_to_bottom button{border-radius:4rem}#scroll_to_bottom.new-message::after{position:absolute;content:"";top:0;right:0;z-index:2;padding:.5rem;border-radius:50%;background:#00e676}.no-transformations{transform:none !important}#chat_footer .flex{align-items:flex-end;padding:.5rem 1rem .5rem .5rem}#emoji_toggle{align-self:center;padding:.6rem;margin-right:.5rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#emoji_toggle path{fill:rgba(var(--text-color), 0.5)}#emoji_toggle.active path{fill:var(--accent-color)}#send_message_button{align-self:center;padding:.5rem .8rem;margin-left:.5rem;opacity:.5;font-weight:500}#send_message_button:not(:disabled){opacity:1;color:var(--accent-color)}#type_message{margin:0;--border-radius: 0.5rem;--background: rgba(var(--text-color), 0.1)}#messages_container{flex:1;padding:0 1rem}#emoji_picker{--background: rgba(var(--text-color), 0.06);--border-size: 0;--input-border-color: none;--input-padding: 0.4rem 1rem;--outline-color: var(--accent-color);--input-font-color: rgba(var(--text-color), 1);--input-placeholder-color: rgba(var(--text-color), 0.6);--indicator-color: var(--accent-color);--button-hover-background: rgba(var(--text-color), 0.2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;max-height:40vh}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center}.icon--big{height:8rem;width:8rem;margin-bottom:1.5rem;justify-self:center}#messages_container,#chats_list,#inbox_mail_container,#sent_mail_container,#mail{width:100%;flex-direction:column;height:100%;overflow-y:auto}#chats_list{padding-bottom:6rem}.mail-container{height:100%;flex-direction:column;overflow-y:auto}#inbox_mail_container,#sent_mail_container{gap:.2rem;padding-bottom:6rem}.has-bg-image .received,.has-bg-image .group-event-card,.has-bg-image .date-card{background:rgba(var(--foreground-color), 1)}.has-bg-image .received::after{border-color:transparent rgba(var(--foreground-color), 0.6) transparent transparent}.has-bg-image #emoji_picker{--background: rgba(var(--foreground-color), 0.6)}.has-bg-image #emoji_toggle path{fill:rgba(var(--text-color), 0.8)}.has-bg-image sm-textarea{--background: rgba(var(--foreground-color), 0.6)}#mail{align-items:flex-start;padding-bottom:1.5rem}#mail>.flex{padding:0 1.5rem;margin-top:2rem}#mail>.flex sm-button:first-of-type{margin-right:.5rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9;color:inherit}.sidebar-item .icon{margin-right:1em;width:1em}#settings #settings_sidebar header{padding:1rem 1.5rem}#settings .flex sm-button{margin:0;margin-left:1rem}#settings sm-switch{padding:1rem 1.5rem;display:flex;margin-bottom:1rem;width:min(60ch,100%)}#settings sm-switch .flex{margin-right:1rem}#settings sm-switch h4{margin-bottom:.5rem}#settings sm-button{width:100%}#settings #settings_title{text-transform:capitalize}#settings #settings_sidebar{height:100%}#settings #settings_panel{overflow-y:auto;height:100%}#settings section{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.5rem;width:min(60ch,100%)}#settings section .button{align-self:flex-start}#settings #sign_out::part(button){color:var(--error-color)}#settings color-grid{margin:.5rem 0 1.5rem 0;width:min(60ch,100%)}#settings #chat_preview{margin-top:1rem;padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.06)}#settings #bg_preview_container{padding:1rem 0;gap:.5rem;flex-wrap:wrap}#settings .bg-preview{position:relative;display:grid;place-items:center;height:8rem;width:8rem;cursor:pointer;border-radius:1rem;overflow:hidden;background:rgba(var(--text-color), 0.1)}#settings .bg-preview--selected::after{content:"";position:absolute;height:100%;width:100%;border-radius:inherit;box-shadow:0 0 0 .5rem var(--accent-color) inset}#settings .bg-preview input{display:none}#settings .bg-preview__image{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}.option{width:100%;justify-content:flex-start;padding:.8rem 0;color:var(--accent-color)}.option .icon{fill:var(--accent-color);margin-right:1rem}.option--danger{color:var(--danger-color)}.option--danger .icon{fill:var(--danger-color)}@media screen and (max-width: 640px){sm-popup{--border-radius: 1rem 1rem 0 0}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{font-size:2rem;font-weight:500}#landing sm-button{width:100%;display:flex;width:100% !important}#landing_illustration{grid-area:illustration}.frame form,#sign_in form{height:100%}.frame .h2,#sign_in .h2{margin-top:3rem}.frame sm-button[variant=primary],#sign_in sm-button[variant=primary]{margin-top:auto}#main_navbar.hide-away{bottom:0;left:0;right:0}#chats_list,#contact_container{gap:.2rem}#chat_view .message{width:auto;max-width:90%}#chat_header{grid-template-columns:auto minmax(0, 1fr)}#chat_header #chat_details_button{max-width:calc(100% - 2rem);margin-left:-1.7rem}#settings{overflow-x:hidden}#settings #settings_header{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:1rem 1.5rem;margin-bottom:.5rem;background:linear-gradient(rgba(var(--background-color), 0.8), rgba(var(--background-color), 0));-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}.hide-on-mobile{display:none !important}}@media screen and (min-width: 40rem){.hide-on-desktop{display:none !important}.page{padding-bottom:0}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.logo-section{padding:2rem 3rem 0 3rem;margin:.5rem 0}sm-popup{--width: 24rem;--min-width: 24rem;--border-radius: 0.5rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#sign_in{width:24rem}#main_page{grid-template-columns:-webkit-min-content 1fr;grid-template-columns:min-content 1fr;grid-template-rows:1fr;grid-template-areas:"nav .";overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;background-color:rgba(var(--foreground-color), 0.3);border-right:solid thin rgba(var(--text-color), 0.1)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}#add_contact_popup{--min-width: 24rem}#compose_mail_popup,#reply_mail_popup{--min-width: 36rem}#emoji_picker{max-height:18rem}#chat_view .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{display:grid;grid-template-columns:19rem 1fr}#chat_page>:first-child,#mail_page>:first-child{border-right:solid thin rgba(var(--text-color), 0.1)}#settings{display:grid;grid-template-columns:14rem 1fr}#settings>:first-child{border-right:solid thin rgba(var(--text-color), 0.1)}#settings sm-button{width:-webkit-max-content;width:-moz-max-content;width:max-content}#settings .active{background:rgba(var(--text-color), 0.1)}#settings .panel>*:first-of-type{margin-top:.5rem}.contact.active,.mail-card.active{background:rgba(var(--text-color), 0.06)}#contact_details_popup.is-group{--width: 52rem}#contact_details_popup.is-group #contact_details_section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}#contact_details_popup.is-group #contact_details_section>:first-child{padding-right:1.5rem;border-right:thin solid rgba(var(--text-color), 0.3)}}@media only screen and (max-width: 1280px){.hide-on-medium{display:none !important}}@media only screen and (min-width: 1080px){#chat_view #messages_container{padding:1rem 4rem;padding-top:0}#chat_page,#mail_page{grid-template-columns:21rem 1fr}}@media only screen and (min-width: 1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#emoji_picker{--num-columns: 16}.contact.active,.mail-card.active{background:rgba(var(--text-color), 0.06)}}@media(hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interactive:hover{background-color:rgba(var(--text-color), 0.06)}.emoji:hover{cursor:pointer;background:rgba(var(--text-color), 0.06)}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}}@media(hover: none){.contact-preview,.contact{-webkit-tap-highlight-color:transparent}.contact .menu{display:none}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 02d2851..a016a88 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -270,6 +270,7 @@ strip-select {
   padding: 0.3rem;
 }
 strip-option {
+  position: relative;
   font-size: 0.8rem;
   --border-radius: 0.2rem;
   user-select: none;
@@ -325,7 +326,7 @@ ol {
   text-overflow: ellipsis;
 }
 
-.breakable {
+.wrap-around {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -1290,13 +1291,14 @@ sm-button[variant="primary"] {
   position: absolute;
   top: 0;
   right: 0;
+  min-width: 2.7ch;
   font-size: 0.8rem;
-  padding: 0.3rem;
+  padding: 0.2rem;
   background: var(--danger-color);
   color: rgba(var(--background-color), 1);
-  aspect-ratio: 1/1;
+  line-height: 1;
   font-weight: 700;
-  border-radius: 0.3rem;
+  border-radius: 1rem;
   margin: 0.3rem;
 }
 #auto_complete_contact {
@@ -1359,6 +1361,15 @@ sm-button[variant="primary"] {
 #mail_sections {
   overflow-y: auto;
 }
+#mail_type_selector {
+  width: fit-content;
+  strip-option {
+    --padding: 0.5rem 1.2rem;
+    .badge {
+      margin: 0rem;
+    }
+  }
+}
 #contacts,
 #mails,
 #settings {
@@ -1597,6 +1608,9 @@ sm-button[variant="primary"] {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .group-icon {
+    padding: 0.1rem;
+  }
 }
 #scroll_to_bottom {
   position: absolute;
@@ -2081,6 +2095,10 @@ sm-button[variant="primary"] {
       padding-top: 0;
     }
   }
+  #chat_page,
+  #mail_page {
+    grid-template-columns: 21rem 1fr;
+  }
 }
 @media only screen and (min-width: 1280px) {
   #landing {
diff --git a/index.html b/index.html
index 5a91491..f08068b 100644
--- a/index.html
+++ b/index.html
@@ -310,7 +310,7 @@
         <section class="inner-page hide" id="mail_page">
             <div id="mails" class="grid">
                 <header class="grid header">
-                    <div class="flex align-center">
+                    <div class="flex align-center space-between">
                         <h4>Mail</h4>
                         <strip-select id="mail_type_selector">
                             <strip-option value="inbox" selected>Inbox </strip-option>
@@ -696,11 +696,11 @@
                     <p id="last_interaction_time"></p>
                 </div>
                 <div class="popup-section">
-                    <h5>FLO ID</h5>
+                    <h5 id="flo_id_type">FLO ID</h5>
                     <sm-copy id="contact_flo_id"></sm-copy>
                 </div>
                 <div id="group_description_card" class="hide">
-                    <h4 class="h4">Group description</h4>
+                    <h5>Group description</h5>
                     <text-field id="group_description"></text-field>
                 </div>
                 <fieldset id="contact_options"></fieldset>
@@ -1081,6 +1081,7 @@
                         getRef('group_members_card').classList.remove('hide')
                         getRef('group_description_card').classList.remove('hide')
                         getRef('edit_group_button').dataset.groupId = floID;
+                        getRef('flo_id_type').textContent = 'Group FLO ID'
                         if (isAdmin) {
                             getRef('contact_name').disabled = false
                             getRef('group_description').disabled = false
@@ -1091,6 +1092,7 @@
                             getRef('edit_group_button').classList.add('hide')
                         }
                     } else {
+                        getRef('flo_id_type').textContent = 'FLO ID'
                         getRef('contact_name').disabled = false
                         getRef('contact_initial').textContent = getContactName(floID).charAt(0)
                         getRef("last_interaction_time").textContent = ``;
@@ -1403,7 +1405,7 @@
             };
         }
 
-        const pagesData = {
+        const appState = {
             params: {},
             openedPages: new Set(),
         }
@@ -1462,19 +1464,40 @@
                     targetPage = 'sign_up'
                     break;
                 case 'chat_page':
-                    if (subPageId1 && activeChat.floID) {
+                    if (subPageId1 && params.floId) {
+                        getRef('chats_list').querySelectorAll('.active').forEach(child => child.classList.remove('active'))
+                        const targetChatCard = getChatCard(params.floId)
+                        if (targetChatCard) {
+                            targetChatCard.classList.remove('unread')
+                            document.title = `FLO Messenger`
+                            targetChatCard.classList.add('active')
+                        }
+                        await viewConversation(params.floId)
+                        getRef('messages_container').animate([
+                            { opacity: 0 },
+                            { opacity: 1 },
+                        ], {
+                            duration: 150,
+                            fill: 'forwards',
+                            easing: 'ease-out',
+                        })
+
                         getRef('chat_view').classList.remove('hide')
                         getRef('chat_view').classList.remove('hide-on-mobile')
                         getRef('contacts').classList.add('hide-on-mobile')
                         getRef('main_navbar').classList.add('hide-on-mobile')
                     } else {
-                        history.replaceState(null, null, '#/chat_page');
-                        getRef('chat_view').classList.add('hide-on-mobile')
-                        getRef('contacts').classList.remove('hide-on-mobile')
-                        activeChat = {}
-                        getRef('main_navbar').classList.remove('hide-on-mobile')
+                        if (activeChat.floID && !isMobileView) {
+                            history.replaceState(null, null, `#/chat_page/messages?floId=${activeChat.floID}`);
+                        } else {
+                            history.replaceState(null, null, '#/chat_page');
+                            getRef('chat_view').classList.add('hide-on-mobile')
+                            getRef('contacts').classList.remove('hide-on-mobile')
+                            activeChat = {}
+                            getRef('main_navbar').classList.remove('hide-on-mobile')
+                        }
                     }
-                    removeNotificationBadge('chat_page_button')
+                    removeNotificationBadge('#chat_page_button')
                     break;
                 case 'mail_page':
                     if (subPageId1) {
@@ -1502,7 +1525,7 @@
                             getRef('main_navbar').classList.remove('hide-on-mobile')
                         }
                     }
-                    removeNotificationBadge('mail_page_button')
+                    removeNotificationBadge('#mail_page_button')
                     break;
                 case 'settings':
                     if (subPageId1) {
@@ -1515,7 +1538,7 @@
                     break;
             }
 
-            if (pagesData.lastPage !== pageId) {
+            if (appState.lastPage !== pageId) {
                 const animOptions = {
                     duration: 100,
                     fill: 'forwards',
@@ -1620,11 +1643,11 @@
                         easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
                     }).onfinish = () => {
                     }
-                pagesData.lastPage = pageId
+                appState.lastPage = pageId
             }
             if (params)
-                pagesData.params = params
-            pagesData.openedPages.add(pageId)
+                appState.params = params
+            appState.openedPages.add(pageId)
 
         }
         const indicatorObserver = new IntersectionObserver(entries => {
@@ -2029,7 +2052,7 @@
                 `
             },
             contactCard(floID, options = {}) {
-                let { type, prepend = false, markUnread = false } = options
+                let { type, prepend = false, markUnread = false, ref } = options
                 let name = getContactName(floID)
                 let initial
                 if (type === 'group') {
@@ -2042,7 +2065,7 @@
                     //render chat card for newly added contact
                     getLastMessage(floID).then(lastMessage => {
                         const { lastText, time } = lastMessage
-                        const chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floID}"], .group[data-flo-id="${floID}"]`)
+                        const chatCard = getChatCard(floID)
                         if (chatCard && !chatCard.querySelector('.last-message')) {
                             const timeAndOptions = html`
                                 <time class="time">${time ? getFormattedTime(time, 'relative') : ''}</time>
@@ -2053,17 +2076,16 @@
                                     </button>
                                 </div>
                                 `;
-                            getRef('chats_list').querySelector(`.chat[data-flo-id="${floID}"], .group[data-flo-id="${floID}"]`).append(html.node`${timeAndOptions}`)
+                            chatCard.append(html.node`${timeAndOptions}`)
                         }
                     }).catch(error => console.error(error))
                     if (prepend) {
-                        activeChat['floID'] = floID
-                        if (activeChat['chatCard'])
-                            activeChat['chatCard'].classList.remove('active')
+                        activeChat.floID = floID
+                        getRef('chats_list').querySelectorAll('.active').forEach(child => child.classList.remove('active'))
                     }
                 }
                 const className = `contact ${type !== 'contact' ? type : ''} ${markUnread ? 'unread' : ''} interactive`
-                return html`
+                return html.for(ref, floID)`
                     <div class="${className}" .dataset=${{ floId: floID }} style=${`--contact-color: var(${contactColor(floID)})`}>
                         <div class="initial flex align-center">
                             ${initial}
@@ -2093,7 +2115,7 @@
                     let senderName = null
                     if (sender) {
                         if (sender !== myFloID && lastSender !== sender)
-                            senderName = html.node`<div class="sender-name" style=${`color: var(${contactColor(sender)})`}>${getContactName(sender)}</div>`
+                            senderName = html.node`<a href="${`#/chat_page/messages?floId=${sender}`}" class="sender-name" style=${`color: var(${contactColor(sender)})`}>${getContactName(sender)}</a>`
                         lastSender = sender
                     }
                     let messageContent = document.createDocumentFragment()
@@ -2172,7 +2194,7 @@
                                 <div class="initial flex align-center">
                                     ${initial}
                                 </div>
-                                <h4 class="name">${name}</h4>
+                                <h4 class="name wrap-around">${name}</h4>
                                 ${isAdmin ? html`<p class="admin-tag">Group admin</p>` : ''}
                             </div>
                         
@@ -2263,9 +2285,10 @@
                 fill: 'forwards',
                 easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
             }
-            if (!getRef(elem).querySelector('.badge')) {
+            const target = typeof elem === 'string' ? document.querySelector(elem) : elem
+            if (!target.querySelector('.badge')) {
                 const badge = html.node`<span class="badge">${text}</span>`
-                getRef(elem).append(badge)
+                target.append(badge)
                 badge.animate([
                     {
                         transform: 'scale(0) translateY(0.5rem)'
@@ -2275,7 +2298,7 @@
                     },
                 ], animOptions)
             } else {
-                const badge = getRef(elem).querySelector('.badge');
+                const badge = target.querySelector('.badge');
                 badge.textContent = parseInt(badge.textContent) + parseFloat(text);
                 badge.animate([
                     { transform: 'scale(1)' },
@@ -2291,8 +2314,9 @@
                 fill: 'forwards',
                 easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
             }
-            if (getRef(elem).querySelector('.badge')) {
-                const badge = getRef(elem).querySelector('.badge')
+            const target = typeof elem === 'string' ? document.querySelector(elem) : elem
+            if (target.querySelector('.badge')) {
+                const badge = target.querySelector('.badge')
                 badge.animate([
                     {
                         transform: 'scale(1) translateY(0)'
@@ -2308,41 +2332,49 @@
 
 
         function renderDirectUI(data) {
-            if (Object.keys(data.messages).length) {
-                if (pagesData.lastPage !== 'chat_page') {
-                    document.title = `New message(s)`
-                    addNotificationBadge('chat_page_button', Object.keys(data.messages).length)
-                }
+            if (Object.keys(data.messages).length && appState.lastPage !== 'chat_page') {
+                document.title = `New message(s)`
+                addNotificationBadge('#chat_page_button', Object.keys(data.messages).length)
             }
-            if (Object.keys(data.mails).length) {
-                if (pagesData.lastPage !== 'mail_page') {
-                    document.title = `New mail(s)`
-                    addNotificationBadge('mail_page_button', Object.keys(data.mails).length)
-                }
+            if (Object.keys(data.mails).length && appState.lastPage !== 'mail_page') {
+                document.title = `New mail(s)`
+                addNotificationBadge('#mail_page_button', Object.keys(data.mails).length)
             }
             updateMessageUI(data.messages)
             renderMailList(data.mails, true)
         }
 
         function renderGroupUI(data) {
+            if (Object.keys(data.messages).length && appState.lastPage !== 'chat_page') {
+                document.title = `New message(s)`
+                addNotificationBadge('#chat_page_button', Object.keys(data.messages).length)
+            }
             updateMessageUI(data.messages)
         }
 
-        floGlobals.unconfirmedMessages = 0
-        function updateMessageUI(messagesData) {
+        function updateMessageUI(messagesData, sentByMe = false) {
             for (let messageId in messagesData) {
                 console.log(messagesData[messageId])
                 const { category, floID, time, message, sender, groupID, admin, name } = messagesData[messageId]
+                // code to run if a chat is opened
                 if (activeChat && activeChat.floID === (floID || groupID)) {
-                    if (floGlobals.unconfirmedMessages === 0)
+                    if (!sentByMe && sender && sender === myFloID) {
+                        // if message is sent by me, then dont add it to the chat
+                    } else {
                         getRef('messages_container').append(render.messageBubble(messagesData[messageId]))
+                    }
                     if (chatScrollInfo['isScrolledUp']) {
 
                     } else {
                         scrollToBottom()
                     }
+                    // remove encryption badge if it exists
+                    if (!groupID && floGlobals.checkEncryption[activeChat.floID] && floID !== myFloID) {
+                        getRef('warn_no_encryption').remove()
+                        delete floGlobals.checkEncryption[activeChat.floID]
+                    }
                 }
-                let chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floID}"], .group[data-flo-id="${groupID}"]`)
+                let chatCard = getChatCard(floID || groupID)
                 if (chatCard) {
                     if (admin) {
                         if (name)
@@ -2360,7 +2392,6 @@
                             { transform: 'translateY(-2rem)' },
                             { transform: 'none' },
                         ], animOptions)
-                        activeChat['chatCard'] = cloneContact
                         getRef('chats_list').prepend(cloneContact)
                         cloneContact.animate([
                             {
@@ -2376,13 +2407,14 @@
                 } else {
                     if (floID) {
                         messenger.addChat(floID)
-                        getRef('chats_list').prepend(html.node`${render.contactCard(floID, { type: 'chat', prepend: true, markUnread: true })}`)
+                        getRef('chats_list').prepend(html.node`${render.contactCard(floID, { type: 'chat', prepend: true, markUnread: true, ref: getRef('chats_list') })}`)
                     } else if (groupID) {
-                        getRef('chats_list').prepend(html.node`${render.contactCard(groupID, { type: 'group', prepend: true, markUnread: true })}`)
+                        getRef('chats_list').prepend(html.node`${render.contactCard(groupID, { type: 'group', prepend: true, markUnread: true, ref: getRef('chats_list') })}`)
                     }
                     chatCard = getRef('chats_list').children[0]
-                    chatCard.classList.add('active')
-                    activeChat['chatCard'] = getRef('chats_list').children[0]
+                    if (sentByMe) {
+                        chatCard.classList.add('active')
+                    }
                 }
                 let finalMessage
                 if (messenger.groups && messenger.groups[groupID]) {
@@ -2406,12 +2438,12 @@
                             messenger.removeMark((floID || groupID), 'unread')
                             setTimeout(() => {
                                 document.title = 'FLO Messenger'
-                                activeChat.chatCard.classList.remove('unread')
+                                getChatCard(floID || groupID).classList.remove('unread')
                             }, 1000);
                         }
                     }
                 } else {
-                    getRef('chats_list').querySelector(`.chat[data-flo-id="${floID}"], .group[data-flo-id="${groupID}"]`).classList.add('unread')
+                    getChatCard(floID || groupID).classList.add('unread')
                 }
             }
         }
@@ -2580,27 +2612,18 @@
                 floGlobals.activeFloID = clickedContact.floID
                 openPopup('contact_details_popup')
             } else {
-                e.delegateTarget.classList.remove('unread')
-                if (activeChat['chatCard'] === e.delegateTarget && !isMobileView) return // check if chat is already active and if not, open it
-                document.title = `FLO Messenger`
-                viewConversation(e.delegateTarget.dataset.floId)
-                getRef('chats_list').querySelectorAll('.active').forEach(child => child.classList.remove('active'))
-                e.delegateTarget.classList.add('active')
-                activeChat['chatCard'] = e.delegateTarget
+                location.hash = `#/chat_page/messages?floId=${clickedContact.floID}`
             }
         })
-        getRef('contacts_container').addEventListener('click', e => {
-            //detect click on chat cards
-            if (e.target.closest(".contact")) {
-                let contact = e.target.closest(".contact")
-                const floID = contact.dataset.floId
-                let chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floID}"], .group[data-flo-id="${floID}"]`);
-                if (!chatCard) {
-                    chatCard = getRef('chats_list').prepend(html.node`${render.contactCard(floID, { type: 'chat' })}`)
-                }
-                getRef('chats_list').firstElementChild.click()
-                closePopup()
+        delegate(getRef('contacts_container'), 'click', '.contact', e => {
+            const floID = e.delegateTarget.dataset.floId
+            let chatCard = getChatCard(floID)
+            if (!chatCard) {
+                getRef('chats_list').prepend(html.node`${render.contactCard(floID, { type: 'chat', ref: getRef('chats_list') })}`);
+                chatCard = getRef('chats_list').firstElementChild
             }
+            chatCard.click()
+            closePopup()
         })
 
         function transformScroll(event) {
@@ -2688,7 +2711,7 @@
             buttonLoader('create_group_button', true)
             messenger.createGroup(groupName, groupDescription)
                 .then(groupInfo => {
-                    getRef('chats_list').prepend(html.node`${render.contactCard(groupInfo.groupID, { type: 'group' })}`)
+                    getRef('chats_list').prepend(html.node`${render.contactCard(groupInfo.groupID, { type: 'group', ref: getRef('chats_list') })}`);
                     getRef('chats_list').children[0].click()
                     closePopup()
                     notify('Group created', 'success')
@@ -2780,14 +2803,16 @@
         })
 
         getRef("mail_type_selector").addEventListener('change', function (e) {
+            removeNotificationBadge(getRef("mail_type_selector").querySelector(`[value="${e.target.value}"]`))
             location.hash = `#/mail_page/${e.target.value}`
         })
         getRef("mail_sections").addEventListener('click', function (e) {
             if (e.target.closest(".mail-card")) {
                 e.target.closest(".mail-card").classList.remove('unread')
                 viewMail(e.target.closest(".mail-card").dataset.name);
-                if (activeMail)
-                    activeMail.classList.remove('active')
+                getRef("mail_sections").querySelectorAll(".mail-card").forEach(card => {
+                    card.classList.remove('active')
+                })
                 e.target.closest(".mail-card").classList.add('active')
                 activeMail = e.target.closest(".mail-card")
             }
@@ -2876,11 +2901,10 @@
                 notify("Retrive data Unsuccessful!", "error", error);
             })
         })
-        function sendMessage() {
+        async function sendMessage() {
             if (!isMobileView)
                 getRef('type_message').focusIn()
-            let receiver = activeChat['floID']
-            let container;
+            let receiver = activeChat.floID
             let message = getRef('type_message').value.trim();
             getRef('type_message').value = ''
             if (message === '') return
@@ -2893,21 +2917,21 @@
                 msgObj['floID'] = activeChat.floID
                 msgObj['category'] = 'sent'
             }
-            updateMessageUI({ msgObj })
-            if (activeChat.isGroup) {
-                floGlobals.unconfirmedMessages += 1
-                messenger.sendGroupMessage(message, receiver).then(data => {
-                    floGlobals.unconfirmedMessages -= 1
+            updateMessageUI({ msgObj }, true)
+            try {
+                if (activeChat.isGroup) {
+                    await messenger.sendGroupMessage(message, receiver)
+                } else
+                    await messenger.sendMessage(message, receiver)
+
+                if (getRef('messages_container').querySelector(`.unconfirmed`))
                     getRef('messages_container').querySelector(`.unconfirmed`).classList.remove('unconfirmed')
-                    activeChat.chatCard.querySelector('.last-message').textContent = `You: ${message}`
-                    activeChat.chatCard.querySelector('.time').textContent = getFormattedTime(Date.now(), 'relative')
-                }).catch(error => notify(error, "error"));
-            } else
-                messenger.sendMessage(message, receiver).then(data => {
-                    getRef('messages_container').querySelector(`.unconfirmed`).classList.remove('unconfirmed')
-                    activeChat.chatCard.querySelector('.last-message').textContent = `You: ${message}`
-                    activeChat.chatCard.querySelector('.time').textContent = getFormattedTime(Date.now(), 'relative')
-                }).catch(error => notify(error, "error"));
+                const chatCard = getChatCard(activeChat.floID)
+                chatCard.querySelector('.last-message').textContent = `You: ${message}`
+                chatCard.querySelector('.time').textContent = getFormattedTime(Date.now(), 'relative')
+            } catch (err) {
+                notify(err, "error")
+            }
         }
 
         function removeElement(element) {
@@ -2931,9 +2955,15 @@
                 return
             }
             messenger.storeContact(floID, name).then(result => {
-                renderContactList()
                 closePopup()
                 notify(`Added Contact: ${floID}`)
+                const chatCard = getChatCard(floID)
+                if (chatCard)
+                    chatCard.querySelector('.name').textContent = name
+                if (popupStack.peek().popup.id === 'contact_details_popup') {
+                    getRef('contact_name').value = name
+                    getRef('add_as_contact_option').remove()
+                }
             }).catch(error => notify(error, "error"));
         }
 
@@ -2941,7 +2971,7 @@
             const contacts = []
             for (floID in contactList) {
                 let isSelected = selectedGroupMembers.has(floID)
-                contacts.push(render.contactCard(floID, { type: 'contact', isSelected }))
+                contacts.push(render.contactCard(floID, { type: 'contact', isSelected, ref: getRef('contacts_container') }))
             }
             renderElem(getRef('contacts_container'), html`${contacts}`)
         }
@@ -2954,7 +2984,7 @@
                     type = 'chat'
                 else if (messenger.groups[floID])
                     type = 'group'
-                return render.contactCard(floID, { type, markUnread })
+                return render.contactCard(floID, { type, markUnread, ref: getRef('chats_list') })
             })
             renderElem(getRef('chats_list'), html`${chats}`)
         }
@@ -2968,9 +2998,10 @@
         }
 
         function scrollToBottom(smooth = false) {
-            if (activeChat.chatCard) {
+            if (activeChat.floID) {
                 messenger.removeMark(activeChat.floID, 'unread')
-                activeChat.chatCard.classList.remove('unread')
+                if (getChatCard(activeChat.floID))
+                    getChatCard(activeChat.floID).classList.remove('unread')
             }
             getRef('scroll_to_bottom').classList.remove('new-message')
             getRef('messages_container').scrollTo({ top: getRef('messages_container').scrollHeight, behavior: smooth ? 'smooth' : undefined })
@@ -2997,48 +3028,65 @@
         }
 
         floGlobals.typedMessages = {}
-        async function viewConversation(floID) {
-            floGlobals.unconfirmedMessages = 0
-            // clear rendered date cards if any 
-            renderedDates = {}
-            // save typed message from previous chat
-            if (getRef('type_message').value.trim() !== '') {
-                floGlobals.typedMessages[activeChat.floID] = getRef('type_message').value
-            } else {
-                delete floGlobals.typedMessages[activeChat.floID]
-            }
-            // restore typed message if any
-            getRef('type_message').value = floGlobals.typedMessages[floID] || ''
-            activeChat.floID = floID
-            activeChat['isGroup'] = messenger.groups.hasOwnProperty(floID)
-            getRef("receiver_name").textContent = getContactName(floID);
-            if (activeChat.isGroup) {
-                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> `
-            } else {
-                getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
-            }
-            getRef("receiver_initial").setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
-            renderMessages(floID).then(() => {
-                if (!floGlobals.pubKeys[floID] && !activeChat.isGroup)
-                    getRef('messages_container').prepend(html.node`<strong id="warn_no_encryption">Converstion is not encrypted until receiver replies</strong>`)
-                location.hash = `#/chat_page/messages`
+        floGlobals.checkEncryption = {}
+        function viewConversation(floID) {
+            return new Promise((resolve, reject) => {
+                // clear rendered date cards if any 
+                renderedDates = {}
+                // save typed message from previous chat
+                if (getRef('type_message').value.trim() !== '') {
+                    floGlobals.typedMessages[activeChat.floID] = getRef('type_message').value
+                } else {
+                    delete floGlobals.typedMessages[activeChat.floID]
+                }
+                // restore typed message if any
+                getRef('type_message').value = floGlobals.typedMessages[floID] || ''
+                activeChat.floID = floID
+                activeChat.isGroup = messenger.groups.hasOwnProperty(floID)
+                getRef("receiver_name").textContent = getContactName(floID);
+                if (activeChat.isGroup) {
+                    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> `
+                } else {
+                    getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
+                }
+                getRef("receiver_initial").setAttribute('style', `--contact-color: var(${contactColor(floID)})`)
+                messenger.removeMark(floID, "unread");
+                if (this.scrollHeight <= this.clientHeight) {
+                    chatScrollInfo['isScrolledUp'] = false
+                    getRef('scroll_to_bottom').classList.remove('no-transformations')
+                }
+                renderMessages(floID).then(() => {
+                    if (!floGlobals.pubKeys[floID] && !activeChat.isGroup) {
+                        getRef('messages_container').prepend(html.node`<strong id="warn_no_encryption">Converstion is not encrypted until receiver replies</strong>`)
+                        floGlobals.checkEncryption[floID] = true
+                    }
+                    resolve()
+                })
             })
-            messenger.removeMark(floID, "unread");
-            if (this.scrollHeight <= this.clientHeight) {
-                chatScrollInfo['isScrolledUp'] = false
-                getRef('scroll_to_bottom').classList.remove('no-transformations')
-            }
         }
 
         function renderMailList(mails, markUnread = true) {
             const inboxMails = document.createDocumentFragment()
             const sentMails = document.createDocumentFragment()
+            let inboxCount = 0, sentCount = 0
             for (let m in mails) {
                 let { from, to, prev, ref, subject, time, content } = mails[m]
-                if (from === myFloID)
+                if (from === myFloID) {
                     sentMails.prepend(render.mailCard(to, ref, subject, time, content, markUnread))
-                else if (to.includes(myFloID))
+                    if (markUnread) {
+                        sentCount++
+                    }
+                } else if (to.includes(myFloID)) {
                     inboxMails.prepend(render.mailCard(from, ref, subject, time, content, markUnread))
+                    if (markUnread) {
+                        inboxCount++
+                    }
+                }
+            }
+            if (getRef('mail_type_selector').value === 'inbox' && sentCount) {
+                addNotificationBadge(getRef('mail_type_selector').children[1], sentCount)
+            } else if (getRef('mail_type_selector').value === 'sent' && inboxCount) {
+                addNotificationBadge(getRef('mail_type_selector').children[0], inboxCount)
             }
             getRef('inbox_mail_container').prepend(inboxMails)
             getRef('sent_mail_container').prepend(sentMails)
@@ -3248,7 +3296,6 @@
                     contact.children[0].textContent = name.charAt(0)
                     contact.children[1].textContent = name
                 }
-                contact.dataset.name = name
             })
         }
 
@@ -3271,20 +3318,23 @@
             }
         }
 
+        function getChatCard(floID) {
+            return getRef('chats_list').querySelector(`.chat[data-flo-id="${floID}"], .group[data-flo-id="${floID}"]`)
+        }
+
         function addAsContact() {
             openPopup('add_contact_popup')
             getRef('add_contact_floID').value = clickedContact.floID
         }
 
         function markAsUnread() {
-            getRef('chats_list').querySelector(`.chat[data-flo-id="${floGlobals.activeFloID}"], .group[data-flo-id="${floGlobals.activeFloID}"]`).classList.add('unread')
+            getChatCard(floGlobals.activeFloID).classList.add('unread')
             messenger.addMark(floGlobals.activeFloID, 'unread')
             closePopup()
         }
 
         function markAsRead() {
-            const chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floGlobals.activeFloID}"], .group[data-flo-id="${floGlobals.activeFloID}"]`);
-            chatCard.classList.remove('unread')
+            getChatCard(floGlobals.activeFloID).classList.remove('unread')
             messenger.removeMark(floGlobals.activeFloID, 'unread')
             closePopup()
         }
@@ -3293,8 +3343,7 @@
             getConfirmation('Block this FLO ID?', { message: `Are you sure to block this FLO ID?`, confirmText: 'Block', cancelText: 'Cancel' }).then(confirmed => {
                 if (confirmed) {
                     messenger.blockUser(floGlobals.activeFloID).then(result => {
-                        const chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floGlobals.activeFloID}"], .group[data-flo-id="${floGlobals.activeFloID}"]`);
-                        chatCard.querySelector('.last-message').textContent = 'This user is blocked'
+                        getChatCard(floGlobals.activeFloID).querySelector('.last-message').textContent = 'This user is blocked'
                         closePopup()
                         notify('FLO ID blocked', 'success')
                     })
@@ -3305,14 +3354,14 @@
             getConfirmation('Unblock this FLO ID?', { message: `Are you sure to unblock this FLO ID?`, confirmText: 'Unblock', cancelText: 'Cancel' }).then(confirmed => {
                 if (confirmed) {
                     messenger.unblockUser(floID || floGlobals.activeFloID).then(result => {
-                        const chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floGlobals.activeFloID}"], .group[data-flo-id="${floGlobals.activeFloID}"]`);
+                        const chatCard = getChatCard(floID || floGlobals.activeFloID);
                         getLastMessage(floGlobals.activeFloID).then(({ lastText }) => {
                             chatCard.querySelector('.last-message').textContent = lastText
                         }).catch(error => {
                             console.log(error)
                         })
                         chatCard.querySelector('.last-message').textContent = 'This user is unblocked'
-                        notify('FLo ID unblocked', 'success')
+                        notify('FLO ID unblocked', 'success')
                         closePopup()
                         render.blockedList()
                         renderChatList(messenger.getChatOrder())
@@ -3329,7 +3378,7 @@
             getConfirmation('Clear chat?', { message: `Are you sure to clear this chat?`, confirmText: 'Clear', cancelText: 'Cancel' }).then(confirmed => {
                 if (confirmed) {
                     messenger.clearChat(floGlobals.activeFloID).then(result => {
-                        let chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floGlobals.activeFloID}"], .group[data-flo-id="${floGlobals.activeFloID}"]`)
+                        let chatCard = getChatCard(floGlobals.activeFloID);
                         if (chatCard) {
                             chatCard.querySelector('.last-message').textContent = ''
                             chatCard.querySelector('.time').textContent = ''
@@ -3346,8 +3395,7 @@
             getConfirmation('Delete chat', { message: `Are you sure to delete this chat?`, confirmText: 'Delete', cancelText: 'No' }).then(confirmed => {
                 if (confirmed) {
                     messenger.rmChat(floGlobals.activeFloID).then(result => {
-                        const chatCard = getRef('chats_list').querySelector(`.chat[data-flo-id="${floGlobals.activeFloID}"], .group[data-flo-id="${floGlobals.activeFloID}"]`);
-                        chatCard.remove()
+                        getChatCard(floGlobals.activeFloID).remove()
                         closePopup()
                         getRef('chat_view').classList.add('hide')
                         notify('Chat deleted', 'success')