diff --git a/public/src/uncloseai-embed-modal.js b/public/src/uncloseai-embed-modal.js
index 384bab6..baad767 100644
--- a/public/src/uncloseai-embed-modal.js
+++ b/public/src/uncloseai-embed-modal.js
@@ -274,6 +274,8 @@ async function openUncloseaiEmbeddedModalNew() {
const modal = document.createElement("dialog");
modal.id = "uncloseai-embedded-modal";
modal.setAttribute("data-theme", theme);
+ // Force zero padding inline so host page dialog styles can't push the header inward
+ modal.style.padding = "0";
// CSS handles all styling now - no inline styles needed
// But we still need isMobile for some responsive text sizing
@@ -292,15 +294,14 @@ async function openUncloseaiEmbeddedModalNew() {
const title = document.createElement("h2");
title.innerHTML =
- "🤖 uncloseai.";
+ "uncloseai.";
title.className = `uncloseai-modal-title ${isMobile ? "uncloseai-modal-title-mobile" : "uncloseai-modal-title-desktop"}`;
const subtitle = document.createElement("div");
const pageTitle = document.title || window.location.hostname;
subtitle.innerHTML = `
- uncloseai. ${getUIText("hermesIntro")}
- ${getUIText("discussingPage")}: ${pageTitle}
+ ${getUIText("discussingPage")}: ${pageTitle}
`;
diff --git a/public/src/uncloseai-modal-builtin.css b/public/src/uncloseai-modal-builtin.css
index 32effe1..8d5defe 100644
--- a/public/src/uncloseai-modal-builtin.css
+++ b/public/src/uncloseai-modal-builtin.css
@@ -76,7 +76,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
.uncloseai-modal-settings-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
- color: white !important;
+ color: white;
font-size: 18px;
width: 36px;
height: 36px;
@@ -86,7 +86,6 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
place-content: center;
transition: background 0.2s;
margin-right: 8px;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.uncloseai-modal-settings-btn:hover {
@@ -896,8 +895,28 @@ dialog#translate-modal h3,
dialog#translate-modal h4,
dialog#translate-modal h5,
dialog#translate-modal h6 {
- padding: 0 !important;
- margin: 0 !important;
+ padding: 0;
+ margin: 0;
+}
+
+/* Reset host page button styles that leak into our modals */
+dialog#uncloseai-embedded-modal button,
+dialog#tts-modal button,
+dialog#translate-modal button {
+ min-width: unset;
+ max-width: unset;
+ min-height: unset;
+ max-height: unset;
+ padding: 0;
+ margin: 0;
+ border: none;
+ background: none;
+ font: inherit;
+ line-height: normal;
+ letter-spacing: normal;
+ text-transform: none;
+ text-align: center;
+ box-sizing: border-box;
}
/* API Configuration Styles */
diff --git a/public/src/uncloseai-modal-pico.css b/public/src/uncloseai-modal-pico.css
index 069fff5..72699dc 100644
--- a/public/src/uncloseai-modal-pico.css
+++ b/public/src/uncloseai-modal-pico.css
@@ -95,10 +95,10 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
}
/* Settings button */
-.uncloseai-modal-settings-btn {
+dialog#uncloseai-embedded-modal .uncloseai-modal-settings-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
- color: white !important;
+ color: white;
font-size: 18px;
width: 36px;
height: 36px;
@@ -108,7 +108,6 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
place-content: center;
transition: background 0.2s;
margin-right: 8px;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.uncloseai-modal-settings-btn:hover {
@@ -970,6 +969,26 @@ dialog#translate-modal h6 {
margin: 0 !important;
}
+/* Reset host page button styles that leak into our modals */
+dialog#uncloseai-embedded-modal button,
+dialog#tts-modal button,
+dialog#translate-modal button {
+ min-width: unset;
+ max-width: unset;
+ min-height: unset;
+ max-height: unset;
+ padding: 0;
+ margin: 0;
+ border: none;
+ background: none;
+ font: inherit;
+ line-height: normal;
+ letter-spacing: normal;
+ text-transform: none;
+ text-align: center;
+ box-sizing: border-box;
+}
+
/* API Configuration Styles */
.uncloseai-toggle-container {
display: block;
diff --git a/public/uncloseai-js-styleguide.html b/public/uncloseai-js-styleguide.html
index b234bbf..c7dfbf4 100644
--- a/public/uncloseai-js-styleguide.html
+++ b/public/uncloseai-js-styleguide.html
@@ -219,7 +219,6 @@
/* Modal header demo */
.sg-header-demo {
padding: 16px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: grid;
grid-template-columns: 1fr auto;
@@ -228,9 +227,18 @@
margin: 16px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
+ .sg-header-demo-purple {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ }
+ .sg-header-demo-green {
+ background: linear-gradient(45deg, #4CAF50 0%, #45a049 100%);
+ }
.sg-header-title {
font-weight: 600;
- font-size: 18px;
+ font-size: 20px;
+ }
+ .sg-header-title-brand {
+ font-family: 'ChunkFiveRegular', monospace;
}
.sg-header-subtitle {
font-size: 12px;
@@ -248,6 +256,13 @@
display: grid;
place-content: center;
}
+ .sg-header-btn-row {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: max-content;
+ gap: 8px;
+ align-items: center;
+ }
/* Control strip demo */
.sg-controls-demo {
@@ -619,15 +634,38 @@
-
- Purple gradient header with title, subtitle, and settings gear. The gradient linear-gradient(135deg, #667eea, #764ba2) is the visual anchor across the entire modal system.
+
+ All three modals share the same header structure: gradient background, title, and action buttons. The purple gradient anchors the chat and TTS modals, while translate uses green.
-