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

src/app/features/call/CallOverlay.css.ts

@@ -54,6 +54,53 @@ export const DockIndicator = style({
   borderLeft: `2px dashed ${color.Primary.Main}`,
 });
 
+export const SidebarDockIndicator = style({
+  position: 'fixed',
+  left: toRem(68), // After space panel (68px)
+  bottom: 0,
+  width: toRem(256), // Room list panel width
+  height: toRem(120),
+  backgroundColor: color.Primary.Container,
+  opacity: 0.5,
+  zIndex: 9998,
+  pointerEvents: 'none',
+  borderTop: `2px dashed ${color.Primary.Main}`,
+  borderRight: `2px dashed ${color.Primary.Main}`,
+});
+
+export const SidebarDockedCallContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S200,
+  padding: config.space.S200,
+  backgroundColor: color.Surface.Container,
+  borderTop: `1px solid ${color.Surface.ContainerLine}`,
+  marginTop: 'auto',
+});
+
+export const SidebarDockedCallHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: config.space.S100,
+  color: color.Surface.OnContainer,
+  cursor: 'grab',
+  padding: config.space.S100,
+  borderRadius: config.radii.R200,
+  selectors: {
+    '&:hover': {
+      backgroundColor: color.Surface.ContainerHover,
+    },
+  },
+});
+
+export const SidebarDockedCallControls = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: config.space.S100,
+});
+
 export const DockedCallPanelLayout = style({
   width: toRem(266),
   height: '100%',