Create style.css

style.css

@@ -0,0 +1,50 @@
+:root {
+  --zen-accent-h: 220;    /* Change for color theme */
+  --zen-accent-s: 95%;
+  --zen-accent-l: 55%;
+  --zen-font: "Inter", "Segoe UI", Arial, sans-serif;
+}
+
+html, body, * {
+  font-family: var(--zen-font);
+  font-size: 1.08em;
+}
+
+.gr-button-primary {
+  background: hsl(var(--zen-accent-h) var(--zen-accent-s) var(--zen-accent-l));
+  color: white;
+  border: none;
+}
+.gr-button-primary:hover { filter: brightness(1.1); }
+
+/* ───── Chatbot bubbles ───── */
+.gr-chatbot .message.user {
+  background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 25%), .18);
+  color: #fff;                                /* ← NEW */
+}
+.gr-chatbot .message.bot  {
+  background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 15%), .13);
+  color: #fff;                                /* ← NEW */
+}
+
+/* Make *everything* inside the bubbles white (links, bold, code, etc.) */
+.gr-chatbot .message.user *,
+.gr-chatbot .message.bot  * {
+  color: #fff !important;                     /* ← NEW */
+}
+
+.gr-image, .gr-plot {
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.07);
+  margin-top: 6px;
+}
+
+.gr-textbox, .gr-chatbot {
+  border-radius: 8px;
+}
+
+body {
+  background: #f7fafe;
+}
+/* Blue header text – affects only the element with id="zen-header" */
+#zen-header { color: #1e6cff; }    /* adjust the hex if you want a different blue */