/* For Chrome, Edge, and Safari */
        #messages::-webkit-scrollbar {
            width: 12px; /* Width of the scrollbar */
        }
        
        #messages::-webkit-scrollbar-track {
            background: #f1f1f1; /* Background of the scrollbar track */
        }
        
        #messages::-webkit-scrollbar-thumb {
            background-color: #684afe; /* Color of the scrollbar handle */
            border-radius: 10px; /* Roundness of the scrollbar handle */
            border: 3px solid #f1f1f1; /* Padding around the scrollbar handle */
        }
        
        #messages::-webkit-scrollbar-thumb:hover {
            background-color: #f1f1f1; /* Color of the scrollbar handle on hover */
        }
        
        .font{
            font-family: Cursive;
        }
        #chat-box {
            display: flex;
            flex-direction: column;
            height: 400px;
        }

        #messages {
            font-family: Cursive;
            height: 100%;
            flex: 1;
            padding: 10px;
            overflow-y: scroll;
            border-bottom: 1px solid #ccc;
        }

        #messages div {
            margin-bottom: 10px;
        }

        #user-input {
            border: none;
            padding: 10px;
            border: aliceblue;
            width: calc(100% - 60px);
            box-sizing: border-box;
        }
        .send-style {
            width: auto;
            height: 30px;
            transform: rotateZ(23deg);
            cursor: pointer;
            color:#4a6afe;
            text-decoration: none;
            background-color: transparent!important;
            border: none!important;
        }

        .bot {
            background-color: #f0f0f0;
            align-self: flex-start;
            border-radius: 5px;
            padding: 8px;
            margin: 5px 20px 5px 50px;
            word-wrap: break-word;
            max-width: 70%;
        }
        .error{
            font-size:unset!important;
            color:red!important;
            font-family: cursive!important;
        }
        
        .bot span{
            font-size:13px;
            color:#000064;
            font-family: system-ui;
        }
        
        .user {
            background-color: #1cc767;
            color: white;
            align-self: flex-end;
            border-radius: 5px;
            padding: 8px;
            width: max-content;
            margin: 5px 5px 5px auto;
            max-width: 70%;
            word-wrap: break-word;
        }

        .option-button {
            background-color: #4a6afe;
            color: white;
            border: none;
            padding: 8px 12px;
            margin: 5px;
            cursor: pointer;
            border-radius: 5px;
        }

        .option-button:hover {
            background-color: #007bff;
            color:white;
        }

        #toggle-chat-button {
        position: fixed;
        bottom: 0px;
        right: 51px;
        z-index: 999;
                
        }
        #chat-container {
            width: 500px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            overflow: hidden;
            position: fixed;
            bottom: -700px; /* Start off-screen at the bottom */
            right: 20px;
            transition: bottom 0.3s ease; /* Transition on the 'bottom' property */
            z-index: 998; /* Ensure it's above other content */
            height: 72vh;
            overflow-y: auto; /* Set to auto so it only scrolls when necessary */
        }

        #chat-container.open {
            bottom: 115px   ; /* Slide up to this position */
        }


        #chat-container.open {
            transform: translateX(0);
        }
        
                /* For Chrome, Edge, and Safari */
        #chat-container::-webkit-scrollbar {
            width: 12px; /* Width of the scrollbar */
        }
        
        #chat-container::-webkit-scrollbar-track {
            background: #f1f1f1; /* Background of the scrollbar track */
        }
        
        #chat-container::-webkit-scrollbar-thumb {
            background-color: #684afe; /* Color of the scrollbar handle */
            border-radius: 10px; /* Roundness of the scrollbar handle */
            border: 3px solid #f1f1f1; /* Padding around the scrollbar handle */
        }
        
        #chat-container::-webkit-scrollbar-thumb:hover {
            background-color: #f1f1f1; /* Color of the scrollbar handle on hover */
        }
        
        .setting {
            border-radius: 50%;
            width: 40%;
            height: max-content;
            float: right;
        }
        .div-setting{
            width: 180px;
            float: right;
            display: -webkit-inline-box;
        }
        .div-msg{
            width: max-content;
            height: max-content;
            color: gray;
            background-color: #fff;
            padding: 10px;
            margin-top: 20%;
            margin-right: 10%;
            transform: translateY(-50%);
            border-radius: 8px;
            text-align: center;
        }
        .div-msg::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -8%;
            transform: translateY(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #fff;
        }
        .main{
            color:gray;
            background-color:white;
            padding: 10px;
            bottom:0;
            justify-content:right;
        }
        .header {
            font-family: system-ui;
            color: white;
            padding: 20px 20px 15px 20px;
            border-bottom: 1px solid;
            background-color: #4a6afe;
            text-align:left;
        }
        .footer {
            font-family: system-ui;
            font-weight: bold;
            padding: 5px 5px;
            background-color: #4a6afe;
            text-align: center;
            
        }
        .header-img {
            width: 10%;
            float: left;
            margin-top: -2.5%;
            margin-left: -17.5%;
            border-radius: 50%;
        }
        .bot-img{
            margin-left: -10px;
            margin-top: -10px;
            margin-right: 5px;
            border: solid;
        }
        .pp{
            margin-top: 0;
            margin-bottom: 0;
            color: white;
            font-size:10px;
        }
        .close-button {
            position: relative;
            display: inline-block;
            width: 20px; /* Adjust size as needed */
            height: 20px; /* Adjust size as needed */
            cursor: pointer;
            right: 10px;
            float:right;
            font-family: 'YourIconFont'; /* Replace with your icon font family */
            background-color: transparent!important;
            border: none!important;
            color:white;
        }
        
        .close-button:hover {
            color: #fd6565!important; /* Example: change color on hover */
        }
        .yes-option-button {
    /* Styles specific to the "Yes" button */
    margin-left: 10.5%;
    /* Additional styles as needed */
}
        
        /* Media Query for Mobile Devices */
        @media (max-width: 600px) {
            .font{
                font-family:math;
            }
            
            #messages {
                    font-family:math;
                    height: 100%;
                    flex: 1;
                    padding: 10px;
                    overflow-y: scroll;
                    border-bottom: 1px solid #ccc;
                }
            #chat-container.open {
            bottom: 95px;
        }
        .div-msg{
                    display:none;
                }
        #chat-container {
            width: auto;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            overflow: hidden;
            position: fixed;
            bottom: -700px;
            right: 11px;
            transition: bottom 0.3s ease;
            z-index: 998;
            left: 10px;
        }
        .bot{
            margin: 5px 20px 5px 25px;
        }
            #toggle-chat-button {
                position: fixed;
                bottom: 20px;
                right: -98px;
                /* right: 133px; */
                z-index: 999;
            }
        .setting {
            border-radius: 50%;
            width: 35%;
            height: max-content;
            float: right;
        }
        #user-input {
            border: none;
            padding: 10px;
             width: calc(100% - 60px); 
            box-sizing: border-box;
        }
        .footer {
            font-family: system-ui;
            font-weight: bold;
            padding: 5px 5px;
            background-color: #4a6afe;
            text-align: center;
        }
        .header {
            font-family: system-ui;
            color: white;
            padding: 10px 10px 7px 10px;
            border-bottom: 1px solid;
            background-color: #4a6afe;
            text-align: left;
        }
        .bot-img {
            margin-left: -1%;
            margin-top: -1%;
            margin-right: 5px;
            border: solid;
        }
        }