/* === 您原有的全部样式保持不变 === */
* { margin:0; padding:0; box-sizing:border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background:#f0f2f5; height:100vh; display:flex; justify-content:center; align-items:center; padding:12px; }
#app { width:100%; max-width:1200px; height:100%; max-height:800px; background:white; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,0.15); overflow:hidden; display:flex; flex-direction:column; position:relative; }

/* ===== 登录页面 ===== */
#loginPage { flex:1; display:flex; flex-direction:column; justify-content:center; padding:30px 24px; }
#loginPage h1 { font-size:28px; font-weight:700; color:#1e293b; text-align:center; margin-bottom:32px; }
#loginPage h1 small { font-size:16px; font-weight:400; color:#64748b; }
.login-form { display:flex; flex-direction:column; gap:18px; max-width:360px; margin:0 auto; width:100%; }
.login-form label { font-size:15px; font-weight:500; color:#334155; }
.login-form input { padding:14px 18px; border:1px solid #d1d9e6; border-radius:24px; font-size:16px; background:#f8fafc; outline:none; width:100%; transition:0.2s; }
.login-form input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.2); background:white; }
.login-form .btn { background:#3b82f6; color:white; border:none; border-radius:40px; padding:15px; font-size:17px; font-weight:600; cursor:pointer; transition:0.2s; box-shadow:0 4px 12px rgba(59,130,246,0.3); }
.login-form .btn:active { transform:scale(0.97); }
.login-form .btn:disabled { opacity:0.6; cursor:not-allowed; }
.error-msg { color:#b91c1c; background:#fee2e2; padding:10px 16px; border-radius:40px; font-size:14px; text-align:center; }
.account-info { font-size:13px; color:#94a3b8; text-align:center; margin-top:12px; }

/* ===== 主界面 ===== */
#mainPage { flex:1; display:none; height:100%; overflow:hidden; }
#mainPage.active { display:flex; }

/* ===== 好友列表 ===== */
#friendList { width:100%; background:#f8fafc; border-right:1px solid #e9edf2; display:flex; flex-direction:column; overflow:hidden; transition:width 0.2s; }
#friendList .header { padding:16px 18px; background:white; border-bottom:1px solid #e9edf2; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; flex-wrap:wrap; gap:8px; }
#friendList .header .left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#friendList .header h2 { font-size:18px; font-weight:600; color:#1e293b; }
#friendList .header .add-btn { background:#3b82f6; color:white; border:none; border-radius:20px; padding:4px 14px; font-size:14px; cursor:pointer; }
#friendList .header .add-btn:active { transform:scale(0.95); }
#friendList .header .user-info { font-size:14px; color:#64748b; display:flex; align-items:center; gap:8px; }
#friendList .header .user-info .logout-btn { background:#e9edf2; border:none; padding:4px 12px; border-radius:20px; cursor:pointer; font-size:13px; color:#475569; }
#friendList .list { flex:1; overflow-y:auto; padding:8px 0; }

.friend-item { display:flex; align-items:center; padding:12px 18px; cursor:pointer; transition:background 0.15s; border-bottom:1px solid #f1f5f9; position:relative; }
.friend-item:hover { background:#f1f5f9; }
.friend-item.active { background:#e2e8f0; }
.friend-item .avatar { width:44px; height:44px; border-radius:50%; background:#dbeafe; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; color:#2563eb; margin-right:14px; flex-shrink:0; position:relative; }
.friend-item .avatar .online-dot { position:absolute; bottom:2px; right:2px; width:12px; height:12px; border-radius:50%; border:2px solid white; background:#94a3b8; }
.friend-item .avatar .online-dot.online { background:#22c55e; }
.friend-item .info { flex:1; min-width:0; }
.friend-item .info .name { font-weight:500; color:#1e293b; font-size:16px; }
.friend-item .info .last-msg { font-size:14px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.friend-item .badge { width:12px; height:12px; background:#ef4444; border-radius:50%; flex-shrink:0; margin-left:8px; display:none; }
.friend-item .badge.show { display:block; }
.friend-item .time { font-size:12px; color:#94a3b8; flex-shrink:0; margin-left:8px; }
.unread-badge {
    background: #ef4444;
    color: white;
    border-radius: 50%;
    padding: 1px 6px;
    font-size: 12px;
    min-width: 18px;
    text-align: center;
    margin-left: 6px;
    flex-shrink: 0;
}

/* ===== 聊天区域 ===== */
#chatArea { flex:1; display:none; flex-direction:column; background:white; overflow:hidden; }
#chatArea.active { display:flex; }
#chatArea .chat-header { padding:12px 20px; border-bottom:1px solid #e9edf2; display:flex; align-items:center; gap:12px; flex-shrink:0; background:white; }
#chatArea .chat-header .back-btn { display:none; background:none; border:none; font-size:24px; cursor:pointer; color:#475569; padding:0 4px; }
#chatArea .chat-header .friend-name { font-size:18px; font-weight:600; color:#1e293b; flex:1; }
#chatArea .chat-header .actions { display:flex; gap:8px; }
#chatArea .chat-header .actions button { background:none; border:none; font-size:20px; cursor:pointer; color:#64748b; padding:4px 8px; border-radius:8px; transition:0.15s; }
#chatArea .chat-header .actions button:hover { background:#f1f5f9; }

#chatArea .message-box { flex:1; padding:16px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; background:#f8fafc; }

.msg-item {
    max-width: 80%;
    padding: 10px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    position: relative;
    animation: fadeIn 0.2s ease;
    align-self: flex-start;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #eef2f6;
}
.msg-item.me {
    align-self: flex-end;
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.msg-item .msg-text {
    font-size: 15px;
    line-height: 1.5;
}
.msg-item .msg-text.recalled {
    color: #94a3b8;
    font-style: italic;
}

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

#chatArea .input-area { padding:12px 16px; border-top:1px solid #e9edf2; display:flex; gap:10px; background:white; flex-shrink:0; }
#chatArea .input-area input { flex:1; padding:12px 18px; border:1px solid #d1d9e6; border-radius:30px; font-size:16px; outline:none; background:#f8fafc; transition:0.2s; }
#chatArea .input-area input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); background:white; }
#chatArea .input-area .btn-send { background:#3b82f6; border:none; color:white; width:50px; height:50px; border-radius:50%; font-size:22px; cursor:pointer; transition:0.15s; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#chatArea .input-area .btn-send:active { transform:scale(0.92); }

/* ===== 响应式 ===== */
@media (min-width:768px) {
    #mainPage.active { flex-direction:row; }
    #friendList { width:25%; min-width:200px; max-width:320px; border-right:1px solid #e9edf2; }
    #chatArea { width:75%; display:flex !important; }
    #chatArea .chat-header .back-btn { display:none; }
}
@media (max-width:767px) {
    #mainPage.active { flex-direction:column; }
    #friendList { width:100%; height:100%; border-right:none; }
    #chatArea { width:100%; height:100%; position:absolute; top:0; left:0; background:white; z-index:10; display:none !important; }
    #chatArea.active { display:flex !important; }
    #chatArea .chat-header .back-btn { display:inline-block; }
}

.time-label {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    margin: 12px 0 8px 0;
    user-select: none;
}

/* ===== 工具类 ===== */
.hidden { display:none !important; }
.empty-state { color:#94a3b8; padding:40px 20px; text-align:center; font-size:15px; }
.list::-webkit-scrollbar, .message-box::-webkit-scrollbar { width:4px; }
.list::-webkit-scrollbar-track, .message-box::-webkit-scrollbar-track { background:#e9edf2; border-radius:8px; }
.list::-webkit-scrollbar-thumb, .message-box::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }

#requestEntry { padding:8px 18px; background:#fef3c7; border-bottom:1px solid #fde68a; display:none; justify-content:space-between; align-items:center; cursor:pointer; }
#requestEntry.show { display:flex; }
#requestEntry span { font-size:14px; color:#92400e; }
#requestEntry .badge { background:#ef4444; color:white; border-radius:50%; padding:0 6px; font-size:12px; min-width:18px; text-align:center; }

.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99998; justify-content:center; align-items:center; }
.modal-overlay.active { display:flex; }
.modal-box { background:white; max-width:400px; width:90%; padding:24px 20px 20px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.3); }
.modal-box h3 { font-size:18px; font-weight:600; margin-bottom:12px; }
.modal-box input { width:100%; padding:12px 16px; border:1px solid #ccc; border-radius:30px; font-size:16px; outline:none; margin-bottom:12px; }
.modal-box input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
.modal-box .btn-row { display:flex; gap:10px; justify-content:flex-end; }
.modal-box .btn-row button { padding:8px 20px; border:none; border-radius:30px; font-size:16px; cursor:pointer; }
.modal-box .btn-row .btn-primary { background:#3b82f6; color:white; }
.modal-box .btn-row .btn-secondary { background:#e9edf2; color:#1e293b; }
.modal-box .request-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f1f5f9; }
.modal-box .request-item:last-child { border-bottom:none; }
.modal-box .request-item .actions button { background:none; border:none; font-size:18px; cursor:pointer; margin-left:8px; }
.modal-box .request-item .actions .accept { color:#22c55e; }
.modal-box .request-item .actions .reject { color:#ef4444; }
.modal-box .empty-state { color:#94a3b8; text-align:center; padding:20px 0; }

#customConfirm { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99999; justify-content:center; align-items:center; }
#customConfirm .box { background:white; max-width:300px; width:90%; padding:24px 20px 20px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.3); text-align:center; }
#customConfirm .box .title { font-size:18px; font-weight:600; margin-bottom:8px; }
#customConfirm .box .message { font-size:15px; color:#555; margin-bottom:20px; }
#customConfirm .box .row { display:flex; gap:12px; justify-content:center; }
#customConfirm .box .row button { flex:1; padding:10px; border-radius:30px; font-size:16px; cursor:pointer; }
#customConfirm .box .row .cancel { border:1px solid #ccc; background:white; }
#customConfirm .box .row .ok { border:none; background:#3b82f6; color:white; }

#customMenu { display:none; position:fixed; background:white; border:1px solid #ccc; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.2); padding:4px 0; z-index:9999; min-width:100px; }
#customMenu .menu-item { padding:6px 20px; cursor:pointer; font-size:14px; }
#customMenu .menu-item:hover { background:#f1f5f9; }
/* ===== 用户底部栏（好友列表底部） ===== */
.user-footer {
    padding: 12px 18px;
    border-top: 1px solid #e9edf2;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.user-footer #myUsername {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}
.user-footer .logout-btn {
    background: #e9edf2;
    border: none;
    padding: 4px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
}
.user-footer .logout-btn:hover {
    background: #d1d9e6;
}

/* ===== 移除调试按钮相关（但保留面板） ===== */
#debugToggle {
    display: none !important;
}