Idea: use CSS layers

[jamesarosen]

import '@copilotkit/react-ui/styles.css' defines CSS in the topmost unnamed CSS layer. This works:

import '@copilotkit/react-ui/styles.css'
import 'my-copilotkit-overrides.css'

But this doesn't (using NextJS semantics, but also applies to other frameworks):

// app/layout.tsx
import 'my-copilotkit-overrides.css'

// app/chat/page.tsx
import '@copilotkit/react-ui/styles.css'

because the root layout imports the "overrides" before the page.

If CopilotKit were to define its default styles in a copilotkit CSS layer, it would be easy for applications to define where that layer exists and how to apply overrides. For example

/* globals.css */
@layer base, copilotkit, components, utilities;

@layer components {
  .copilotKitInput {
    margin: 2rem;
  }
}

Now my overrides win!

If folks are interested, I'd be happy to submit a pull request.