diff --git a/src/components/chat.css b/src/components/chat.css
new file mode 100644
index 0000000..b02d961
--- /dev/null
+++ b/src/components/chat.css
@@ -0,0 +1,216 @@
+/* chat.css */
+.chatbox-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.chatbox-header {
+    padding: 16px;
+    background-color: #f0f5ff;
+    border-bottom: 1px solid #adc6ff;
+    text-align: center;
+}
+
+.chatbox-content {
+    flex: 1;
+    padding: 16px;
+    background-color: #fff;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #91d5ff transparent;
+}
+
+.chatbox-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chatbox-content::-webkit-scrollbar-thumb {
+    background-color: #91d5ff;
+    border-radius: 4px;
+}
+
+.chatbox-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.no-messages {
+    color: #999;
+    text-align: center;
+    margin-top: 40px;
+    font-size: 14px;
+}
+
+.chat-message {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 10px;
+    gap: 8px;
+    max-width: 100%;
+}
+
+.chat-message.sender {
+    justify-content: flex-end;
+}
+
+.chat-message.receiver {
+    justify-content: flex-start;
+}
+
+.message-bubble-wrapper {
+    max-width: 75%;
+}
+
+.message-bubble {
+    padding: 10px 14px;
+    border-radius: 14px;
+    font-size: 14px;
+    word-break: break-word;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.chat-message.sender .message-bubble {
+    background-color: #69c0ff;
+    color: #fff;
+    border-bottom-right-radius: 0;
+}
+
+.chat-message.receiver .message-bubble {
+    background-color: #e6f7ff;
+    color: #000;
+    border-bottom-left-radius: 0;
+}
+
+.message-time {
+    font-size: 10px;
+    color: #666;
+    margin-top: 4px;
+    text-align: right;
+}
+
+.avatar {
+    flex-shrink: 0;
+    user-select: none;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.chatbox-footer {
+    display: flex;
+    padding: 12px;
+    border-top: 1px solid #f0f0f0;
+    background-color: #fff;
+    gap: 8px;
+    align-items: flex-end;
+}
+
+.chat-input {
+    flex: 1;
+    border-radius: 8px;
+    resize: none;
+}
+
+.send-btn {
+    min-width: 80px;
+    border-radius: 8px;
+    height: 44px;
+}
+
+.emoji-btn {
+    background: white;
+    border: none;
+    padding: 6px;
+    border-radius: 8px;
+    color: #666;
+    font-size: 18px;
+    cursor: pointer;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.emoji-btn:hover {
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+.emoji-picker {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 6px;
+    padding: 10px;
+    width: 280px;
+    max-height: 260px;
+    overflow-y: auto;
+}
+
+.emoji-item {
+    font-size: 20px;
+    padding: 4px;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.emoji-item:hover {
+    transform: scale(1.2);
+    background: #f0f9ff;
+    border-radius: 4px;
+}
+
+.emoji-popover .ant-popover-inner {
+    padding: 0;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.emoji-popover .ant-popover-title {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    font-weight: bold;
+    background-color: #f9f9f9;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .chatbox-container {
+        border-radius: 0;
+        border: none;
+    }
+
+    .chatbox-header {
+        padding: 12px;
+    }
+
+    .chatbox-content {
+        padding: 12px;
+    }
+
+    .message-bubble-wrapper {
+        max-width: 85%;
+    }
+
+    .chatbox-footer {
+        padding: 8px;
+        gap: 6px;
+    }
+
+    .emoji-picker {
+        width: 240px;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .send-btn {
+        min-width: 60px;
+        height: 40px;
+    }
+
+    .emoji-btn {
+        height: 40px;
+    }
+}
\ No newline at end of file