body {
  padding: 1em;
  background-color: #ddd;
  line-height: 1.4;

  font-family: system-ui, sans-serif;
  font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  font-weight: normal;

  /* display: flex;
  justify-content: center;
  align-items: center; */

  /* set highlight color var */
  --highlight: #db6c34;
}
main {
  /* flex columns */
  display: flex;
  flex-direction: row;
  gap: 1em;
}
form.prompt-designer {
  margin: 1em 0;
}
.time {
  font-size: 0.8em;
  color: #666;
  margin-left: 0.5em;
}
.markdown {
  white-space: pre-wrap;
}
.response {
  /* fill the rest of flex parent */
  flex: 1;
  width: 40em;
}
.response ul {
  list-style-type: none;
  padding: 0;
}

.response li {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  cursor: pointer;
  margin-bottom: 1em;
}
.response li:hover {
  background-color: #f0f0f0;
}
.response li a {
  text-decoration: none;
  color: inherit;
}
.response .needs-citation span:after {
  content: " (Citation needed)";
  color: black;
}

.response .harmful span:before {
  content: "! ";
  color: black;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  font-weight: 900;
  width: 0px;
}

.pro {
  color: green;
}
.con {
  color: red;
}
/* .pro::before {
  content: "+ ";
}
.con::before {
  content: "- ";
} */

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

.json {
  white-space: pre-wrap;
}