:root { --primary: #007bff; --secondary: #f0f2f5; --white: #ffffff; --dark: #333; }
body, html { margin: 0; padding: 0; font-family: 'Inter', sans-serif; height: 100%; background: var(--secondary); }

.app-container { display: flex; flex-direction: column; height: 100vh; }
.main-header { background: var(--primary); color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.main-content { display: flex; flex: 1; overflow: hidden; }

.sidebar { width: 250px; background: var(--white); border-right: 1px solid #ddd; }
.chat-area { flex: 1; display: flex; flex-direction: column; background: #fff; }
.chat-box { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.media-panel { width: 220px; background: #e9ecef; padding: 15px; display: flex; flex-direction: column; gap: 10px; }

.chat-input-area { padding: 15px; border-top: 1px solid #ddd; display: flex; gap: 10px; }
#messageInput { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; }
#sendBtn { background: var(--primary); color: white; border: none; padding: 0 20px; border-radius: 20px; cursor: pointer; }

.btn-media { width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--primary); color: white; cursor: pointer; transition: 0.3s; }
.btn-media:hover { opacity: 0.9; }

@media (max-width: 768px) {
    .sidebar, .media-panel { display: none; } /* Mobil için sadeleştirme */
}

.context-menu {
    position: absolute;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 5px;
    display: none;
    z-index: 1000;
}
.context-menu ul { list-style: none; margin: 0; padding: 5px; }
.context-menu li { padding: 10px; cursor: pointer; color: #333; }
.context-menu li:hover { background: var(--primary); color: white; }

/* Sidebar Kullanıcı Listesi */
.user-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.2s;
}
.user-item:hover { background: #e7f3ff; color: #007bff; }

/* Mesaj Balonları */
.msg {
    background: #f1f0f0;
    padding: 8px 15px;
    border-radius: 18px;
    margin-bottom: 5px;
    align-self: flex-start;
    max-width: 80%;
}
.msg.me {
    background: #007bff;
    color: white;
    align-self: flex-end;
}

/* Mobil Tasarım */
@media (max-width: 768px) {
    .main-content { flex-direction: column; }
    .sidebar { width: 100%; height: 150px; border-right: none; border-bottom: 1px solid #ddd; }
    .media-panel { position: fixed; bottom: 0; width: 100%; flex-direction: row; height: 60px; z-index: 100; }
    .chat-area { margin-bottom: 60px; }
}