style.css

: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 */