Fix: Resolve transparent UI issue in Copilot Light Mode

[taeminlee]

Description:

This PR fixes an issue where the Chainlit Copilot UI appeared transparent when using Light Mode.

Problem:

The CSS variables for the default theme (Light Mode) were targeting the #shadow-root-container ID, but the actual container element uses the ID #cl-shadow-root. As a result, the base styles were not being applied, causing transparency issues. Dark Mode was unaffected as it relies on class-specific overrides, though the selector needed refinement there as well.

(before)

Changes:

• Updated the CSS selector from #shadow-root-container to #cl-shadow-root to correctly target the Copilot container.
• Applied the base CSS variables to #cl-shadow-root as the default (Light Mode) state.
• Refactored .dark to #cl-shadow-root.dark to strictly scope the dark theme styles to the shadow root container.

Verification:

I have verified that the UI renders correctly in both Light and Dark modes with these changes.

(after)

---

Summary by cubic

Fixes Copilot transparency in Light Mode by applying base CSS variables to the correct shadow root container. Dark Mode styles are scoped to the container for consistent theming.

• Bug Fixes
  • Target #cl-shadow-root for base (Light Mode) variables.
  • Scope dark theme to #cl-shadow-root.dark; add #cl-shadow-root.light for explicit theming.
  • Verified correct rendering in both Light and Dark modes.

^{Written for commit 4cf9655. Summary will update on new commits.}

[cubic-dev-ai]

No issues found across 1 file

[github-actions]

This PR is stale because it has been open for 14 days with no activity.