html:root[data-platform="desktop"] body.nova-ready #chat #chatFeed .chat-message.krita-bot > .message-avatar {
  --chat-avatar-ring: var(--studio-role-bot, #42dcf4);
  --chat-avatar-ring-light: #b5f6ff;
  --chat-avatar-ring-dark: #258bdf;
}

html:root[data-platform="desktop"] body.nova-ready #chat #chatFeed .chat-message.moderator:not(.guardian, .enigma, .krita-bot) > .message-avatar {
  --chat-avatar-ring: var(--studio-role-moderator, #ff4f7d);
  --chat-avatar-ring-light: #ffc0cf;
  --chat-avatar-ring-dark: #c82759;
}

html:root[data-platform="desktop"] body.nova-ready #chat #chatFeed .chat-message.superfan:not(.guardian, .enigma, .moderator, .krita-bot) > .message-avatar {
  --chat-avatar-ring: var(--studio-role-superfan, #ffcb35);
  --chat-avatar-ring-light: #fff1a7;
  --chat-avatar-ring-dark: #c68e12;
}

html:root[data-platform="desktop"] body.nova-ready #chat #chatFeed .chat-message:is(
  .krita-bot,
  .moderator:not(.guardian, .enigma, .krita-bot),
  .superfan:not(.guardian, .enigma, .moderator, .krita-bot)
) > .message-avatar {
  border: 3px solid transparent !important;
  border-radius: 50% !important;
  background:
    linear-gradient(var(--studio-content-hover), var(--studio-content-hover)) padding-box,
    conic-gradient(
      from -40deg,
      var(--chat-avatar-ring) 0%,
      var(--chat-avatar-ring-light) 13%,
      var(--chat-avatar-ring) 31%,
      var(--chat-avatar-ring-dark) 54%,
      var(--chat-avatar-ring) 74%,
      var(--chat-avatar-ring-light) 91%,
      var(--chat-avatar-ring) 100%
    ) border-box !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chat-avatar-ring) 26%, transparent),
    0 0 7px color-mix(in srgb, var(--chat-avatar-ring) 34%, transparent) !important;
}
html:root[data-platform="desktop"] body.nova-ready #chat .desktop-viewer-member[data-viewer-role="moderator"] > .desktop-viewer-avatar {
  --chat-avatar-ring: var(--studio-role-moderator, #ff4f7d);
  --chat-avatar-ring-light: #ffc0cf;
  --chat-avatar-ring-dark: #c82759;
}

html:root[data-platform="desktop"] body.nova-ready #chat .desktop-viewer-member[data-viewer-role="superfan"] > .desktop-viewer-avatar {
  --chat-avatar-ring: var(--studio-role-superfan, #ffcb35);
  --chat-avatar-ring-light: #fff1a7;
  --chat-avatar-ring-dark: #c68e12;
}

html:root[data-platform="desktop"] body.nova-ready #chat .desktop-viewer-member[data-viewer-bot="krita"] > .desktop-viewer-avatar {
  --chat-avatar-ring: var(--studio-role-bot, #42dcf4);
  --chat-avatar-ring-light: #b5f6ff;
  --chat-avatar-ring-dark: #258bdf;
}

html:root[data-platform="desktop"] body.nova-ready #chat .desktop-viewer-member:is(
  [data-viewer-role="moderator"],
  [data-viewer-role="superfan"],
  [data-viewer-bot="krita"]
) > .desktop-viewer-avatar {
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  background:
    linear-gradient(var(--studio-content-hover), var(--studio-content-hover)) padding-box,
    conic-gradient(
      from -40deg,
      var(--chat-avatar-ring) 0%,
      var(--chat-avatar-ring-light) 13%,
      var(--chat-avatar-ring) 31%,
      var(--chat-avatar-ring-dark) 54%,
      var(--chat-avatar-ring) 74%,
      var(--chat-avatar-ring-light) 91%,
      var(--chat-avatar-ring) 100%
    ) border-box !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chat-avatar-ring) 26%, transparent),
    0 0 7px color-mix(in srgb, var(--chat-avatar-ring) 34%, transparent) !important;
}

html:root[data-platform="desktop"] body.nova-ready #chat .desktop-viewer-member[data-viewer-role="guardian"] .desktop-viewer-avatar-frame-shell .desktop-viewer-avatar {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 50%;
  object-fit: cover;
}