Use obsidian theme colors for bg, text. Restrict css namespace via prefix

src/interface/obsidian/styles.css

@@ -10,13 +10,12 @@ If your plugin does not need CSS, delete this file.
 :root {
     --khoj-chat-blue: #017eff;
     --khoj-chat-dark-grey: #475569;
-    --khoj-chat-light-grey: #aaa;
-    --khoj-chat-white: #f8fafc;
 }
 
 .khoj-chat {
     display: grid;
-    color: var(--khoj-chat-dark-grey);
+    background: var(--background-primary);
+    color: var(--text-normal);
     text-align: center;
     font-family: roboto, karma, segoe ui, sans-serif;
     font-size: 20px;
@@ -28,37 +27,37 @@ If your plugin does not need CSS, delete this file.
     margin: 10px;
 }
 
-#chat-title {
+#khoj-chat-title {
     font-weight: 200;
     color: var(--khoj-chat-blue);
 }
 
-#chat-body {
+#khoj-chat-body {
     font-size: medium;
     margin: 0px;
     line-height: 20px;
     overflow-y: scroll; /* Make chat body scroll to see history */
 }
 /* add chat metatdata to bottom of bubble */
-.chat-message::after {
+.khoj-chat-message::after {
     content: attr(data-meta);
     display: block;
     font-size: x-small;
-    color: var(--khoj-chat-dark-grey);
+    color: var(--text-muted);
     margin: -12px 7px 0 -5px;
 }
 /* move message by khoj to left */
-.chat-message.khoj {
+.khoj-chat-message.khoj {
     margin-left: auto;
     text-align: left;
 }
 /* move message by you to right */
-.chat-message.you {
+.khoj-chat-message.you {
     margin-right: auto;
     text-align: right;
 }
 /* basic style chat message text */
-.chat-message-text {
+.khoj-chat-message-text {
     margin: 10px;
     border-radius: 10px;
     padding: 10px;
@@ -68,14 +67,14 @@ If your plugin does not need CSS, delete this file.
     text-align: left;
 }
 /* color chat bubble by khoj blue */
-.chat-message-text.khoj {
-    color: var(--khoj-chat-white);
+.khoj-chat-message-text.khoj {
+    color: var(--text-on-accent);
     background: var(--khoj-chat-blue);
     margin-left: auto;
     white-space: pre-line;
 }
 /* add left protrusion to khoj chat bubble */
-.chat-message-text.khoj:after {
+.khoj-chat-message-text.khoj:after {
     content: '';
     position: absolute;
     bottom: -2px;
@@ -86,13 +85,13 @@ If your plugin does not need CSS, delete this file.
     transform: rotate(-60deg);
 }
 /* color chat bubble by you dark grey */
-.chat-message-text.you {
-    color: var(--khoj-chat-white);
+.khoj-chat-message-text.you {
+    color: var(--text-on-accent);
     background: var(--khoj-chat-dark-grey);
     margin-right: auto;
 }
 /* add right protrusion to you chat bubble */
-.chat-message-text.you:after {
+.khoj-chat-message-text.you:after {
     content: '';
     position: absolute;
     top: 91%;
@@ -104,32 +103,33 @@ If your plugin does not need CSS, delete this file.
     transform: rotate(-60deg)
 }
 
-#chat-footer {
+#khoj-chat-footer {
     padding: 0;
     display: grid;
     grid-template-columns: minmax(70px, 100%);
     grid-column-gap: 10px;
     grid-row-gap: 10px;
 }
-#chat-footer > * {
+#khoj-chat-footer > * {
     padding: 15px;
     border-radius: 5px;
     border: 1px solid var(--khoj-chat-dark-grey);
     background: #f9fafc
 }
-#chat-input.option:hover {
-    box-shadow: 0 0 11px var(--khoj-chat-light-grey);
+#khoj-chat-input.option:hover {
+    box-shadow: 0 0 11px var(--background-modifier-box-shadow);
 }
-#chat-input {
+#khoj-chat-input {
     font-size: medium;
 }
+}
 
 @media (pointer: coarse), (hover: none) {
-    #chat-body.abbr[title] {
+    #khoj-chat-body.abbr[title] {
         position: relative;
         padding-left: 4px;  /* space references out to ease tapping */
     }
-    #chat-body.abbr[title]:focus:after {
+    #khoj-chat-body.abbr[title]:focus:after {
         content: attr(title);
 
         /* position tooltip */
@@ -139,10 +139,10 @@ If your plugin does not need CSS, delete this file.
         z-index: 1;  /* show tooltip above chat messages */
 
         /* style tooltip */
-        background-color: #aaa;
-        color: var(--khoj-chat-white);
+        background-color: var(--background-secondary);
+        color: var(--text-muted);
         border-radius: 2px;
-        box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
+        box-shadow: 1px 1px 4px 0 var(--background-modifier-box-shadow);
         font-size: 14px;
         padding: 2px 4px;
     }