body, html {
    margin:0;
    padding:0;
    font-family: Arial, sans-serif;
    background:#111;
    color:#fff;
    height:100%;
}

.main-container {
    display:flex;
    height:100vh;
}

/* Сайдбар */
.sidebar {
    width:250px;
    background:#222;
    padding:10px;
    overflow-y:auto;
}

.top-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.top-bar h2 { margin:0; }

.settings-btn {
    background:#333;
    border:none;
    color:#fff;
    padding:5px 8px;
    border-radius:5px;
    cursor:pointer;
}

#userSearch {
    width:100%;
    padding:5px;
    margin-bottom:10px;
    border-radius:5px;
    border:none;
    background:#333;
    color:#fff;
}

#chatList { list-style:none; padding:0; margin:0; }

.chat-item {
    padding:10px;
    border-bottom:1px solid #444;
    cursor:pointer;
    display:flex;
    align-items:center;
}

.chat-item:hover { background:#333; }

.chat-item img.avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    margin-right:10px;
}

/* Чат */
.chat-container {
    flex:1;
    display:flex;
    flex-direction:column;
    background:#111;
    display:none;
}

.chat-header {
    display:flex;
    align-items:center;
    padding:10px;
    background:#222;
    border-bottom:1px solid #444;
}

.chat-header img.avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    margin-right:10px;
}

.chat-header .user-info { display:flex; flex-direction:column; }

.messages { flex:1; overflow-y:auto; padding:10px; }

.message-box { display:flex; padding:5px; background:#222; }

#chatInput { flex:1; padding:5px; border-radius:5px; border:none; margin-right:5px; }

#sendBtn { padding:5px 10px; border:none; border-radius:5px; background:#333; color:#fff; cursor:pointer; }

.chat-message {
    padding:5px 10px;
    margin-bottom:5px;
    background:#333;
    border-radius:5px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-message.self { background:#444; justify-content:flex-end; }

.chat-message button { margin-left:5px; background:#555; border:none; border-radius:3px; color:#fff; cursor:pointer; }

#backBtn {
    margin:5px;
    background:#333;
    border:none;
    padding:5px 10px;
    border-radius:5px;
    color:#fff;
    cursor:pointer;
}

/* Мобильные */
@media (max-width:768px){
    .main-container { flex-direction:column; }
    .sidebar { width:100%; height:100vh; }
    .chat-container { width:100%; height:100vh; }
}
#searchUser {
    width: 90%;
    padding: 6px 8px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #222;
    color: #fff;
}

#searchResults {
    max-height: 200px;
    overflow-y: auto;
    margin: 5px 0;
}

.search-user-item {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #444;
}

.search-user-item:hover {
    background-color: #333;
}