.layout{display:flex;height:100vh}aside{width:240px;border-right:1px solid #ccc;padding:.5rem}aside header{display:flex;justify-content:space-between;margin-bottom:.5rem}.contacts{list-style:none;padding:0}.contacts button{width:100%;text-align:left;padding:.5rem}.contacts button.active{font-weight:700}.chat{flex:1;display:flex;flex-direction:column;padding:.5rem}.messages{list-style:none;padding:0;flex:1;overflow-y:auto}.messages li{margin:.25rem 0;max-width:70%}.messages li.out{margin-left:auto;text-align:right}.messages .meta{display:block;font-size:.75rem;color:#777}.composer{display:flex;gap:.5rem}.composer input{flex:1}.auth{max-width:320px;margin:4rem auto;display:flex;flex-direction:column;gap:.5rem}.auth form{display:flex;flex-direction:column;gap:.5rem}.error{color:#b00020}