/* General */
body { font-family: sans-serif; margin: 0; background-color: #f0f2f5; }
* { box-sizing: border-box; }

/* Auth Forms */
#auth-container { display: flex; justify-content: center; align-items: center; height: 100vh; }
.form-container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 350px; }
.form-container h2 { text-align: center; margin-bottom: 1.5rem; }
.form-container input { width: 100%; padding: 10px; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; }
.form-container button { width: 100%; padding: 10px; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; }
.form-container p { text-align: center; margin-top: 1rem; }
.form-container a { color: #007bff; text-decoration: none; }

/* Main App Layout */
#app-container { display: flex; height: 100vh; }
.sidebar { width: 300px; background-color: #f8f9fa; border-right: 1px solid #ddd; display: flex; flex-direction: column; }
.sidebar-header { padding: 1rem; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.chat-area { flex-grow: 1; display: flex; flex-direction: column; }

/* Sidebar lists */
#friend-requests, #friend-list { padding: 1rem; overflow-y: auto; }
#friend-requests ul, #friend-list ul { list-style: none; padding: 0; }
#friend-list li { padding: 10px; cursor: pointer; border-radius: 4px; }
#friend-list li:hover, #friend-list li.active { background-color: #e9ecef; }
#friend-requests li { display: flex; justify-content: space-between; align-items: center; padding: 8px; }
#friend-requests button { font-size: 0.8em; padding: 4px 8px; }

/* Chat Window */
#chat-welcome { text-align: center; margin: auto; }
#chat-window { display: flex; flex-direction: column; height: 100%; }
.chat-header { padding: 1rem; border-bottom: 1px solid #ddd; background: #f8f9fa; }
.chat-messages { flex-grow: 1; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.message-bubble { max-width: 70%; padding: 10px 15px; border-radius: 18px; line-height: 1.4; }
.message-bubble.sent { background-color: #007bff; color: white; align-self: flex-end; }
.message-bubble.received { background-color: #e9ecef; color: #333; align-self: flex-start; }
.timestamp { font-size: 0.75em; color: #999; margin-top: 4px; }
.message-bubble.sent .timestamp { color: #f0f0f0; }

#message-form { display: flex; padding: 1rem; border-top: 1px solid #ddd; background: #f8f9fa; }
#message-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; }

/* Modal */
.modal { position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; border-radius: 8px; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
#search-results div { padding: 8px; cursor: pointer; }
#search-results div:hover { background-color: #f1f1f1; }