*{box-sizing:border-box}p,button,ul,ol,h1,h2,h3{margin:0;padding:0}ul,ol{list-style-type:none;text-indent:0}button,input{border:initial;outline:initial}body{background-color:#eceef0;display:flex;flex-direction:column;font-family:Roboto Mono,monospace;margin:initial;min-height:100vh;padding:initial}body #app{display:flex;flex:1;flex-direction:column}.navigation{align-items:center;display:flex;gap:24px;justify-content:center}.my-link{display:block;padding:4px 0;text-decoration-line:initial}.chats-page{display:grid;flex:1;gap:24px;grid-template-columns:360px 1fr;padding:20px}.chats-page .sidebar{display:flex;flex-direction:column;gap:20px}.chats-page .chat-list{flex:1}.chats-page .chat-messages{background-color:#fff;border-radius:12px;display:flex;flex:1;flex-direction:column-reverse;gap:12px;padding:12px}.chats-page .sidebar-nav{align-items:center;display:flex;gap:12px}.chats-page .sidebar-nav .button{flex:1}.chats-page .chat-area{display:flex;flex-direction:column;gap:12px}.chats-page .input-container{align-items:flex-start;display:flex;gap:12px}.chats-page .input-container .my-input{flex:1}.chats-page .input-container .my-button{width:40px}.message-form{align-items:flex-start;flex:1;flex-direction:row!important}.message-form .input-group{flex:1}.chat-item{background-color:#fff;border-radius:12px;display:flex;padding:12px}.chat-item .chat-info{flex:1;min-width:0}.chat-item .chat-header{display:flex;justify-content:space-between;margin-bottom:4px}.chat-item .chat-name{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-item .chat-time{color:#707579;font-size:12px}.chat-item .chat-preview{align-items:center;display:flex;justify-content:space-between}.chat-item .last-message{color:#707579;font-size:14px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-item .badge{align-items:center;background-color:#add8e6;border-radius:20px;color:#fff;display:flex;font-size:12px;font-weight:600;height:22px;justify-content:center;min-width:22px;padding:0 6px}.chat-item+.chat-item{margin-top:2px}.chat-item:hover{background-color:#f5f5f5;cursor:pointer}.my-avatar{align-items:center;aspect-ratio:1;background-color:#aff0a5;border-radius:12px;color:#fff;display:flex;font-size:20px;font-weight:700;justify-content:center;margin-right:15px;overflow:hidden;width:48px}.my-avatar.editable{margin-right:initial;position:relative;width:96px}.my-avatar.editable .preview-image{display:none;height:100%;object-fit:cover;position:absolute;width:100%}.my-avatar.editable:hover{cursor:pointer}.message-item{border-radius:8px;max-width:65%;padding:8px 12px}.message-item .message-time{color:#707579;display:block;font-size:12px;text-align:end;width:100%}.message-item.incoming{align-self:flex-start;background-color:#aff0a5;border-top-left-radius:0}.message-item.outgoing{align-self:flex-end;background-color:#add8e6;border-top-right-radius:0;margin-left:auto}.my-button{background-color:#fff;border-radius:12px;padding:12px;width:100%}.my-button:hover{background-color:#f5f5f5;cursor:pointer}.my-form{display:flex;flex-direction:column;gap:12px}.input-group{display:flex;flex-direction:column;gap:2px}.input-group .error{color:#cd5c5c;font-size:12px}.my-input{background-color:#fff;border-radius:12px;padding:12px}.forms-page{align-items:center;display:flex;flex:1;justify-content:center}.forms-page .forms-container{display:flex;flex-direction:column;gap:24px;width:400px}.forms-page .forms-container .my-form{display:flex;flex-direction:column;gap:12px}.error-page{align-items:center;display:flex;flex:1;justify-content:center}.error-page .error-wrapper{display:flex;flex-direction:column;gap:12px}.error-page .error-wrapper .error-code{font-size:72px}.error-page .error-wrapper .helper-text{font-size:32px}.error-page .error-wrapper .home-link{font-size:20px}.profile-row{align-items:baseline;display:flex}.profile-row .dots{border-bottom:1px dotted #c2cece;display:block;flex:1;margin:0 8px}