@charset "utf-8"; 
.app__wrap{ 
    margin: 0 auto; 
    padding: 50px 0 0; 
    position: relative; 
    width: 100%; 
    max-width: 350px; 
    min-width: 200px; 
    font-size: 14px; 
    border-top: 20px solid #5c007a; 
    box-sizing: border-box; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1); 
} 
.app__info{ 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    color: #fff; 
    background: #8e24aa; 
} 
.app__window{ 
    overflow-y: auto; 
    padding: 10px 20px; 
    height: 400px; 
    background: #e1e2e1; 
} 
.output__user{ 
    margin: 0; margin-bottom: 10px; 
    color:black;
} 
.output__user__name{ 
    margin-right:10px; 
    font-weight:700; 
    color:black;
} 
.output__user__me{ 
    margin: 0; margin-bottom: 10px; 
    color: blue;
} 
.output__user__name__me{ 
    margin-right:10px; 
    font-weight:700; 
    color: blue;
} 
.app__input__wrap{ 
    padding: 10px; 
    background: #f5f5f6; 
} 
.app__input__wrap:after{ 
    content:''; 
    display:block; 
    clear:both; 
} 
.app__input{ 
    float: left; 
    display: block; 
    width: 80%; 
    height: 25px; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
} 
.app__button{ 
    float: left; 
    display: block; 
    width: 20%; 
    height: 25px; 
    border: 1px solid #ccc; 
    border-left: 0; 
    background: #fff; 
    box-sizing: border-box; 
    cursor: pointer; 
}