*{box-sizing:border-box}html{position:fixed}body,html{width:100%;height:100%}body{margin:0}#app,#root{width:100%;height:100%}#app{padding:10px;display:grid;grid-gap:10px;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;background-color:#eee}#header{background-color:#191970;color:#fff;grid-row:1;grid-column:1/-1;padding:10px;border-radius:10px}#header h2{margin:0}#rooms{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;grid-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;border:1px solid;border-radius:10px;padding:10px;background-color:#fff}#rooms h3{margin:0}#messages{height:100%;display:grid;border:1px solid;border-radius:10px;padding:10px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow-y:hidden;background-color:#fff}#messages-header{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin:0 0 10px}#messages-header h3{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#messages-control-panel{-webkit-flex:none;flex:none;margin-left:auto}#messages-with-no-selected-room{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-around;justify-content:space-around;border:1px solid;border-radius:10px;padding:10px}#events{overflow-y:scroll}#events p{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:.5em;margin-block-end:.5em}#events p:last-child{-webkit-margin-after:0;margin-block-end:0}.selected-room{border-color:#00f;color:#00f}.send-window{margin-top:15px;display:-webkit-flex;display:flex;grid-column-gap:5px;-webkit-column-gap:5px;column-gap:5px}#user-id{width:100px}.user-id-invalid{border-color:red;outline-color:red;border-style:solid}.message-text{-webkit-flex-grow:1;flex-grow:1}