a{font-weight:500;text-decoration:inherit}body{margin:0;display:flex;min-width:320px;min-height:100vh;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}h1{font-size:3.2em;line-height:1.1}.app{display:flex}#root{width:100%}.chat-container{display:flex;flex-direction:column;height:100vh;background-color:#f5f5f5;width:100%}.messages{flex:1;overflow-y:auto;padding:10px;background-color:#fff;border-bottom:1px solid #ddd}.message{position:relative;margin-bottom:20px;padding:12px;border-radius:10px;max-width:60%;clear:both;box-shadow:0 2px 8px #0000001a}.message-sender{background-color:#d1f5d3;align-self:flex-end;margin-left:auto}.message-receiver{background-color:#f1f0f0;align-self:flex-start;margin-right:auto}.reply{background-color:#e8e8e8;border-left:4px solid #4caf50;padding-left:10px;margin-bottom:8px;border-radius:5px}.replying-to{padding:10px;background-color:#e8f5e9;border-left:4px solid #4caf50;border-radius:5px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.replying-to p{margin:0;font-size:14px}.replying-to button{background:none;border:none;color:#f44336;cursor:pointer}.message img{max-width:100%;height:auto;border-radius:5px}.message .reactions{margin-top:8px;display:flex;gap:5px;cursor:pointer}.message .reaction-popup{position:absolute;bottom:100%;left:50%;transform:translate(-50%);display:none;flex-direction:row;gap:8px;background-color:#fff;padding:8px;border-radius:20px;box-shadow:0 2px 8px #0003}.message:hover .reaction-popup{display:flex}.reaction-popup button{background:none;border:none;cursor:pointer;font-size:20px;transition:transform .1s ease}.reaction-popup button:hover{transform:scale(1.2)}.message-actions{margin-top:5px}.reply-button{background:none;border:none;color:#3498db;cursor:pointer;font-size:14px}.reply-button:hover{text-decoration:underline}.input-area{padding:10px;background-color:#f5f5f5;border-top:1px solid #ddd;display:flex;flex-direction:column}.input-area input[type=text]{padding:10px;border:1px solid #ccc;border-radius:5px;margin-bottom:10px}.input-area button{padding:10px 20px;border:none;background-color:#4caf50;color:#fff;border-radius:5px;cursor:pointer;align-self:flex-end}.input-area button:hover{background-color:#45a049}.sidebar{width:250px;height:100vh;background-color:#2c3e50;color:#fff;display:flex;flex-direction:column;padding:15px;box-sizing:border-box}.sidebar h2{color:#ecf0f1;margin-bottom:10px}.sidebar ul{list-style-type:none;padding:0;overflow-y:auto;flex:1}.sidebar ul li{margin-bottom:10px}.sidebar ul li a{color:#ecf0f1;text-decoration:none;padding:10px;display:block;border-radius:5px;background-color:#34495e;transition:background-color .3s ease}.sidebar ul li a:hover{background-color:#3b5998}.sidebar ul li.active-chat a{background-color:#2980b9;font-weight:700}.sidebar button{padding:10px 20px;border:none;background-color:#e74c3c;color:#fff;border-radius:5px;cursor:pointer;margin-top:20px}.sidebar button:hover{background-color:#c0392b}.button{padding:10px 20px;border:none;background-color:#3498db;color:#fff;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.button:hover{background-color:#2980b9}.button-secondary{background-color:#95a5a6}.button-secondary:hover{background-color:#7f8c8d}.button-danger{background-color:#e74c3c}.button-danger:hover{background-color:#c0392b}