Variable WIDGET_SHADOW_STYLESConst
WIDGET_SHADOW_STYLES: "\n:host {\n /* base semantic tokens (shadow root needs its own — it can't see the app :root) */\n --mj-text-primary: #1f2933;\n --mj-text-secondary: #52606d;\n --mj-text-inverse: #ffffff;\n --mj-bg-surface: #ffffff;\n --mj-bg-surface-card: #f5f7fa;\n --mj-bg-surface-sunken: #eef1f5;\n --mj-border-default: #e2e8f0;\n --mj-brand-primary: #264faf;\n --mj-brand-primary-hover: #1d3f8c;\n --mj-status-error: #dc2626;\n --mj-status-error-text: #b91c1c;\n --mj-status-error-bg: #fef2f2;\n\n /* chat tokens (mirror the Angular bootstrap names) */\n --mj-chat-bubble-user-bg: var(--mj-brand-primary);\n --mj-chat-bubble-user-text: var(--mj-text-inverse);\n --mj-chat-bubble-agent-bg: var(--mj-bg-surface-card);\n --mj-chat-bubble-agent-text: var(--mj-text-primary);\n --mj-chat-composer-bg: var(--mj-bg-surface);\n --mj-chat-composer-border: var(--mj-border-default);\n\n all: initial;\n font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n color: var(--mj-text-primary);\n}\n\n* { box-sizing: border-box; }\n\n.mj-widget-launcher {\n position: fixed; right: 20px; bottom: 20px;\n width: 56px; height: 56px; border-radius: 50%;\n background: var(--mj-brand-primary); color: var(--mj-text-inverse);\n border: none; cursor: pointer; font-size: 24px;\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 25%, transparent);\n}\n.mj-widget-launcher:hover { background: var(--mj-brand-primary-hover); }\n\n.mj-widget-panel {\n position: fixed; right: 20px; bottom: 88px;\n width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px);\n display: flex; flex-direction: column;\n background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n border-radius: 12px; overflow: hidden;\n box-shadow: 0 8px 28px color-mix(in srgb, var(--mj-text-primary) 22%, transparent);\n}\n.mj-widget-panel[hidden] { display: none; }\n\n.mj-widget-header {\n padding: 12px 16px; background: var(--mj-brand-primary); color: var(--mj-text-inverse);\n display: flex; align-items: center; justify-content: space-between; font-weight: 600;\n}\n.mj-widget-close { background: none; border: none; color: var(--mj-text-inverse); cursor: pointer; font-size: 18px; }\n\n.mj-widget-transcript {\n flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;\n background: var(--mj-bg-surface-sunken);\n}\n.mj-widget-empty { color: var(--mj-text-secondary); text-align: center; margin: auto; padding: 16px; }\n\n.mj-widget-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }\n.mj-widget-msg.user { align-self: flex-end; background: var(--mj-chat-bubble-user-bg); color: var(--mj-chat-bubble-user-text); }\n.mj-widget-msg.agent { align-self: flex-start; background: var(--mj-chat-bubble-agent-bg); color: var(--mj-chat-bubble-agent-text); }\n.mj-widget-msg.system { align-self: center; color: var(--mj-status-error-text); font-size: 0.85em; }\n\n.mj-widget-progress { align-self: flex-start; color: var(--mj-text-secondary); font-size: 0.85em; font-style: italic; }\n.mj-widget-progress[hidden] { display: none; }\n\n/* Interactive-channel demonstration surface (Phase 2 — e.g. the Whiteboard the agent draws on during voice). */\n.mj-widget-surface { display: flex; flex-direction: column; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n.mj-widget-surface[hidden] { display: none; }\n.mj-widget-surface-title { padding: 6px 12px; font-size: 0.8em; font-weight: 600; color: var(--mj-text-secondary); background: var(--mj-bg-surface-card); }\n.mj-widget-surface-host { height: 200px; width: 100%; background: var(--mj-bg-surface); overflow: hidden; }\n.mj-widget-surface-host svg { display: block; width: 100%; height: 100%; }\n\n.mj-widget-composer {\n display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--mj-chat-composer-border);\n background: var(--mj-chat-composer-bg);\n}\n.mj-widget-input {\n flex: 1; resize: none; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n border-radius: 8px; font: inherit; color: var(--mj-text-primary); background: var(--mj-bg-surface);\n}\n.mj-widget-send {\n background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none;\n border-radius: 8px; padding: 0 14px; cursor: pointer; font: inherit;\n}\n.mj-widget-send:disabled { opacity: 0.5; cursor: default; }\n\n/* Connection-lost banner (graceful degradation, W6) */\n.mj-widget-banner {\n display: flex; align-items: center; gap: 8px; padding: 8px 12px;\n background: var(--mj-status-error-bg); color: var(--mj-status-error-text);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n font-size: 0.85em;\n}\n.mj-widget-banner[hidden] { display: none; }\n.mj-widget-banner-text { flex: 1; }\n.mj-widget-banner-retry {\n background: var(--mj-status-error); color: var(--mj-text-inverse); border: none;\n border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 0.95em;\n}\n.mj-widget-banner-retry:hover { background: var(--mj-status-error-text); }\n.mj-widget-memory-notice {\n display: flex; align-items: center; gap: 8px; padding: 6px 12px;\n background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n border-top: 1px solid var(--mj-border-default);\n font-size: 0.75em;\n}\n.mj-widget-memory-notice-text { flex: 1; }\n.mj-widget-forget {\n background: none; color: var(--mj-text-secondary); border: none;\n padding: 2px 4px; cursor: pointer; font: inherit; font-size: 1em;\n text-decoration: underline; white-space: nowrap;\n}\n.mj-widget-forget:hover { color: var(--mj-text-primary); }\n.mj-widget-forget:disabled { opacity: 0.6; cursor: default; }\n" = ...
The
:host-scoped token defaults + component CSS for the widget shadow root.