Add dark mode and mobile support to inbox component

[BernardGatt]

Summary

• Hooks up the inbox component to the SDK's colorScheme config so both Jist template content and the inbox chrome (button, panel, badge, dividers) respect dark mode
• Deep-merges sparse patterns.modes.dark.inbox branding overrides into the base inbox pattern when dark mode is active
• Adds responsive panel layout for narrow viewports — below 424px the panel fills the screen with 12px side margins
• Destroys inbox UI on clearUserToken() so it's cleaned up on logout

Dark mode details

Jist templates: Sets the mode property on jist-template elements based on the resolved color scheme (default → light, system → auto, auto → resolved from parent CSS). This tells Jist when to apply its theme.modes.dark overrides.

Inbox chrome: Reads patterns.modes.dark.inbox from the branding payload and deep-merges partial overrides into the base InboxPattern. Only overridden properties change — everything else is preserved from the base pattern.

Reactivity: Dispatches a colorSchemeChanged event when the scheme changes (explicit setColorScheme calls or parent CSS changes in auto mode). A matchMedia listener handles OS preference changes for system mode. Both trigger a full inbox re-render with the correct pattern.

SVG icon: Adds a CSS rule (fill: currentColor) so SVG paths with hardcoded fill attributes inherit from the button's color style, which is set by the branding config.

Test plan

• Verify inbox renders with light branding colors when colorScheme is default
• Verify inbox renders with dark branding overrides when colorScheme is auto and the parent site is in dark mode
• Verify inbox renders with dark branding overrides when colorScheme is system and OS is in dark mode
• Toggle OS dark mode with colorScheme: 'system' — inbox button, panel, badge, and Jist content should update
• Toggle parent site theme with colorScheme: 'auto' — same behavior
• Call Gist.setColorScheme('dark')/'light' at runtime — inbox updates immediately
• Verify partial dark overrides (e.g. only background and borderColor) don't clobber unoverridden properties
• Verify floating icon SVG color changes between light and dark modes
• Resize viewport below 424px — panel should fill width with 12px side margins
• Call Gist.clearUserToken() — inbox button and panel should be removed from DOM

---

Note

Medium Risk
Touches shared color-scheme resolution and live DOM re-renders on theme changes; logout now removes inbox UI, which is intentional but user-visible.

Overview
Wires the inbox UI to the SDK colorScheme so Jist message rows and inbox chrome (button, panel, badge) follow light/dark branding.

Dark mode: Exports resolveRendererColorScheme and uses it in the inbox manager to set jist-template mode (light / dark / auto). Adds patterns.modes.dark.inbox on Branding with DeepPartial deep-merge into the base InboxPattern when dark is active (explicit dark, or system via matchMedia). message-component-manager now dispatches colorSchemeChanged on scheme updates; the inbox listens and re-renders; OS preference changes also trigger updates for system.

Other: Narrow viewports get a responsive panel (≤424px, 12px side margins). Inbox SVG fills use currentColor. clearUserToken() calls destroyInbox() so the widget is removed on logout. Tests cover color-scheme behavior and dark override merging.

^{Reviewed by Cursor Bugbot for commit 54152bc. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 561dd98. Configure here.}