/* Stable hooks for user-authored CSS.
   No visual ornament appears until a custom property receives an image. */

#socialApp {
  --avatar-ornament-image: none;
  --message-avatar-ornament-image: var(--avatar-ornament-image);
  --header-avatar-ornament-image: var(--avatar-ornament-image);
  --friend-avatar-ornament-image: var(--avatar-ornament-image);
}

#socialApp :is(.message-avatar, #chatAvatar, .friend-avatar, .char-mention-avatar) {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

#socialApp :is(.message-avatar, #chatAvatar, .friend-avatar, .char-mention-avatar) > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

#socialApp .message-avatar::after,
#socialApp #chatAvatar::after,
#socialApp .friend-avatar::after,
#socialApp .char-mention-avatar::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: var(--avatar-ornament-inset, -7px);
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

#socialApp .message-avatar::after {
  background-image: var(--message-avatar-ornament-image);
}

#socialApp #chatAvatar::after {
  background-image: var(--header-avatar-ornament-image);
}

#socialApp .friend-avatar::after,
#socialApp .char-mention-avatar::after {
  background-image: var(--friend-avatar-ornament-image);
}

/* Named hooks for time-related UI. */
#socialApp .message-timestamp,
#socialApp .message-time-divider,
#socialApp .friend-meta time {
  --timestamp-accent: currentColor;
}