html, body {
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.chat-message {
    max-width: 75%;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 10px;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.message-sent {
    background-color: #0d6efd;
    color: white;
    border-bottom-right-radius: 5px;
    align-self: flex-end;
}

.message-received {
    background-color: #ffffff;
    color: #212529;
    border-bottom-left-radius: 5px;
    align-self: flex-start;
}

#chatMessages {
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
    background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000000" fill-opacity="0.03" fill-rule="evenodd"%3E%3Ccircle cx="3" cy="3" r="3"/%3E%3Ccircle cx="13" cy="13" r="3"/%3E%3C/g%3E%3C/svg%3E');
}

.user-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

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

.user-item.active {
    background-color: #e7f1ff;
    border-left: 4px solid #0d6efd;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid white;
}

.status-online { background-color: #198754; }
.status-offline { background-color: #adb5bd; }

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Mobile Responsiveness */
@media (max-width: 767.98px) {
    #sidebar {
        display: flex !important;
        width: 100%;
    }
    #chatArea {
        display: none !important;
        width: 100%;
    }
    
    .mobile-chat-active #sidebar {
        display: none !important;
    }
    .mobile-chat-active #chatArea {
        display: flex !important;
    }
}