#chat-messages {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
    height: 68vh;
    }

    /* General Message Styling */
    .message {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between messages */
    max-width: 80%;
       }
   /* Bot Message (Left Side) */
    .chat-message.bot {
    width:auto;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 1%;
    max-width: 80%;
    margin-bottom: 2%
    }

   /* User Message (Right Side) */
   .chat-message.user {
    width: auto;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
    background: rgba(63, 77, 203, 0.10);
    color: rgba(36, 36, 36, 1);
    justify-content: flex-end;
    align-self: flex-end;
    text-align: right;
    gap: 1%;
    max-width: 70%;
    margin-bottom: 2%

    }


    .text {
    padding: 8px 16px;
    border-radius: 8px;
    word-wrap: break-word;
    max-width: 70%;
    }

    .text.bot-text {
    background: #f1f1f1;
    color: black;
   }

    .text.user-text {
    color: rgba(36, 36, 36, 1);
    }

    .numbered-item {
        display: inline; /* Keep the number inline */
        font-weight: bold;
        margin-right: 5px; /* Space after number */
    }

    #chat-input {
        display: flex;
        height: 78px;
        border-radius: 39px;
        border: 1px solid rgba(140, 140, 140, 0.10);
        background:#E3E3E3;
        backdrop-filter: blur(0px);
        margin: 10px 20px; /* Reduced margin for compactness */
        padding: 0 10px;
        align-items: center;
       justify-content: center;
    }

    #chat-input input {
       border: none;
        outline: none;
        padding: 8px; /* Reduced padding */
        flex-grow: 1;
        background:#E3E3E3;
        
        
    }

    #chat-input button {
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    background: blue !important; /* Change to desired color */
    padding: 10px !important; /* Adjust padding for better spacing */
    outline: none !important; /* Removes outline when clicked */
    border-radius: 50% !important; /* Makes it circular */
    width: 64px !important; /* Set a fixed width */
    height: 64px !important; /* Set a fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    }


    .chat-icon {
        width: 26px;
        height: 27px;
        background-size: cover;
    }

    

    .chat-icon.user-icon {
        width:100%;
       
    }

    .message-time {
        font-size: 12px;
        color: #888;
        margin-left: 10px;
        align-self: flex-end; /* Align time to the right for bot */
    }

    .message.user .message-time {
        order: 1; /* Time comes before message for user */
        margin-left: 0;
        margin-right: 8px; /* Adjusted margin for compact layout */
        align-self: flex-start; /* Align time to the left for user */
    }

    .message.bot .message-time {
        order: 2; /* Time comes after message for bot */
        margin-left: 8px; /* Adjusted margin for compact layout */
        align-self: flex-end; /* Align time to the right for bot */
    }


    .ai-chat-box{
        padding: 0% 5% 0% 5%; 
    }
       
    .chat-divider {
        width: 100%; /* Make it responsive */
        max-width: 1166px; /* Limit max width */
        height: 1px;
        background: #D1D1D1;
        margin: 10px auto; /* Center it with spacing */
    }

 
             /*---------------the above css is used for ai-chatbot --------------------------*/


      /*----------- the below css is used for side bar in ai chatot page---------------*/


            /* Sidebar Styling */
            #custom-sidebar {
                position: fixed;
                top: 0;
                left: -390px; /* Initially hidden on the left */
                display: flex;
                flex-direction: column;
                width: 370px;
                height: 100vh;
                padding: 16px 20px;
                background: #000039;
                transition: left 0.3s ease-in-out;
                z-index: 1000;
            }
    
            /* Sidebar Button */
            #sidebar-toggle-btn {
                position: fixed;
                top: 50%;
                left: 0px; /* Placed on the left side */
                transform: translateY(-50%);
                border-radius: 0px 16px 16px 0px;
                box-shadow: 40px 40px 100px -5pxrgba(24, 48, 63, 0.20); 
                background: #FFF;
                width: 49px;
                height: 118px;
                border: none;
                cursor: pointer;
                z-index: 1100;
            }

            #sidebar-toggle-btn:hover{
                color:unset;
            }
    
            #sidebar-toggle-btn img {
                width: 100px;
                height: 50px;
            }
    
            /* Close Button */
            #close-sidebar {
                position: absolute;
                   right: 3%;
                    background: unset;
                     color: white;
                   border: none;
                    padding: 5px 10px;
                      /* margin-top: 5%; */
                       cursor: pointer;
                   top: 3%;
            }
    
            /* Overlay to detect outside clicks */
            #sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }
    
            /* Sidebar Content */
            #custom-sidebar-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                width: 100%;
                padding-top: 20%;
                margin-top: 15%;
            }
    
            /* Menu Items */
            .menu-items {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: auto;
            }
    
            .sidebar-option {
                display: flex;
                align-items: center;
                padding: 16px 20px;
                gap: 10px;
                cursor: pointer;
                color: white;
                transition: background 0.3s;
            }
    
            .sidebar-option:hover {
                background: #FFF;
                color: #000;
            }
    
            /* Separator Line */
            .separator {
                width: 320px;
                height: 1px;
                background: #FFF;
                margin: 20px 0;
            }
    
            /* Pro Section */
            .pro-section {
                text-align: center;
                color: #ffffff;
            }
    
            .pro-btn {
                width: 320px;
                height: 46px;
                display: flex;
                padding: 10px 51px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                border-radius: 8px;
                background: #3F4DCB;
                color: white;
                border: none;
                cursor: pointer;
                margin-top: 10px;
                box-shadow: 
                    14px 22px 7px rgba(0, 0, 0, 0.00), 
                    9px 14px 7px rgba(0, 0, 0, 0.01), 
                    5px 8px 6px rgba(0, 0, 0, 0.05), 
                    2px 4px 4px rgba(0, 0, 0, 0.09), 
                    1px 1px 2px rgba(0, 0, 0, 0.10);
            }
    
            .pro-btn:hover {
                background: #2D3BB5;
            }
            #sidebar-logo img {
                width: 50%;
                    height: 4vh;
                  position: absolute;
                    top: 3%;
                       left: 3%;
                   object-fit: contain;
                        max-width: 185px;
                         object-position: left
            }
    
    
    
             /*----------- the above css is used for side bar in ai chatot page---------------*/


 /*----------------------------------------------Laptop screen starts-------------------------------------------*/
             @media screen and (min-width: 1025px) and (max-width: 1440px){


                #chat-messages {
                    display: flex;
                    flex-direction: column;
                    overflow-y: auto;
                    flex-grow: 1;
                    height: 68vh;
                    }
                
                    /* General Message Styling */
                    .message {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px; /* Space between messages */
                    max-width: 80%;
                       }
                   /* Bot Message (Left Side) */
                    .chat-message.bot {
                    width:auto;
                    justify-content: flex-start;
                    align-self: flex-start;
                    gap: 1%;
                    max-width: 80%;
                    margin-bottom: 2%
                    }
                
                   /* User Message (Right Side) */
                   .chat-message.user {
                    width: auto;
                    padding: 8px 16px 8px 16px;
                    border-radius: 8px;
                    background: rgba(63, 77, 203, 0.10);
                    color: rgba(36, 36, 36, 1);
                    justify-content: flex-end;
                    align-self: flex-end;
                    text-align: right;
                    gap: 1%;
                    max-width: 70%;
                    margin-bottom: 2%
                
                    }
                
                
                    .text {
                    padding: 8px 16px;
                    border-radius: 8px;
                    word-wrap: break-word;
                    max-width: 70%;
                    }
                
                    .text.bot-text {
                    background: #f1f1f1;
                    color: black;
                   }
                
                    .text.user-text {
                    color: rgba(36, 36, 36, 1);
                    }
                
                    .numbered-item {
                        display: inline; /* Keep the number inline */
                        font-weight: bold;
                        margin-right: 5px; /* Space after number */
                    }
                
                    #chat-input {
                        display: flex;
                        height: 78px;
                        border-radius: 39px;
                        border: 1px solid rgba(140, 140, 140, 0.10);
                        background:#E3E3E3;
                        backdrop-filter: blur(0px);
                        margin: 10px 20px; /* Reduced margin for compactness */
                        padding: 0 10px;
                        align-items: center;
                       justify-content: center;
                    }
                
                    #chat-input input {
                       border: none;
                        outline: none;
                        padding: 8px; /* Reduced padding */
                        flex-grow: 1;
                        background:#E3E3E3;
                        
                        
                    }
                
                    #chat-input button {
                    color: white !important;
                    border: none !important;
                    cursor: pointer !important;
                    background: blue !important; /* Change to desired color */
                    padding: 10px !important; /* Adjust padding for better spacing */
                    outline: none !important; /* Removes outline when clicked */
                    border-radius: 50% !important; /* Makes it circular */
                    width: 64px !important; /* Set a fixed width */
                    height: 64px !important; /* Set a fixed height */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    }
                
                
                    .chat-icon {
                        width: 26px;
                        height: 27px;
                        background-size: cover;
                    }
                
                    
                
                    .chat-icon.user-icon {
                        width:100%;
                       
                    }
                
                    .message-time {
                        font-size: 12px;
                        color: #888;
                        margin-left: 10px;
                        align-self: flex-end; /* Align time to the right for bot */
                    }
                
                    .message.user .message-time {
                        order: 1; /* Time comes before message for user */
                        margin-left: 0;
                        margin-right: 8px; /* Adjusted margin for compact layout */
                        align-self: flex-start; /* Align time to the left for user */
                    }
                
                    .message.bot .message-time {
                        order: 2; /* Time comes after message for bot */
                        margin-left: 8px; /* Adjusted margin for compact layout */
                        align-self: flex-end; /* Align time to the right for bot */
                    }

                    .ai-chat-box{
                        padding: 0% 5% 0% 5%; 
                    }
                       
                    .chat-divider {
                        width: 100%; /* Make it responsive */
                        max-width: 1166px; /* Limit max width */
                        height: 1px;
                        background: #D1D1D1;
                        margin: 10px auto; /* Center it with spacing */
                    }
                
                 
                             /*---------------the above css is used for ai-chatbot --------------------------*/
                
                
                      /*----------- the below css is used for side bar in ai chatot page---------------*/
                
                
                            /* Sidebar Styling */
                            #custom-sidebar {
                                position: fixed;
                                top: 0;
                                left: -390px; /* Initially hidden on the left */
                                display: flex;
                                flex-direction: column;
                                width: 370px;
                                height: 100vh;
                                padding: 16px 20px;
                                background: #000039;
                                transition: left 0.3s ease-in-out;
                                z-index: 1000;
                            }
                    
                            /* Sidebar Button */
                            #sidebar-toggle-btn {
                                position: fixed;
                                top: 55%;
                                left: 0px; /* Placed on the left side */
                                transform: translateY(-50%);
                                border-radius: 0px 16px 16px 0px;
                                box-shadow: 40px 40px 100px -5px rgba(24, 48, 63, 0.20); 
                                background: #FFF;
                                width: 30px;
                                height: 75px;
                                border: none;
                                cursor: pointer;
                                z-index: 1100;
                            }

                            #sidebar-toggle-btn:hover{
                                color:unset;
                            }
                
                            #sidebar-toggle-btn:hover{
                                color:unset;
                            }
                    
                            #sidebar-toggle-btn img {
                                width: 100px;
                                height: 50px;
                            }
                    
                            /* Close Button */
                            #close-sidebar {
                                position: absolute;
                                   right: 3%;
                                    background: unset;
                                     color: white;
                                   border: none;
                                    padding: 5px 10px;
                                      /* margin-top: 5%; */
                                       cursor: pointer;
                                   top: 3%;
                            }
                    
                            /* Overlay to detect outside clicks */
                            #sidebar-overlay {
                                display: none;
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: rgba(0, 0, 0, 0.5);
                                z-index: 999;
                            }
                    
                            /* Sidebar Content */
                            #custom-sidebar-content {
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                flex-grow: 1;
                                width: 100%;
                                padding-top: 20%;
                                margin-top: 15%;
                            }
                    
                            /* Menu Items */
                            .menu-items {
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                margin-bottom: auto;
                            }
                    
                            .sidebar-option {
                                display: flex;
                                align-items: center;
                                padding: 16px 20px;
                                gap: 10px;
                                cursor: pointer;
                                color: white;
                                transition: background 0.3s;
                            }
                    
                            .sidebar-option:hover {
                                background: #FFF;
                                color: #000;
                            }
                    
                            /* Separator Line */
                            .separator {
                                width: 320px;
                                height: 1px;
                                background: #FFF;
                                margin: 20px 0;
                            }
                    
                            /* Pro Section */
                            .pro-section {
                                text-align: center;
                                color: #ffffff;
                            }
                    
                            .pro-btn {
                                width: 320px;
                                height: 46px;
                                display: flex;
                                padding: 10px 51px;
                                justify-content: center;
                                align-items: center;
                                gap: 10px;
                                align-self: stretch;
                                border-radius: 8px;
                                background: #3F4DCB;
                                color: white;
                                border: none;
                                cursor: pointer;
                                margin-top: 10px;
                                box-shadow: 
                                    14px 22px 7px rgba(0, 0, 0, 0.00), 
                                    9px 14px 7px rgba(0, 0, 0, 0.01), 
                                    5px 8px 6px rgba(0, 0, 0, 0.05), 
                                    2px 4px 4px rgba(0, 0, 0, 0.09), 
                                    1px 1px 2px rgba(0, 0, 0, 0.10);
                            }
                    
                            .pro-btn:hover {
                                background: #2D3BB5;
                            }
                            #sidebar-logo img {
                                width: 50%;
                                    height: 4vh;
                                  position: absolute;
                                    top: 3%;
                                       left: 3%;
                                   object-fit: contain;
                                        max-width: 185px;
                                         object-position: left
                            }
                    
                    
                    
                             /*----------- the above css is used for side bar in ai chatot page---------------*/



             }

       /*----------------------------------------------Laptop screen Ends-------------------------------------------*/
       
       

    /*----------------------------------------------Mobile screen starts-------------------------------------------*/

    @media screen and (min-width: 320px) and (max-width: 480px){


        #chat-messages {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            flex-grow: 1;
            height: 72vh;
            }
        
            /* General Message Styling */
            .message {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between messages */
            max-width: 80%;
               }
          /* Bot Message (Left Side) */
           .chat-message.bot {
        width:90%;
        justify-content: flex-start;
        align-self: flex-start;
        gap: 1%;
        max-width: 90%;
        margin-bottom: 2%
        }
    
       /* User Message (Right Side) */
       .chat-message.user {
        width: auto;
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        background: rgba(63, 77, 203, 0.10);
        color: rgba(36, 36, 36, 1);
        justify-content: flex-end;
        align-self: flex-end;
        text-align: right;
        gap: 1%;
        max-width: 70%;
        margin-bottom: 2%
    
        }
        
        
            .text {
            padding: 8px 16px;
            border-radius: 8px;
            word-wrap: break-word;
            max-width: 70%;
            }
        
            .text.bot-text {
            background: #f1f1f1;
            color: black;
           }
        
            .text.user-text {
            color: rgba(36, 36, 36, 1);
            }
        
            .numbered-item {
                display: inline; /* Keep the number inline */
                font-weight: bold;
                margin-right: 5px; /* Space after number */
            }
        
            #chat-input {
                display: flex;
                height: 58px;
                border-radius: 39px;
                border: 1px solid rgba(140, 140, 140, 0.10);
                background:#E3E3E3;
                backdrop-filter: blur(0px);
                margin: 10px 20px; /* Reduced margin for compactness */
                padding: 0 10px;
                align-items: center;
               justify-content: center;
            }
        
            #chat-input input {
               border: none;
                outline: none;
                padding: 8px; /* Reduced padding */
                flex-grow: 1;
                background:#E3E3E3;
                
                
            }
        
            #chat-input button {
            color: white !important;
            border: none !important;
            cursor: pointer !important;
            background: blue !important; /* Change to desired color */
            padding: 10px !important; /* Adjust padding for better spacing */
            outline: none !important; /* Removes outline when clicked */
            border-radius: 50% !important; /* Makes it circular */
            width: 40px !important; /* Set a fixed width */
            height: 40px !important; /* Set a fixed height */
            display: flex;
            align-items: center;
            justify-content: center;
            }
        
        
            .chat-icon {
                width: 26px;
                height: 27px;
                background-size: cover;
            }
        
            
        
            .chat-icon.user-icon {
                width:100%;
               
            }
        
            .message-time {
                font-size: 12px;
                color: #888;
                margin-left: 10px;
                align-self: flex-end; /* Align time to the right for bot */
            }
        
            .message.user .message-time {
                order: 1; /* Time comes before message for user */
                margin-left: 0;
                margin-right: 8px; /* Adjusted margin for compact layout */
                align-self: flex-start; /* Align time to the left for user */
            }
        
            .message.bot .message-time {
                order: 2; /* Time comes after message for bot */
                margin-left: 8px; /* Adjusted margin for compact layout */
                align-self: flex-end; /* Align time to the right for bot */
            }
        
        
            .ai-chat-box{
                padding: 1% 1% 1% 1%; 
            }

            
             /*---------------the above css is used for ai-chatbot --------------------------*/


      /*----------- the below css is used for side bar in ai chatot page---------------*/


            /* Sidebar Styling */
        #custom-sidebar {
            position: fixed;
            top: 0;
            left: -500px; /* Initially hidden on the left */
            display: flex;
            flex-direction: column;
            width: 70%;
            height: 100vh;
            padding: 16px 20px;
            background: #000039;
            transition: left 0.3s ease-in-out;
            z-index: 1000;
        }

        /* Sidebar Button */
        #sidebar-toggle-btn {
            position: fixed;
            top: 14%;
            transform: translateY(-50%);
            border-radius: 0px 16px 16px 0px;
            box-shadow: 40px 40px 100px -5px rgba(24, 48, 63, 0.20); 
            background: #FFF;
            width: 30px;
            height: 55px;
            border: none;
            cursor: pointer;
            z-index: 1100;
        }

        #sidebar-toggle-btn:hover{
            color:unset;
        }

        #sidebar-toggle-btn img {
            width: 50px;
            height: 50px;
        }

        /* Close Button */
        #close-sidebar {
            position: absolute;
            right: 3%;
             background: unset;
              color: white;
            border: none;
             padding: 5px 10px;
               /* margin-top: 5%; */
                cursor: pointer;
            top: 3%;
        }

        /* Overlay to detect outside clicks */
        #sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Sidebar Content */
        #custom-sidebar-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            width: 100%;
            padding-top: 20%;
            margin-top: 15%;
        }

        /* Menu Items */
        .menu-items {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: auto;
        }

        .sidebar-option {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            gap: 10px;
            cursor: pointer;
            color: white;
            transition: background 0.3s;
        }

        .sidebar-option:hover {
            background: #FFF;
            color: #000;
        }

        /* Separator Line */
        .separator {
            width: 320px;
            height: 1px;
            background: #FFF;
            margin: 20px 0;
        }

        /* Pro Section */
        .pro-section {
            text-align: center;
            color: #ffffff;
        }

        .pro-btn {
            width: 320px;
            height: 46px;
            display: flex;
            padding: 10px 51px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            border-radius: 8px;
            background: #3F4DCB;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 10px;
            box-shadow: 
                14px 22px 7px rgba(0, 0, 0, 0.00), 
                9px 14px 7px rgba(0, 0, 0, 0.01), 
                5px 8px 6px rgba(0, 0, 0, 0.05), 
                2px 4px 4px rgba(0, 0, 0, 0.09), 
                1px 1px 2px rgba(0, 0, 0, 0.10);
        }

        .pro-btn:hover {
            background: #2D3BB5;
        }
        #sidebar-logo img {
            width: 50%;
            height: 4vh;
          position: absolute;
            top: 3%;
               left: 3%;
           object-fit: contain;
                max-width: 185px;
                 object-position: left
        }



/*----------- the above css is used for side bar in ai chatot page---------------*/

    }

/*----------------------------------------------Mobile screen Ends-------------------------------------------*/






     

/*----------------------------------------------Tablet screen Starts-------------------------------------------*/

    @media screen and (min-width: 481px) and (max-width: 1024px){

        #chat-messages {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            flex-grow: 1;
            height: 68vh;
            }
        
            /* General Message Styling */
            .message {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between messages */
            max-width: 80%;
               }
           /* Bot Message (Left Side) */
        .chat-message.bot {
        width:auto;
        justify-content: flex-start;
        align-self: flex-start;
        gap: 1%;
        max-width: 80%;
        margin-bottom: 2%
                   }
    
       /* User Message (Right Side) */
       .chat-message.user {
        width: auto;
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        background: rgba(63, 77, 203, 0.10);
        color: rgba(36, 36, 36, 1);
        justify-content: flex-end;
        align-self: flex-end;
        text-align: right;
        gap: 1%;
        max-width: 70%;
        margin-bottom: 2%
    
        }
        
        
            .text {
            padding: 8px 16px;
            border-radius: 8px;
            word-wrap: break-word;
            max-width: 70%;
            }
        
            .text.bot-text {
            background: #f1f1f1;
            color: black;
           }
        
            .text.user-text {
            color: rgba(36, 36, 36, 1);
            }
        
            .numbered-item {
                display: inline; /* Keep the number inline */
                font-weight: bold;
                margin-right: 5px; /* Space after number */
            }
        
            #chat-input {
                display: flex;
                height: 50px;
                border-radius: 39px;
                border: 1px solid rgba(140, 140, 140, 0.10);
                background:#E3E3E3;
                backdrop-filter: blur(0px);
                margin: 10px 20px; /* Reduced margin for compactness */
                padding: 0 10px;
                align-items: center;
               justify-content: center;
            }
        
            #chat-input input {
               border: none;
                outline: none;
                padding: 8px; /* Reduced padding */
                flex-grow: 1;
                background:#E3E3E3;
                
                
            }
        
            #chat-input button {
            color: white !important;
            border: none !important;
            cursor: pointer !important;
            background: blue !important; /* Change to desired color */
            padding: 10px !important; /* Adjust padding for better spacing */
            outline: none !important; /* Removes outline when clicked */
            border-radius: 50% !important; /* Makes it circular */
            width: 40px !important; /* Set a fixed width */
            height: 40px !important; /* Set a fixed height */
            display: flex;
            align-items: center;
            justify-content: center;
            }
        
        
            .chat-icon {
                width: 26px;
                height: 27px;
                background-size: cover;
            }
        
            
        
            .chat-icon.user-icon {
                width:100%;
               
            }
        
            .message-time {
                font-size: 12px;
                color: #888;
                margin-left: 10px;
                align-self: flex-end; /* Align time to the right for bot */
            }
        
            .message.user .message-time {
                order: 1; /* Time comes before message for user */
                margin-left: 0;
                margin-right: 8px; /* Adjusted margin for compact layout */
                align-self: flex-start; /* Align time to the left for user */
            }
        
            .message.bot .message-time {
                order: 2; /* Time comes after message for bot */
                margin-left: 8px; /* Adjusted margin for compact layout */
                align-self: flex-end; /* Align time to the right for bot */
            }
        
        
            .ai-chat-box{
                padding: 1% 1% 1% 1%; 
            }
               
            .chat-divider {
                width: 100%; /* Make it responsive */
                max-width: 1166px; /* Limit max width */
                height: 1px;
                background: #D1D1D1;
                margin: 10px auto; /* Center it with spacing */
            }

         
             /*---------------the above css is used for ai-chatbot --------------------------*/


      /*----------- the below css is used for side bar in ai chatot page---------------*/


            /* Sidebar Styling */
            #custom-sidebar {
                position: fixed;
                top: 0;
                left: -390px; /* Initially hidden on the left */
                display: flex;
                flex-direction: column;
                width: 370px;
                height: 100vh;
                padding: 16px 20px;
                background: #000039;
                transition: left 0.3s ease-in-out;
                z-index: 1000;
            }
    
            /* Sidebar Button */
            #sidebar-toggle-btn {
                position: fixed;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 0px 16px 16px 0px; 
                box-shadow: 40px 40px 100px -5px rgba(24, 48, 63, 0.20);
                background: #FFF;
                left: 0px; /* Placed on the left side */
                width: 30px;
                height: 100px;
                border: none;
                cursor: pointer;
                z-index: 1100;
            }
            #sidebar-toggle-btn:hover{
                color:unset;
            }
            #sidebar-toggle-btn img {
                width: 50px;
                height: 50px;
            }
    
            /* Close Button */
            #close-sidebar {
                position: absolute;
                right: 3%;
                 background: unset;
                  color: white;
                border: none;
                 padding: 5px 10px;
                   /* margin-top: 5%; */
                    cursor: pointer;
                top: 3%;
            }
    
            /* Overlay to detect outside clicks */
            #sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }
    
            /* Sidebar Content */
            #custom-sidebar-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                width: 100%;
                padding-top: 20%;
                margin-top: 15%;
            }
    
            /* Menu Items */
            .menu-items {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: auto;
            }
    
            .sidebar-option {
                display: flex;
                align-items: center;
                padding: 16px 20px;
                gap: 10px;
                cursor: pointer;
                color: white;
                transition: background 0.3s;
            }
    
            .sidebar-option:hover {
                background: #FFF;
                color: #000;
            }
    
            /* Separator Line */
            .separator {
                width: 320px;
                height: 1px;
                background: #FFF;
                margin: 20px 0;
            }
    
            /* Pro Section */
            .pro-section {
                text-align: center;
                color: #ffffff;
            }
    
            .pro-btn {
                width: 320px;
                height: 46px;
                display: flex;
                padding: 10px 51px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                border-radius: 8px;
                background: #3F4DCB;
                color: white;
                border: none;
                cursor: pointer;
                margin-top: 10px;
                box-shadow: 
                    14px 22px 7px rgba(0, 0, 0, 0.00), 
                    9px 14px 7px rgba(0, 0, 0, 0.01), 
                    5px 8px 6px rgba(0, 0, 0, 0.05), 
                    2px 4px 4px rgba(0, 0, 0, 0.09), 
                    1px 1px 2px rgba(0, 0, 0, 0.10);
            }
    
            .pro-btn:hover {
                background: #2D3BB5;
            }
            #sidebar-logo img {
                width: 50%;
                height: 4vh;
              position: absolute;
                top: 3%;
                   left: 3%;
               object-fit: contain;
                    max-width: 185px;
                     object-position: left
            }
    
    
    
    /*----------- the above css is used for side bar in ai chatot page---------------*/

    }
        
    
/*----------------------------------------------Tablet screen Ends-------------------------------------------*/