diff --git a/docs/tickets/013-page-styles-override-chatbot.md b/docs/tickets/013-page-styles-override-chatbot.md
new file mode 100644
index 0000000..0fdaecf
--- /dev/null
+++ b/docs/tickets/013-page-styles-override-chatbot.md
@@ -0,0 +1,25 @@
+# 013: Page styles override chatbot button design and fonts
+
+**Reporter:** cthegray
+**Date:** 2026-03-03
+**Priority:** high
+**Status:** open
+**Affects:** Embedded widget on all pages
+
+## Description
+
+Host page CSS leaks into the uncloseai chatbot widget, overriding button designs and font styles. Most visible: white text in the input box on pages with dark-theme or custom text color CSS (e.g. Google Docs).
+
+## Reproduction
+
+1. Open uncloseai chatbot on Google Docs
+2. Note the input box has white/invisible text
+3. Page CSS `color: white` or similar rules bleed through to chatbot elements
+
+## Root Cause
+
+The chatbot dialog and its children inherit CSS from the host page. No CSS isolation barrier exists between the page and the chatbot.
+
+## Fix
+
+Add CSS reset (`all: initial` / `all: revert`) on the chatbot dialog root, then re-apply all chatbot styles explicitly. Ensure input, buttons, and text elements have explicit color/background rules that cannot be overridden by page styles.
diff --git a/public/src/uncloseai-modal-builtin.css b/public/src/uncloseai-modal-builtin.css
index 8edab3f..59092fe 100644
--- a/public/src/uncloseai-modal-builtin.css
+++ b/public/src/uncloseai-modal-builtin.css
@@ -64,6 +64,32 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
   color: rgb(33, 37, 41);
 }
 
+/* CSS isolation: form elements do not inherit color by default,
+   so host page rules (e.g. Google Docs) bleed through (#013).
+   Force inheritance from the dialog's themed color. */
+dialog#uncloseai-embedded-modal textarea,
+dialog#uncloseai-embedded-modal input,
+dialog#uncloseai-embedded-modal select {
+  color: inherit;
+  background-color: var(--uncloseai-button-background, #ffffff);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+dialog#uncloseai-embedded-modal[data-theme="dark"] textarea,
+dialog#uncloseai-embedded-modal[data-theme="dark"] input,
+dialog#uncloseai-embedded-modal[data-theme="dark"] select {
+  background-color: var(--uncloseai-button-background, rgb(40, 40, 40));
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+dialog#uncloseai-embedded-modal textarea::placeholder,
+dialog#uncloseai-embedded-modal input::placeholder {
+  color: var(--uncloseai-secondary-text, #6c757d);
+  opacity: 1;
+}
+
 /* Modal container */
 .uncloseai-modal-container {
   position: relative;
@@ -188,10 +214,12 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
   border-radius: 24px;
   resize: none;
   font-size: 16px;
-  font-family: inherit;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.4;
   outline: none;
   transition: border-color 0.2s;
+  background: var(--uncloseai-button-background, #ffffff);
+  color: var(--uncloseai-primary-text, #495057);
 }
 
 .uncloseai-modal-input:focus {
diff --git a/public/src/uncloseai-modal-pico.css b/public/src/uncloseai-modal-pico.css
index 25f5636..8c7798b 100644
--- a/public/src/uncloseai-modal-pico.css
+++ b/public/src/uncloseai-modal-pico.css
@@ -86,6 +86,32 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
   color: rgb(33, 37, 41);
 }
 
+/* CSS isolation: form elements do not inherit color by default,
+   so host page rules (e.g. Google Docs) bleed through (#013).
+   Force inheritance from the dialog's themed color. */
+dialog#uncloseai-embedded-modal textarea,
+dialog#uncloseai-embedded-modal input,
+dialog#uncloseai-embedded-modal select {
+  color: inherit;
+  background-color: var(--uncloseai-button-background, #ffffff);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+dialog#uncloseai-embedded-modal[data-theme="dark"] textarea,
+dialog#uncloseai-embedded-modal[data-theme="dark"] input,
+dialog#uncloseai-embedded-modal[data-theme="dark"] select {
+  background-color: var(--uncloseai-button-background, rgb(40, 40, 40));
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+dialog#uncloseai-embedded-modal textarea::placeholder,
+dialog#uncloseai-embedded-modal input::placeholder {
+  color: var(--uncloseai-secondary-text, #6c757d);
+  opacity: 1;
+}
+
 /* Modal container */
 .uncloseai-modal-container {
   position: relative;
@@ -209,7 +235,9 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
   border-radius: 24px;
   resize: none;
   font-size: 16px;
-  font-family: inherit;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--uncloseai-button-background, #ffffff);
+  color: var(--uncloseai-primary-text, #495057);
   line-height: 1.4;
   outline: none;
   transition: border-color 0.2s;