html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Roboto,sans-serif}#root{display:flex;flex-direction:column;height:100vh}header{box-sizing:border-box;padding:16px;background-color:#e8ebee}header h1{font-size:1.5rem}header .user{color:#333;margin-top:12px}header strong{font-weight:700}header .logout{color:#4444fd}main{box-sizing:border-box;height:100%;overflow-y:auto;margin-bottom:56px}.user-create{display:flex;flex-direction:column;text-align:center;padding:80px 40px;margin:auto;max-width:500px}.user-create h3{font-size:1.3rem;margin-bottom:20px}.user-create input{margin-bottom:8px;border:0;width:100%;border-radius:4px;padding:0 10px;box-sizing:border-box;height:40px;font-size:1rem;border:1px solid rgb(209,208,208);outline:none}.user-create button{border-radius:4px;height:40px;font-size:1rem;border:1px solid rgb(209,208,208)}.conversation-box{box-sizing:border-box;height:100%;overflow-y:auto;display:flex;flex-direction:column}.conversation{background-color:#efeae2;box-sizing:border-box;padding:16px 24px;flex:1}.conversation .message-box{display:flex}.conversation .message-box.owner{justify-content:end}.conversation .message-box .box{position:relative;background:#fff;border:1px solid lightgray;border-radius:8px;margin-bottom:4px;padding:8px;max-width:100%;box-sizing:border-box}.conversation .message-box.owner .box{background:#d9fdd3}.conversation .message-box .user{color:#0f7a0f;font-weight:500;margin-bottom:8px}.conversation .message-box .message{position:relative}.conversation .message-box .message .text{line-height:1.1;margin-right:40px;word-wrap:break-word}.conversation .message-box .message .time{font-size:.7rem;position:absolute;bottom:0;right:0;color:#888}.conversation .writing-names{display:flex;justify-content:center;margin-top:16px;font-size:.8rem;color:#333;bottom:0}.conversation .writing-names .text{animation:opacity 2s infinite;max-width:100%}@keyframes opacity{0%,to{opacity:1}25%{opacity:.3}}.sender{display:flex;bottom:0;background-color:#e8ebee;padding:8px;box-sizing:border-box;width:100%;position:fixed}.sender .control{width:100%;position:relative}.sender input{border:0;width:100%;border-radius:4px;padding:0 64px 0 10px;box-sizing:border-box;height:40px;font-size:1rem;border:1px solid rgb(209,208,208);outline:none}.sender input::placeholder{padding-left:8px}.sender button{background:none;border:none;font-size:.8rem;font-weight:600;position:absolute;right:0;top:13px;padding:0 16px;color:#3287f7}.sender button:disabled{color:#a9ceff}