黑色输入框

01.container_chat_bot {02  display: flex;03  flex-direction: column;04  max-width: 260px;05  width: 100%;06}07 08.container_chat_bot .container-chat-options {09  position: relative;10  display: flex;11  background: linear-gradient(12    to bottom right,13    #7e7e7e,14    #363636,15    #363636,16    #363636,17    #36363618  );19  border-radius: 16px;20  padding: 1.5px;21  overflow: hidden;22 23  &::after {24    position: absolute;25    content: "";26    top: -10px;27    left: -10px;28    background: radial-gradient(29      ellipse at center,30      #ffffff,31      rgba(255, 255, 255, 0.3),32      rgba(255, 255, 255, 0.1),33      rgba(0, 0, 0, 0),34      rgba(0, 0, 0, 0),35      rgba(0, 0, 0, 0),36      rgba(0, 0, 0, 0)37    );38    width: 30px;39    height: 30px;40    filter: blur(1px);41  }42}43 44.container_chat_bot .container-chat-options .chat {45  display: flex;46  flex-direction: column;47  background-color: rgba(0, 0, 0, 0.5);48  border-radius: 15px;49  width: 100%;50  overflow: hidden;51}52 53.container_chat_bot .container-chat-options .chat .chat-bot {54  position: relative;55  display: flex;56}57 58.container_chat_bot .chat .chat-bot textarea {59  background-color: transparent;60  border-radius: 16px;61  border: none;62  width: 100%;63  height: 50px;64  color: #ffffff;65  font-family: sans-serif;66  font-size: 12px;67  font-weight: 400;68  padding: 10px;69  resize: none;70  outline: none;71 72  &::-webkit-scrollbar {73    width: 10px;74    height: 10px;75  }76 77  &::-webkit-scrollbar-track {78    background: transparent;79  }80 81  &::-webkit-scrollbar-thumb {82    background: #888;83    border-radius: 5px;84  }85 86  &::-webkit-scrollbar-thumb:hover {87    background: #555;88    cursor: pointer;89  }90 91  &::placeholder {92    color: #f3f6fd;93    transition: all 0.3s ease;94  }95  &:focus::placeholder {96    color: #363636;97  }98}99 100.container_chat_bot .chat .options {101  display: flex;102  justify-content: space-between;103  align-items: flex-end;104  padding: 10px;105}106 107.container_chat_bot .chat .options .btns-add {108  display: flex;109  gap: 8px;110 111  & button {112    display: flex;113    color: rgba(255, 255, 255, 0.1);114    background-color: transparent;115    border: none;116    cursor: pointer;117    transition: all 0.3s ease;118 119    &:hover {120      transform: translateY(-5px);121      color: #ffffff;122    }123  }124}125 126.container_chat_bot .chat .options .btn-submit {127  display: flex;128  padding: 2px;129  background-image: linear-gradient(to top, #292929, #555555, #292929);130  border-radius: 10px;131  box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, 0.5);132  cursor: pointer;133  border: none;134  outline: none;135  transition: all 0.15s ease;136 137  & i {138    width: 30px;139    height: 30px;140    padding: 6px;141    background: rgba(0, 0, 0, 0.1);142    border-radius: 10px;143    backdrop-filter: blur(3px);144    color: #8b8b8b;145  }146  & svg {147    transition: all 0.3s ease;148  }149  &:hover svg {150    color: #f3f6fd;151    filter: drop-shadow(0 0 5px #ffffff);152  }153 154  &:focus svg {155    color: #f3f6fd;156    filter: drop-shadow(0 0 5px #ffffff);157    transform: scale(1.2) rotate(45deg) translateX(-2px) translateY(1px);158  }159 160  &:active {161    transform: scale(0.92);162  }163}164 165.container_chat_bot .tags {166  padding: 14px 0;167  display: flex;168  color: #ffffff;169  font-size: 10px;170  gap: 4px;171 172  & span {173    padding: 4px 8px;174    background-color: #1b1b1b;175    border: 1.5px solid #363636;176    border-radius: 10px;177    cursor: pointer;178    user-select: none;179  }180}