.hidden {
  display: none;
}

#create {
  align: center middle;
  width: 100%;
  height: 100%;
}

#create #create-label {
  align: center middle;
  text-align: center;
  border-title-align: center;
  padding: 1 2;
  color: $text;
  border: round gray 90%;
}

DebugInfo {
  min-height: 10;
}

Sidebar {
  dock: left;
  background: $panel;
  width: 35;
  height: 100%;
  border-right: vkey $background;
}

Sidebar Button {
  width: 1fr;
}

Sidebar Button#settings {
  dock: bottom;
}

Sidebar #meta-buttons-container {
  height: auto;
}

Sidebar #quit {
  background: $error 25%;
}

Sidebar #quit:hover {
  background: $error 50%;
}

Sidebar TabbedContent {
  height: 100%;
}

Sidebar TabPane {
  padding: 0;
}

Sidebar TabbedContent ContentSwitcher {
  height: 1fr;
}

Sidebar OptionList {
  height: 1fr;
}

Hud #hud {
  height: 3;
  width: 100%;
  background: $surface;
  background: blue;
  layout: horizontal;
}

Hud #character {
  background: red;
}

Hud #ship {
  background: gold;
}

Conversation {
  height: 90%;
  width: 100%;
  background: $panel;
}

Conversation Input {
  dock: bottom;
}

Response {
  height: auto;
  width: 100%;
}

Response.response-hover {
  background: $boost;
}

Response.show-edit-buttons {
  border: round $warning 50%;
  border-title-align: center;
  background: $boost;
  padding: 2 4;
  margin: 1 3;
}

ResponseBody {
  height: auto;
  border: round gray 90%;
  padding: 1 2 0 2;
  margin: 1 3;
  width: 80%;
}

Response Horizontal {
  height: auto;
  width: 100%;
  align: center middle;
}

Response Button {
  margin: 0 2;
}

ResponseBody.show-edit-buttons {
  width: 100%;
}

UserResponse {
  align-horizontal: right;
}

UserResponse ResponseBody {
  background: lightslategray 10%;
}

BotResponse ResponseBody {
  border: skyblue 50%;
  background: $primary 30%;
}

ModalScreen {
  align: center middle;
}

SettingsDialogue,
BotsDialogue,
DatabaseUpgradeDialogue,
ConfirmMessageDeleteDialogue {
  background: $panel;
  margin: 1 2;
  padding: 2 4;
  width: 70%;
  min-width: 60;
  height: auto;
  border: thick $primary 80%;
}

SettingsDialogue TabbedContent {
  margin: 4;
  padding: 2;
}

SettingsDialogue TabPane {
  height: 10;
}

DatabaseUpgradeDialogue {
  border: thick red 50%;
  padding: 2 4;
}

DatabaseUpgradeDialogue Label {
  /* color: darkorange; */
  width: 100%;
  margin: 2 0;
}
ConfirmMessageDeleteDialogue {
  width: auto;
}
ConfirmMessageDeleteDialogue Horizontal {
  height: auto;
  width: 100%;
  align: center middle;
  margin: 2 0 0 0;
}
ConfirmMessageDeleteDialogue .confirm-delete-message {
  text-align: center;
  width: 100%;
}
ConfirmMessageDeleteDialogue Button {
  margin: 0 2;
}

#message-top {
  align: center middle;
}

#empty-thread-container {
  align: center middle;
  min-width: 50%;
  width: auto;
  padding: 4 10;
  border: round $secondary;
  height: auto;
  /* background: $boost; */
  color: $text;
  border-title-align: center;
}
#empty-thread-bot-name {
  width: auto;
}
#empty-thread-bot-description {
  border-left: solid $secondary 60%;
  padding-left: 1;
  margin-top: 1;
  height: auto;
  text-style: italic;
  max-width: 100%;
  /* width: 100%; */
}

#bot-name-container {
  align: center middle;
  height: 4;
  border-bottom: solid $secondary;
}

#bot-name {
  color: $success;

  text-style: bold;
}

.sidebar-title {
  height: 3;
  text-align: center;
  /* text-style: bold; */
  width: 100%;
  padding-top: 1;
}

.settings-container {
  width: 100%;
  height: auto;
  border: round white 40%;
  margin: 2 1;
  padding: 1 2;
}

SettingsDialogue .api-key-info {
  width: 100%;
  margin: 2 1 0 1;
}

SettingsDialogue .error {
  color: red;
}

BotsDialogue {
  width: 80%;
  height: 70%;
}

BotsDialogue Horizontal {
  height: auto;
}

BotsDialogue Button {
  margin-right: 2;
}

BotsDialogue #install-default-bots {
  padding: 0 2;
}

BotsOptionList {
  border: solid white 50%;
  background: $boost;
  margin: 1 2;
}

BotInfo {
  border: solid white 50%;
  column-span: 2;
  height: 100%;
  width: 100%;
}

BotInfo TextTable {
  height: 100%;
  width: 100%;
  overflow: auto auto;
  padding: 1 2 1 2;
}

BotInfo TextTable .label {
  padding-right: 1;
  color: gray;
}

#bots-info-container {
  layout: grid;
  grid-size: 3;
  overflow-y: scroll;
}

BotsList {
  margin: 1 2;
}
BotInfo {
  margin: 1 2;
  background: $boost;
  border: solid $secondary;
}

#bot-info-outer-container {
  margin: 2 3 2 3;
}
BotInfo .bot-info-container {
  margin-bottom: 2;
  height: auto;
}

BotInfo .label {
  text-style: bold;
}

BotInfo .text {
  border-left: solid $secondary 60%;
  padding-left: 1;
  margin-top: 1;
  /* height: auto; */
  text-style: italic;
  max-width: 100%;
  width: auto;
}