html bubbles, more simplifications, new session protocol

src/render/main.css

@@ -33,6 +33,53 @@ html, body {
   z-index: 1;
 }
 
+.contacts {
+  margin: 0;
+  padding: 0;
+  border-radius: inherit;
+  background-color: #DBDBDB;
+}
+
+.contacts > li {
+  padding: 12px;
+  display: flex; 
+}
+
+.contacts img {
+  border-radius: 50%;
+}
+
+.contacts .info {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.contacts .name {
+
+}
+
+.contacts .email {
+  font-family: SF Compact Display;
+  font-weight: bold;
+  font-size: 12px;
+  color: #898989;
+}
+
+.mail {
+  padding: 12px;
+  margin: 0px;
+  background-color: #D6F2FF;
+  border-radius: inherit;
+}
+
+.mail h4 {
+  margin-top: 0px;
+}
+
+.mail p {
+  margin-bottom: 0px;
+}
+
 #header-menu {
   position: fixed;
   margin-left: 20px;
@@ -389,7 +436,6 @@ html, body {
   max-width: 66vw;
   font-family: "SF Pro Text";
   font-size: 14px;
-  padding: 10px;
   border-radius: 18px;
   margin-bottom: 4px;
 }
@@ -431,15 +477,29 @@ html, body {
   border-top-right-radius: 9px;
 }
 
-.bubble-notify {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: #58D9FF;
-  top: -5px;
-  left: -5px;
-  border: 2px solid #EBEBEB;
+.bubble > p {
+  margin: 0px;
+  padding: 10px;
+}
+
+.bubble > div {
+  border-radius: inherit;
+}
+
+.bubble > img {
+  border-radius: inherit;
+  display: block;
+  max-width: inherit;
+}
+
+.bubble a {
+  border-radius: inherit;
+  font-family: "SF Compact Rounded";
+  background-color: #D9D9D9;
+  font-weight: bold;
+  padding: 12px;
+  color: #727272;
+  margin: 0px;
 }
 
 .context {
@@ -472,6 +532,10 @@ html, body {
   margin-right: 5px;
 }
 
+.context-avatar img {
+  border-radius: 50%;
+}
+
 /* ---------- shared between components ---------- */
 
 .button {