.wpaicg-icon-container {
  position: relative;
  margin-bottom: 30px;
  margin-top: 10px;
}

.wpaicg-copy-button, .wpaicg-thumbs-up-button, .wpaicg-thumbs-down-button, .wpaicg-resend-button {
  position: absolute;
  bottom: -19px;
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  outline: none;
}

.wpaicg-copy-button {
  left: 10px;
}

.wpaicg-resend-button {
  left: 33px;
}

.wpaicg-thumbs-up-button {
  left: 40px;
}

.wpaicg-thumbs-down-button {
  left: 70px;
}

/* Keep buttons visible when hovering over either the container or the buttons */
.wpaicg-icon-container:hover .wpaicg-copy-button,
.wpaicg-icon-container:hover .wpaicg-resend-button,
.wpaicg-icon-container:hover .wpaicg-thumbs-up-button,
.wpaicg-icon-container:hover .wpaicg-thumbs-down-button,
.wpaicg-copy-button:hover,
.wpaicg-resend-button:hover,
.wpaicg-thumbs-up-button:hover,
.wpaicg-thumbs-down-button:hover {
  opacity: 1;
  visibility: visible;
}

.log_notification {
  background: #fafafa;
  color: #495057;
  font-size: 11px;
  font-style: italic;
  padding: 10px;
  border-radius: 5px;
}

.wpaicg-copy-button img,
.wpaicg-thumbs-up-button img,
.wpaicg-thumbs-down-button img {
  width: 16px;
  height: 16px;
  filter: none; /* Ensure no filter (like grayscale or color change) is applied */
  color: inherit; /* Inherit the current color from the parent */
  transition: none; /* Remove any transitions that might change appearance on hover */
}

.wpaicg-copy-button img:hover,
.wpaicg-thumbs-up-button img:hover,
.wpaicg-thumbs-down-button img:hover {
  filter: none; /* Ensure no hover filter is applied */
  color: inherit; /* Keep the color consistent on hover */
}

.wpaicg-copy-button:hover,
.wpaicg-resend-button:hover,
.wpaicg-thumbs-up-button:hover,
.wpaicg-thumbs-down-button:hover {
  background: none; /* Remove any background color change on hover */
  color: inherit; /* Keep the color the same on hover */
}

.wpaicg-copy-button:hover svg,
.wpaicg-resend-button:hover svg {
  fill: red;
}

/* Remove outline (focus border) on buttons */
.wpaicg-copy-button:focus,
.wpaicg-thumbs-up-button:focus,
.wpaicg-thumbs-down-button:focus {
  outline: none;
}

.wpaicg-feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Added padding to prevent edge cutoff */
}

.wpaicg-feedback-modal {
  background-color: #fff;
  color: #333;
  padding: 20px;
  border-radius: 10px; /* Slightly increased border-radius for better aesthetics */
  width: 100%;
  max-width: 400px; /* Max width for larger screens */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Increased shadow for better visibility */
  text-align: center;
  position: relative; /* To position the close button */
  margin: 0 auto; /* Centering the modal horizontally */
  box-sizing: border-box; /* Ensures padding is included in width */
}

.wpaicg-feedback-modal h2 {
  margin-top: 0;
}

.wpaicg-feedback-textarea {
  width: 100%;
  height: 80px;
  margin: 10px 0;
  border-radius: 5px;
}

.wpaicg-feedback-modal-buttons {
  display: flex;
  justify-content: flex-end; /* Aligns the submit button to the right */
  align-items: center;
  margin-top: 10px;
}

.wpaicg-feedback-message {
  flex-grow: 1; /* Takes up available space on the left */
  margin-right: 10px;
  text-align: left; /* Ensures the text aligns left */
}

.wpaicg-feedback-modal-submit {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  margin-left: 10px; /* Adds space between the button and the message */
}

.wpaicg-feedback-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
  .wpaicg-feedback-modal {
    max-width: 95%; /* Reduce max width on smaller screens to ensure it doesn't touch the edges */
    padding: 15px;
    margin: 0 auto; /* Ensure modal is centered */
  }
  .wpaicg-feedback-modal-submit {
    padding: 8px 16px; /* Slightly smaller padding on mobile */
  }

  .wpaicg-feedback-textarea {
    height: 60px; /* Reduce height on mobile */
  }
}

/* Styling the scrollbar track (part the thumb slides within) */
.wpaicg-chatbox ::-webkit-scrollbar-track {
  background-color: #fafafa;
  border-radius: 10px;
}

/* Styling the scrollbar thumb (the part that you drag) */
.wpaicg-chatbox ::-webkit-scrollbar-thumb {
  background-color: #888; /* Dark grey thumb */
  border-radius: 10px;
  border: 3px solid #fafafa;
}

/* Styling the scrollbar thumb on hover */
.wpaicg-chatbox ::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Black thumb on hover */
}

/* Setting the width of the scrollbar */
.wpaicg-chatbox ::-webkit-scrollbar {
  width: 8px; /* Narrow width */
  height: 8px; /* For horizontal scrolling */
}

.wpaicg-chatbox .wpaicg-conversation-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px;
  justify-content: center;
  font-size: 13px;
}

.wpaicg-chatbox .wpaicg-conversation-starter {
  background-color: #53535333;
  color: #004a8e;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease, transform 0.5s ease-out, opacity 0.5s ease-out;
  display: flex;
  opacity: 0;
  transform: translateY(20px);
  font-weight: normal;
  line-height: 18px;
}

.wpaicg-chatbox .wpaicg-conversation-starter:hover {
  background: #004a8e;
  color: white;
}

.wpaicg-img-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wpaicg-thumbnail-placeholder {
  display: none;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.wpaicg_chat_widget, .wpaicg_chat_widget_content {
  z-index: 999;
}

.wpaicg_widget_right {
  @media (min-width: 768px) {
    bottom: 65px important;
  }

  @media (max-width: 768px) {
    right: 20px;
  }
}

.single-product .wpaicg_widget_right {
  @media (max-width: 768px) {
    bottom: 210px;
  }
}

.wpaicg_widget_right.wpaicg_widget_open {
  z-index: 9999999999;
  right: 23px;
  bottom: 65px;
}

.wpaicg-chat-user-message .wpaicg-chat-avatar {
  display: none;
}

.wpaicg_chat_widget {
  /*overflow: hidden;*/
  border-radius: 30%;
}

.wpaicg_widget_open.wpaicg_chat_widget {
  overflow: visible;
}

.wpaicg-chatbox-preview-box .wpaicg-chatbox-action-bar {
  width: calc(100% - 10px);
}

.wpaicg_widget_open .wpaicg-chatbox-action-bar {
  display: flex;
}

.wpaicg-chat-message > a {
  font-weight: 700;
  text-decoration: underline;
}

.wpaicg_chat_widget_content {
  /* Initial state of the chat window - hidden */
  opacity: 0;
  transform: scale(0.9);
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.wpaicg_widget_open .wpaicg_chat_widget_content {
  /* Visible state of the chat window */
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  transition-delay: 0s;
  max-width: 90vw;
}

/* Updated shining light effect for hover without background */
@keyframes shine {
  0% {
    background-position: -150px;
  }
  50% {
    background-position: 150px;
  }
  100% {
    background-position: -150px;
  }
}

.wpaicg_chat_widget .wpaicg_toggle {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.wpaicg_chat_widget .wpaicg_toggle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* Ensure gradient is completely transparent except for the shine */
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 50%, transparent) no-repeat;
  transform: rotate(30deg);
  /* Start with the shine outside of the visible area */
  background-position: -150px;
}

.wpaicg_chat_widget .wpaicg_toggle:hover::before {
  /* Apply the animation only on hover */
  animation: shine 2s infinite;
}

.wpaicg_chat_widget .wpaicg_toggle img {
  display: block;
  transition: opacity 0.3s ease;
}

.wpaicg-chatbox {
  width: 480px;
  background-color: #fafafa;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 34%), 0 8px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #E0E0E0;
  transition: box-shadow 0.3s ease;
  margin-right: 20px; /* Adjust as needed */
}

.wpaicg-chatbox:hover {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 34%), 0 12px 24px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover for interaction feedback */
}

.wpaicg-chatbox-content {
  overflow: hidden;
  flex-grow: 1;
  padding: 15px; /* Increased padding for more space around messages */
}

ul.wpaicg-chatbox-messages {
  height: 100% !important;
  overflow-x: hidden;
}

.wpaicg-chatbox-content ul {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpaicg-chatbox-content ul li {
  color: #495057;
  font-size: 13px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-right: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: fit-content;
}

.wpaicg-chatbox-content ul li strong {
  font-weight: bold;
  margin-right: 8px;
  float: left;
  color: inherit;
}

.wpaicg-chatbox-content ul li p {
  font-size: inherit;
  margin: 0;
  padding: 0;
}

.wpaicg-chatbox-content ul li p:after {
  clear: both;
  display: block;
}

.wpaicg-chatbox-content ul .wpaicg-chat-user-message {
  margin-left: auto; /* This pushes the user messages to the right */
  background-color: #e6e6e6;
}

.wpaicg_chat_widget_content .wpaicg-chat-ai-message .wpaicg-chat-message,
.wpaicg_chat_widget_content .wpaicg-chat-user-message .wpaicg-chat-message {
  color: inherit;
}

.wpaicg_chat_widget_content .wpaicg-chat-ai-message .wpaicg-chat-message ins {
  color: #004a8e;
  cursor: pointer;
  border-bottom: 1px dotted #004a8e;
  font-weight: 400;
}

.wpaicg_chat_widget_content .wpaicg-chat-ai-message .wpaicg-chat-message ins:hover {
  color: #288eeb;
  text-decoration: none;
  border-bottom: 1px solid #336da39c;
}

.wpaicg-chatbox-content ul li .wpaicg-chat-message {
  color: inherit;
  font-size: 13px;
}

.wpaicg-chat-user-message {
  padding: 10px;
  background: #e6e6e6;
  position: relative;
}

.wpaicg-chat-user-message:hover .wpaicg-resend-button,
.wpaicg-chat-user-message:hover .wpaicg-copy-button {
  opacity: 1;
  visibility: visible;
}

.wpaicg-chat-ai-message {
  padding: 10px;
  background: #ffffff;
}

.wpaicg-bot-thinking {
  bottom: 0;
  font-size: 11px;
  color: #495057;
  display: none;
}

.wpaicg-chat-message {
  line-height: normal;
}

.wpaicg-jumping-dots span {
  position: relative;
  bottom: 0px;
  -webkit-animation: wpaicg-jump 1500ms infinite;
  animation: wpaicg-jump 2s infinite;
}

.wpaicg-jumping-dots .wpaicg-dot-1 {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.wpaicg-jumping-dots .wpaicg-dot-2 {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

.wpaicg-jumping-dots .wpaicg-dot-3 {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.wpaicg-chatbox-type {
  display: flex;
  align-items: center;
  padding: 15px;
  color: #004a8e;
}

.wpaicg-chatbox-type:has(textarea.wpaicg-chatbox-typing:disabled) {
  filter: contrast(0.5) opacity(0.35);
}

.wpaicg-chatbox-send {
  color: #004a8e;
}

textarea.wpaicg-chatbox-typing {
  flex: 1;
  border: 1px solid #CED4DA;
  background-color: #fdfcfc;
  resize: vertical;
  border-radius: 7px;
  line-height: 54px;
  padding-left: 1em;
  color: #000000;
  font-size: 13px;
}

textarea.auto-expand {
  overflow: hidden; /* Prevents scrollbar flash during size adjustment */
  transition: box-shadow 0.5s ease-in-out;
  line-height: 2;
}

textarea.auto-expand.resizing {
  transition: box-shadow 0.5s ease-in-out;
  box-shadow: 0 0 12px rgba(81, 203, 238, 0.8);
  line-height: 2;
}

textarea.auto-expand:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  line-height: 2;
}

textarea.wpaicg-chatbox-typing::placeholder {
  color: #000000;
}

.wpaicg-chat-message-error {
  color: #f00;
}

@-webkit-keyframes wpaicg-jump {
  0% {
    bottom: 0px;
  }
  20% {
    bottom: 5px;
  }
  40% {
    bottom: 0px;
  }
}

@keyframes wpaicg-jump {
  0% {
    bottom: 0px;
  }
  20% {
    bottom: 5px;
  }
  40% {
    bottom: 0px;
  }
}

/* Adjustments for screens that are 768px wide or less (typical for tablets and smartphones) */
@media (max-width: 768px) {
  .wpaicg-chatbox {
    /* Adjust the width and right margin for smaller screens */
    width: auto; /* This makes the chat window adapt to the screen size */
    margin-right: 10px; /* Smaller margin for smaller devices */
    margin-left: 10px; /* Add some space on the left as well */
  }
}

/* Further adjustments for very small screens, like iPhones */
@media (max-width: 480px) {
  .wpaicg-chatbox {
    /* You might want even smaller margins here */
    margin-right: 5px;
    margin-left: 5px;
  }
}

.wpaicg_chat_additions {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
}

.wpaicg-chatbox .wpaicg-mic-icon {
  color: #d1e8ff;
}

.wpaicg-chatbox .wpaicg-img-icon {
  color: #004a8e;
}

.wpaicg-chatbox .wpaicg-pdf-icon {
  color: #d1e8ff;
}

.wpaicg-chatbox .wpaicg-pdf-remove {
  color: #d1e8ff;
  font-size: 33px;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  line-height: unset;
  font-family: Arial, serif;
  border-radius: 50%;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

.wpaicg-chatbox .wpaicg-pdf-loading {
  border-color: #d1e8ff;
  border-bottom-color: transparent;
}

.wpaicg-chatbox .wpaicg-mic-icon.wpaicg-recording {
  color: #F8F9FA;
}

.wpaicg-chatbox .wpaicg-bot-thinking {
  bottom: 0;
  font-size: 11px;
  color: #495057;
  display: none;
}

.wpaicg-chatbox-action-bar {
  top: 0; /* Position it at the top of the chat window */
  right: 0;
  left: 0; /* Ensure it spans the full width */
  height: 40px;
  padding: 0 10px;
  align-items: center;
  color: #ffffff;
  background-color: #004a8e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease;
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 40px;
}

/* Button Styles */
.wpaicg-chatbox-download-btn,
.wpaicg-chatbox-audio-btn,
.wpaicg-chatbox-clear-btn,
.wpaicg-chatbox-fullscreen,
.wpaicg-chatbox-close-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* Center content */
  margin: 0 5px; /* Adjust spacing between buttons */
  transition: background-color 0.3s ease; /* Smooth transition for interactions */
}

span.wpaicg-chatbox-close-btn:hover {
  background: unset;
  color: orange;
}
span.wpaicg-chatbox-close-btn {
  padding: 0 0px 0 12px;
  height: 100%;
  border-left: 1px solid #00376a7d;
  box-shadow: -1px 1px 0px #ffffff26;
}

/* SVG Icon Adjustments */
.wpaicg-chatbox-download-btn svg,
.wpaicg-chatbox-audio-btn svg,
.wpaicg-chatbox-clear-btn svg,
.wpaicg-chatbox-fullscreen svg,
.wpaicg-chatbox-close-btn svg {
  fill: currentColor;
  height: 16px; /* Adjust size for visibility */
  width: 16px;
}

/* Hover States for Button Interactions */
.wpaicg-chatbox-download-btn:hover,
.wpaicg-chatbox-clear-btn:hover,
.wpaicg-chatbox-fullscreen:hover,
.wpaicg-chatbox-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1); /* Slight highlight on hover */
}

.wpaicg-chatbox-fullscreen svg.wpaicg-exit-fullscreen {
  display: none;
  fill: none;
  height: 16px;
  width: 16px;
}

.wpaicg-chatbox-fullscreen svg.wpaicg-exit-fullscreen path {
  fill: currentColor;
}

.wpaicg-chatbox-fullscreen svg.wpaicg-active-fullscreen {
  fill: none;
  height: 16px;
  width: 16px;
}

.wpaicg-chatbox-fullscreen svg.wpaicg-active-fullscreen path {
  fill: currentColor;
}

.wpaicg-chatbox-fullscreen.wpaicg-fullscreen-box svg.wpaicg-active-fullscreen {
  display: none;
}

.wpaicg-chatbox-fullscreen.wpaicg-fullscreen-box svg.wpaicg-exit-fullscreen {
  display: block;
}

.wpaicg-fullscreened .wpaicg-chatbox-action-bar {
  top: 0;
  z-index: 99;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
}

.wpaicg_chat_bubble {
  display: none;
}

.wpaicg_chat_bubble.active {
  position: absolute;
  width: 200px;
  max-height: 80px;
  overflow: hidden;
  background: #ffffff;
  bottom: 60%;
  right: 85%;
  box-shadow: 0 0 0 2px #00529e;
  border-radius: 15px 15px 0 15px;
  display: block;
  opacity: 0.95;
  animation: wpaicg-inf-animation 1s infinite;
}

@keyframes wpaicg-inf-animation {
  0%, 100% {
    box-shadow: 0 0 0 2px #00529e, 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 0 0 2px #00529e, 0 0 10px 5px rgba(0, 0, 0, 0.2);
  }
}

.wpaicg_chat_bubble_content {
  padding: 5px 9px;
  font-size: 12px;
  line-height: normal;
  font-weight: 700;
  color: #004a8e;
}


.wpaicg-chat-enabled jdiv#jvLabelWrap {
    right: -50px !important;
}

.wpaicg-chat-enabled jdiv.__jivoMobileButton {
    right: -500px !important;
}

.wpaicg_chat_widget {
  display: none;
}

.wpaicg-chat-enabled .wpaicg_chat_widget {
  display: block;
}

.wpaicg-chat-enabled jdiv {
  display: none !important;
}