prototype_design/src/assets/common.css

/* 侧边栏 */
.sidebar {
  @apply w-64 bg-[#08002E] text-white flex flex-col;
}

.sidebar-title {
  @apply p-4 text-center font-bold text-2xl;
}

.contact-item {
  @apply flex items-center p-2;
}

.contact-item:hover, .contact-item.selected {
  @apply bg-[#3D26A3];
}

.contact-item.selected {
  @apply bg-[#2F197F];
}

.contact-avatar {
  @apply w-8 h-8 rounded-full mr-2;
}

.contact-name {
  @apply ml-auto text-sm;
}

/* 对话区域 */
.chat-area {
  @apply flex-1 bg-gray-100 flex flex-col;
}

.chat-messages {
  @apply flex-1 p-4 overflow-y-auto;
}

.message-bubble {
  @apply max-w-xs p-2 my-2;
}

.message-bubble.me {
  @apply bg-purple-100 float-right rounded-l-lg rounded-br-lg;
}

.message-bubble.other {
  @apply bg-gray-200 float-left rounded-r-lg rounded-bl-lg;
}

/* 输入框与发送按钮 */
.chat-input {
  @apply p-4 border-t border-gray-200 flex items-center;
}

.send-button {
  @apply bg-purple-500 text-white px-4 py-2 rounded-l-lg;
}

.file-upload-button {
  @apply bg-purple-500 text-white px-4 py-2 rounded-full ml-2 cursor-pointer;
}

.file-name {
  @apply ml-2 text-sm;
}