Update style.css

style.css

@@ -1,26 +1,46 @@
-h1 {
-  text-align: center;
-  display: block;
+h1 { 
+    text-align: center; 
+    display: block;
 }
 
-#chatbox {
-  height: 800px;  /* 设置你想要的高度，可以根据需要调整 */
-  overflow-y: auto;  /* 允许垂直滚动 */
-  padding: 10px;  /* 设置内边距，提供更好的可读性 */
-  border: 1px solid #ccc;  /* 添加边框，更好地区分Chatbox */
-  border-radius: 5px;  /* 设置边框圆角 */
+#duplicate-button { 
+    margin: auto; 
+    color: white; 
+    background: #1565c0; 
+    border-radius: 100vh;
 }
 
+.contain { 
+    max-width: 900px; 
+    margin: auto; 
+    padding-top: 1.5rem;
+}
+
+/* 新增：增加聊天框高度 */
+.chatbox-container {
+    height: 80vh; /* 视窗高度的80% */
+    overflow-y: auto; /* 允许垂直滚动 */
+}
+
+/* 修改：增加聊天消息的最大高度 */
+.message {
+    max-height: none; /* 移除最大高度限制 */
+}
+
+/* 优化滚动条样式 */
+.chatbox-container::-webkit-scrollbar {
+    width: 10px;
+}
 
-#duplicate-button {
-  margin: auto;
-  color: white;
-  background: #1565c0;
-  border-radius: 100vh;
+.chatbox-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-.contain {
-  max-width: 900px;
-  margin: auto;
-  padding-top: 1.5rem;
+.chatbox-container::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 5px;
 }
+
+.chatbox-container::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}