fix: use tinted backgrounds for message priority badges

Priority badges had identical bg and text colors (both solid destructive
red for urgent), creating oversized solid-color blocks. Use 15% tinted
backgrounds so text remains readable and badges appear as subtle pills.

src/renderer/components/communication/MessageItem.tsx

@@ -14,9 +14,9 @@ import { DEPARTMENT_COLORS } from "@shared/constants"
 
 
 const priorityConfig: Record<string, { label: string; color: string; bg: string }> = {
-  urgent: { label: "Urgent", color: "var(--destructive)", bg: "var(--destructive)" },
-  normal: { label: "Normal", color: "var(--muted-foreground)", bg: "var(--muted-foreground)" },
-  low: { label: "Low", color: "var(--muted-foreground)", bg: "var(--muted-foreground)" },
+  urgent: { label: "Urgent", color: "var(--destructive)", bg: "color-mix(in oklch, var(--destructive) 15%, transparent)" },
+  normal: { label: "Normal", color: "var(--muted-foreground)", bg: "color-mix(in oklch, var(--muted-foreground) 15%, transparent)" },
+  low: { label: "Low", color: "var(--muted-foreground)", bg: "color-mix(in oklch, var(--muted-foreground) 15%, transparent)" },
 }
 
 function getDepartmentColor(department: DepartmentId | null | undefined): string {