 /* Chat UI Styles */
 #chat-box {
     width           : 350px;
     height          : 450px;
     position        : fixed;
     bottom          : 20px;
     right           : 20px;
     background-color: #f9f9f9;
     border          : 1px solid #ddd;
     border-radius   : 12px;
     display         : none;
     overflow-y      : auto;
     box-shadow      : 0 4px 8px rgba(0, 0, 0, 0.1);
     z-index         : 9999;
 }

 #chat-box .heading-area {
     background-color: #fff;
     color           : white;
     padding         : 7px 15px;
     border-radius   : 12px 12px 0 0;
     display         : flex;
     justify-content : space-between;
     align-items     : center;
     border-bottom: 1px solid #ddd;
 }

 #chat-box .heading-area .logo-area{
    display: flex;
 }

 #chat-box .heading-area .logo-area img{
    width: 3rem;
    height: 3rem;
    align-items: center;
    margin-right: 10px;
 }
 
 #chat-box .chatbot-heading{
    /*margin-top: 11px;*/
    /*animation: bounce 1.5s ease-in-out infinite;*/
 }

 #chat-box .chatbot-heading p{
     color: #003566;
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 0px !important;
    text-align: end;
    margin-top: -8px;
 }

 #chat-box h3 {
     color: #FF792E;
    font-size: 15px;
    margin: 0 !important;
    margin-top: 5px !important;
    font-weight: 900;
 }

 @keyframes bounce {
     0% {
         transform: translateY(0);
     }

     20% {
         transform: translateY(-10px);
     }

     40% {
         transform: translateY(0);
     }

     60% {
         transform: translateY(-5px);
     }

     80% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(0);
     }
 }

 #chat-box i {
    font-size: 20px;
    cursor: pointer;
    color: #023566;
    margin-top: -5px;
 }

 #chat-messages {
     padding   : 10px;
     max-height: 336px;
     overflow-y: auto;
 }

 #chat-messages p {
     margin-bottom: 0px;
     font-size    : 14px;
     line-height  : 1.5;
 }

 #chat-messages::-webkit-scrollbar {
     width: 4px;
 }

 #chat-messages::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius   : 10px;
 }

 #chat-messages::-webkit-scrollbar-track {
     background-color: #ecf0f1;
     border-radius   : 10px;
 }

 .chat-welcome{
    text-align: center;
    justify-content: space-between !important;
    height: 20rem !important;
 }

 .chat-welcome img{
    margin-top: 20px !important;
 }

 .chat-welcome .show-message{
    margin: 0 auto;
    background-color: transparent;
    margin-top: 20px;
 }

 .chat-welcome .chat-options{
    margin-top: 20px;
 }

 .bot-message {
     background-color: #e6f7ff;
     padding         : 10px;
     border-radius   : 10px;
     max-width       : 80%;
     margin-right    : auto !important;
     word-wrap       : break-word;
     margin          : 5px 0;
 }

 .bot-message button {
     margin       : 3px;
     border       : 1px solid #ccc;
     background   : #ddd;
     border-radius: 50px;
     font-size    : 11px;
     padding      : 5px 10px;
     color        : #000;
     cursor       : pointer;
 }

 .chat-welcome button {
     margin: 3px;
    border: 1px solid #6d57d2;
    background: #f0eefb;
    border-radius: 50px;
    font-size: 11px;
    padding: 0px 15px;
    color: #6d57d2;
    cursor: pointer;
 }

 .user-message {
     background-color: #d4edda;
     padding         : 10px;
     border-radius   : 10px;
     max-width       : 80%;
     margin-left     : auto !important;
     word-wrap       : break-word;
     margin          : 5px 0;
 }

 .chatbot-input {
     width   : 100%;
     display : flex;
     border-top: 1px solid #ddd;
     padding : 0px 8px 0px 8px;
     position: absolute;
     left    : 0px;
     bottom  : 0px;
 }

 #user-input {
    border: none !important;
    width: 90%;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: #000;
 }

 #send-btn {
     background-color: transparent;
     color           : #000;
     padding         : 5px 10px;
     border-radius   : 50%;
     border          : 1px solid #ddd;
     cursor          : pointer;
     font-size       : 18px;
     margin-left     : 10px;
     border          : 1px solid #ccc;
     margin: 3px 0;
 }

 #toggle-chat {
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 5rem;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    z-index: 9;
 }

 #chat-box.fadeIn {
     animation: fadeIn 0.5s forwards;
 }

 @keyframes fadeIn {
     from {
         opacity  : 0;
         transform: translateY(20px);
     }

     to {
         opacity  : 1;
         transform: translateY(0);
     }
 }

 #toggle-chat::after {
     content   : "";
     position  : absolute;
     top       : 0;
     left      : -100%;
     width     : 100%;
     height    : 100%;
     background: linear-gradient(to right, transparent, #fff, transparent);
     animation : scanning 2s linear infinite;
 }

 @keyframes scanning {
     0% {
         left: -100%;
     }

     50% {
         left: 100%;
     }

     100% {
         left: 100%;
     }
 }

 /* Typing indicator styling */
 .typing-indicator {
     display    : flex;
     align-items: center;
     margin-top : 10px;
 }

 .typing-indicator span {
     display         : inline-block;
     width           : 5px;
     height          : 5px;
     margin          : 0 3px;
     border-radius   : 50%;
     background-color: #000;
     animation       : typingAnimation 1.5s infinite ease-in-out;
 }

 .typing-indicator span:nth-child(1) {
     animation-delay: 0s;
 }

 .typing-indicator span:nth-child(2) {
     animation-delay: 0.3s;
 }

 .typing-indicator span:nth-child(3) {
     animation-delay: 0.6s;
 }

 /* Animation for typing dots */
 @keyframes typingAnimation {
     0% {
         opacity  : 0;
         transform: scale(0);
     }

     50% {
         opacity  : 1;
         transform: scale(1);
     }

     100% {
         opacity  : 0;
         transform: scale(0);
     }
 }

 /* Chat Bot Images */
 .chatbot-web {
     overflow-x  : auto;
     white-space : nowrap;
     padding     : 5px 0;
     max-width   : 80%;
     margin-right: auto;
 }

 .web-track {
     display: flex;
     gap    : 4px;
 }

 .chatbot-web .img {
     display      : inline-block;
     background   : transparent;
     border-radius: 10px;
     box-shadow   : 0 0 10px rgba(0, 0, 0, 0.1);
     width        : 140px;
     text-align   : center;
 }

 .chatbot-web .img img {
     width        : 100%;
     height       : 50px;
     border-radius: 4px;
     border: 1px solid #ddd;
 }

 

 /* for activating dark mode ChatBot */
 #chat-box .toggle-dark {
    position: absolute;
    top: 19px;
    right: 55px;
    z-index: 1000;
    cursor: pointer;
  }
  .chatbot-darkmode {
    background-color: #121212 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  #chat-box .form-check-input:checked{
    background-color: #000 !important;
    border-color: #000 !important;
  }

  #chat-box .form-check-input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
  }