/* theme.css */
* {
  box-sizing: border-box;
  padding: 0;
  font-size: 2vh;
}

html, body, #app, textarea, #msglist {
  width: 100%;
  height: 100%;
  margin: 0;
}

:root {
  --cyan: #00efef;
  --cyan-deeper: teal;
  --cyan-lighter: #f0f0f0;
  --rust: #b55436;
  --gain: #d3d3d3;
  --font-color: var(--cyan-lighter);
}

.flex-container, .flex-container-list, .flex-container-reverse {
  display: flex;
}

.flex-container-list {
  flex-direction: column;
}

.flex-container-reverse {
  flex-direction: row-reverse;
}

.flex-item {
  background-color: var(--cyan-lighter);
  border: 2px solid #ccc;
  padding: 2px;
}

.flex-item-list {
  background-color: var(--cyan-lighter);
  border: 2px solid #ccc;
  padding: 20px;
}

.selected {
  background-color: var(--cyan-deeper);
  color: var(--cyan-lighter);
}

.flex-item.sidebar {
  flex: 1;
}

.flex-item.main-content {
  flex: 6;
}

.borderless {
  border: none;
}

.autoflow-y {
  overflow-y: auto;
}

.autoflow-x {
  overflow-x: auto;
}

.maxheight-main {
  max-height: 80%;
}

.maxheight-rest {
  max-height: 20%;
}

.menu-item {
  height: 8vh;
  max-height: 8vh;
  margin-top: 1vh;
}

.msg-item {
  margin-top: 1vh;
}

.agent-item {
  height: 8vh;
  max-height: 8vh;
  margin-top: 1vh;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  _overflow-x: auto;
  _max-height: 200px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  max-width: 100%;
  margin: 10px 0;
  padding: 10px;
}

button {
  background-color: var(--cyan-deeper);
  color: var(--font-color);
}

#msglist {
  max-height: 90%;
}

#userinput {
  flex-grow: 2;
  max-height: 10%;
}

#userinput > textarea {
  flex: 8;
}

#userinput > button {
  flex: 2;
}