/* ========== 全局字体 & 基础 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif;
    background: #f5f5f5;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========== 头部（好友列表 & 聊天） ========== */
.header {
    padding: 12px 16px;
    background: #ededed;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    position: relative;
}

/* 顶部按钮：搜索、申请、返回均加粗 */
.header button {
    font-size: 16px;                 /* 稍微放大一点，更容易看清楚 */
    font-weight: bold;               /* ✅ 加粗 */
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0;
    z-index: 1;
}

/* 返回按钮保持原样（已通过 .header button 加粗） */
.header button#backBtn {
    font-size: 18px;
}

/* 聊天标题：好友名字居中并加粗 */
.header h2 {
    font-size: 18px;
    font-weight: bold;               /* ✅ 加粗 */
    color: #191919;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* ========== 好友列表 ========== */
.friend-list {
    flex: 1;
    overflow-y: auto;
}

.friend-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    position: relative;               /* 为了放置红点 */
}
.friend-item:hover {
    background: #f5f5f5;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #07C160;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    margin-right: 12px;
}

.info {
    flex: 1;
}
.name {
    font-size: 16px;
    color: #333;
}
.last-msg {
    color: #999;
    font-size: 13px;
    margin-top: 2px;
}

/* ✅ 未读红点（取代原来的数字角标） */
.unread-dot {
    width: 10px;
    height: 10px;
    background-color: #f5222d;        /* 红色 */
    border-radius: 50%;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* ========== 聊天区域 ========== */
.chat-area {
    display: none;
    flex-direction: column;
    height: 100vh;
}
.chat-area.active {
    display: flex;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

/* 消息项 */
.message {
    display: flex;
    margin: 8px 0;
    max-width: 100%;
}
.message.sent {
    justify-content: flex-end;
}
.message.received {
    justify-content: flex-start;
}

/* 气泡通用 */
.message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    word-break: break-word;
    line-height: 1.5;
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-family: inherit;
}

/* 自己的消息：绿色 */
.message.sent .message-bubble {
    background: #95EC69;
    border-radius: 16px 4px 16px 16px;
}

/* 对方的消息：浅灰，带边框防止融合 */
.message.received .message-bubble {
    background: #f0f0f0;
    border-radius: 4px 16px 16px 16px;
    border: 1px solid #e0e0e0;
}

/* ========== 输入区域 ========== */
.input-area {
    padding: 10px;
    background: #f7f7f7;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.input-area textarea {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    resize: none;
    font-size: 16px;
    font-family: inherit;
}
.input-area button {
    background: #07C160;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    font-weight: bold;               /* 发送按钮也加个粗 */
}

/* ========== 弹窗 ========== */
#modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
#modalContent {
    background: white;
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    max-height: 80vh;
    overflow: auto;
    font-family: inherit;
}