body{margin:0;padding:0;font-family:Arial;}
.container{display:flex;height:100vh;transition:all 0.3s;}
.light-mode{background:#f0f2f5;color:#000;}
.dark-mode{background:#18191a;color:#fff;}
.sidebar{width:250px;background:#fff;display:flex;flex-direction:column;border-right:1px solid #ccc;transition:all 0.3s;}
.dark-mode .sidebar{background:#242526;}
.sidebar .profile{text-align:center;padding:10px;}
.sidebar .profile img{width:60px;height:60px;border-radius:50%;}
.sidebar nav ul{list-style:none;padding:0;}
.sidebar nav ul li{padding:15px;cursor:pointer;transition:0.2s;}
.sidebar nav ul li.active{background:#007bff;color:#fff;border-radius:5px;}
.sidebar nav ul li:hover{background:#e4e6eb;border-radius:5px;}
.main-content{flex:1;display:flex;flex-direction:column;}
.chat-header{display:flex;align-items:center;padding:10px;background:#f5f5f5;border-bottom:1px solid #ccc;}
.dark-mode .chat-header{background:#242526;border-color:#3a3b3c;}
.chat-box{flex:1;padding:20px;overflow-y:auto;}
.message{margin-bottom:10px;max-width:60%;padding:10px;border-radius:10px;position:relative;}
.message.sent{background:#dcf8c6;margin-left:auto;}
.message.received{background:#fff;margin-right:auto;display:flex;align-items:flex-start;}
.message.received img{width:30px;height:30px;border-radius:50%;margin-right:5px;}
.time{font-size:10px;color:gray;position:absolute;bottom:2px;right:5px;}
.typing{font-style:italic;color:gray;}
.chat-form{display:flex;padding:10px;background:#fff;border-top:1px solid #ccc;}
.chat-form input[type=text]{flex:1;padding:10px;border-radius:20px;border:1px solid #ccc;outline:none;}
.chat-form button{padding:10px 15px;margin-left:10px;border-radius:20px;border:none;background:#007bff;color:#fff;cursor:pointer;}