feat: implement sidebar docked call panel with participant management and sync status handling

src/app/components/title-bar/TitleBar.css.ts

@@ -75,3 +75,33 @@ export const TitleBarDragRegion = style({
   WebkitAppRegion: 'drag',
   color: color.Surface.OnContainer,
 });
+
+export const SyncStatusBadge = style({
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+  padding: `${config.space.S100} ${config.space.S300}`,
+  borderRadius: config.radii.R300,
+  fontSize: '11px',
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  zIndex: 1001,
+  pointerEvents: 'none',
+  WebkitAppRegion: 'no-drag',
+});
+
+export const SyncStatusSuccess = style({
+  backgroundColor: color.Success.Container,
+  color: color.Success.OnContainer,
+});
+
+export const SyncStatusWarning = style({
+  backgroundColor: color.Warning.Container,
+  color: color.Warning.OnContainer,
+});
+
+export const SyncStatusCritical = style({
+  backgroundColor: color.Critical.Container,
+  color: color.Critical.OnContainer,
+});