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

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

input {
  --color-bg: 16 16 16;
}

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

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

form input {
  width: 100%;
}

section,
article {
  margin: 0;
}

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

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

  & > * {
    padding: 1em;
  }
}

.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);
  }
}