.timestamp {
  display: none;
  padding: 2px 5px;
  font-size: 0.75em;
  opacity: 0.7;
  margin-left: 5px;
}

.message-container:hover .timestamp {
  display: inline;
}

.message-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.bot-message .timestamp, .user-message .timestamp {
  margin-left: 10px; /* Adjust spacing as needed */
}

/* CSS for the minimized state */
div#bottomRightModal.hide
.modal-body {
    height: 0px !important;
}
div#bottomRightModal.hide .modal-dialog {
    height: 60px;
    margin-bottom: 50px;
    opacity: 1;
}
div#bottomRightModal.hide .modal-content {
    overflow: hidden;
    border: 0;
}
div#bottomRightModal.hide form#messageForm {
    display: none;
}
.backdrop-hide .modal-backdrop {
   display:none;
}
.btn-close-chat {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.bot-text, .user-text {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  margin: 5px;
}

/* Bot text tail */
/* .bot-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #eeeeee;
  border-left: 0;
  margin-top: 10px;
  border-top: 0;
}*/

/* User text tail */
.user-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px; /* Position the tail to the right for user messages */
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: #0158e5; /* Same as user-text background */
  border-right: 0;
  margin-top: 10px;
  border-top: 0;
}
/**/

.form-control-message {
        border: 1px solid #dee2e6;
        line-height: 3.2;
        background-color: #F8F9FA;
}

.form-control-message:focus {
        border-color: transparent;
        box-shadow: none;
}

.message-container {
        display: flex;
        align-items: center;
        width: 100%; /* Ensure the container takes full width */
}

.bot-message {
        justify-content: flex-start; /* Aligns bot messages to the left */
}

.user-message {
        justify-content: flex-end; /* Aligns user messages to the right */
}

.profile-img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  margin: 0 10px; /* Adjust spacing around the image as needed */
}

/* Text content styling (optional) */
.message-text {
  padding: 5px 10px; /* Adjust padding as needed */
  border-radius: 15px; /* Optional: Adds rounded corners to message */
  background-color: #f0f0f0; /* Optional: Background color for message */
}

.bot-message .profile-img {
  order: -1; /* Image on the left */
}

/* chatbot */

/* Container holding all messages */

.full-width-input {
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width */
}

.chat-container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 20px auto;
}

#chat {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 20px auto;
}

/* Base style for all chat bubbles */
.chat-bubble {
  padding: 10px 20px;
  border-radius: 20px;
  margin: 5px;
  max-width: 80%;
  word-wrap: break-word;
}

.bot-text {
  background-color: #eeeeee; /* Light blue for bot messages */
  color: black;
  align-self: flex-start; /* Align to the left */
  margin-left: auto;
  padding: 10px 14px;
  margin: 5px;
  max-width: 73%;
  word-wrap: break-word;
  font-size: large;

}

/* Bot text tail */
.bot-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px; /* Position the tail to the left for bot messages */
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #e0e0ff; /* Same as bot-text background */
  border-left: 0;
  margin-top: 10px;
  border-top: 0;
}

/* User text tail */
.user-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px; /* Position the tail to the right for user messages */
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: #0158e5; /* Same as user-text background */
  border-right: 0;
  margin-top: 10px;
  border-top: 0;
}
.user-text {
  color: white;
  align-self: flex-end;
  padding: 5px 10px;
  border-radius: 15px;
  margin: 5px;
  max-width: 73%;
  word-wrap: break-word;
  font-size: large;
}

/* Style for user messages */
.user-message {
  color: white;
  align-self: flex-end;
  padding: 5px 10px;
  border-radius: 15px;
  margin: 5px;
  word-wrap: break-word;
  max-width:73%;
  font-size: large;
}

.user-message::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: #e5e5ea;
  border-bottom: 0;
  margin-top: -5px;
}

/* Style for bot messages */
.bot-message {
  color: black;
  align-self: flex-start; /* Align to the left */
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 15px;
  margin: 5px;
  word-wrap: break-word;
  font-size: large;
}

.bot-message::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: #e5e5ea;
  border-bottom: 0;
  margin-top: -5px;
}

.chatbot-floating-icon {
  position: fixed; /* Fixed positioning to make it float */
  bottom: 35px; /* Distance from the bottom */
  right: 35px; /* Distance from the right */
  font-size: 24px; /* Icon size */
  color: #ff5722; /* Icon color */
  background-color: #fff; /* Background color */
  border-radius: 50%; /* Circular background */
  width: 75px; /* Background size */
  height: 75px; /* Background size */
  display: flex;
  align-items: center; /* Center icon vertically */
  justify-content: center; /* Center icon horizontally */
  box-shadow: 0 2px 5px rgba(0,0,0,0.25); /* Optional: add shadow for better visibility */
  cursor: pointer; /* Change mouse cursor on hover */
  z-index: 1000; /* Ensure it's above other content */
}

/* Optional: Change color on hover */
.chatbot-floating-icon:hover {
  color: #fff; /* Icon color on hover */
  background-color: #ff5722; /* Background color on hover */
}

#chatbox {
  scroll-behavior: smooth;
}
/* end chatbot */

/* code fix 240303 start - FO71835B06D81 */
div#bottomRightModal .modal-dialog {
  height: 90vh;
  width: 500px;
  margin-left: auto;
  margin-right: 0;
  /* transition: .3s height; */
}
div#bottomRightModal .modal-content {
  overflow: auto;
  height: 100%;
  position: static;

}
div#bottomRightModal .modal-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  justify-content: space-between;
}
div#bottomRightModal .modal-body {
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
}
div#bottomRightModal div#chatbox {
  overflow-y: auto !important;
  overflow-x: hidden;
  min-height: calc(100% - 200px);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 76px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  height: 5px;
}
div#bottomRightModal button#send {
  position: absolute;
  right: -10px;
  outline: none;
  border: none;
  /* display: block !important; */
}
div#bottomRightModal button#send span{
  /* background:#0B93F6; */
  color: #0B93F6 !important;
}
div#bottomRightModal form#messageForm > .row > div:first-child {
  /* display: none; */
  padding: 0;
  width: 12%;
  min-width: 61px;
}
div#bottomRightModal form#messageForm > .row > div:nth-child(2) {
  padding-right: 20px;
  position: relative;
  width: 77%;
  flex-grow: 1;
}
div#bottomRightModal form#messageForm > .row > div:nth-child(2) .input-group {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0px !important;
}
div#bottomRightModal form#messageForm {
  margin-bottom: 8px;
  position: absolute;
  left: 5px;
  bottom: 0;
  width: calc(100% - 30px);
  background: #fff;
  margin-left: 5px;
  z-index: 9;
  margin-top: 15px;
  border: 1px solid #ced4da;
  border-radius: .5rem;
}
div#bottomRightModal .modal-body > * {
  margin-bottom: 0;
}
div#bottomRightModal .user-text {
  background: #0B93F6;
  position: relative;
  padding-right: 15px;
}
div#bottomRightModal
.bot-text {
  margin-left:10px;
  position:relative;
}
.user-text::after,
.user-text::before,
.bot-text::after,
.bot-text::before{
        content: "";
        position: absolute;
        bottom: 0;
        border: 0;
        height: 25px;
}

.user-text::before {
        right: -7px;
        width: 20px;
        background-color: #0B93F6;
        border-bottom-left-radius: 16px 14px;
}
.user-text::after{
        right: -26px;
        top: unset;
        width: 26px;
        background: #fff;
        border-bottom-left-radius: 10px;
}

.bot-text::after{
        right:unset;
        left: -26px;
        width: 26px;
        background-color: #fff;
        border-bottom-right-radius: 10px;
        top: unset;
}
.bot-text::before{right:unset;left: -10px;width: 20px;background-color: #eee;border-bottom-right-radius: 16px 14px;}
div#bottomRightModal .message-container.bot-message {
  margin-left: 0;
}
div#bottomRightModal .user-message::after {
  content: unset;
}
div#bottomRightModal .bot-message::after {
  content: unset;
}

div#bottomRightModal .modal-body {
  position: static;
  padding-top: 73px;
}
div#bottomRightModal .modal-header button.btn {
  padding: 5px 10px;
  color: #fff !important;
  opacity: 0.5;
}
div#bottomRightModal .modal-header button.btn:hover{
        opacity:1;
}
h5#modalLabel {
  padding-right: 16px;
  font-size: 20px;
  margin-right: auto;
}
div#bottomRightModal button.btn-close {
  margin-left: 4px !important;
}
div#bottomRightModal .profile-img {
        width: 50px;
        height: 50px;
}
div#bottomRightModal .modal-body > p {
        text-align: center;
}

input#messageInput {
        box-shadow: unset;
        border: 0;
}

div#bottomRightModal.show {
        display: flex !important;
        justify-content: center;
        align-items: end;
}

@media screen and (max-width:768px){
  div#bottomRightModal .modal-dialog{
    width:100%;
    margin: 0;
    max-width: 92vw;
    height: 85vh;
    margin-bottom: 2vw;
  }
  div#bottomRightModal.show{
    padding:0 !important;
  }
  div#bottomRightModal div#chatbox{
    min-height:calc(100% - 205px);
  }
  div#bottomRightModal form#messageForm > .row > div:nth-child(2){
    width: calc(80% - 30px);
    flex-grow: 1;
    padding-left: 0;
  }
  div#bottomRightModal .modal-header{
    justify-content:flex-start;
  }
  div#bottomRightModal h5#modalLabel{
    margin-right:auto;
  }
  div#bottomRightModal form#messageForm{
    margin-bottom:10px;
  }
}