Update styles.py

styles.py

@@ -90,11 +90,11 @@ position:absolute; right:16px; top:10px; font-weight:700; font-size:28px; letter
 }
 
 /* 聊天组件细节：头像更小、气泡更易读 */
-.custom-chatbot .avatar-image{
-  width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
-  border-radius:50% !important; border:2px solid #fff !important; background:#f6f8fb !important; flex-shrink:0 !important;
-  box-shadow: 0 2px 6px rgba(0,0,0,.25);
-}
+# .custom-chatbot .avatar-image{
+#   width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
+#   border-radius:50% !important; border:2px solid #fff !important; background:#f6f8fb !important; flex-shrink:0 !important;
+#   box-shadow: 0 2px 6px rgba(0,0,0,.25);
+# }
 .custom-chatbot .message{ font-size:16px; line-height:1.6; color:var(--ink); word-break:break-word; }
 .custom-chatbot .message.user{ background: rgba(255,255,255,.08) !important; }
 .custom-chatbot .message.bot{  background: rgba(0,0,0,.20) !important; }
@@ -154,6 +154,53 @@ position:absolute; right:16px; top:10px; font-weight:700; font-size:28px; letter
 }
 
 
+/* === Chatbot 头像尺寸 & 对齐（稳定版）=== */
+
+/* 1) 用容器来做圆形与描边，更不易错位 */
+.custom-chatbot .avatar{
+  width: 40px;                 /* 想更大改成 44px */
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  border-radius: 9999px;
+  overflow: hidden;            /* 把内部图像裁剪成圆形 */
+  border: 2px solid #ffffffcc; /* 半透明白描边 */
+  box-shadow: 0 2px 6px rgba(0,0,0,.25);
+  background: transparent;
+  flex-shrink: 0;
+  align-self: flex-start;      /* 与气泡顶部对齐，避免“头像偏下” */
+  margin-top: 2px;             /* 轻微上移，让视觉更齐 */
+}
+
+/* 2) 图片填充容器，避免被拉伸/留白/偏移 */
+.custom-chatbot .avatar-image{
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;           /* 等比铺满 */
+  object-position: 50% 50%;    /* 居中人物脸部 */
+  display: block;
+  background: transparent !important;
+  border: none !important;     /* 边框交给容器处理 */
+}
+
+/* 3) 气泡与头像的相对布局再细调一下 */
+.custom-chatbot .message{
+  align-items: flex-start;     /* 顶部对齐，避免头像和气泡错层 */
+  gap: 10px;                   /* 头像与气泡的水平间距 */
+}
+.custom-chatbot .message .message-content{
+  margin-top: 2px;             /* 让气泡首行与头像更齐平 */
+}
+
+/* 4) 移动端略微缩小 */
+@media (max-width: 820px){
+  .custom-chatbot .avatar{
+    width: 30px; height: 30px; min-width: 30px; min-height: 30px;
+    border-width: 1.5px;
+  }
+}
+
+
 
 """