*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-height:100vh}.start__form,body{align-items:center;display:flex;justify-content:center}.start__form{border:1px solid #000;border-radius:10px;flex-direction:column;gap:10px;margin:auto;padding:15px;width:300px}.start__title{text-align:center}.form__input-name{border-radius:3px;padding:5px 10px;width:70%}.form__btn-submit{border-radius:3px;cursor:pointer;padding:5px;transition:filter .2s ease;width:70%}.form__btn-submit:hover{filter:brightness(.9)}.error{color:red;font-size:small;margin:0 auto;width:fit-content}.app{border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,.1);display:flex;height:80vh;overflow:hidden;width:900px}.app,.sidebar{background-color:#fff}.sidebar{border-right:1px solid #e0e0e0;height:100%;overflow-y:auto;padding:20px 10px;scroll-behavior:smooth;width:250px}.user-list{list-style:none}.user-list__item{align-items:center;border-radius:10px;cursor:pointer;display:flex;padding:12px 15px;transition:background-color .2s ease}.user-list__item:hover{background-color:#f5f5f5}.user-list__item--active{background-color:#e8f0fe}.user-avatar{background-color:#ddd;border-radius:50%;height:40px;margin-right:15px;width:40px}.user-name{color:#333;font-weight:500}.user-list__item--active .user-name{color:#1a73e8;font-weight:700}.chat-window{background-color:#fdfdfd}.chat-window,.messages-container{display:flex;flex-direction:column;flex-grow:1}.messages-container{gap:15px;overflow-y:auto;padding:20px}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:4px}.chat-message{border-radius:15px;max-width:70%;padding:10px 15px;position:relative}.chat-message__header{color:#777;display:flex;font-size:.8em;justify-content:space-between;margin-bottom:5px}.chat-message__author{font-weight:700}.chat-message__text{line-height:1.4;word-wrap:break-word}.chat-message--incoming{align-self:flex-start;background-color:#e4e6eb;border-bottom-left-radius:5px}.chat-message--incoming .chat-message__author{color:#333}.chat-message--outgoing{align-self:flex-end;background-color:#0084ff;border-bottom-right-radius:5px;color:#fff}.chat-message--outgoing .chat-message__header{color:hsla(0,0%,100%,.8)}.message-form{background-color:#fff;border-top:1px solid #e0e0e0;display:flex;padding:15px}.message-form__input{border:1px solid #ccc;border-radius:25px;flex-grow:1;outline:none;padding:12px 15px;transition:border-color .2s ease}.message-form__input:focus{border-color:#0084ff}.message-form__button{align-items:center;background-color:#0084ff;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.2em;height:45px;justify-content:center;margin-left:10px;transition:background-color .2s ease;width:45px}.message-form__button:hover{background-color:#006bcf}