/* chat.css */
/* 覆盖原有内容，添加以下完整样式 */
.chat-container {
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: column; /* 移动端垂直布局 */
}
/* 添加电脑端布局样式 */
@media (min-width: 768px) {
    .chat-container {
        flex-direction: row;
    }
    .flex-1 {
        flex: 1;
    }
    .md:w-64 {
        width: 16rem;
        flex-shrink: 0; /* 防止用户栏被压缩 */
    }
    .desktop-user-list-visible {
        display: block !important;
    }
}
.message-list-container {
    flex: 1; /* 占满剩余空间 */
    overflow: hidden; /* 防止内容溢出 */
}
.message-list {
    height: 100%; /* 填满容器 */
    overflow-y: auto;
    scroll-behavior: smooth;
}
.user-list {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scroll-behavior: smooth;
}
.message-bubble {
    max-width: 80%;
}
.system-message {
    background-color: #f3f4f6;
    color: #6b7280;
}
.my-message {
    background-color: #3b82f6;
    color: white;
}
.other-message {
    background-color: #e5e7eb;
    color: #111827;
}

/* 导航栏样式 */
#mobileMenuBtn {
    cursor: pointer;
}
.user-list-container {
    position: fixed;
    right: -300px;
    top: 57px;
    width: 280px;
    height: calc(100vh - 57px);
    background: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}
.user-list-container.active {
    right: 0;
}
.user-list-overlay {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}
.user-list-overlay.active {
    display: block;
}

/* 系统消息侧边栏样式 */
#systemMessageSidebar {
    position: fixed;
    left: -300px;
    top: 57px;
    width: 280px;
    height: calc(100vh - 57px);
    background: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    transition: left 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

#systemMessageSidebar.active {
    left: 0;
}

.system-message-sidebar {
    background-color: #f9fafb;
    border-left: 1px solid #e5e7eb;
}

.system-message-item {
    padding: 2px 0;
    border-bottom: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 0.875rem;
}

.system-message-time {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 2px;
}

/* 移动端适配优化 */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 100px); /* 调整移动端高度 */
    }
    .message-list {
        max-height: calc(100vh - 260px); /* 调整移动端消息区域高度 */
    }
    .message-bubble {
        max-width: 85%; /* 增加移动端消息气泡宽度 */
    }
    .w-full.md\:w-64 {
        display: none; /* 移动端默认隐藏用户列表 */
    }
}
.error-message {
    background-color: #fef2f2;
    color: #ef4444;
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    text-align: center;
}