html{font-family:Segoe UI,sans-serif;font-size:16px;line-height:1.5;background:#333336;color:#fff}html,body,div{margin:0;padding:0;display:grid;grid:minmax(0,1fr) / minmax(0,1fr)}body{min-height:100vh;max-height:100vh}input,button,a{font-family:inherit;font-size:inherit;line-height:inherit;border:0;color:inherit}input{background:#000}button{padding:8px 16px;background:#2ae;font-weight:600;border-radius:7px;box-shadow:1px 2px 10px #000;transition:all 145ms ease-out}button:hover{background:#3cf;box-shadow:2px 5px 20px #000}button:active{box-shadow:none;background:#17b}.Login{align-self:start;justify-self:center;justify-items:center;gap:8px}.Login .logo{font-size:256px;line-height:1.1;color:#2ae;text-shadow:2px 5px 15px black}.TextInput input{padding:12px}.TextInputAndButton{grid-template-columns:1fr auto;gap:4px;background:#000;align-items:center;padding-right:4px}.LeftPane{grid-template-rows:auto auto 1fr;border-right:1px solid gray}.LeftPane>p{padding-inline:8px;font-weight:700;text-align:end}.LeftPane .conversations{overflow-y:auto;align-content:start;grid-template-rows:auto}.ConversationCard{cursor:pointer;padding:8px}.ConversationCard.selected{background:#17b}.ConversationCard div{grid-template-columns:1fr auto;align-items:center;gap:4px}.ConversationCard div h3{font-weight:500;font-size:1rem;margin:0}.RightPane{grid-template-rows:auto 1fr auto}.RightPane .conversation-header{padding-inline:8px}.RightPane .messages{overflow-y:auto;padding:8px;justify-items:start;align-content:start;gap:8px;grid-template-rows:auto}.MessageCard .bubble{background:#335;padding:6px 10px;border-radius:5px;box-shadow:1px 1px 5px #000;grid-template-columns:auto auto;gap:8px}.MessageCard.own{justify-self:end}.MessageCard.own .bubble{background:#533}.MessageCard .time{color:#aaa}.Main{grid-template-columns:1fr 2fr}