Open references notes used for chat on mobile too (by clicking)

Requires clicking the reference as hover doesn't work on mobile

src/khoj/interface/web/chat.html

@@ -18,7 +18,7 @@
 
         function generateReference(reference, index) {
             // Generate HTML for Chat Reference
-            return `<sup><a title="${reference}">${index}</a></sup>`;
+            return `<sup><abbr title="${reference}" tabindex="0">${index}</abbr></sup>`;
         }
 
         function renderMessage(message, by, dt=null) {
@@ -238,6 +238,29 @@
             font-size: medium;
         }
 
+        @media (pointer: coarse), (hover: none) {
+            abbr[title] {
+                position: relative;
+                padding-left: 4px;  /* space references out to ease tapping */
+            }
+            abbr[title]:focus:after {
+                content: attr(title);
+
+                /* position tooltip */
+                position: absolute;
+                left: 16px;  /* open tooltip to right of ref link, instead of on top of it */
+                width: auto;
+                z-index: 1;  /* show tooltip above chat messages */
+
+                /* style tooltip */
+                background-color: #aaa;
+                color: #f8fafc;
+                border-radius: 2px;
+                box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
+                font-size: 14px;
+                padding: 2px 4px;
+            }
+        }
         @media only screen and (max-width: 600px) {
             body {
                 grid-template-columns: 1fr;