@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,900&display=swap");
/* Base / Body / Root Styles */
:root {
  --light-grey: #aaaaad;
  --light-grey-text: #aaaaad;
  --light-grey-icon: #aaaaad;
  --dark-grey: #292b32;
  --double-dark-grey: #1C1E25;
  --white-color: white;
  --white-btn-color: white;
  --blue-color: #1b1f30;
  --green-color: #50F9AC;
  --green-fill: rgb(80, 249, 172);
  --red-color: #9d2626;
  --yellow-color: #FFC107;
  --purple-color: #9BADFF;
  --scroll-bar-color: #9BADFF;
  --dark-blue: #1b1f30;
  --black-color-dark: #02040B;
  --mid-grey-color: #AAAAAD;
  --background-color-dark: #02040B;
  --background-color-light: #ffffff30; /* New variable for light theme */
  --grey-message-color: rgba(255, 255, 255, 0.40);
  --gradient: linear-gradient(180deg, #017FC1 20%, #80F058);
  --gradient-2: linear-gradient(180deg, #017FC1 35%, #80F058);
  --link-color: #007bff;
  --underline-color: #4aca86;
  --after-opacity: 0.2;
  --scroll-offset: 22px;
  --iconHeight30: 30px;
  --switch-color: #aaaaad;
  --green-msg-color: #50F9AC;
  --double-dark-grey-max: #1c1e2599;
  --opaque-dark-grey: #1C1E25B3;
  --messages-border: transparent;
  --menu-white: #ffffffad;
  --pulse-link: #9BADFF;
  --svg-fill: #4aca86;
  --rpa-blue: #007bff;
  --rpa-white: #1C1E25B3;
  --rpa-text: #ffffffad;
  --rpa-msg-date: #888;
  --rpa-body: transparent;
  --rpa-link: #4aca86;
  --rpa-icons: #aaaaad;
  --rpa-bg: #143a66;
  --rpa-input-bg: transparent;
  --crm-table-head: rgb(255 255 255 / 20%);
  --crm-rpa-msg-bg: #1c1e25;
}

/* Light theme styles */
body.light-theme {
  --white-color: var(--black-color-dark);
  --double-dark-grey: white;
  --light-grey-text: black;
  --light-grey-icon: #1C1E25;
  --scroll-bar-color: #292b32;
  --white-btn-color: black;
  --after-opacity: 0.3;
  --background-color-dark: var(--purple-color);
  --link-color: black;
  --underline-color: #4aca86;
  --switch-color: #02040B;
  --green-msg-color: #1C1E25;
  --double-dark-grey-max: white;
  --opaque-dark-grey: #ffffffd6;
  --messages-border: transparent;
  --pulse-link: #027dc1;
  --svg-fill: #027dc1;
  --rpa-blue: #007bff;
  --rpa-white: #ffffff;
  --rpa-text: #333333;
  --rpa-msg-date: #888;
  --rpa-body: #f9f9f9;
  --rpa-link: #007bff;
  --rpa-icons: #143a66;
  --rpa-bg: #ffffffd6;
  --rpa-input-bg: #ffffffd6;
  --crm-table-head: rgba(255, 255, 255, 0.40);
  --crm-rpa-msg-bg: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  font-family: poppins;
}

/* Media query for mobile view */
/* Media query for mobile view */
/* Button Styles */
.button1, .button2 {
  background-color: var(--dark-blue);
  color: white;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--green-color);
  cursor: pointer;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  min-width: 150px; /* Set a minimum width to accommodate the longest text */
  margin-bottom: 20px;
}

.button1:hover, .button2:hover {
  background-color: var(--green-color);
  color: black;
  box-shadow: inset 0 0 0 2px var(--white-color);
}

.button2 {
  width: 200px;
}

#buttonContainer {
  display: flex;
  justify-content: center;
  flex-direction: column; /* Stack buttons in a column */
  align-items: center; /* Center buttons horizontally */
}

/* Base button styling */
.main-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #292B32;
  padding: 3px 2px;
}

/* Focus style for default theme */
.main-btn:focus {
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
}

/* Reusable button class */
.btn, .voice, #new-chat-btn, #listen-btn {
  outline: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--opaque-dark-grey-btn);
  padding: 3px 2px;
  box-sizing: border-box;
  box-shadow: var(--box-shadow2);
}

.btn:focus, .voice:focus, #new-chat-btn:focus, #listen-btn:focus {
  outline: 2px solid var(--white-btn-color); /* Outline color white */
  outline-offset: 2px; /* Offset by 2 pixels */
}

#voice-button, #send-button {
  margin-top: auto;
  margin-bottom: 10px;
}

#buttonContainer2 {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--history-width) / 6.5);
}

#buttonContainer2.col-display {
  flex-direction: column;
  gap: 16px;
  left: 50%;
}

#new-chat-btn, #chat-history-switch-div, #toggle-icon-btn {
  margin: 0;
  padding: 0;
}

@keyframes icon-rotate-right {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
}
@keyframes icon-rotate-left {
  0%, 100% {
    transform: rotate(0px);
  }
  50% {
    transform: rotate(-45deg);
  }
}
.stream-switch .switch, #chat-history-switch-div .switch {
  display: flex;
  align-items: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  transition: background 0.4s ease;
  background: var(--opaque-dark-grey-btn);
  cursor: pointer;
}
.stream-switch .switch:before, #chat-history-switch-div .switch:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: none;
  background-size: 16px;
  border-radius: 50%;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.stream-switch .switch:active::before, #chat-history-switch-div .switch:active::before {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(128, 128, 128, 0.1);
}
.stream-switch .switch:hover svg, #chat-history-switch-div .switch:hover svg {
  color: var(--green-color) !important;
}
.stream-switch .switch-input:not(:checked) + .switch-label .switch:hover svg, #chat-history-switch-div .switch-input:not(:checked) + .switch-label .switch:hover svg {
  animation: icon-rotate-right 1s infinite;
  animation-delay: 0.6s;
}
.stream-switch .switch-input:checked + .switch-label .switch:hover svg, #chat-history-switch-div .switch-input:checked + .switch-label .switch:hover svg {
  animation: icon-rotate-left 1s infinite;
  animation-delay: 0.6s;
}
.stream-switch .switch svg, #chat-history-switch-div .switch svg {
  height: var(--iconHeight30);
  width: var(--iconHeight30);
  margin-left: 5px;
}
.stream-switch .switch-input:focus-visible + .switch-label .switch, #chat-history-switch-div .switch-input:focus-visible + .switch-label .switch {
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
}
.stream-switch .switch-input, #chat-history-switch-div .switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.stream-switch .switch-input:checked + .switch-label .switch::before, #chat-history-switch-div .switch-input:checked + .switch-label .switch::before {
  left: 15px;
  background-image: none;
}
.stream-switch .switch-label, #chat-history-switch-div .switch-label {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.red-btn {
  background-color: var(--red-color) !important;
}

#chat-history-switch-div {
  box-shadow: var(--box-shadow2);
  border-radius: 10px !important;
}
#chat-history-switch-div .switch {
  border-radius: 10px !important;
}
#chat-history-switch-div .switch svg {
  color: var(--light-grey-icon-test);
}

#listen-btn {
  color: var(--light-grey-icon-test);
  background-color: var(--opaque-dark-grey-btn);
  padding: 4px;
  height: 40px;
  width: 40px;
  position: relative;
}
#listen-btn svg {
  fill: transparent !important;
}

/* New Chat button specific styles */
#new-chat-btn {
  color: var(--light-grey-icon-test);
  background-color: var(--opaque-dark-grey-btn);
  padding: 4px;
  height: 40px;
  width: 40px;
  position: relative;
}

#new-chat-btn:hover {
  color: var(--green-color);
}

#new-chat-btn svg {
  height: 25px !important;
  width: 25px !important;
  transition: transform 0.3s ease; /* Smooth transition */
}

/* Apply grow animation on hover */
#new-chat-btn:hover svg, #voice-button:hover svg, #listen-btn:hover svg {
  animation: grow 1s ease-in-out infinite;
}

#maximize-button:hover svg {
  animation: grow 1s ease-in-out infinite;
}

/* Keyframes for grow animation */
@keyframes grow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2); /* Scale up to 30px (25px * 1.2 = 30px) */
  }
}
/* General icon styling */
.btn svg, .voice svg, #listen-btn svg, #new-chat-btn svg {
  height: 20px;
  width: 20px;
  fill: var(--light-grey-icon-test); /* Default grey color */
  color: var(--light-grey-icon-test); /* Ensure text color is grey */
  transition: fill 0.3s ease, color 0.3s ease; /* Smooth transition for hover */
}

#send-button svg {
  fill: var(--green-color); /* Default grey color */
  color: var(--green-color); /* Ensure text color is grey */
}

#send-button:hover svg {
  animation: sway-send 1s ease-in-out infinite;
  animation-delay: 0.2s;
}

#download-button:hover svg {
  animation: sway-down 1s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* Hover effect for buttons */
.btn:hover svg, .voice:hover svg, #listen-btn:hover svg, #new-chat-btn:hover svg {
  fill: var(--green-color); /* Change to green on hover */
  color: var(--green-color); /* Ensure text color changes to green */
}

/* Toggle icon button specific styles */
#toggle-icon-btn {
  position: relative;
  height: var(--iconHeight30);
  width: var(--iconHeight30);
  background: none;
  border: none;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease; /* Smooth rotation */
}

#toggle-icon-btn:focus {
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
}

/* Rotate icon when minimized */
#toggle-icon-btn.rotated {
  transform: rotate(180deg);
}

/* Ensure all SVGs use the same fill and color logic */
#toggle-icon-btn svg {
  color: var(--light-grey-icon);
  height: var(--iconHeight30);
  width: var(--iconHeight30);
}

/* Keyframes for sway animation */
@keyframes sway-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes sway-send {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}
@keyframes sway-right {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}
@keyframes sway-left {
  0%, 100% {
    transform: rotate(180deg) translateX(0);
  }
  50% {
    transform: rotate(180deg) translateX(-5px);
  }
}
/* Sway right animation when pointing right */
#toggle-icon-btn:hover:not(.rotated) {
  animation: sway-right 1s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* Sway left animation when pointing left */
#toggle-icon-btn.rotated:hover {
  animation: sway-left 1s ease-in-out infinite;
  animation-delay: 0.2s;
}

#toggle-icon-btn:hover svg {
  color: var(--green-color);
}

/* Voice button and state-specific styles */
.voice .listening {
  background-color: var(--red-color); /* Red background for listening state */
}

/* Pulsing effect for voice button */
#voice-button.pulsing-white-outline {
  animation: pulseWhiteOutline 2s infinite;
  outline-offset: 2px;
}

@keyframes pulseWhiteOutline {
  0%, 100% {
    outline: 2px solid var(--white-color);
  }
  50% {
    outline: 2px solid transparent;
  }
}
@media (max-width: 768px) {
  #lang-select {
    margin-left: 0px;
  }
}
@media (max-width: 500px) {
  #lang-select {
    margin-left: 4px;
  }
  #voice-button {
    margin-left: 0px;
  }
  #download-button {
    margin-right: 4px;
    height: 30px;
    width: 30px;
    border-radius: 5px;
  }
}
/* Message Styles */
.purpy {
  border: 3px solid var(--purple-color);
  box-shadow: 0px 0px 8px 0px var(--purple-color);
}

.message-name.green {
  color: var(--green-msg-color) !important;
  opacity: 0.8;
}

.message {
  display: flex;
  padding: 16px;
  flex-direction: column;
  gap: 8px;
  color: white;
  border-radius: 8px;
  background-color: #1C1E25;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.831372549);
  box-sizing: border-box;
}
.message.pulsing-border {
  animation: pulseBorder 2s infinite;
  border: 3px solid transparent;
}
.message.temp-purple-pulsing-border {
  animation: purpPulseBorder 2s;
  border: 3px solid transparent;
}
.message.purple-pulsing-border {
  animation: purpPulseBorder 2s infinite;
  border: 3px solid transparent;
}
.message .message-text a {
  display: block;
  padding: 8px;
  word-break: break-all;
  color: var(--link-color);
  margin: 4px 0;
  max-width: calc(100% - 16px);
}
.message .message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.message .message-header svg {
  cursor: pointer;
  transition: ease-in-out 0.25s;
}
.message .message-header svg:hover {
  fill: rgb(80, 249, 172);
}
.message .message-header .left-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.message .message-header .left-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.message .message-header .left-header .message-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--purple-color);
}
.message .message-header .left-header .message-date {
  color: var(--grey-message-color);
  font-size: 12px;
  font-weight: 400;
}
.message .message-header .icon-container {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative; /* Ensure the container is relative */
}
.message .message-text pre {
  display: block;
  background-color: black;
  padding: 12px;
  border-radius: 12px;
}

body.light-theme .message {
  background-color: white;
  color: var(--black-color-dark);
  --grey-message-color: var(--black-color-dark);
  --purple-color: #027dc1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
code {
  font-family: Poppins !important;
}

pre[class*=language-] .token.comment,
code[class*=language-] .token.comment,
pre[class*=language-] .token.prolog,
code[class*=language-] .token.prolog,
pre[class*=language-] .token.doctype,
code[class*=language-] .token.doctype,
pre[class*=language-] .token.cdata,
code[class*=language-] .token.cdata {
  color: #6272a4;
}

pre[class*=language-] .token.punctuation,
code[class*=language-] .token.punctuation {
  color: #f8f8f2;
}

pre[class*=language-] .token.property,
code[class*=language-] .token.property,
pre[class*=language-] .token.tag,
code[class*=language-] .token.tag,
pre[class*=language-] .token.constant,
code[class*=language-] .token.constant,
pre[class*=language-] .token.symbol,
code[class*=language-] .token.symbol,
pre[class*=language-] .token.deleted,
code[class*=language-] .token.deleted {
  color: #ff79c6;
}

pre[class*=language-] .token.boolean,
code[class*=language-] .token.boolean,
pre[class*=language-] .token.number,
code[class*=language-] .token.number {
  color: #bd93f9;
}

pre[class*=language-] .token.selector,
code[class*=language-] .token.selector,
pre[class*=language-] .token.attr-name,
code[class*=language-] .token.attr-name,
pre[class*=language-] .token.string,
code[class*=language-] .token.string,
pre[class*=language-] .token.char,
code[class*=language-] .token.char,
pre[class*=language-] .token.builtin,
code[class*=language-] .token.builtin,
pre[class*=language-] .token.inserted,
code[class*=language-] .token.inserted {
  color: #50fa7b;
}

pre[class*=language-] .token.operator,
code[class*=language-] .token.operator,
pre[class*=language-] .token.entity,
code[class*=language-] .token.entity,
pre[class*=language-] .token.url,
code[class*=language-] .token.url,
pre[class*=language-] .language-css .token.string,
code[class*=language-] .language-css .token.string,
pre[class*=language-] .style .token.string,
code[class*=language-] .style .token.string,
pre[class*=language-] .token.variable,
code[class*=language-] .token.variable {
  color: #f8f8f2;
}

pre[class*=language-] .token.atrule,
code[class*=language-] .token.atrule,
pre[class*=language-] .token.attr-value,
code[class*=language-] .token.attr-value,
pre[class*=language-] .token.function,
code[class*=language-] .token.function,
pre[class*=language-] .token.class-name,
code[class*=language-] .token.class-name {
  color: #f1fa8c;
}

pre[class*=language-] .token.keyword,
code[class*=language-] .token.keyword {
  color: #8be9fd;
}

pre[class*=language-] .token.regex,
code[class*=language-] .token.regex,
pre[class*=language-] .token.important,
code[class*=language-] .token.important {
  color: #ffb86c;
}

pre[class*=language-] .token.important,
code[class*=language-] .token.important,
pre[class*=language-] .token.bold,
code[class*=language-] .token.bold {
  font-weight: bold;
}

pre[class*=language-] .token.italic,
code[class*=language-] .token.italic {
  font-style: italic;
}

pre[class*=language-] .token.entity,
code[class*=language-] .token.entity {
  cursor: help;
}

@keyframes pulseBorder {
  0%, 100% {
    border-color: var(--green-color);
  }
  50% {
    border-color: transparent;
  }
}
@keyframes purpPulseBorder {
  0%, 100% {
    border-color: var(--purple-color);
    box-shadow: 0px 4px 10px 0px var(--purple-color) !important;
  }
  50% {
    border-color: transparent;
    box-shadow: transparent !important;
  }
}
@keyframes purpPulseBorder2 {
  0%, 100% {
    border-color: var(--purple-color);
  }
  25%, 75% {
    border-color: transparent;
  }
}
#tooltip {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  bottom: 10px;
  right: 10px;
  margin-left: 10px;
}

#tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  white-space: nowrap;
}

#tooltip:hover .tooltiptext {
  visibility: visible;
}

#copy-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease-in-out;
  top: 50%;
  left: 50%;
}

#copy-button svg {
  width: 100%;
  height: 100%;
}

.play-button, .stop-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease-in-out;
}

.play-button svg, .stop-button svg {
  width: 100%;
  height: 100%;
  padding-top: 2px;
}

.play-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.play-icon-container.speaking .play-button,
.play-icon-container.speaking .stop-button {
  transform: scale(1.2) translate(-50%, -50%);
}

.play-icon-container.speaking .play-button svg,
.play-icon-container.speaking .stop-button svg {
  padding-top: 0px;
  fill: var(--green-color);
  animation: purpPulseBorder 2s infinite;
  border: 3px solid var(--purple-color);
  border-radius: 50%;
}

.download-icon-container.downloading svg {
  fill: var(--green-color);
  animation: purpPulseBorder 2s infinite;
  border: 3px solid var(--purple-color);
  border-radius: 50%;
}

.play-icon-container .play-button {
  display: block;
}

.play-icon-container .stop-button {
  display: none;
}

.play-icon-container.speaking .play-button {
  display: none;
}

.play-icon-container.speaking .stop-button {
  display: block;
}

.message svg {
  fill: var(--white-color);
}

.play-button:hover svg, .stop-button:hover svg {
  fill: var(--green-color);
}

.download-icon-container {
  margin-top: 5px;
}

.download-icon-container.download-error svg {
  fill: var(--yellow-color);
  animation: errorPulseBorder 2s infinite;
  border: 3px solid var(--red-color);
}

.download-icon-container.download-error svg:hover {
  fill: var(--yellow-color);
}

@keyframes errorPulseBorder {
  0%, 100% {
    border-color: var(--red-color);
  }
  50% {
    border-color: transparent;
  }
}
.generated-image {
  display: block;
  margin: auto;
  width: 400px;
  height: 400px;
}

/* styles.css */
pre {
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: auto;
  color: white; /* Set the desired font color */
  background-color: var(--dark-grey) !important;
  border-radius: 4px; /* Optional: Add rounded corners */
  white-space: pre-wrap; /* Allow text to wrap to the next line */
}

@media (max-width: 600px) {
  .generated-image {
    width: 200px;
    height: 200px;
  }
  #copy-button {
    top: -2px;
  }
}
/* Chatbot Messages / Messages Chat Styles */
.chatbot-messages {
  display: flex;
  padding: 22px;
  flex-direction: column;
  gap: 22px;
  flex: 1 0 0;
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: auto; /* Changed from scroll to auto */
  background-color: transparent;
  border: 2px solid var(--messages-border);
}

/* Custom scrollbar styles for .chatbot-messages */
.chatbot-messages::-webkit-scrollbar {
  width: 10px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px; /* Rounded corners for the track */
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--scroll-bar-color) !important; /* Replace with your green color variable */
  border-radius: 4px;
}

/* Compatibility with Firefox */
.chatbot-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-bar-color) transparent !important; /* thumb and track color */
}

.chatbot-messages p {
  font-size: 12px;
  font-weight: 400;
}

@media screen and (max-width: 500px) {
  .chatbot-messages {
    padding: 0px;
    margin: 10px 20px;
    background-color: transparent;
    border-color: transparent;
  }
}
/* General Link Styles */
a {
  position: relative;
  color: var(--link-color);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}
a:hover {
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
  text-underline-offset: 3px; /* Adjust based on your preference */
  text-decoration-thickness: 2px; /* Adjust based on your preference */
}
a:focus {
  outline: 3px solid var(--white-color);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Specific styles for the logo link */
#home-link:hover {
  text-decoration: none; /* Ensure no underline on hover */
  outline: none; /* Ensure no outline on hover */
}
#home-link:hover::after {
  content: none; /* Remove the underline effect */
}
#home-link:hover img {
  outline: 2px solid var(--green-color); /* Apply outline to the image */
  border-radius: 4px; /* Adjust the border-radius as needed */
}

#lang-select2 {
  margin: 32px auto 16px auto !important;
  font-size: 16px;
  margin: 20px auto 0 auto;
  background-color: var(--opaque-dark-grey);
  color: var(--white-color);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center; /* Center the text */
  display: flex; /* Use flexbox */
  align-items: center; /* Align items vertically in the center */
  justify-content: center; /* Horizontally center the content */
}

#lang-select2:hover {
  cursor: pointer;
}

/* Add this block to style the entire select element with green color when #lang-select is hovered */
#lang-select2:hover {
  color: var(--green-color); /* Replace with your green color variable */
}

/* Ensure the color doesn't change when the dropdown is opened */
#lang-select2:focus {
  color: #AAAAAD; /* Reset color when the dropdown is opened */
  border-color: var(--white-color); /* Border color white when focused */
}

body.light-theme #lang-select2:focus {
  outline: 2px solid #000000; /* Black outline */
  outline-offset: 2px;
}

@keyframes spinGradient {
  0% {
    box-shadow: 0 0 0 3px #9BADFF;
  }
  25% {
    box-shadow: 0 0 0 3px #4aca86;
  }
  50% {
    box-shadow: 0 0 0 3px #017FC1;
  }
  75% {
    box-shadow: 0 0 0 3px #ff97ff;
  }
  100% {
    box-shadow: 0 0 0 3px #9BADFF;
  }
}
.chatbot-icon {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999; /* Ensure it is above other elements */
}

.chatbot-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px transparent;
  animation: spinGradient 4s linear infinite;
}

.chatbot-icon:hover {
  outline: none;
  box-shadow: 0 0 0 3px transparent;
  animation: spinGradient 4s linear infinite;
}

.language-selector {
  margin-left: 10px;
  background-color: rgba(28, 30, 37, 0.7019607843);
  color: white;
  border: 0px solid transparent;
  border-radius: 5px;
  padding: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center; /* Center the text */
  display: flex; /* Use flexbox */
  align-items: center; /* Align items vertically in the center */
  justify-content: center; /* Horizontally center the content */
}

.language-selector:hover {
  cursor: pointer;
  color: var(--green-color); /* Define a cor verde ao passar o mouse */
}

.language-selector:focus {
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
  color: var(--green-color) !important;
}

body.light-theme .language-selector:focus {
  outline: 2px solid #000000; /* Black outline */
  outline-offset: 2px;
}

/* Estilos para as opções dentro do seletor */
#chatbot-container-rpa select option {
  color: var(--white-color); /* Cor padrão das opções */
  background-color: var(--opaque-dark-grey);
  padding: 10px;
}

#theme-switch-div2 .switch {
  display: flex; /* Uses flexbox layout for the switch */
  align-items: center; /* Vertically centers the items inside the switch */
  position: relative; /* Positions the switch relative to its normal position */
  width: 25px; /* Sets the width of the switch */
  height: 25px; /* Sets the height of the switch */
  border-radius: 20px; /* Rounds the corners of the switch */
  transition: background 0.28s ease; /* Smooth transition for background color changes */
  background-color: rgba(28, 30, 37, 0.7019607843);
  cursor: pointer; /* Changes the cursor to a pointer when hovering over the switch */
}
#theme-switch-div2 .switch:before {
  content: ""; /* Creates an empty content for the pseudo-element */
  position: absolute; /* Positions the pseudo-element absolutely within the switch */
  top: 1px; /* Positions the pseudo-element 1px from the top */
  left: 2px; /* Positions the pseudo-element 2px from the left, initially placing it on the left side of the switch */
  width: 22px; /* Sets the width of the pseudo-element */
  height: 22px; /* Sets the height of the pseudo-element */
  background: url(images/moon.svg) center center no-repeat; /* Sets the background image and centers it */
  background-size: 16px; /* Sets the size of the background image */
  border-radius: 50%; /* Makes the pseudo-element circular */
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transitions for various properties */
}
#theme-switch-div2 .switch:active::before {
  /* Adds a shadow effect to the pseudo-element when the switch is active */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(128, 128, 128, 0.1);
}
#theme-switch-div2 .switch:hover {
  /* Changes the background color of the switch when hovered */
  background-color: var(--green-color) !important;
}
#theme-switch-div2 .switch-input:focus-visible + .switch-label .switch {
  /* Adds an outline to the switch when it is focused */
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
}
#theme-switch-div2 .switch-input {
  /* Hides the actual input element */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#theme-switch-div2 .switch-input:checked + .switch-label .switch {
  /* Changes the background color of the switch when checked */
}
#theme-switch-div2 .switch-input:checked + .switch-label .switch::before {
  /* Moves the switch knob to the right and changes its appearance when checked */
  background-image: url("images/sun.svg"); /* Changes the background image of the pseudo-element */
}
#theme-switch-div2 .switch-label {
  width: auto;
  margin: 0 auto 0;
  display: flex; /* Uses flexbox layout for the label */
  flex-direction: column; /* Arranges the label items in a column */
  align-items: center; /* Centers the label items horizontally */
}

.chatbot-container-rpa {
  border: 1px solid rgba(0, 0, 0, 0.231372549);
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  background-color: var(--rpa-white);
  color: var(--rpa-text);
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: 0.5s ease-in-out;
  backdrop-filter: blur(100px);
}
.chatbot-container-rpa:hover {
  transform: scale(1.25); /* Scale up the element */
  bottom: 60px;
  right: 60px;
}

.chatbot-container-rpa.minimized {
  height: 60px;
}

.chatbot-header-rpa {
  background-color: var(--rpa-blue);
  color: white;
  padding: 10px;
  cursor: default;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.chatbot-title-rpa {
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.left-group {
  display: flex;
  align-items: center;
}

.right-group {
  display: flex;
  align-items: center;
  margin-left: auto; /* Garante que o grupo da direita fique à direita */
}

.toggle-chatbot-rpa {
  margin-left: 3px;
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.toggle-chatbot-rpa:focus,
.toggle-chatbot-rpa:hover {
  border: none;
  outline: none;
}

.toggle-chatbot-rpa:hover svg {
  animation: sway-down 1s ease-in-out infinite;
  animation-delay: 0.2s;
}

.toggle-chatbot-rpa svg {
  fill: white; /* Set the SVG icon color to white */
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
}

.toggle-chatbot-rpa:focus svg {
  outline: 2px solid var(--white-color);
  outline-offset: 2px;
  border-radius: 5px;
  border: none;
}

.toggle-chatbot-rpa:hover svg {
  fill: var(--green-color); /* Define a cor do ícone SVG como verde ao focar ou passar o mouse */
}

.chatbot-body-container-rpa {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow the body container to grow and fill available space */
  overflow: hidden; /* Prevent overflow */
}

.chatbot-body-rpa {
  height: auto;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: none;
  padding: 10px;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto !important; /* Enable vertical scrolling */
  scrollbar-color: auto !important;
  scrollbar-width: thin;
  background-color: var(--rpa-body); /* Light background color for better visibility */
}

/* styles.css */
/* Style the microphone button */
#speech-btn {
  width: 30px !important;
  height: 100% !important;
  border-radius: 5px;
  margin-right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#speech-btn svg {
  height: 20px;
  width: 20px;
  fill: var(--rpa-icons);
}

#speech-btn:hover svg {
  fill: var(--green-color);
}

.white-icon svg {
  fill: white !important;
}

/* Pulsing effect for voice button */
#speech-btn.pulsing-white-outline {
  animation: pulseWhiteOutline 2s infinite;
  outline-offset: 2px;
}

@keyframes pulseWhiteOutline {
  0%, 100% {
    outline: 2px solid var(--white-color);
  }
  50% {
    outline: 2px solid transparent;
  }
}
/* Overlay styles */
#chatbot-overlay-rpa {
  position: absolute; /* Position relative to #chatbot-body-rpa */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Matches the height of #chatbot-body-rpa */
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
  backdrop-filter: blur(10px); /* Blurred background effect */
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: none;
}

/* Show the overlay */
#chatbot-overlay-rpa.show {
  display: block;
  opacity: 1;
}

/* Overlay styles */
.chatbot-main-overlay {
  position: absolute; /* Position relative to #chatbot-container-rpa */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Matches the height of #chatbot-container-rpa */
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
  backdrop-filter: blur(10px); /* Blurred background effect */
  z-index: 1000;
  opacity: 1; /* Initially visible */
  transition: opacity 0.5s ease-in-out;
  display: block;
  border-radius: 10px;
}

/* Hide the overlay */
.chatbot-main-overlay.hidden {
  opacity: 0;
  pointer-events: none; /* Allows interactions with underlying elements */
}

/* Hide the overlay */
#chatbot-main-overlay.hide {
  display: none;
}

.chatbot-inputs-rpa {
  display: none;
  padding: 10px;
  border-top: 1px solid #ddd;
  flex-shrink: 0; /* Prevent the input area from shrinking */
  background-color: var(--rpa-input-bg);
}

.chatbot-input-rpa {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 14px;
  height: 22px;
  min-height: 22px;
  max-height: 75px; /* Set a maximum height */
  resize: vertical; /* Allow vertical resizing only */
  overflow: auto; /* Add scrollbars if content exceeds max height */
  scrollbar-color: auto;
  background-color: var(--opaque-dark-grey);
  color: var(--rpa-text);
  font-size: 12px;
}

.send-button-rpa {
  background-color: var(--rpa-blue);
  color: white;
  border: none;
  padding: 10px;
  margin-left: 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
}
.send-button-rpa svg {
  margin-top: auto;
  margin-bottom: auto;
  height: 20px;
  width: 20px;
  fill: white;
  color: white;
}

.send-button-rpa:hover {
  color: var(--green-color);
}

.send-button-rpa:hover svg {
  animation: sway-send 1s ease-in-out infinite;
  animation-delay: 0.2s;
  fill: var(--green-color) !important;
  color: var(--green-color) !important;
}

@keyframes sway-send {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}
@keyframes sway-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
.message-rpa {
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--rpa-white);
  border: 1px solid black;
  border-radius: 5px;
  text-align: left;
}

.message-header-rpa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-text-rpa {
  padding: 10px 0 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.8;
}

.options-list {
  margin-top: 5px;
}

.options-list li {
  margin-left: 20px; /* Indent list items */
  padding-left: 5px;
}

.option-link {
  font-size: 13px;
  color: var(--rpa-link);
}

.option-link-yn {
  font-size: 13px;
  color: var(--rpa-link);
}

.message-text-rpa a {
  font-size: 13px;
  color: var(--rpa-link);
}

.left-header-rpa {
  display: flex;
  align-items: center;
}

.left-header-rpa img {
  transition: 0.5s ease-in-out;
}

.left-header-rpa img {
  width: 20px; /* Smaller user image */
  height: 20px; /* Smaller user image */
  border-radius: 50%;
  margin-right: 10px;
}

.message-name-rpa {
  margin-right: 10px;
  font-size: 12px;
  font-weight: 300;
}

.message-date-rpa {
  color: #888;
  font-size: 12px;
}

.right-header-rpa {
  display: flex;
  align-items: center;
}

.icon-container-rpa {
  display: flex;
  align-items: center;
  gap: 13px;
}

.icon-button-rpa,
.stop-button-rpa,
.play-button-rpa {
  display: flex;
  align-items: center; /* Center icon vertically */
  justify-content: center; /* Center icon horizontally */
  border: none;
  background: transparent;
  cursor: pointer; /* Change cursor to pointer */
}

.icon-button-rpa:hover svg,
.stop-button-rpa:hover svg,
.play-button-rpa:hover svg {
  fill: var(--rpa-link);
  transform: scale(1.25);
}

.stop-icon-rpa {
  animation: purpPulseBorder 2s infinite !important;
  border: 3px solid var(--purple-color);
  border-radius: 50% !important;
  fill: var(--rpa-link) !important;
}

@keyframes purpPulseBorder {
  0%, 100% {
    border-color: var(--purple-color);
  }
  50% {
    border-color: transparent;
  }
}
.icon-button-rpa svg,
.stop-button-rpa svg,
.play-button-rpa svg {
  fill: var(--rpa-icons);
}

.play-icon-container-rpa {
  display: flex;
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally (optional) */
  height: 100%; /* Ensure the container takes the full height of its parent */
}

.play-button-rpa,
.stop-button-rpa {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stop-button-rpa {
  display: none; /* Hide stop button initially */
}

.play-button-rpa.active + .stop-button-rpa {
  display: flex; /* Show stop button when play button is active */
}

.messages-chat-rpa {
  flex-grow: 1; /* Allow the messages container to grow and fill available space */
  height: 100%;
}

.chatbot-messages-rpa {
  height: 100%;
}

/* Mobile view adjustments */
@media (max-width: 600px) {
  .chatbot-container-rpa {
    width: 100%;
    height: 50%;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }
  .chatbot-container-rpa:hover {
    transform: scale(1); /* Scale up the element */
    bottom: 0;
    right: 0;
  }
  .chatbot-header-rpa {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .chatbot-title-rpa {
    font-size: 14px;
  }
  .send-button-rpa {
    padding: 8px;
  }
  .chatbot-icon {
    position: relative;
    margin: 20px auto;
    bottom: auto;
    right: auto;
    z-index: 1; /* Ensure it is below other elements */
  }
  .chatbot-body-rpa {
    background-color: var(--rpa-input-bg);
  }
}
.hidden {
  display: none !important;
}