@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.dot-container {
    display: flex;
    justify-content: center;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    margin-right: 2px; 
    animation: pulse 1s infinite;
}

 .bottom-citations {
     font-size: 14px;
     margin-top: 5px;
 }

 .chat-box {

     max-height: calc(100vh - 80px);
     background-color: transparent;
     display: flex;
     flex-direction: column;

 }

 .widget-chat-box {
     height: 800px;
     max-height: 100vh;
     position: fixed;
     bottom: 95px;
     right: 25px;
     width: 430px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-radius: 18px;
     max-width: calc(100% - 32px);
     z-index: 1000;
 }

 .shortcode-chat-box {
     height: calc(100vh - 180px);
     width: 100%;
	 max-width: 850px;
	 margin: 0 auto;
 }
.admin-bar .shortcode-chat-box {
     height: calc(100vh - 213px);
 }
 
 .user-input-container{
	background: #f1f1f1;
	margin-bottom: 16px;
	border-radius: 16px;
	min-height: 45px;
 }
 .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* Optional: for better spacing */
  }

  .left-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust gap as needed */
  }

 /*.chat-header {
     padding: 16px;
     gap: 10px;
     border-bottom: 1px solid #eaeaea;
     display: flex;
     align-items: center;
 }*/

 .chat-header .chat-title {
     font-weight: 500;
 }

 .chat-header .chat-subtitle {
     font-size: 13px;
     color: rgb(155, 155, 155);
 }


 .popup-menu {
    display: none;
    border-radius: 10px;
    position: absolute; /* Ensure it positions relative to the parent */
    top: 100%; /* Position it right below the button */
    right: 0%; /* Align it with the left edge of the button */
    background: #fff;
    border: 1px solid #ccc;
    z-index: 9999; /* Ensure it appears above other elements */
    white-space: nowrap;
    padding: 5px;
}

.popup-menu button {
    display: block;
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    text-align: left;
}

.popup-menu button:hover {
    background-color: #f0f0f0;
}

.menu-option {
    font-size: 15px;
 }


 .menu-option:hover {
    background: #ececf1;
    cursor: pointer;
}


 .chat-content {
     flex: 1;
     margin-bottom: 16px;
     padding: 16px;
     font-size: 15px !important;
     overflow: hidden auto;
 }
#chat-content {
    scrollbar-width: thin; 
    scrollbar-color: #888 #f0f0f0; 
}

#chat-content::-webkit-scrollbar {
    width: 4px; 
}

#chat-content::-webkit-scrollbar-track {
    background: #f0f0f0; 
}

#chat-content::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 10px; 
}

#chat-content::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

 .chat-content img {
     max-width: 150px;
 }

 .user-input {
     bottom: 10px;
     left: 10px;
     width: calc(100% - 40px);
     padding: 10px;
     border: none !important;
     outline: none !important;
     z-index: 1001;
     font-size: 15px;
	 background: transparent;
 }



 .send-button {
     position: absolute;
     bottom: 10px;
     right: 10px;
     border: none;
     background: none;
     cursor: pointer;
     transition: background-color 0.3s ease;
     z-index: 1001;
     display: flex;
     align-items: center;
     justify-content: center;
 }


 .cancel-button {
     display: none;
     position: absolute;
     bottom: 10px;
     right: 10px;
     border: none;
     background: none;
     cursor: pointer;
     transition: background-color 0.3s ease;
     z-index: 1001;

     align-items: center;
     justify-content: center;
 }



 .chat-icon {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 54px;
     height: 54px;
     cursor: pointer;
     z-index: 1001;
     background-color: #000000;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .chat-icon-inner svg {
     width: 26px;
     height: 26px;
 }

 .chat-icon:hover {
     background-color: #333333;
 }


 .chat-clear {
     background: none;
     margin-left: auto;
     border-radius: 10px;
     width: 36px;
     height: 36px;
     border: none !important;
     transition: background-color .2s;
     cursor: pointer;
 }

 .chat-clear:hover {
     background: #ececf1;
 }

 /* Styling the chat box container */
 .chat-page {
     padding: 0 0 50px 0;
 }

 .msg-inbox {
     overflow: hidden;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
 }


 /* Styling the message page */


 .message {
     display: flex; 
 }


 .ai-message {
     justify-content: flex-start;
 }

 .user-message {
     justify-content: flex-end;
 }

.cloud {
    max-width: 80%;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #e1f7d5;
    font-size: 15px !important;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal; 
}

 .cloud p {
     margin: 0;
 }

.ai-content-wrapper {
    display: block;
    margin-bottom: 10px;
}

 .ai-content-wrapper .timestamp {
    text-align: left;
    margin-bottom: 1px;
    margin-left:3px;
    font-size: 12px;
 }

 .user-content-wrapper {
    display: block;
    margin-bottom: 10px;
}

 .user-content-wrapper .timestamp {
    text-align: right;
    margin-bottom: 1px;
    margin-right: 3px;
    font-size: 12px;
 }

 .ai-message .cloud {
     background-color: #f1f1f1;
     border-top-left-radius: 5px;
 }

 .user-message .cloud {
     color: #fff;
     background-color: #487ac5;
     border-top-right-radius: 5px;
 }

 .thumbs-up {
     box-sizing: border-box;
     margin: 0px;
     min-width: 0px;
     flex: 1 1 0%;
     text-align: center;
     cursor: pointer;
     border-right: 1px solid rgb(234, 236, 239);
     opacity: 1;
 }

 .thumbs-up>svg{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    font-size: 20px;
    fill: rgb(30, 32, 38);
    display: inline;
    width: 1em;
    height: 1em;
 }

 .thumbs-down {
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    text-align: center;
    cursor: pointer;
    opacity: 1;
 }

 .thumbs-down > svg {
        box-sizing: border-box; 
     margin: 0px; 
     min-width: 0px; 
     font-size: 20px; 
    fill: rgb(30, 32, 38); 
    transform: rotateX(180deg);
    display: inline;
    width: 1em;
    height: 1em;
 }

 .helpful-content {
     box-sizing: border-box;
     margin: 10px 40px 10px 35px;
     min-width: 0px;
     display: flex;
 }

 .helpful-content-sub {
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    flex: 1 1 0%;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid rgb(234, 236, 239);
    opacity: 1;
 }
 
 
 .quick-replies {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.quick-reply-button {
    background-color: #fff;
    border: 1px solid rgba(186,186,186,1);
    border-radius: 18px;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex-basis: calc(50% - 20px); /* 25% width minus margin space */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

.quick-reply-button:hover {
    background-color: #f1f1f1;
}