$main-lighten-2: #9061F9;
$main-lighten-1: #7E3AF2;
$main: #6C2BD9;
$main-darken-1: #5521B5;
$main-darken-2: #4A1D96;

$left-border-trim: vkey $main-lighten-2 15%;

* {
  scrollbar-color: $panel;
  scrollbar-color-hover: $main-lighten-1 40%;
  scrollbar-color-active: $main-darken-1;
  scrollbar-background-active: $background;
  scrollbar-background-hover: $background;
}

Chat {
  height: 1fr;
  width: 1fr;
}

Chat > VerticalScroll {
  border-left: $left-border-trim;

}

#chat-input-container {
  dock: bottom;
  border-left: $left-border-trim;
  height: auto;
  padding: 1 2;
}

#chat-input {
  box-sizing: border-box;
}

ChatOptions {
  border-left: $left-border-trim;
}

ChatHeader {
  width: 1fr;
  height: auto;
  padding: 1 2;
  background: $background 50%;
  border-left: $left-border-trim;
}

ChatHeader > Static {
  width: auto;
}

ChatHeader #title-static {
  text-style: bold;
}

ChatHeader #model-static {
  color: $text-muted;
}

ChatHeader > Horizontal {
  width: 1fr;
}

ChatHeader Vertical {
  width: 1fr;
}

AgentIsTyping {
  dock: top;
  display: none;
  color: $text;
  height: 1;
  align-horizontal: right;
}

AgentIsTyping Label {
  width: auto;
}

AgentIsTyping LoadingIndicator {
  width: 11;
  color: $main;
}

#chat-options-container {
  padding: 2 4;
}

.chat-options-label {
  width: 1fr;
  content-align: center middle;
  margin-left: 2;
}

ChatList {
  dock: left;
  height: 1fr;
  width: 32;
  background: $background 15%;
}

ChatList #cl-header-container {
  height: 4;
  padding: 1 2;
  background: $main-darken-2 10%;
}

ChatList .app-title {
  color: $main-lighten-2;
  text-style: bold;
  background: $main-darken-2 10%;
}

ChatList .app-subtitle {
  color: $text-muted;
  background: $main-darken-2 10%;
}

ChatList #cl-button-container {
  dock: bottom;
  padding: 1 2;
  height: 5;
  width: 1fr;
  margin-bottom: 1;
}

ChatList #cl-option-list {
  height: 1fr;
  width: 1fr;
  margin-top: 1;
  scrollbar-size-vertical: 1;
}

ChatList #cl-new-chat-button {
  background: $main-darken-2;
  border: none;
  width: 100%;
  height: 3;
}

ChatList #cl-new-chat-button:hover {
  background: $main-darken-1;
}

Chatbox {
  color: $text;
  background: $main 50%;
  height: auto;
  width: auto;
  max-width: 1fr;
  margin: 1 2;
  padding: 1 2;
}

Chatbox:focus {
  border-left: thick $main-lighten-2;
  padding: 1 2 1 1;
}

Chatbox.assistant-message {
  background: $panel 80%;
}

ModelSet {
  height: auto;
  border: solid $panel 0%;
  border-title-color: $text;
  border-title-align: center;
  padding: 1 2;
}

ModelSet:focus-within {
  border: round $main-lighten-1 100%;
}

ModelPanel {
  width: 1fr;
}

ModelPanel {
  padding: 1 2;
  height: 12;
}

ModelPanel.gpt35 {
  color: $text;
  background: $panel;
  border: thick $accent;
}

ModelPanel.gpt35 :hover {
  background: $panel-lighten-1;
  border: thick $accent-lighten-1;
}

ModelPanel.gpt35.selected {
  background: $accent-darken-2;
  border: thick $accent-lighten-1;
}

ModelPanel.gpt4 {
  color: $text;
  background: $panel;
  border: thick $success;
}

ModelPanel.gpt4 :hover {
  background: $panel-lighten-1;
  border: thick $success-lighten-1;
}

ModelPanel.gpt4.selected {
  background: $success-darken-2;
  border: thick $success-lighten-1;
}

Footer {
  background: $main;
}

Footer > .footer--highlight {
  background: $main-darken-1;
}

Footer > .footer--key {
  text-style: bold;
  background: $main-darken-2;
  color: $text;
}

Footer > .footer--highlight-key {
  background: $success;
  text-style: bold;
  color: $text;
}

Input .input--cursor {
  color: $main-lighten-2;
}

OptionList {
  background: $background 15%;
}

OptionList > .option-list--option-highlighted {
  background: $main 50%;
  color: $text;
  text-style: bold;
}

OptionList:focus > .option-list--option-highlighted {
  background: $main;
}

OptionList > .option-list--option-disabled {
  color: $text-disabled;
}

OptionList > .option-list--option-highlighted-disabled {
  color: $text-disabled;
  background: $main 30%;
}

OptionList:focus > .option-list--option-highlighted-disabled {
  background: $main 40%;
}

OptionList > .option-list--option-hover {
  background: $boost;
}

OptionList > .option-list--option-hover-disabled {
  color: $text-disabled;
  background: $boost;
}

OptionList > .option-list--option-hover-highlighted {
  background: $main 60%;
  color: $text;
  text-style: bold;
}

OptionList:focus > .option-list--option-hover-highlighted {
  background: $main;
  color: $text;
  text-style: bold;
}

OptionList > .option-list--option-hover-highlighted-disabled {
  color: $text-disabled;
  background: $main 60%;
}

Input {
  border: tall $main-lighten-1 25%;
}

Input:focus {
  border: tall $main;
}

MessageInfo {
  align: center middle;
}

MessageInfo > #outermost-container {
  width: 80%;
  height: 60%;
  background: $background;
}

MessageInfo #inner-container {
  height: 1fr;
}

MessageInfo #message-info-header {
  dock: top;
  width: 1fr;
  height: auto;
  background: $main-darken-2 70%;
  color: $text;
}

MessageInfo #message-info-header Tab {
  width: 1fr;
}

MessageInfo #message-info-footer {
  dock: bottom;
  height: 3;
  padding: 1 2;
  background: $main-darken-1;
  color: $text;
  width: 1fr;
}

MessageInfo #timestamp {
  dock: left;
  height: 3;
  width: auto;
}

MessageInfo #token-count {
  dock: right;
  height: 3;
  width: auto;
}

Tabs:focus .underline--bar {
  color: $text 35%;
}

TokenAnalysis {
  height: auto;
}

#inner-container ContentSwitcher {
  height: auto;
  padding: 2 4;
}

#inner-container #markdown-content {
  height: auto;
}

#inner-container #metadata {
  height: auto;
}
