Dixith/pamgolding-bot

1/* Import Google font - Poppins */2@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');3 4* {5  margin: 0;6  padding: 0;7  box-sizing: border-box;8  font-family: "Poppins", sans-serif;9}10 11body {12  background: rgba(255, 255, 255, 0.5);13}14 15.chatbot-toggler {16  position: fixed;17  bottom: 30px;18  right: 35px;19  outline: none;20  border: none;21  height: 50px;22  width: 50px;23  display: flex;24  cursor: pointer;25  align-items: center;26  justify-content: center;27  border-radius: 50%;28  background: #007525;29  transition: all 0.2s ease;30}31 32body.show-chatbot .chatbot-toggler {33  transform: rotate(90deg);34}35 36.chatbot-toggler span {37  color: #fff;38  position: absolute;39}40 41.chatbot-toggler span:last-child,42body.show-chatbot .chatbot-toggler span:first-child  {43  opacity: 0;44}45 46body.show-chatbot .chatbot-toggler span:last-child {47  opacity: 1;48}49 50.header-content {51  display: flex;52  align-items: center;53  justify-content: start;54  padding: 10px;55  position: relative;56  border-bottom: 2px solid #000000; /* Red border added */57}58 59.profile-pic {60  width: 50px;61  height: 50px;62  border-radius: 50%;63  margin-right: 10px;64}65 66h3, p {67  margin: 0;68}69 70.chatbot {71  position: fixed;72  right: 35px;73  bottom: 90px;74  width: 440px;75  height: 700px;76  background: #fff;77  border-radius: 15px;78  overflow: hidden;79  opacity: 0;80  pointer-events: none;81  transform: scale(0.5);82  transform-origin: bottom right;83  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),84              0 32px 64px -48px rgba(0, 0, 0, 0.5);85  transition: all 0.1s ease;86}87 88body.show-chatbot .chatbot {89  opacity: 1;90  pointer-events: auto;91  transform: scale(1);92}93 94.chatbot-container {95  background-color: transparent; /* Transparent background */96  /* Other styles */97}98 99.chatbot header {100  padding: 5px 0;101  position: relative;102  padding-left: 10px;103  text-align: center;104  color: #ffffff;105  border-bottom: 2px solid #ff0000;106  bottom: 2.5px;107  background: darkgreen;108  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);109}110 111.chatbot header span {112  position: absolute;113  right: 15px;114  top: 50%;115  display: none;116  cursor: pointer;117  transform: translateY(-50%);118}119 120.chat-icon {121  width: 40px; /* Updated width */122  height: 40px; /* Updated height */123  border-radius: 50%;124  margin-right: 10px;125  vertical-align: middle; /* Aligns image with text */126  margin-right: 10px; /* Adds some space between the icon and the text */127  object-fit: cover; /* Ensures the image covers the area without being stretched */128  border: none; /* Remove any border */129}130 131header h2 {132  font-size: 1.4rem;133}134 135.chatbot .chatbox {136  overflow-y: auto;137  height: 510px;138  padding: 30px 20px 100px;139}140 141.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {142  width: 6px;143}144 145.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {146  background: #fff;147  border-radius: 25px;148}149 150.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {151  background: #ccc;152  border-radius: 25px;153}154 155.chatbox .chat {156  display: flex;157  list-style: none;158}159 160.chatbox .outgoing {161  margin: 20px 0;162  color: #000;163  justify-content: flex-end;164}165 166.chatbox .incoming span {167  width: 32px;168  height: 32px;169  color: #fff;170  cursor: default;171  text-align: center;172  line-height: 32px;173  align-self: flex-end;174  background: #007525;175  border-radius: 4px;176  margin: 0 10px 7px 0;177}178 179.chatbox .chat p {180  white-space: pre-wrap;181  padding: 12px 16px;182  border-radius: 10px 10px 0 10px;183  max-width: 75%;184  color: #fffcfc;185  font-size: 0.95rem;186  background: #007525;187}188 189.chatbox .incoming p {190  border-radius: 10px 10px 10px 0;191  color: #303030; /* Darker text color for incoming messages */192  background: #f2f2f2;193}194 195.chatbox .chat p.error {196  color: #303030;197  background: #f8d7da;198}199 200.chatbot .chat-input {201  display: flex;202  gap: 5px;203  position: absolute;204  bottom: 0;205  width: 100%;206  background: #fff;207  padding: 3px 20px;208  border-top: 1px solid #ddd;209}210 211@keyframes typing {212  0% { content: 'Typing'; }213  25% { content: 'Typing.'; }214  50% { content: 'Typing..'; }215  75% { content: 'Typing...'; }216}217 218.typing-animation {219  display: inline-block;220  position: relative;221}222 223.typing-animation::after {224  content: 'Typing';225  animation: typing 1.5s steps(4, end) infinite;226  position: absolute;227  left: 0;228  bottom: 0;229}230 231.chat-input textarea {232  height: 55px;233  width: 100%;234  border: none;235  outline: none;236  resize: none;237  size: auto;238  max-height: 60px;239  padding: 17px 15px 15px 0;240  font-size: 0.95rem;241}242 243.chat-input span {244  align-self: flex-end;245  color: #000000;246  cursor: pointer;247  height: 55px;248  display: flex;249  align-items: center;250  visibility: hidden;251  font-size: 1.35rem;252}253 254.chat-input textarea:valid ~ span {255  visibility: visible;256}257 258/* Your existing styles */259 260.chat-input #microphone-btn {261  align-self: flex-end;262  color: #000000;263  cursor: pointer;264  height: 55px;265  display: flex;266  align-items: center;267  font-size: 1.35rem;268  background: transparent;269  border: none;270  margin-right: 10px;271}272 273@media (max-width: 490px) {274  .chatbot-toggler {275    right: 20px;276    bottom: 20px;277  }278 279  .chatbot {280    right: 0;281    bottom: 0;282    height: 100%;283    border-radius: 0;284    width: 100%;285  }286 287  .chatbot .chatbox {288    height: 90%;289    padding: 25px 15px 100px;290  }291 292  .chatbot .chat-input {293    padding: 5px 15px;294  }295 296  .chatbot header span {297    display: block;298  }299}300