docs: rebuild README previews from 2x captures

Rework the product preview section around three real screens captured at
deviceScaleFactor 2 instead of the previous 900 px shots taken at a 75%
browser zoom, which read as blurry.

- capture the conversation workspace, the agent customization page and the
  visitor widget, then crop each one to a consistent frame
- drop the tight 480 px widget crop and its leftover gray strip
- restructure the preview section with one lead line and a caption per shot,
  and fold the local start-up steps into a shorter quick start
- keep the browser overlay out of the captures and note the method in the
  asset manifest
- finish the visible ReplyPier rename (sidebar wordmark, widget footer,
  page title, login screen, demo page) so screenshots and UI agree

frontend/src/components/agent/AgentChatPreviewPanel.vue

@@ -595,7 +595,7 @@ const handleInitiationClick = () => {
             <!-- Powered by footer for welcome message -->
             <div class="powered-by-welcome" :style="messageNameStyles">
                 <BrandMark class="chattermate-logo" :size="20" />
-                <span class="cm-powered-prefix">技术支持：</span><strong class="cm-brand">ChatterMate</strong>
+                <span class="cm-powered-prefix">技术支持：</span><strong class="cm-brand">ReplyPier</strong>
             </div>
         </div>
 
@@ -693,7 +693,7 @@ const handleInitiationClick = () => {
             <!-- Add powered by footer -->
             <div class="powered-by" :style="messageNameStyles">
                 <BrandMark class="chattermate-logo" :size="20" />
-                <span class="cm-powered-prefix">技术支持：</span><strong class="cm-brand">ChatterMate</strong>
+                <span class="cm-powered-prefix">技术支持：</span><strong class="cm-brand">ReplyPier</strong>
             </div>
         </div>
 

frontend/src/components/layout/AppSidebar.vue

@@ -67,7 +67,7 @@ const initial = computed(() => (props.userName || '·').trim().slice(0, 1))
         <div class="brand">
             <BrandMark :size="34" />
             <div v-if="!isCollapsed" class="brand-text">
-                <span class="wordmark">Chatter<i>Mate</i></span>
+                <span class="wordmark">Reply<i>Pier</i></span>
                 <span class="brand-sub">智能客服工作台</span>
             </div>
             <SidebarToggle :isCollapsed="isCollapsed" @toggle="emit('toggle')" />