@guuey/chat 0.16.7 → 0.16.9

package/src/theme.ts

@@ -130,12 +130,20 @@ export type GuueyChatTheme = z.infer<typeof GuueyChatTheme>;
  * The brand-neutral-but-polished package default — the theme a builder gets
  * before configuring anything, and the per-token fallback floor every other
  * theme resolves against.
+ *
+ * The accent is MONOCHROME (= ink) by founder ruling (guuey#521): an
+ * unthemed embed must never carry a foreign accent into a host's product —
+ * the old `#2f6bff` blue made every zero-config embed read "off-the-shelf
+ * chat vendor" inside someone else's brand (#414's lesson, mirrored). Ink
+ * as accent means the send button and user pill render as neutral
+ * ink-on-canvas and disappear into any host; a brand accent is a CHOICE
+ * (theme prop or one `--guuey-chat-accent` CSS variable), never a default.
  */
 export const DEFAULT_CHAT_THEME: GuueyChatTheme = {
   name: "default",
   colors: {
     light: {
-      accent: "#2f6bff",
+      accent: "#111318",
       onAccent: "#ffffff",
       ink: "#111318",
       inkMuted: "#5b6270",
@@ -145,7 +153,7 @@ export const DEFAULT_CHAT_THEME: GuueyChatTheme = {
       error: "#d64545",
     },
     dark: {
-      accent: "#5c8dff",
+      accent: "#e8e9ee",
       onAccent: "#0b0d12",
       ink: "#e8e9ee",
       inkMuted: "#9aa0ac",
@@ -269,6 +277,44 @@ export function resolveTheme(
   };
 }
 
+/**
+ * The court-override member a theme DOCUMENT may carry (guuey#519).
+ * Values are theme documents themselves (validated by `resolveTheme`'s own
+ * lenient parse at resolution time, so a partial or future-schema court
+ * entry degrades per-token like any stored theme).
+ */
+const CourtOverrides = z
+  .object({ courts: z.record(z.string(), z.unknown()).optional() })
+  .loose();
+
+/**
+ * Per-court theme resolution (guuey#519 — the #414 rule generalized).
+ *
+ * A theme document may carry `courts`: explicit per-court override
+ * documents keyed by serving court (`"guuey"`, `"ggui"`, …). A surface
+ * resolves ITS court: the court's override resolved per-token OVER the
+ * resolved base document when declared, else the base alone. **Brand is
+ * never a default** — an undeclared or unknown court gets the neutral
+ * base by construction, and readers that never heard of `courts`
+ * (lenient parsers projecting only known tokens) keep reading the base
+ * untouched, so no court can inherit another court's brand.
+ *
+ * Resolved themes are court-free: `courts` never survives resolution.
+ * NEVER throws; unparseable input degrades exactly as `resolveTheme`.
+ */
+export function resolveCourtTheme(
+  candidate: unknown,
+  court: string,
+  base: GuueyChatTheme = DEFAULT_CHAT_THEME,
+): GuueyChatTheme {
+  const resolvedBase = resolveTheme(candidate, base);
+  const parsed = CourtOverrides.safeParse(candidate);
+  if (!parsed.success) return resolvedBase;
+  const override = parsed.data.courts?.[court];
+  if (override === undefined) return resolvedBase;
+  return resolveTheme(override, resolvedBase);
+}
+
 /** Slot-level merge of two ramp statements (candidate slots win per slot). */
 function mergeRampSet(
   base: GuueyChatRampSet | undefined,

package/styles.css

@@ -17,10 +17,10 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  background: var(--guuey-chat-canvas);
-  color: var(--guuey-chat-ink);
-  font-family: var(--guuey-chat-font, system-ui, -apple-system, sans-serif);
-  font-size: calc(15px * var(--guuey-chat-scale, 1));
+  background: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
+  font-family: var(--guuey-chat-font, var(--_guuey-chat-font, system-ui, -apple-system, sans-serif));
+  font-size: calc(15px * var(--guuey-chat-scale, var(--_guuey-chat-scale, 1)));
   line-height: 1.45;
 }
 
@@ -34,21 +34,69 @@
 .guuey-chat-column {
   display: flex;
   flex-direction: column;
-  gap: var(--guuey-chat-gap);
-  padding: calc(var(--guuey-chat-gap) * 1.5);
+  gap: var(--guuey-chat-gap, var(--_guuey-chat-gap));
+  padding: calc(var(--guuey-chat-gap, var(--_guuey-chat-gap)) * 1.5);
   max-width: 48rem;
   margin-inline: auto;
 }
 
+/* ── ui/open-link disclosure (guuey#522) — the URL is SHOWN before any
+      navigation; Open is the human's own anchor click. ── */
+.guuey-chat-link-ask {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 4px calc(var(--guuey-chat-gap) * 1.5);
+  padding: 6px 10px;
+  border: 1px solid var(--guuey-chat-canvas-muted);
+  border-radius: var(--guuey-chat-radius);
+  font-size: 0.9em;
+}
+.guuey-chat-link-ask-url {
+  color: var(--guuey-chat-ink-muted);
+  overflow-wrap: anywhere;
+  flex: 1 1 100%;
+}
+.guuey-chat-link-ask-open {
+  font-weight: 600;
+}
+.guuey-chat-link-ask-dismiss {
+  background: none;
+  border: none;
+  color: var(--guuey-chat-ink-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+/* ── R1 tables (guuey#370 — the sdk#23 node) ── */
+.guuey-chat-table-wrap {
+  overflow-x: auto; /* wide tables scroll inside the bubble, never the page */
+}
+.guuey-chat-table {
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+.guuey-chat-table th,
+.guuey-chat-table td {
+  border: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
+  padding: 4px 8px;
+  text-align: left; /* per-column align from the AST overrides inline */
+}
+.guuey-chat-table th {
+  font-weight: 600;
+  background: var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
+}
+
 /* ── R0 user ── */
 .guuey-chat-user {
   align-self: flex-end;
   max-width: 85%;
 }
 .guuey-chat-user-bubble {
-  background: var(--guuey-chat-accent);
-  color: var(--guuey-chat-on-accent);
-  border-radius: var(--guuey-chat-radius);
+  background: var(--guuey-chat-accent, var(--_guuey-chat-accent));
+  color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent));
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
   border-end-end-radius: 4px;
   padding: 8px 12px;
   white-space: pre-wrap;
@@ -60,14 +108,14 @@
 .guuey-chat-send-failed {
   margin: 4px 0 0;
   font-size: 0.85em;
-  color: var(--guuey-chat-error);
+  color: var(--guuey-chat-error, var(--_guuey-chat-error));
   text-align: end;
 }
 .guuey-chat-retry {
   margin-inline-start: 8px;
-  border: 1px solid var(--guuey-chat-error);
+  border: 1px solid var(--guuey-chat-error, var(--_guuey-chat-error));
   background: none;
-  color: var(--guuey-chat-error);
+  color: var(--guuey-chat-error, var(--_guuey-chat-error));
   border-radius: 6px;
   padding: 1px 8px;
   cursor: pointer;
@@ -79,13 +127,25 @@
 .guuey-chat-text {
   align-self: flex-start;
   max-width: 92%;
-  background: var(--guuey-chat-surface);
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
-  border-radius: var(--guuey-chat-radius);
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
   border-end-start-radius: 4px;
   padding: 8px 12px;
   overflow-wrap: anywhere;
 }
+/* The bare surface (guuey#521): assistant text sits directly on the host's
+   background — no card, no hairline, no inset — so the transcript reads as
+   part of the page it is embedded in. The user pill deliberately stays a
+   bubble (the conversational shape survives; only the vendor-styled
+   message SURFACE disappears). */
+.guuey-chat--bare .guuey-chat-text {
+  max-width: 100%;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
 .guuey-chat-text p {
   margin: 0;
 }
@@ -105,9 +165,9 @@
 }
 .guuey-chat-inline-code,
 .guuey-chat-code-fence {
-  font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
+  font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
   font-size: 0.88em;
-  background: color-mix(in srgb, var(--guuey-chat-ink) 7%, transparent);
+  background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 7%, transparent);
   border-radius: 5px;
 }
 .guuey-chat-inline-code {
@@ -122,12 +182,12 @@
   margin: 0;
 }
 .guuey-chat-cursor {
-  color: var(--guuey-chat-accent);
+  color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
 }
 .guuey-chat-stopped {
   margin: 6px 0 0;
   font-size: 0.85em;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
 }
 
 /* ── Toggles (R2/R3/R4/R9/R15 headers) ── */
@@ -137,7 +197,7 @@
   gap: 6px;
   border: 0;
   background: none;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font: inherit;
   font-size: 0.9em;
   padding: 2px 4px;
@@ -145,10 +205,10 @@
   cursor: pointer;
 }
 .guuey-chat-toggle:hover {
-  background: color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
+  background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
 }
 .guuey-chat-toggle:focus-visible {
-  outline: 2px solid var(--guuey-chat-accent);
+  outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
   outline-offset: 1px;
 }
 .guuey-chat-body {
@@ -167,17 +227,17 @@
   animation: guuey-chat-spin 1s linear infinite;
 }
 .guuey-chat-tool-failed {
-  color: var(--guuey-chat-error);
+  color: var(--guuey-chat-error, var(--_guuey-chat-error));
 }
 .guuey-chat-tool-note {
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.85em;
 }
 .guuey-chat-tool-args,
 .guuey-chat-data-preview {
-  font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
+  font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
   font-size: 0.82em;
-  background: color-mix(in srgb, var(--guuey-chat-ink) 5%, transparent);
+  background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 5%, transparent);
   border-radius: 6px;
   padding: 6px 8px;
   margin: 4px 0;
@@ -188,7 +248,7 @@
 /* ── R4 group ── */
 .guuey-chat-failure-badge {
   margin-inline-start: 8px;
-  color: var(--guuey-chat-error);
+  color: var(--guuey-chat-error, var(--_guuey-chat-error));
   font-size: 0.85em;
 }
 
@@ -197,19 +257,19 @@
   display: flex;
   gap: 8px;
   align-items: center;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.8em;
 }
 .guuey-chat-data-empty,
 .guuey-chat-data-binary {
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.85em;
   margin: 2px 0;
 }
 .guuey-chat-copy {
   border: 0;
   background: none;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font: inherit;
   font-size: 0.9em;
   cursor: pointer;
@@ -218,10 +278,10 @@
 
 /* ── R6 views ── */
 .guuey-chat-view {
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
-  border-radius: var(--guuey-chat-radius);
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
   overflow: hidden;
-  background: var(--guuey-chat-surface);
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
   min-height: 3rem;
 }
 .guuey-chat-view iframe {
@@ -231,25 +291,25 @@
 .guuey-chat-view-expired p {
   margin: 0;
   padding: 12px;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.9em;
 }
 .guuey-chat-attribution {
   margin: 0;
   padding: 4px 12px;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.78em;
-  border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
 }
 /* guuey#204: the promoted-view reference chip — compact, never a frame. */
 .guuey-chat-view-ref {
   display: inline-block;
   margin: 0;
   padding: 6px 12px;
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
   border-radius: 999px;
-  background: var(--guuey-chat-surface);
-  color: var(--guuey-chat-ink-muted);
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.85em;
   line-height: 1.2;
 }
@@ -259,14 +319,14 @@
   font-size: 0.85em;
 }
 .guuey-chat-view-ref-button:hover {
-  color: var(--guuey-chat-ink);
-  border-color: color-mix(in srgb, var(--guuey-chat-ink) 24%, transparent);
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
+  border-color: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 24%, transparent);
 }
 /* guuey#301 chips presentation: the selected (on-stage) chip + honest expired state. */
 .guuey-chat-view-ref-selected {
-  border-color: var(--guuey-chat-accent);
-  color: var(--guuey-chat-ink);
-  background: color-mix(in srgb, var(--guuey-chat-accent) 12%, var(--guuey-chat-surface));
+  border-color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
+  background: color-mix(in srgb, var(--guuey-chat-accent, var(--_guuey-chat-accent)) 12%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
 }
 .guuey-chat-view-ref-expired {
   opacity: 0.6;
@@ -277,24 +337,24 @@
 .guuey-chat-media-image img {
   max-width: 100%;
   max-height: var(--guuey-chat-image-cap, 20rem);
-  border-radius: var(--guuey-chat-radius);
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
   display: block;
 }
 .guuey-chat-media-chip {
   display: inline-block;
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
   border-radius: 999px;
   padding: 2px 10px;
   font-size: 0.85em;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
 }
 
 /* ── R8 code ── */
 .guuey-chat-code pre {
-  font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
+  font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
   font-size: 0.85em;
-  background: color-mix(in srgb, var(--guuey-chat-ink) 6%, transparent);
-  border-radius: var(--guuey-chat-radius);
+  background: color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 6%, transparent);
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
   padding: 10px 12px;
   margin: 0;
   max-height: var(--guuey-chat-code-cap, 16rem);
@@ -306,7 +366,7 @@
 .guuey-chat-code-meta {
   display: flex;
   justify-content: space-between;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.8em;
   padding: 2px 4px;
 }
@@ -323,9 +383,9 @@
 
 /* ── R10 prompts ── */
 .guuey-chat-prompt {
-  border: 1px solid var(--guuey-chat-accent);
-  border-radius: var(--guuey-chat-radius);
-  background: var(--guuey-chat-surface);
+  border: 1px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
   padding: 12px;
 }
 .guuey-chat-prompt-ask {
@@ -340,21 +400,21 @@
   border-radius: 8px;
   padding: 4px 14px;
   cursor: pointer;
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 15%, transparent);
-  background: var(--guuey-chat-surface);
-  color: var(--guuey-chat-ink);
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 15%, transparent);
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
 }
 .guuey-chat-prompt-accept {
-  background: var(--guuey-chat-accent) !important;
-  color: var(--guuey-chat-on-accent) !important;
+  background: var(--guuey-chat-accent, var(--_guuey-chat-accent)) !important;
+  color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent)) !important;
   border-color: transparent !important;
 }
 .guuey-chat-prompt-actions button:focus-visible {
-  outline: 2px solid var(--guuey-chat-accent);
+  outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
   outline-offset: 1px;
 }
 .guuey-chat-prompt-record {
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.85em;
   margin: 0;
 }
@@ -369,27 +429,27 @@
   margin: 0;
   padding: 8px 12px;
   font-size: 0.85em;
-  color: var(--guuey-chat-ink);
-  background: color-mix(in srgb, var(--guuey-chat-accent) 10%, var(--guuey-chat-surface));
-  border-top: 1px solid var(--guuey-chat-canvas-muted);
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
+  background: color-mix(in srgb, var(--guuey-chat-accent, var(--_guuey-chat-accent)) 10%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
+  border-top: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
 }
 .guuey-chat-oauth-error {
-  background: color-mix(in srgb, var(--guuey-chat-error) 7%, var(--guuey-chat-surface));
+  background: color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 7%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
 }
 .guuey-chat-oauth-dismiss {
   font: inherit;
   cursor: pointer;
   border: 0;
   background: transparent;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   text-decoration: underline;
 }
 
 /* ── R11 errors ── */
 .guuey-chat-error {
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-error) 45%, transparent);
-  border-radius: var(--guuey-chat-radius);
-  background: color-mix(in srgb, var(--guuey-chat-error) 7%, var(--guuey-chat-surface));
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 45%, transparent);
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
+  background: color-mix(in srgb, var(--guuey-chat-error, var(--_guuey-chat-error)) 7%, var(--guuey-chat-surface, var(--_guuey-chat-surface)));
   padding: 10px 12px;
 }
 .guuey-chat-error p {
@@ -398,8 +458,8 @@
 .guuey-chat-error-action {
   margin-top: 6px;
   font: inherit;
-  border: 1px solid var(--guuey-chat-error);
-  color: var(--guuey-chat-error);
+  border: 1px solid var(--guuey-chat-error, var(--_guuey-chat-error));
+  color: var(--guuey-chat-error, var(--_guuey-chat-error));
   background: none;
   border-radius: 8px;
   padding: 2px 10px;
@@ -407,45 +467,45 @@
 }
 .guuey-chat-error-verbatim {
   margin: 8px 0 0;
-  font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
+  font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
   font-size: 0.8em;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   white-space: pre-wrap;
 }
 
 /* ── R12 status ── */
 .guuey-chat-status {
   margin: 0;
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.9em;
 }
 .guuey-chat-status-detail {
-  font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
+  font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
   font-size: 0.85em;
 }
 
 /* ── R13/R14/R15 ── */
 .guuey-chat-history {
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   text-align: center;
   font-size: 0.9em;
   padding: 8px;
 }
 .guuey-chat-compaction {
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.8em;
   text-align: center;
-  border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 8%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 8%, transparent);
   padding-top: 6px;
   margin-top: 4px;
 }
 .guuey-chat-unknown-type,
 .guuey-chat-unknown-size {
-  color: var(--guuey-chat-ink-muted);
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   font-size: 0.85em;
 }
 .guuey-chat-unknown-raw {
-  font-family: var(--guuey-chat-mono-font, ui-monospace, monospace);
+  font-family: var(--guuey-chat-mono-font, var(--_guuey-chat-mono-font, ui-monospace, monospace));
   font-size: 0.8em;
   max-height: 16rem;
   overflow: auto;
@@ -456,9 +516,9 @@
   align-self: center;
   font: inherit;
   font-size: 0.85em;
-  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink) 12%, transparent);
-  background: var(--guuey-chat-surface);
-  color: var(--guuey-chat-ink-muted);
+  border: 1px solid color-mix(in srgb, var(--guuey-chat-ink, var(--_guuey-chat-ink)) 12%, transparent);
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
+  color: var(--guuey-chat-ink-muted, var(--_guuey-chat-ink-muted));
   border-radius: 999px;
   padding: 3px 14px;
   cursor: pointer;
@@ -470,8 +530,8 @@
   font: inherit;
   font-size: 0.85em;
   border: 0;
-  background: var(--guuey-chat-ink);
-  color: var(--guuey-chat-canvas);
+  background: var(--guuey-chat-ink, var(--_guuey-chat-ink));
+  color: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
   border-radius: 999px;
   padding: 6px 14px;
   cursor: pointer;
@@ -481,7 +541,7 @@
 .guuey-chat-show-earlier:focus-visible,
 .guuey-chat-copy:focus-visible,
 .guuey-chat-retry:focus-visible {
-  outline: 2px solid var(--guuey-chat-accent);
+  outline: 2px solid var(--guuey-chat-accent, var(--_guuey-chat-accent));
   outline-offset: 1px;
 }
 
@@ -526,8 +586,8 @@
   align-items: flex-end;
   gap: 8px;
   padding: 8px 12px;
-  background: var(--guuey-chat-canvas);
-  border-top: 1px solid var(--guuey-chat-canvas-muted);
+  background: var(--guuey-chat-canvas, var(--_guuey-chat-canvas));
+  border-top: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
 }
 .guuey-chat-composer-input {
   flex: 1;
@@ -535,15 +595,28 @@
   max-height: 9rem;
   overflow-y: auto;
   padding: 10px 14px;
-  border: 1px solid var(--guuey-chat-canvas-muted);
-  border-radius: var(--guuey-chat-radius);
-  background: var(--guuey-chat-surface);
-  color: var(--guuey-chat-ink);
+  border: 1px solid var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
+  background: var(--guuey-chat-surface, var(--_guuey-chat-surface));
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
   font: inherit;
 }
+/* iOS Safari auto-zooms the page when a focused control's font-size is
+   under its 16px no-zoom threshold. The kit root is 15px (× scale), and
+   this input is `font: inherit` — one px under, so focusing the composer
+   zoomed the whole page and the panel visually overflowed the viewport
+   (guuey#516, founder real-device report 2026-08-30; the widget loader's
+   own width clamp was correct). Floor the input at 16px on touch-primary
+   devices only — max() preserves host upscaling (--guuey-chat-scale >
+   16/15), and desktop keeps the 15px look untouched. */
+@media (hover: none) and (pointer: coarse) {
+  .guuey-chat-composer-input {
+    font-size: max(16px, calc(15px * var(--guuey-chat-scale, var(--_guuey-chat-scale, 1))));
+  }
+}
 .guuey-chat-composer-input:focus {
   outline: none;
-  border-color: var(--guuey-chat-accent);
+  border-color: var(--guuey-chat-accent, var(--_guuey-chat-accent));
 }
 .guuey-chat-composer-input:disabled {
   opacity: 0.5;
@@ -553,19 +626,19 @@
   flex-shrink: 0;
   padding: 10px 16px;
   border: 0;
-  border-radius: var(--guuey-chat-radius);
+  border-radius: var(--guuey-chat-radius, var(--_guuey-chat-radius));
   font: inherit;
   cursor: pointer;
 }
 .guuey-chat-composer-send {
-  background: var(--guuey-chat-accent);
-  color: var(--guuey-chat-on-accent);
+  background: var(--guuey-chat-accent, var(--_guuey-chat-accent));
+  color: var(--guuey-chat-on-accent, var(--_guuey-chat-on-accent));
 }
 .guuey-chat-composer-send:disabled {
   cursor: not-allowed;
   opacity: 0.4;
 }
 .guuey-chat-composer-stop {
-  background: var(--guuey-chat-canvas-muted);
-  color: var(--guuey-chat-ink);
+  background: var(--guuey-chat-canvas-muted, var(--_guuey-chat-canvas-muted));
+  color: var(--guuey-chat-ink, var(--_guuey-chat-ink));
 }