@personaliai/react-widget 0.1.0

package/src/widget-presets.css

@@ -0,0 +1,259 @@
+/* Assistant Design Presets
+ *
+ * 10 fully-designed presets, each with its own deliberately-chosen
+ * typeface, corner radius, and shadow language, ported 1:1 from a real
+ * design gallery — the colors below are each design's own curated
+ * *fallback*, not fixed: every themeable surface (header, bot bubble,
+ * user bubble, starter chip, chat input bar, send button) is driven by
+ * the business owner's "Primary Hex Color" picker via var(--primary-color,
+ * <curated-fallback>), so unset the var and a preset renders exactly as
+ * originally designed.
+ *
+ * This used to be .send-btn only — an earlier version let primaryColor
+ * drive every surface directly and caused a real bug: a hardcoded text
+ * color paired against an arbitrary chosen background went unreadable the
+ * moment someone picked a color from the wrong half of the lightness
+ * spectrum (see git history for that bug class). The fix this time isn't
+ * "touch fewer surfaces", it's computing every text color instead of
+ * hardcoding it:
+ *
+ * - Header / user bubble / send button take the FULL primaryColor as a
+ *   solid fill, with --on-primary (getOnColor(primaryColor) — white or
+ *   near-black, computed per bg-lightness in lib/color-contrast.ts) as
+ *   text. Same mechanism send-btn already proved out.
+ * - Bot bubble / starter chip / chat input bar instead blend primaryColor
+ *   partially into that surface's own curated color with CSS color-mix()
+ *   (background at 15-40%, text at 20%, anchored to the pre-verified
+ *   original pairing) — a flat solid fill there would read as an
+ *   error/alert on a reply bubble, and a fixed "tint toward white" would
+ *   break the already-dark presets (Dark Sleek, Glassmorphism); mixing
+ *   toward each surface's OWN original color instead keeps every preset's
+ *   light/dark character intact while still visibly reflecting the brand
+ *   color, with no per-preset special-casing needed.
+ * - A few structural monochrome strokes are left alone on purpose —
+ *   Neubrutalism's black ink outline, Luxury Editorial's gold rule — where
+ *   the color is the design's own genre-defining identity, not a swappable
+ *   accent (see the comments at each).
+ *
+ * Every bg/fg text pair's *curated fallback* is verified >= 4.5:1 WCAG AA
+ * contrast (normal text), including ::placeholder colors and, for
+ * Glassmorphism, checked against the raw gradient stops (not just the
+ * translucent overlay's nominal alpha value, which understates the
+ * effective contrast against a colorful background). A handful of the
+ * ported gallery accents originally fell short of this — e.g. Playful's
+ * #ff8a5c header/button/chip text was only 2.32:1 against white —
+ * darkened in place (same hue, lower lightness) to restore the design's
+ * character while actually being readable. An arbitrary primaryColor pick
+ * can't be pre-verified the same way — the color-mix() partial-blend
+ * approach above is what keeps that case safe in practice, not a formal
+ * guarantee for every possible hex value.
+ *
+ * Ship this file alongside ChattyWidget (import "@chatty/react-widget/styles.css")
+ * — these are plain CSS selectors keyed off classNames the component
+ * renders (.chat-header, .bot-bubble, etc.), not Tailwind-generated
+ * utilities, so nothing else needs to build or scan this package's source.
+ */
+
+/* 1. Minimal — clean SaaS, off-white, DM Sans. */
+.style-minimal {
+  background-color: #f3f2ee !important;
+  color: #1c1a15 !important;
+  border: 1px solid #e6e4de !important;
+  border-radius: 18px !important;
+  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.1) !important;
+  font-family: var(--font-dm-sans), sans-serif !important;
+}
+.style-minimal .chat-header { background-color: var(--primary-color, #ffffff) !important; color: var(--on-primary, #1c1a15) !important; border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #e6e4de) 40%, #e6e4de) !important; }
+.style-minimal .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f3f2ee) 40%, #f3f2ee) !important; color: color-mix(in srgb, var(--on-primary, #1c1a15) 20%, #1c1a15) !important; border: none !important; border-radius: 14px !important; }
+.style-minimal .user-bubble { background-color: var(--primary-color, #1c1a15) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 14px !important; }
+.style-minimal .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #1c1a15) 20%, #1c1a15) !important; border-color: color-mix(in srgb, var(--primary-color, #e0ddd5) 55%, #e0ddd5) !important; border-radius: 20px !important; font-weight: 500; }
+.style-minimal .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 15%, #ffffff) !important; color: #1c1a15 !important; border-color: color-mix(in srgb, var(--primary-color, #e6e4de) 40%, #e6e4de) !important; border-radius: 12px !important; }
+.style-minimal .send-btn { background-color: var(--primary-color, #1c1a15) !important; color: var(--on-primary, #ffffff) !important; }
+.dark .style-minimal { background-color: #171613 !important; color: #f3f2ee !important; border-color: #2a2822 !important; }
+.dark .style-minimal .chat-header { background-color: var(--primary-color, #1e1c18) !important; color: var(--on-primary, #f3f2ee) !important; border-color: color-mix(in srgb, var(--primary-color, #2a2822) 40%, #2a2822) !important; }
+.dark .style-minimal .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #221f1a) 40%, #221f1a) !important; color: color-mix(in srgb, var(--on-primary, #f3f2ee) 20%, #f3f2ee) !important; }
+.dark .style-minimal .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1e1c18) 15%, #1e1c18) !important; color: #f3f2ee !important; border-color: color-mix(in srgb, var(--primary-color, #2a2822) 40%, #2a2822) !important; }
+
+/* 2. Playful — consumer app, rounded & warm, Quicksand. */
+.style-playful {
+  background-color: #fffaf5 !important;
+  color: #2a1a10 !important;
+  border: none !important;
+  border-radius: 28px !important;
+  box-shadow: 0 16px 36px 0 rgba(255, 138, 92, 0.28) !important;
+  font-family: var(--font-quicksand), sans-serif !important;
+}
+.style-playful .chat-header { background-color: var(--primary-color, #d63d00) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-playful .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #ffe6d9) 40%, #ffe6d9) !important; color: color-mix(in srgb, var(--on-primary, #7a3f24) 20%, #7a3f24) !important; border: none !important; border-radius: 20px !important; }
+.style-playful .user-bubble { background-color: var(--primary-color, #d63d00) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 20px !important; }
+.style-playful .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #d63d00) 20%, #d63d00) !important; border-color: color-mix(in srgb, var(--primary-color, #ffd6c1) 55%, #ffd6c1) !important; border-radius: 24px !important; font-weight: 500; }
+.style-playful .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fffaf5) 15%, #fffaf5) !important; color: #7a3f24 !important; border: none !important; border-radius: 20px !important; }
+.style-playful .send-btn { background-color: var(--primary-color, #d63d00) !important; color: var(--on-primary, #ffffff) !important; }
+.style-playful ::placeholder { color: #a4623d !important; opacity: 1; }
+.dark .style-playful { background-color: #2a1c14 !important; color: #ffe6d9 !important; }
+.dark .style-playful .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #3a2618) 40%, #3a2618) !important; color: color-mix(in srgb, var(--on-primary, #ffe6d9) 20%, #ffe6d9) !important; }
+.dark .style-playful .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #2a1c14) 15%, #2a1c14) !important; color: #ffe6d9 !important; }
+
+/* 3. Corporate — enterprise SaaS, structured navy, Space Grotesk. */
+.style-corporate {
+  background-color: #eef1f6 !important;
+  color: #1c2e4a !important;
+  border: 1px solid #d7dce3 !important;
+  border-radius: 10px !important;
+  box-shadow: 0 10px 26px 0 rgba(28, 46, 74, 0.14) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-corporate .chat-header { background-color: var(--primary-color, #1c2e4a) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-corporate .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #eef1f6) 40%, #eef1f6) !important; color: color-mix(in srgb, var(--on-primary, #1c2e4a) 20%, #1c2e4a) !important; border: 1px solid color-mix(in srgb, var(--primary-color, #dee3ea) 40%, #dee3ea) !important; border-radius: 8px !important; }
+.style-corporate .user-bubble { background-color: var(--primary-color, #1c2e4a) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 8px !important; }
+.style-corporate .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #1c2e4a) 20%, #1c2e4a) !important; border-color: color-mix(in srgb, var(--primary-color, #c7cfdb) 55%, #c7cfdb) !important; border-radius: 6px !important; font-weight: 500; }
+.style-corporate .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #eef1f6) 15%, #eef1f6) !important; color: #1c2e4a !important; border-color: color-mix(in srgb, var(--primary-color, #dbe0e8) 40%, #dbe0e8) !important; border-radius: 6px !important; }
+.style-corporate .send-btn { background-color: var(--primary-color, #1c2e4a) !important; color: var(--on-primary, #ffffff) !important; border-radius: 6px !important; }
+.style-corporate ::placeholder { color: #636e80 !important; opacity: 1; }
+.dark .style-corporate { background-color: #10151d !important; color: #dbe2ec !important; border-color: #232c38 !important; }
+.dark .style-corporate .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #171e29) 40%, #171e29) !important; color: color-mix(in srgb, var(--on-primary, #dbe2ec) 20%, #dbe2ec) !important; border-color: color-mix(in srgb, var(--primary-color, #232c38) 40%, #232c38) !important; }
+.dark .style-corporate .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #10151d) 15%, #10151d) !important; color: #dbe2ec !important; border-color: color-mix(in srgb, var(--primary-color, #232c38) 40%, #232c38) !important; }
+
+/* 4. Dark Sleek — dev tool, near-black with a teal glow, Space Grotesk. */
+.style-dark-sleek {
+  background-color: #111114 !important;
+  color: #e4e4e8 !important;
+  border: 1px solid rgba(0, 229, 199, 0.25) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 0 40px 0 rgba(0, 229, 199, 0.1) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-dark-sleek .chat-header { background-color: var(--primary-color, #14141a) !important; color: var(--on-primary, #e4e4e8) !important; border-bottom: none !important; }
+.style-dark-sleek .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #1c1c22) 40%, #1c1c22) !important; color: color-mix(in srgb, var(--on-primary, #e4e4e8) 20%, #e4e4e8) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 12px !important; }
+.style-dark-sleek .user-bubble { background-color: var(--primary-color, #00e5c7) !important; color: var(--on-primary, #05201c) !important; border: none !important; border-radius: 12px !important; }
+.style-dark-sleek .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #1c1c22) 20%, #1c1c22) !important; color: color-mix(in srgb, var(--on-primary, #00e5c7) 20%, #00e5c7) !important; border-color: color-mix(in srgb, var(--primary-color, rgba(0, 229, 199, 0.3)) 55%, rgba(0, 229, 199, 0.3)) !important; border-radius: 8px !important; font-weight: 500; }
+.style-dark-sleek .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #14141a) 15%, #14141a) !important; color: #e4e4e8 !important; border-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.08)) 40%, rgba(255, 255, 255, 0.08)) !important; border-radius: 8px !important; }
+.style-dark-sleek .send-btn { background-color: var(--primary-color, #00e5c7) !important; color: var(--on-primary, #05201c) !important; border-radius: 8px !important; }
+.style-dark-sleek ::placeholder { color: #7e7e8b !important; opacity: 1; }
+
+/* 5. Gradient Glow — startup, vivid purple/pink gradient, Space Grotesk. */
+.style-gradient-glow {
+  background-color: #ffffff !important;
+  color: #2a1245 !important;
+  border: none !important;
+  border-radius: 24px !important;
+  box-shadow: 0 20px 44px 0 rgba(168, 85, 247, 0.28) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-gradient-glow .chat-header { background: var(--primary-color, linear-gradient(120deg, #9733f5, #e0177a)) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-gradient-glow .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f6effc) 40%, #f6effc) !important; color: color-mix(in srgb, var(--on-primary, #4a2467) 20%, #4a2467) !important; border: none !important; border-radius: 16px !important; }
+.style-gradient-glow .user-bubble { background-color: var(--primary-color, #9733f5) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 16px !important; }
+.style-gradient-glow .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #f6effc) 20%, #f6effc) !important; color: color-mix(in srgb, var(--on-primary, #9733f5) 20%, #9733f5) !important; border-color: color-mix(in srgb, var(--primary-color, #e7d7f7) 55%, #e7d7f7) !important; border-radius: 20px !important; font-weight: 500; }
+.style-gradient-glow .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 15%, #ffffff) !important; color: #4a2467 !important; border: none !important; border-radius: 16px !important; }
+.style-gradient-glow .send-btn { background: var(--primary-color, linear-gradient(135deg, #9733f5, #e0177a)) !important; color: var(--on-primary, #ffffff) !important; }
+.style-gradient-glow ::placeholder { color: #9063b3 !important; opacity: 1; }
+.dark .style-gradient-glow { background-color: #1a1025 !important; color: #f0e5fa !important; }
+.dark .style-gradient-glow .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #261a35) 40%, #261a35) !important; color: color-mix(in srgb, var(--on-primary, #f0e5fa) 20%, #f0e5fa) !important; }
+.dark .style-gradient-glow .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1a1025) 15%, #1a1025) !important; color: #f0e5fa !important; }
+
+/* 6. Glassmorphism — fintech app, frosted glass over a gradient mesh, Space Grotesk. */
+.style-glassmorphism {
+  background: linear-gradient(135deg, #3170eb, #7d58ee 50%, #d127b3) !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 20px !important;
+  box-shadow: 0 16px 40px 0 rgba(20, 20, 50, 0.25) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-glassmorphism .chat-header { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.08)) 40%, rgba(255, 255, 255, 0.08)) !important; color: var(--on-primary, #ffffff) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }
+.style-glassmorphism .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.18)) 30%, rgba(255, 255, 255, 0.18)) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 14px !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
+.style-glassmorphism .user-bubble { background-color: var(--primary-color, rgba(255, 255, 255, 0.9)) !important; color: var(--on-primary, #39396b) !important; border: none !important; border-radius: 14px !important; }
+.style-glassmorphism .starter-chip { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.15)) 30%, rgba(255, 255, 255, 0.15)) !important; color: #ffffff !important; border-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.35)) 40%, rgba(255, 255, 255, 0.35)) !important; border-radius: 20px !important; font-weight: 500; }
+.style-glassmorphism .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.08)) 40%, rgba(255, 255, 255, 0.08)) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; }
+.style-glassmorphism .send-btn { background-color: var(--primary-color, rgba(255, 255, 255, 0.9)) !important; color: var(--on-primary, #39396b) !important; }
+.style-glassmorphism ::placeholder { color: rgba(255, 255, 255, 0.75) !important; opacity: 1; }
+
+/* 7. E-commerce — online shop, teal, order-aware, DM Sans. */
+.style-ecommerce {
+  background-color: #fdf9f2 !important;
+  color: #3a3226 !important;
+  border: 1px solid #e8ddd0 !important;
+  border-radius: 14px !important;
+  box-shadow: 0 14px 32px 0 rgba(15, 157, 140, 0.14) !important;
+  font-family: var(--font-dm-sans), sans-serif !important;
+}
+.style-ecommerce .chat-header { background-color: var(--primary-color, #0c8173) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-ecommerce .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f3efe6) 40%, #f3efe6) !important; color: color-mix(in srgb, var(--on-primary, #3a3226) 20%, #3a3226) !important; border: none !important; border-radius: 14px !important; }
+.style-ecommerce .user-bubble { background-color: var(--primary-color, #0c8173) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 14px !important; }
+.style-ecommerce .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #0c8173) 20%, #0c8173) !important; border-color: color-mix(in srgb, var(--primary-color, #cfe9e4) 55%, #cfe9e4) !important; border-radius: 16px !important; font-weight: 500; }
+.style-ecommerce .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fdf9f2) 15%, #fdf9f2) !important; color: #3a3226 !important; border-color: color-mix(in srgb, var(--primary-color, #e8ddd0) 40%, #e8ddd0) !important; border-radius: 14px !important; }
+.style-ecommerce .send-btn { background-color: var(--primary-color, #0c8173) !important; color: var(--on-primary, #ffffff) !important; }
+.style-ecommerce ::placeholder { color: #7d7159 !important; opacity: 1; }
+.dark .style-ecommerce { background-color: #1a1712 !important; color: #ede6d8 !important; border-color: #33291d !important; }
+.dark .style-ecommerce .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #241f17) 40%, #241f17) !important; color: color-mix(in srgb, var(--on-primary, #ede6d8) 20%, #ede6d8) !important; }
+.dark .style-ecommerce .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1a1712) 15%, #1a1712) !important; color: #ede6d8 !important; border-color: color-mix(in srgb, var(--primary-color, #33291d) 40%, #33291d) !important; }
+
+/* 8. Healthcare Calm — clinic, soft sage, serif (Lora). */
+.style-healthcare-calm {
+  background-color: #fbfcf9 !important;
+  color: #2f4235 !important;
+  border: 1px solid #dde8dd !important;
+  border-radius: 18px !important;
+  box-shadow: 0 12px 28px 0 rgba(111, 156, 125, 0.16) !important;
+  font-family: var(--font-lora), serif !important;
+}
+.style-healthcare-calm .chat-header { background-color: var(--primary-color, #eaf1e9) !important; color: var(--on-primary, #2f4235) !important; border-bottom: none !important; }
+.style-healthcare-calm .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #eaf1e9) 40%, #eaf1e9) !important; color: color-mix(in srgb, var(--on-primary, #2f4235) 20%, #2f4235) !important; border: none !important; border-radius: 14px !important; }
+.style-healthcare-calm .user-bubble { background-color: var(--primary-color, #567d62) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 14px !important; }
+.style-healthcare-calm .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #fbfcf9) 20%, #fbfcf9) !important; color: color-mix(in srgb, var(--on-primary, #4a6b52) 20%, #4a6b52) !important; border-color: color-mix(in srgb, var(--primary-color, #cfe0cf) 55%, #cfe0cf) !important; border-radius: 14px !important; font-weight: 500; }
+.style-healthcare-calm .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fbfcf9) 15%, #fbfcf9) !important; color: #2f4235 !important; border-color: color-mix(in srgb, var(--primary-color, #dde8dd) 40%, #dde8dd) !important; border-radius: 12px !important; }
+.style-healthcare-calm .send-btn { background-color: var(--primary-color, #567d62) !important; color: var(--on-primary, #ffffff) !important; }
+.style-healthcare-calm ::placeholder { color: #607b63 !important; opacity: 1; }
+.dark .style-healthcare-calm { background-color: #131a15 !important; color: #d9e8dc !important; border-color: #263429 !important; }
+.dark .style-healthcare-calm .chat-header { background-color: var(--primary-color, #1a2a1e) !important; color: var(--on-primary, #d9e8dc) !important; }
+.dark .style-healthcare-calm .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #1a2a1e) 40%, #1a2a1e) !important; color: color-mix(in srgb, var(--on-primary, #d9e8dc) 20%, #d9e8dc) !important; }
+.dark .style-healthcare-calm .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #131a15) 15%, #131a15) !important; color: #d9e8dc !important; border-color: color-mix(in srgb, var(--primary-color, #263429) 40%, #263429) !important; }
+
+/* 9. Neubrutalism — bold brand, thick borders, hard offset shadows, DM Sans. */
+.style-neubrutalism {
+  background-color: #ffffff !important;
+  color: #111111 !important;
+  border: 3px solid #111111 !important;
+  border-radius: 4px !important;
+  box-shadow: 10px 10px 0 0 #111111 !important;
+  font-family: var(--font-dm-sans), sans-serif !important;
+}
+/* Border color stays the signature solid black ink outline throughout
+   (not primaryColor-driven) — brutalism's thick black stroke is the
+   genre-defining structural language here, the same way its 3px root
+   border and 10px hard shadow above are, not an arbitrary color choice
+   that happens to currently be black. */
+.style-neubrutalism .chat-header { background-color: var(--primary-color, #ffde59) !important; color: var(--on-primary, #111111) !important; border-bottom: 3px solid #111111 !important; }
+.style-neubrutalism .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f2f2f2) 40%, #f2f2f2) !important; color: color-mix(in srgb, var(--on-primary, #111111) 20%, #111111) !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism .user-bubble { background-color: var(--primary-color, #ea0033) !important; color: var(--on-primary, #ffffff) !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #111111) 20%, #111111) !important; border: 2px solid #111111 !important; border-radius: 4px !important; font-weight: 600; }
+.style-neubrutalism .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 15%, #ffffff) !important; color: #111111 !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism .send-btn { background-color: var(--primary-color, #ea0033) !important; color: var(--on-primary, #ffffff) !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism ::placeholder { color: #666666 !important; opacity: 1; }
+.dark .style-neubrutalism { background-color: #1a1a1a !important; color: #f2f2f2 !important; border-color: #f2f2f2 !important; box-shadow: 10px 10px 0 0 #f2f2f2 !important; }
+.dark .style-neubrutalism .chat-header { border-bottom-color: #f2f2f2 !important; }
+.dark .style-neubrutalism .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #262626) 40%, #262626) !important; color: color-mix(in srgb, var(--on-primary, #f2f2f2) 20%, #f2f2f2) !important; border-color: #f2f2f2 !important; }
+.dark .style-neubrutalism .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1a1a1a) 15%, #1a1a1a) !important; color: #f2f2f2 !important; border-color: #f2f2f2 !important; }
+
+/* 10. Luxury Editorial — boutique, serif & gold, Playfair Display. */
+.style-luxury-editorial {
+  background-color: #fbf9f5 !important;
+  color: #2a251d !important;
+  border: 1px solid #c9a86a !important;
+  border-radius: 6px !important;
+  box-shadow: 0 18px 36px 0 rgba(0, 0, 0, 0.16) !important;
+  font-family: var(--font-playfair), serif !important;
+}
+.style-luxury-editorial .chat-header { background-color: var(--primary-color, #161412) !important; color: var(--on-primary, #f5efe3) !important; border-bottom: none !important; }
+.style-luxury-editorial .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f1ebdf) 40%, #f1ebdf) !important; color: color-mix(in srgb, var(--on-primary, #2a251d) 20%, #2a251d) !important; border: none !important; border-radius: 2px !important; }
+.style-luxury-editorial .user-bubble { background-color: var(--primary-color, #161412) !important; color: var(--on-primary, #f5efe3) !important; border: none !important; border-radius: 2px !important; }
+/* Border stays the signature gold rule (not primaryColor-driven) — same
+   reasoning as Neubrutalism's black ink outline: gold is this design's
+   own genre-defining structural language, not a swappable color. */
+.style-luxury-editorial .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #fbf9f5) 20%, #fbf9f5) !important; color: color-mix(in srgb, var(--on-primary, #2a251d) 20%, #2a251d) !important; border-color: #c9a86a !important; border-radius: 2px !important; font-weight: 500; }
+.style-luxury-editorial .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fbf9f5) 15%, #fbf9f5) !important; color: #2a251d !important; border-color: #ddd1b3 !important; border-radius: 2px !important; }
+.style-luxury-editorial .send-btn { background-color: var(--primary-color, #161412) !important; color: var(--on-primary, #f5efe3) !important; border-radius: 2px !important; }
+.style-luxury-editorial ::placeholder { color: #7d7156 !important; opacity: 1; }
+.dark .style-luxury-editorial { background-color: #14120f !important; color: #efe6d3 !important; border-color: #b08a3e !important; }
+.dark .style-luxury-editorial .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #201c16) 40%, #201c16) !important; color: color-mix(in srgb, var(--on-primary, #efe6d3) 20%, #efe6d3) !important; }
+.dark .style-luxury-editorial .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #14120f) 15%, #14120f) !important; color: #efe6d3 !important; border-color: #4a3f2a !important; }

package/src/widget-style.ts

@@ -0,0 +1,88 @@
+/**
+ * Maps old, now-removed widget style preset IDs to their closest current
+ * equivalent. The widget style system has been redesigned twice:
+ *   1. An original 9-preset set (glassmorphism, liquid, neumorphism,
+ *      brutalism, claymorphism, bento, retro, aurora, minimalist)
+ *   2. A brief 5-preset set (minimalist, elevated, frosted, bold, contrast)
+ *   3. The current 10-preset set, ported 1:1 from a real design gallery
+ *      (minimal, playful, corporate, dark-sleek, gradient-glow,
+ *      glassmorphism, ecommerce, healthcare-calm, neubrutalism,
+ *      luxury-editorial) — see globals.css for the full rationale.
+ * Existing bots in the database may still have any of the older IDs stored
+ * in widget_style; without this mapping they'd render with no matching CSS
+ * class at all (unstyled).
+ */
+const LEGACY_STYLE_MAP: Record<string, string> = {
+  // Original 9-preset set
+  liquid: "glassmorphism",
+  neumorphism: "corporate",
+  claymorphism: "playful",
+  bento: "minimal",
+  brutalism: "neubrutalism",
+  retro: "dark-sleek",
+  aurora: "gradient-glow",
+  // Brief 5-preset set
+  minimalist: "minimal",
+  elevated: "corporate",
+  frosted: "glassmorphism",
+  bold: "gradient-glow",
+  contrast: "dark-sleek",
+};
+
+const CURRENT_STYLES = new Set([
+  "minimal",
+  "playful",
+  "corporate",
+  "dark-sleek",
+  "gradient-glow",
+  "glassmorphism",
+  "ecommerce",
+  "healthcare-calm",
+  "neubrutalism",
+  "luxury-editorial",
+]);
+
+export function normalizeWidgetStyle(id: string | null | undefined): string {
+  if (!id) return "minimal";
+  if (CURRENT_STYLES.has(id)) return id;
+  return LEGACY_STYLE_MAP[id] || "minimal";
+}
+
+/**
+ * Each design's default launcher-button look. Mirrors LAUNCHER_STYLES in
+ * public/widget.js exactly — kept in sync by hand since widget.js is a
+ * separate unbundled script that can't import from this file.
+ */
+export const LAUNCHER_STYLES: Record<string, { bg: string; shadow: string; dot: string }> = {
+  minimal: { bg: "#1c1a15", shadow: "0 6px 16px rgba(0,0,0,.18)", dot: "#f3f2ee" },
+  playful: { bg: "#ff8a5c", shadow: "0 8px 20px rgba(255,138,92,.45)", dot: "#ffffff" },
+  corporate: { bg: "#1c2e4a", shadow: "0 6px 16px rgba(28,46,74,.3)", dot: "#8fb0dc" },
+  "dark-sleek": { bg: "#14141a", shadow: "0 0 24px rgba(0,229,199,.35)", dot: "#00e5c7" },
+  "gradient-glow": { bg: "linear-gradient(135deg,#a855f7,#ec4899)", shadow: "0 10px 26px rgba(168,85,247,.4)", dot: "#ffffff" },
+  glassmorphism: { bg: "rgba(255,255,255,.25)", shadow: "0 8px 24px rgba(0,0,0,.2)", dot: "#ffffff" },
+  ecommerce: { bg: "#0f9d8c", shadow: "0 8px 20px rgba(15,157,140,.35)", dot: "#ffffff" },
+  "healthcare-calm": { bg: "#6f9c7d", shadow: "0 8px 20px rgba(111,156,125,.35)", dot: "#f4f7f3" },
+  neubrutalism: { bg: "#111111", shadow: "5px 5px 0 0 #111111", dot: "#ffde59" },
+  "luxury-editorial": { bg: "#161412", shadow: "0 8px 22px rgba(0,0,0,.3)", dot: "#b08a3e" },
+};
+
+/**
+ * Each design's own chat-panel corner radius (its .style-X { border-radius }
+ * in globals.css). Mirrors PANEL_RADIUS in public/widget.js exactly — kept
+ * in sync by hand for the same reason LAUNCHER_STYLES above is. The outer
+ * host div/iframe around the embedded panel matches this exactly (instead
+ * of a flat 0px "always smaller" safety net) so there's no radius mismatch
+ * at the corner for anti-aliasing to expose as a hairline seam.
+ */
+export const PANEL_RADIUS: Record<string, string> = {
+  minimal: "18px",
+  playful: "28px",
+  corporate: "10px",
+  "dark-sleek": "16px",
+  "gradient-glow": "24px",
+  glassmorphism: "20px",
+  ecommerce: "14px",
+  "healthcare-calm": "18px",
+  neubrutalism: "4px",
+  "luxury-editorial": "6px",
+};