修复: 用户消息气泡头像位置(MessageItem提取后scoped样式缺失)

- MessageItem.vue 提取时未带 scoped CSS,MessageList 的 scoped 样式不穿透子组件

- 补齐用户消息 flex-direction:row-reverse(头像靠右)+ 完整 scoped 样式

src/components/ai/MessageItem.vue

@@ -169,3 +169,133 @@ function imgAlt(img: ImageContentPart): string {
     </div>
   </div>
 </template>
+
+<style scoped>
+/* 用户消息:头像在右(整条靠右) */
+.ai-msg-user {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  flex-direction: row-reverse;
+}
+/* AI 消息:头像在左 */
+.ai-msg-ai {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+/* 头像通用 */
+.ai-msg-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ai-msg-avatar--user {
+  background: var(--df-info-bg, rgba(100,181,246,0.15));
+  color: var(--df-info, #64b5f6);
+}
+.ai-msg-avatar--ai {
+  background: var(--df-accent-bg, rgba(108,99,255,0.15));
+  color: var(--df-accent, #6c63ff);
+}
+/* 气泡通用 */
+.ai-msg-bubble {
+  border-radius: 10px;
+  padding: 8px 12px;
+  word-break: break-word;
+  max-width: 80%;
+}
+.ai-msg-bubble--user {
+  background: var(--df-info-bg, rgba(100,181,246,0.1));
+  color: var(--df-text);
+}
+.ai-msg-bubble--ai {
+  background: var(--df-bg-secondary, #1f1f1f);
+  color: var(--df-text);
+}
+.ai-msg-bubble--error {
+  border: 1px solid var(--df-danger, #f44336);
+}
+/* chip */
+.ai-msg-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  margin: 0 2px;
+  background: var(--df-accent-bg, rgba(108,99,255,0.1));
+  color: var(--df-accent, #6c63ff);
+}
+/* 图片 */
+.ai-msg-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+.ai-msg-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 6px;
+}
+/* 复制按钮 */
+.ai-copy-btn {
+  opacity: 0;
+  transition: opacity 0.15s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--df-text-dim);
+}
+.ai-msg-user:hover .ai-copy-btn,
+.ai-msg-ai:hover .ai-copy-btn {
+  opacity: 1;
+}
+/* 操作按钮区 */
+.ai-msg-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+.ai-regen-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--df-text-dim);
+}
+.ai-regen-btn:hover {
+  color: var(--df-text);
+}
+/* model badge */
+.ai-msg-model-badge {
+  font-size: 10px;
+  color: var(--df-text-dim);
+  margin-left: 4px;
+}
+/* 光标 */
+.ai-cursor-blink {
+  animation: blink 1s step-end infinite;
+  color: var(--df-accent);
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+/* 系统消息 */
+.ai-msg-system {
+  padding: 8px 12px;
+  border-left: 3px solid var(--df-accent);
+  background: var(--df-bg-secondary);
+  border-radius: 4px;
+}
+.ai-msg-system-label {
+  font-size: 11px;
+  color: var(--df-text-dim);
+  margin-bottom: 4px;
+}
+</style>