avatar support next to messages x2

assets/styles/hidden-details.css

@@ -50,6 +50,53 @@
     transform: translateY(0);
 }
 
+.has-hidden-avatar {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+}
+
+.hidden-toast.has-hidden-avatar,
+.hidden-drift-message.has-hidden-avatar {
+    display: flex;
+}
+
+.hidden-footer-note.has-hidden-avatar,
+.hidden-greeting.has-hidden-avatar,
+.hidden-guestbook-line.has-hidden-avatar {
+    display: flex;
+    justify-content: center;
+}
+
+.hidden-message-avatar {
+    width: 2.1rem;
+    height: 2.1rem;
+    flex: 0 0 2.1rem;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid color-mix(in oklab, var(--hidden-avatar-glow, var(--accent)) 62%, var(--border));
+    box-shadow: 0 0 18px color-mix(in oklab, var(--hidden-avatar-glow, var(--accent)) 34%, transparent);
+    background: color-mix(in oklab, var(--surface) 82%, transparent);
+}
+
+.hidden-message-text {
+    min-width: 0;
+}
+
+.hidden-layer-message strong {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+}
+
+.hidden-terminal-log .has-hidden-avatar {
+    align-items: flex-start;
+}
+
+.hidden-terminal-log .hidden-message-avatar {
+    margin-top: 0.1rem;
+}
+
 .hidden-corner-object {
     position: fixed;
     left: 0.65rem;