TheCard handling in messages

css/base.css

@@ -790,6 +790,14 @@ div.trusted-badge {
   height: 0.015rem;
 }
 
+/* Vertical divider line */
+.divider {
+  display: inline-block;
+  width: 1px;
+  margin: 0 0.25rem;
+  border-left: var(--clr-border-muted) 1.5px groove;
+}
+
 .ellipsized {
   overflow-x: hidden;
   white-space: nowrap;
@@ -3784,3 +3792,71 @@ div.toast.show {
     border-radius: unset;
   }
 }
+
+.contact-card {
+  position: relative;
+  background-color: var(--clr-background-off-white);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-card .avatar-box {
+  position: relative;
+  width: 1.8rem;
+  height: 1.8rem;
+  font-size: 1rem;
+  margin-right: 0.75rem;
+  margin-bottom: 0;
+}
+
+.contact-card .contact-body {
+  align-items: center;
+  background-color: var(--clr-background-blue-gray-50);
+  display: flex;
+  padding: 0.75rem;
+  border-radius: 0.5rem 0.5rem 0 0;
+  border-bottom: none;
+}
+
+.contact-card .contact-body .name-box {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.contact-card .contact-body .name-box .name {
+  color: var(--clr-text-primary);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.contact-card .contact-body .name-box .org {
+  color: var(--clr-text-secondary);
+  font-size: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 300;
+}
+
+.contact-card .contact-actions {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 0 0.5rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+  border-top: none;
+  background-color: var(--clr-bright);
+}
+
+.contact-card .contact-actions a {
+  cursor: pointer;
+}
+
+.contact-card .contact-actions .divider {
+  height: 1.8rem;
+  opacity: 0.5;
+}