:root {
  --color-bg: 0 0 0;
  --color-bg-x: 16 16 16;
  --color-fg: 255 255 255;
  --color-off-accent: var(--color-fg);
  --alpha-text: 1;

  line-height: 1.25;
}

::selection {
  background-color: rgb(var(--color-accent) / 0.5);
}

input[type="text"] {
  background-color: rgb(var(--color-bg-x) / 1);
}

button {
  --color-accent: 32 32 32;
}

nav {
  display: flex;
  flex-direction: column-reverse;
  gap: 1em;
  padding: 1em;
}

form input {
  width: 100%;
  font-size: 16px;
}

:is(section, article, header) {
  margin: 0;
}

body,
main,
.conversation {
  height: 100%;
  min-height: 100dvh;
}

.conversation {
  display: flex;
  flex-direction: column;
  max-height: 100dvh;

  & > * {
    padding: 1em;
  }
}

.conversation header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: smaller;

  gap: 1em;
  * {
    margin: 0;
  }
}

.chatlog {
  flex: 1;

  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  article {
    white-space: preserve;
    padding: 1em;
    border-bottom: 1px solid rgb(var(--color-fg) / 0.5);
  }

  article.user {
    text-align: right;
    border-bottom: none;
    padding-bottom: 0;
    color: rgb(var(--color-text) / 0.5);
  }

  summary {
    margin-bottom: 0;
    color: rgb(var(--color-accent) / 1);
    font-weight: bold;
  }
}

pre > code {
  font-size: 0.8em;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-name,
.hljs-strong {
  font-weight: bold;
  color: hsl(293, 63%, 76%);
}

.hljs-comment {
  color: hsl(248, 7%, 56%);
}

.hljs-title,
.hljs-section,
.hljs-built_in,
.hljs-literal,
.hljs-type,
.hljs-addition,
.hljs-tag,
.hljs-quote,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: hsl(263, 68%, 72%);
}

.hljs-string,
.hljs-meta,
.hljs-subst,
.hljs-symbol,
.hljs-regexp,
.hljs-attribute,
.hljs-deletion,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-bullet {
  color: hsl(330, 100%, 74%);
}

.hljs-number {
  color: hsl(202, 87%, 76%);
}

.hljs-emphasis {
  font-style: italic;
}