样式微调

pages/index/index.vue

@@ -468,26 +468,30 @@ export default {
 <style lang="scss" scoped>
 .chat-container {
   width: 100%;
-  // max-width: 500px;
   display: flex;
   flex-direction: column;
   background-color: #f8f8f8;
   font-family: Arial, sans-serif;
   min-height: 500px;
+  box-sizing: border-box;
 }
 
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: 12px;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .message-wrapper {
   display: flex;
   margin-bottom: 16px;
   max-width: 80%;
+  width: auto;
+  align-items: flex-start;
 }
 
 .agent-message {
@@ -497,6 +501,8 @@ export default {
 .user-message {
   align-self: flex-end;
   flex-direction: row-reverse;
+  justify-content: flex-end;
+  width: auto;
 }
 
 .avatar {
@@ -504,26 +510,32 @@ export default {
   display: flex;
   padding-right: 5px;
   padding-left: 0;
-  margin-bottom: 15px;
+  margin-bottom: 0;
+  flex-shrink: 0;
+  width: 36px;
 }
 
 .avatar img {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
 }
 
 .message-content {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  width: auto;
 }
 
 .message-text {
-  padding: 12px;
+  padding: 10px 12px;
   border-radius: 18px;
   font-size: 14px;
   line-height: 1.4;
   word-break: break-word;
+  display: inline-block;
+  max-width: 100%;
 }
 
 .agent-message .message-text {
@@ -550,10 +562,14 @@ export default {
   color: white;
   border: none;
   border-radius: 18px;
-  padding: 1px 16px;
+  padding: 1px 12px;
   font-size: 14px;
   cursor: pointer;
   transition: background-color 0.2s;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
 }
 
 .option-button:hover {
@@ -564,6 +580,64 @@ export default {
   background-color: #2a70c2;
 }
 
+/* Media queries for responsive design */
+@media screen and (max-width: 768px) {
+  .chat-messages {
+    padding: 10px;
+  }
+
+  .message-wrapper {
+    max-width: 90%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .chat-messages {
+    padding: 8px;
+  }
+
+  .message-wrapper {
+    max-width: 95%;
+  }
+
+  .message-text {
+    padding: 8px 10px;
+    font-size: 13px;
+  }
+
+  .avatar img {
+    width: 28px;
+    height: 28px;
+  }
+
+  .options-container {
+    gap: 6px;
+  }
+
+  .option-button {
+    padding: 1px 10px;
+    font-size: 13px;
+  }
+}
+
+/* Fix for iOS Safari viewport height issues */
+@supports (-webkit-touch-callout: none) {
+  .chat-container {
+    min-height: -webkit-fill-available;
+  }
+}
+
+/* Fix for potential input and button styling on mobile */
+input, button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+/* Ensure touch targets are big enough */
+.option-button {
+  min-height: 32px;
+}
 .item {
   display: flex;
   flex-direction: column;