* {
  box-sizing: border-box;
}

html, body, #layout {
  margin: 0;
  padding: 0;

  width: 100vw;
  height: 100vh;
}

#layout {
  display: flex;
  flex-direction: column;

  padding-inline: 1rem;
}

#chat {
  flex-grow: 1;
  overflow: hidden;
  padding-block: 1rem;

  > .inner {
    overflow-block: scroll;
    height: 100%;
  }

  ul {
    padding-inline: 1rem;
    margin-block: 0;
  }
}

#input {
  input {
    background-color: #ddd;
    border: none;

    &:focus {
      outline: 1px solid #aaa;
    }
  }
}

#line {
  display: flex;
  column-gap: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  html {
    background: #333;
    color: #fff;
  }

  #input input {
    background-color: #555;
    color: #fff;
  }
}