feat: Themes added, 4 themes available (3 dark, 1 light)

frontend/src/components/ChatPopover.tsx

@@ -35,7 +35,7 @@ export function ChatPanel({ msgs, online, myCall, onSend, onClose }: {
   return (
     <div className="h-full flex flex-col rounded-xl border border-border bg-card shadow-sm overflow-hidden">
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border/60 bg-muted/30 shrink-0">
-        <MessageSquare className="size-4 text-sky-600" />
+        <MessageSquare className="size-4 text-info" />
         <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">{t('chatp.chat')}</span>
         <span className="flex-1" />
         {/* Online count — hover to see who's connected. */}
@@ -66,7 +66,7 @@ export function ChatPanel({ msgs, online, myCall, onSend, onClose }: {
           const mine = m.operator.toUpperCase() === me;
           return (
             <div key={m.id} className={cn('flex flex-col', mine && 'items-end')}>
-              <div className={cn('max-w-[85%] rounded-lg px-2 py-1', mine ? 'bg-sky-100 text-sky-900' : 'bg-muted')}>
+              <div className={cn('max-w-[85%] rounded-lg px-2 py-1', mine ? 'bg-info-muted text-info-muted-foreground' : 'bg-muted')}>
                 {!mine && <span className="font-mono font-bold text-[10px] text-primary mr-1">{m.operator}</span>}
                 <span className="whitespace-pre-wrap break-words">{m.message}</span>
               </div>