*{box-sizing:border-box}body{margin:0;padding:0;background-color:#000;color:#fff;font-family:Arial,sans-serif;height:100vh}.join_room{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:15px;width:350px;margin:0 auto}.join_room input,.join_room button{width:100%;padding:10px;font-size:16px;outline:none;transition:all .3s ease}.join_room input{background:#000;color:#fff;border:1px solid white;border-radius:8px}.join_room input:hover{border:2px solid green}.join_room button{background-color:#ff00bf;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer}.join_room button:hover{background-color:#2e8b57;color:#000}.chat-container{display:flex;flex-direction:column;height:calc(100vh - 80px);max-width:1200px;margin:40px auto;background-color:#121212;border-left:1px solid #333;border-right:1px solid #333;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative;border-radius:10px;box-shadow:0 0 15px #000000b3}.chat-container h1{background-color:#1e1e1e;margin:0;padding:15px 20px;text-align:center;font-weight:700;font-size:1.5rem;border-bottom:1px solid #333;position:sticky;top:0;z-index:10}.chat-messages{flex:1;padding:15px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scroll-behavior:smooth;justify-content:flex-end;scrollbar-width:thin;scrollbar-color:#4CAF50 #222}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:#222;border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:#4caf50;border-radius:4px;border:2px solid #222}.message{max-width:60%;padding:12px 16px;border-radius:18px;background-color:#444;color:#fff;word-wrap:break-word;font-size:1rem;line-height:1.3;box-shadow:0 1px 3px #0000004d}.message.sender{align-self:flex-end;background-color:#4caf50;text-align:right;border-bottom-right-radius:0}.message.receiver{align-self:flex-start;background-color:#333;text-align:left;border-bottom-left-radius:0}.message .date{display:block;font-size:.75rem;color:#bbb;margin-top:4px}.chat-input{display:flex;padding:15px 20px;background-color:#1e1e1e;border-top:1px solid #333;position:sticky;bottom:0;z-index:10}.chat-input input{flex:1;padding:12px 16px;font-size:1rem;background:#000;color:#fff;border:1px solid white;border-radius:20px;outline:none;margin-right:15px;transition:border-color .3s ease}.chat-input input:focus{border-color:#4caf50}.chat-input button{padding:12px 20px;font-size:1rem;background-color:#4caf50;color:#fff;border:none;border-radius:20px;cursor:pointer;transition:background-color .3s ease;width:80px;text-align:center}.chat-input button:hover{background-color:#ffb6c1;color:#000}.message-header{display:flex;justify-content:space-between;font-size:.85rem;color:#ccc;margin-bottom:4px;font-weight:600}.message-header strong{color:#fff;margin-right:20px}.message-header .date{color:#000;font-weight:400}