Black text around message text.

[enfantrichedeprime]

Cannot find css property to fix black background around chat message text after rewriting scss.

I know this is my own fault and not something wrong with the app itself.
If you consider it a waste of time, just close this, and I'll delete it.

My css:

$rosewater: #f4dbd6;
$flamingo: #f0c6c6;
$pink: #f5bde6;
$mauve: #c6a0f6;
$red: #ed8796;
$maroon: #ee99a0;
$peach: #f5a97f;
$yellow: #eed49f;
$green: #a6da95;
$teal: #8bd5ca;
$sky: #91d7e3;
$sapphire: #7dc4e4;
$blue: #8aadf4;
$lavender: #b7bdf8;
$text-light: #cad3f5;
$text-dark: #24273a;
$surface-light: #d7daff;
$surface-dark: #363a4f;
$base-light: #24273a;
$base-dark: $base-light;

$main-lighten-2: $pink;
$main-lighten-1: $mauve;
$main: $blue;
$main-darken-1: $lavender;
$main-darken-2: $sapphire;
$main-border-text-color: $green 70%;
$main-border-color: $mauve 90%;
$main-border-color-focus: $pink 100%;

$left-border-trim: vkey $pink 15%;

* {
  scrollbar-color: $surface-light;
  scrollbar-color-hover: $mauve 40%;
  scrollbar-color-active: $lavender;
  scrollbar-background: $text-dark;
  scrollbar-background-active: $surface-dark;
  scrollbar-background-hover: $base-dark;
  link-style: none;
  link-color-hover: $green;
  link-background-hover: $blue 0%;
  link-style-hover: u not dim bold;
  background: #363a4f; /* Inherit background color from parent element */
}

Tabs .underline--bar {
  color: $pink 50%;
  background: $blue 75%;
}

Screen {
  background: $base-light;
  padding: 0 2 1 2;
  &:inline {
    height: 80vh;
    padding: 0 2;
  }
}

ModalScreen {
  background: $text-dark 50%;
  padding: 0;
  &:inline {
    padding: 0;
    border: none;
  }
  & Footer {
    margin: 0 2 1 2;
  }
}

Rule {
  color: $text-light 20%;

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

Toast {
  background: $surface-dark;
  border-right: none;
  &.-information {
    border-left: outer $mauve;
    & .toast--title {
      color: $pink;
    }
  }

  &.-error {
    border-left: outer $mauve;
    & .toast--title {
      color: $pink;
    }
  }
}

Chat {
  ChatHeader {
    width: 100%;
    height: auto;
    padding: 1 2;
    background: $base-light;
    &:inline {
      padding: 0 2 1 2;
    }

    & #model-static {
      color: $text-light;
    }
  }
  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: $blue;
}

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: $blue 60%;
    }
  }
  & .text-area--cursor-line {
    background: $base-light 0%;
  }

  & .text-area--cursor-gutter {
    background: $base-light 0%;
  }
  &:focus .text-area--cursor-gutter {
    color: $green;
    background: $base-light 0%;
  }
  & .text-area--selection {
    background: $pink 25%;
  }

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

PromptInput.multiline .text-area--cursor-line {
  background: $text-light 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;

  &:inline {
    padding: 0 2 1 2;
  }

  & .app-title {
    color: $text-light;
  }

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

  & Horizontal {
    height: auto;
  }

  & #model-label {
    border: none;
    background: $sapphire 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: $green 3%;
    min-width: 30%;
  }

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

    & TextArea {
      & .text-area--selection {
        background: $green 23%;
        color: $text-light 93%;
      }
    }

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

  &.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: $pink;
      }
    }
  }
}

Footer {
  background: $lavender 0%;
}

Footer > .footer--highlight {
  background: $pink 20%;
}

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

Footer > .footer--highlight-key {
  background: $pink 30%;
  color: $green;
}

OptionList {
  background: $base-light 15%;
}

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

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

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

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

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

OptionList > .option-list--option-hover-highlighted {
  background: $mauve 40%;
  color: $text-light;
  text-style: bold;
}

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

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

RenameChat {
  & > Vertical {
    background: $base-light 0%;
    height: auto;
    & Input {
      padding: 0 4;
      border: none;
      border-bottom: hkey $main-border-color;
      border-top: hkey $main-border-color;
      border-subtitle-color: $main-border-text-color;
      border-subtitle-background: $base-light;
    }
  }
}

ChatDetails {
  align: center middle;
  & > #container {
    width: 90%;
    height: 85%;
    background: $base-light;
    padding: 1 2;
    border: wide $main-border-color-focus;
    border-title-color: $main-border-text-color;
    border-title-background: $base-light;
    border-title-style: b;
    border-subtitle-color: $text-light;
    border-subtitle-background: $base-dark;

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

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

    & .datum {
      text-style: i;
    }
  }
}

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

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

MessageInfo #message-info-footer {
  dock: bottom;
  height: 3;
  padding: 1 2;
  background: $lavender;
  color: $text-light;
  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-light 35%;
}

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: $base-light;
  padding: 1 0 0 1;
  scrollbar-gutter: stable;
  scrollbar-size: 2 1;
  width: 75%;
  height: auto;
  max-height: 90%;
  border: wide $sapphire 80%;
  border-title-color: $main-border-text-color;
  border-title-background: $base-light;
  & #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: $green;
}

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

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

RadioButton .toggle--button {
  color: $green 80%;
  background: $surface-light;
}

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

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

  & VerticalScroll {
    scrollbar-gutter: stable;
  }

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

    & MarkdownH3 {
      background: $base-light 0%;
      margin: 0;
      margin-top: 1;
      padding: 0;
    }
    & MarkdownBlockQuote {
      background: $red;
      border-left: outer $blue;
      padding: 1;
    }
    & MarkdownBulletList {
      margin-left: 1;
    }
  }
}