style: improved chat window styling and accessibility

src/renderer/src/assets/styles/index.scss

@@ -211,6 +211,9 @@ body[os='windows'] {
 
 .bubble {
   background-color: var(--chat-background);
+  #chat-main {
+    background-color: var(--chat-background);
+  }
   #messages {
     background-color: var(--chat-background);
   }
@@ -235,7 +238,7 @@ body[os='windows'] {
     .anticon,
     .iconfont,
     .message-tokens {
-      color: var(--chat-text-user);
+      color: var(--chat-text-user) !important;
     }
     .message-action-button:hover {
       background-color: var(--color-white-soft);

src/renderer/src/pages/home/Chat.tsx

@@ -24,7 +24,7 @@ const Chat: FC<Props> = (props) => {
 
   return (
     <Container id="chat" className={messageStyle}>
-      <Main vertical flex={1} justify="space-between">
+      <Main id="chat-main" vertical flex={1} justify="space-between">
         <Messages
           key={props.activeTopic.id}
           assistant={assistant}
@@ -52,7 +52,6 @@ const Container = styled.div`
   height: 100%;
   flex: 1;
   justify-content: space-between;
-  background-color: var(--color-background);
 `
 
 const Main = styled(Flex)`

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -399,9 +399,13 @@ const Textarea = styled(TextArea)`
   overflow: auto;
   width: 100%;
   box-sizing: border-box;
+  color: var(--color-text);
   &.ant-input {
     line-height: 1.4;
   }
+  &::placeholder {
+    color: var(--color-text-3);
+  }
 `
 
 const Toolbar = styled.div`