$main-lighten-2: #9061F9;
$main-lighten-1: #7E3AF2;
$main: #6C2BD9;
$main-darken-1: #5521B5;
$main-darken-2: #4A1D96;
$main-border-text-color: greenyellow 70%;
$main-border-color: $main-lighten-1 50%;
$main-border-color-focus: $main-lighten-1 100%;

$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: #0E0E0E;
  scrollbar-background-active: $background-darken-1;
  scrollbar-background-hover: #0C0C0C;
  link-style: none;
  link-color-hover: greenyellow;
  link-background-hover: $main 0%;
  link-style-hover: u not dim bold;
}

Tabs .underline--bar {
  color: $main-lighten-2 50%;
  background: $main 75%;
}

Screen {
  background: $background;
  padding: 0 2 1 2;
}

ModalScreen {
  background: black 50%;
  padding: 0;

  & Footer {
    margin: 0 2 1 2;
  }
}

Rule {
  color: white 20%;

  &.-horizontal {
    margin: 0 0;
  }
}

Toast {
  background: $background-darken-1;
  border-right: none;
}

Toast.information {
  border-left: outer $main-lighten-1;
}


Chat {
  ChatHeader {
    width: 100%;
    height: auto;
    padding: 1 2;
    background: $background;

    & #model-static {
      color: $text-muted;
    }
  }
  PromptInput {
    height: auto;
    max-height: 50%;
    padding: 0 1;
  }
}

AgentIsTyping {
  dock: top;
  align-horizontal: right;
  display: none;
  height: 1;
  width: auto;
  layer: overlay;
  margin-top: 1;
  margin-right: 2;
}


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

TextArea {
  padding: 1 2;
  border: round $main-border-color;
  border-title-color: $main-border-text-color;
  border-subtitle-color: $main-border-text-color;
  &:focus {
    border: round $main-border-color-focus;
    border-title-style: bold;
    & .text-area--selection {
      background: $main 60%;
    }
  }
  & .text-area--cursor-line {
    background: $background 0%;
  }

  & .text-area--cursor-gutter {
    background: $background 0%;
  }
  &:focus .text-area--cursor-gutter {
    color: yellowgreen;
    background: $background 0%;
  }
  & .text-area--selection {
    background: $main-lighten-2 25%;
  }

  &.selection-mode {
    border: none;
    height: auto;
    max-height: 75vh;
    width: 100%;
    padding: 0;
  }
}

PromptInput.multiline .text-area--cursor-line {
  background: white 3%;
}

HomeScreen PromptInput {
  height: auto;
  max-height: 65%;

  & TextArea {
    height: auto;
    max-height: 100%;
  }
}

AppHeader #cl-header-container {
  height: auto;
}

AppHeader {
  dock: top;
  width: 1fr;
  padding: 1 2;
  height: auto;
  & .app-title {
    color: $text-muted;
  }

  & .app-subtitle {
    color: greenyellow 50%;
    text-style: bold;
  }

  & Horizontal {
    height: auto;
  }

  & #model-label {
    border: none;
    background: $main-darken-2 0%;
    text-style: dim;
  }
}

HomeScreen ChatList {
  padding: 0;
  height: 1fr;
  width: 1fr;
  border: round $main-border-color;
  border-title-color: $main-border-text-color;
  border-subtitle-color: $main-border-text-color;

  &:focus {
    border: round $main-border-color-focus;
    border-title-style: bold;
    border-subtitle-color: $main-border-text-color;
  }
}

Chatbox {
  height: auto;
  width: auto;
  min-width: 12;
  max-width: 1fr;
  margin: 0 1;
  padding: 0 2;

  &.assistant-message.response-in-progress {
    background: greenyellow 3%;
    min-width: 30%;
  }

  &.assistant-message {
    border: round greenyellow 60%;
    &:focus-within {
      border: round greenyellow;
      border-left: thick greenyellow 50%;
    }

    & TextArea {
      & .text-area--selection {
        background: greenyellow 23%;
        color: white 93%;
      }
    }

    & SelectionTextArea.visual-mode {
      & .text-area--cursor {
        background: greenyellow;
      }
    }

  }

  &.human-message {
    border: round $main-border-color;
    &:focus-within {
      border: round $main-border-color-focus;
      border-left: thick $main-border-color-focus;
    }
    & SelectionTextArea.visual-mode {
      & .text-area--cursor {
        background: $main-lighten-2;
      }
    }
  }

}

Footer {
  background: $main-darken-1 0%;
}

Footer > .footer--highlight {
  background: $main-lighten-2 20%;
}

Footer > .footer--key {
  text-style: none;
  background: $main-darken-2 0%;
  color: $main-border-text-color;
}

Footer > .footer--highlight-key {
  background: $main-lighten-2 30%;
  color: greenyellow;
}

OptionList {
  background: $background 15%;
}

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

OptionList:focus > .option-list--option-highlighted {
  background: $main-darken-2 80%;
  text-style: none;
}

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

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-lighten-1 40%;
  color: $text;
  text-style: bold;
}

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

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

ChatDetails {
  align: center middle;
}

ChatDetails > #container {
  width: 90%;
  height: 85%;
  background: $background;
  padding: 1 2;
  border: wide $main-border-color-focus;
  border-title-color: $main-border-text-color;
  border-title-background: $background;
  border-title-style: b;
  border-subtitle-color: $text-muted;
  border-subtitle-background: $background;

  & Markdown {
    padding: 0;
    margin: 0;
  }

  & .heading {
    color: $text-muted;
  }

  & .datum {
    text-style: i;
  }

}

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

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

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

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

OptionsModal {
  align: center middle;
}

OptionsModal #form-scrollable {
  background: $background;
  padding: 1 0 0 1;
  scrollbar-gutter: stable;
  scrollbar-size: 2 1;
  width: 75%;
  height: auto;
  max-height: 90%;
  border: wide $main-darken-2 80%;
  border-title-color: $main-border-text-color;
  border-title-background: $background;
  & #available-models {
    width: 100%;
    border: round $main-border-color;
    border-title-color: $main-border-text-color;
    background: red 0%;
    padding: 1 0;

    &:focus {
      border: round $main-border-color-focus;
      border-title-style: bold;
    }
  }

  & TextArea {
    height: auto;
    max-height: 12;
    border-subtitle-color: $main-border-color;
    &:focus {
      border-subtitle-color: $main-border-color-focus;
    }
  }


  #xdg-info {
    padding: 1 2;
    border: round $main-border-color;
    height: auto;
    border-title-color: $main-border-text-color;
  }

}

.code_inline {
  text-style: none;
  color: greenyellow;
}

RadioSet:focus > RadioButton.-on {
  & > .toggle--label {
    text-style: bold not dim;
    color: greenyellow;
  }
}

RadioSet > RadioButton.-on {
  text-style: bold not dim;
  color: greenyellow;
}

RadioButton .toggle--button {
  color: greenyellow 80%;
  background: $background-lighten-1;
}

HelpScreen {
  width:1fr;
  height: auto;
  align: center middle;

  & #help-scroll-keys-info {
    dock: bottom;
    border-top: solid $main 50%;
    text-style: dim;
    padding: 0 2;
    background: $background 0%;
  }
  & > Vertical {
    border: wide $main-border-color 80%;
    border-title-color: $main-border-text-color;
    border-title-background: $background;
    border-title-style: bold;
    width: 80%;
    height: 90%;
    background: $background;
  }

  & VerticalScroll {
    scrollbar-gutter: stable;
  }

  & Markdown {
    margin: 0;
    padding: 0 2;

    & MarkdownH3 {
      background: $background 0%;
      margin: 0;
      margin-top: 1;
      padding: 0;
    }
    & MarkdownBlockQuote {
      background: $boost;
      border-left: outer $main;
      padding: 1;
    }
    & MarkdownBulletList {
      margin-left: 1;
    }
  }
}
