Update style.css

style.css

@@ -1,5 +1,5 @@
 /* ─────────────────────────────────────────
-   Core theme variables
+   ZEN – Global Theme Variables
 ────────────────────────────────────────── */
 :root {
   --zen-accent-h: 220;   /* Change for color theme */
@@ -9,22 +9,23 @@
 }
 
 /* ─────────────────────────────────────────
-   Global text & layout
+   Base Typography & Layout
 ────────────────────────────────────────── */
 html, body, * {
   font-family: var(--zen-font);
   font-size: 1.08em;
 }
 
-/* NEW: default page text is solid black  */
 body {
-  background: #f7fafe;     /* existing backdrop */
-  color: #000;             /* ← readable on light bg */
+  background: #f7fafe;   /* light slate-blue backdrop */
+  color: #000;           /* default page text: black */
 }
 
-/* NEW: ensure markdown & headings inherit black */
-.gr-markdown, .markdown-body,
-.gr-block, p,
+/* Markdown / rich-text blocks inherit black page text */
+.gr-markdown,
+.markdown-body,
+.gr-block,
+p,
 h1, h2, h3, h4, h5, h6 {
   color: #000;
 }
@@ -34,43 +35,60 @@ h1, h2, h3, h4, h5, h6 {
 ────────────────────────────────────────── */
 .gr-button-primary {
   background: hsl(var(--zen-accent-h) var(--zen-accent-s) var(--zen-accent-l));
-  color: #fff;
+  color: #ffffff;
   border: none;
 }
-.gr-button-primary:hover { filter: brightness(1.1); }
+.gr-button-primary:hover {
+  filter: brightness(1.1);
+}
 
-/* ── Chatbot bubbles ───────────────────────────── */
+/* ─────────────────────────────────────────
+   Chatbot Bubbles
+────────────────────────────────────────── */
+.gr-chatbot .message.user {
+  background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 25%), 0.18);
+}
+.gr-chatbot .message.bot  {
+  background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 15%), 0.13);
+}
+
+/* Force PURE-WHITE text inside every chatbot bubble (overrides anything else) */
 .gr-chatbot,
 .gr-chatbot .message,
-.gr-chatbot .message.user,
-.gr-chatbot .message.bot {
-  /* force bright text inside every bubble */
-  color: #fff;
+.gr-chatbot .message *,
+.gr-chatbot .markdown-body,
+.gr-chatbot .markdown-body * {
+  color: #ffffff !important;
 }
 
-/* optional: tweak links inside bubbles so they’re still visible */
+/* Optional: accent-colored links inside bubbles so they’re visible on white text */
 .gr-chatbot a {
-  color: hsl(var(--zen-accent-h) var(--zen-accent-s) 85%); /* lighter accent */
+  color: hsl(var(--zen-accent-h) var(--zen-accent-s) 85%);
 }
+
 /* ─────────────────────────────────────────
-   Media & input
+   Media & Inputs
 ────────────────────────────────────────── */
-.gr-image, .gr-plot {
+.gr-image,
+.gr-plot {
   border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0,0,0,.07);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
   margin-top: 6px;
 }
 
-.gr-textbox, .gr-chatbot {
+.gr-textbox,
+.gr-chatbot {
   border-radius: 8px;
 }
 
-/* NEW: text inside textareas is black */
+/* Black text inside the user input textarea */
 .gr-textbox textarea {
   color: #000;
 }
 
-/* Optional: links keep accent hue */
+/* ─────────────────────────────────────────
+   General Links on the Page
+────────────────────────────────────────── */
 a {
   color: hsl(var(--zen-accent-h) var(--zen-accent-s) var(--zen-accent-l));
 }