:root{--bg-primary:#181818;--bg-secondary:#202020;--bg-tertiary:#303030;--bg-accent-primary:#1733cc;--bg-accent-secondary:#0c1e86;--primary:#f3f3f3}*{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{margin:0}#content{flex-direction:row;width:100vw;height:100vh;display:flex}#sidebar{background-color:var(--bg-secondary);flex:1}#chat{background-color:var(--bg-primary);flex-direction:column;flex:4;display:flex}#chat-info{box-sizing:border-box;width:100%;height:3em;color:var(--primary);background-color:var(--bg-secondary);flex-direction:row;flex-shrink:0;justify-content:space-between;align-items:center;padding:.5em 1em;font-size:16px;display:flex}#chat-messages{scrollbar-width:auto;scrollbar-color:var(--bg-primary) var(--bg-secondary);flex-direction:column;flex:1;gap:.25em;min-height:0;padding:1em;display:flex;overflow-y:auto}.message{color:var(--primary);flex-direction:column;width:fit-content;min-width:200px;padding:.7em 1em;display:flex}.message.send{background-color:var(--bg-accent-secondary);text-align:right;align-self:flex-end;align-items:flex-end}.message.recieved{background-color:var(--bg-accent-primary);align-self:flex-start}.message p{margin:0;font-size:16px}.message .info{flex-direction:row;justify-content:space-between;gap:1ch;margin-top:.7em;display:flex}.message span{font-size:12px;font-style:italic}.message .sender{display:none}.message.recieved .sender{display:block}#chat-input{box-sizing:border-box;height:4em;color:var(--primary);background-color:var(--bg-secondary);flex-direction:row;flex-shrink:0;padding:.5em;font-size:16px;display:flex}#chat-input input{background-color:var(--bg-tertiary);color:var(--primary);border:none;outline:none;flex:1;padding:.5em 1em;font-size:16px}#chat-input button{background-color:var(--bg-accent-primary);color:var(--primary);border:none;outline:none;padding:.5em 1em;font-size:16px}