Now let me build this premium dark-themed sports match chat. I'll create the components and update the theme.

Now I need to add the custom color tokens to the @theme inline block:

Now let me update the layout with proper metadata and fonts:

Now update the font references in globals.css:

Now let me build the components. I'll create the match header, event items, chat messages, and the input bar:

Now let me create the main page that composes everything together:

Now let me add smooth scrollbar styling and some polish to globals:

Now let me check if the Goal icon actually exists in lucide-react since I used it in the match event component:

The Goal icon doesn't exist in lucide-react. Let me fix the match event to use proper icons:

Now for the goal icon, let me use a custom SVG football icon instead:

Let me verify the page looks correct by checking everything compiles. Let me also verify no import issues:

Everything looks solid. I've completely redesigned the match chat with a premium dark sports aesthetic. Here's what changed:

Dark theme with a deep navy-tinted background and a vibrant green accent color for live indicators and goal events — giving it that FotMob/premium sports app feel instead of the Skype messenger look. The match header now shows a proper scoreboard with team badges, live pulse indicator, and the score in bold monospace type. Match events (goals, offsides) are visually distinct with color-coded borders and icons. User comments have clean avatar circles, hoverable reaction pills that toggle on click, and subtle hover states. The message input uses a modern rounded pill shape with a glowing send button. The whole thing is wrapped in a floating card with a thin scrollbar and stacked avatar indicators showing who's watching.