:root {
  --back-1: #141f29;
  --back-2: rgb(31, 49, 65);
  --back-accent: #192734;

  --fore-1: #f8f8f8;
  --fore-2: #e2e2e2;
  --fore-muted: #626262;
  --fore-call: darkcyan;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--back-1);
  color: var(--fore-1);
  height: 100vh;
}

#chatbox {
  display: flex;
  flex-direction: column;
  justify-content: safe flex-end;
  gap: .25rem;
  margin: 0 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--back-accent);
  box-shadow: rgba(0, 0, 0, .2) 0 5px 5px;
  border-radius: .5rem;
  height: 100%;
  overflow-y: scroll;
}

#chatbox .message-container {
  width: 100%;
}

#chatbox .message-container .message {
  padding: 1rem;
  background-color: var(--back-2);
  box-shadow: rgba(0, 0, 0, .2) 0 5px 5px;
  border-radius: .5rem;
  width: max-content;
  max-width: 50%;
}

#chatbox .message-container.you .message {
  margin-left: auto;
  text-align: right;
}

#prompter {
  display: flex;
  gap: .25rem;
  padding: 1rem;
  height: max-content;
}

#prompter input {
  font-size: medium;
  background-color: var(--back-accent);
  box-shadow: rgba(0, 0, 0, .2) 0 5px 5px;
  border: none;
  outline: none;
  color: var(--fore-2);
}

#prompter input[type=text] {
  padding: .75rem;
  border-radius: .5rem 0 0 .5rem;
  width: 100%;
}

#prompter input[type=submit] {
  padding: .75rem 1rem;
  border-radius: 0 .5rem .5rem 0;
  width: max-content;
}

#prompter input[type=submit]:enabled:hover {
  filter: brightness(.9);
}

#prompter input[type=submit]:enabled:active {
  filter: brightness(.8);
}