:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0;word-break:break-all}header{position:sticky;top:0;width:100%;background-color:#4200ab;color:#fff;padding:1rem}header h1{max-width:800px;margin:auto}main{display:flex;gap:1rem;justify-content:space-between;max-width:800px;margin:auto;padding:1rem 0}.welcome{width:60%}.chat{width:100%;display:flex;flex-direction:column;gap:.5rem}.actions{display:flex;gap:.5rem}.users{width:40%;overflow-x:hidden}form{display:flex;flex-direction:column;gap:.5rem}form[name=disconnect],form[name=message]{display:none}button{background-color:#4200ab;color:#fff;width:100%;border:none;padding:.5rem;border-radius:.5rem;cursor:pointer}input{border:none;border-radius:.5rem;padding:.5rem;background-color:#383838;color:#fff}ul{list-style:none}li{padding:.5rem;font-size:large;border-top:1px solid rgb(56,56,56);cursor:pointer}li:hover{background-color:#4200ab;color:#fff}.messages{display:flex;flex-direction:column-reverse;align-items:center;width:100%;gap:.5rem}.qr{background-color:#111;color:#fff;font-family:monospace;padding:1rem;border-radius:.5rem;white-space:pre;text-align:center;line-height:1}.qr p{font-size:.5rem}.system-message{background-color:#4c4c4c;display:flex;justify-content:space-between;width:100%;padding:.5rem;border-radius:.5rem;font-style:italic}.message{display:flex;flex-direction:column;gap:.5rem;width:100%;padding:.5rem;background-color:#383838;border-radius:.5rem}.message.own{background-color:#4200ab}.message-header{display:flex;justify-content:space-between}.alert{background-color:#ff4d4d;padding:.75rem;border-radius:.5rem;margin-top:1rem;text-align:center;font-weight:700;color:#fff;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 600px){main{flex-direction:column-reverse;gap:1rem;width:95%}.qr{display:none}.welcome{width:100%}.users{display:none}}