body { font-family: Arial, sans-serif; margin: 0; padding: 0; background:#f8f8f8; }
#chat-container { width: 100%; max-width: 96%; margin: 20px auto; border: 1px solid #ccc; height: 60vh; display: flex; flex-direction: column; background:#fff; border-radius:8px; overflow:hidden; }
#profile-header { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ccc; background: #f9f9f9; }
#profile-header img { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; border: 2px solid #ccc; object-fit: cover; }
#profile-header .info { display: flex; flex-direction: column; }
#profile-header .info .name { font-weight: bold; font-size: 1.1em; }
#profile-header .info .desc { font-size: 0.9em; color: #555; }
#messages { flex: 1; overflow-y: auto; padding: 10px; background: #fff; }
.message { margin: 5px 0; padding: 8px 12px; border-radius: 15px; max-width: 100%; word-wrap: break-word; }
.user { background-color: #DCF8C6; align-self: flex-end; }
.person { background-color: #FFF; border: 1px solid #ccc; align-self: flex-start; }
#input-area { display: flex; border-top: 1px solid #ccc; background:#f9f9f9; }
#input-area input { flex: 1; padding: 10px; border: none; font-size: 1em; }
#input-area button { padding: 10px 15px; border: none; background: #4CAF50; color: #fff; cursor: pointer; font-size: 1em; }
#input-area button:hover { background: #45a049; }
#map { height:400px; width: 100%; }
#menu { flex: 1; overflow-y: auto; padding: 10px; background: #fff; }