#chat-messages {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow-y: auto;
        min-height: 60vh;
        padding: 20px 20px 10px 20px;
    }
    #chat-messages-container {
        display: flex;
        flex-direction: column;
        padding-bottom: 20vh;
    }

    /* General Message Styling */
    .message {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between messages */
    max-width: 80%;
       }



       .message-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
    }
    
    /* Bot layout: icon on left */
    .message-row.bot {
        justify-content: flex-start;
    }
    
    /* User layout: right side */
    .message-row.user {
        justify-content: flex-end;
    }
    
    .bot-icon {
        width: 50px !important;
        height: 50px !important;
        background-color: #F1F7FE;
        margin-right: 8px;
        border-radius: 25px !important;
        padding: 5px;
    }
    
    /* Chat bubble */
    .chat-message {
        max-width: 60%;
        padding: 10px 14px;
        border-radius: 12px;
    }
    
    
    .chat-message.user {
        background: #007bff;
        color: white;
    }






   /* Bot Message (Left Side) */
    .chat-message.bot {
    display: flex;
    width:auto;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 1%;
    max-width: 60%;
    border-radius: 12px;
    background: #FEF7ED;
    padding: 20px;
    }

   /* User Message (Right Side) */
   .chat-message.user {
    width: auto;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
    background: #F1F7FE;
    color: rgba(36, 36, 36, 1);
    justify-content: flex-end;
    align-self: flex-end;
    text-align: left;
    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 */
    }

    /*Quick Send message buttons */

    .edvdo_ai_chatbot_actions_container {
        display: flex;
        padding: 8px 14px 8px 75px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }
    
    .edvdo_ai_chatbot_action_button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 20px;
        border: 1px solid #D1D5DC;
        background: #FFF;
        padding: 8px 16px;
        cursor: pointer;
        font-size: 14px;
        width: auto;
        height: 40px;
    }


    .edvdo_ai_chatbot_action_button img{
        width: 25px;
        height: 25px;
        
    }

    
    /* Optional hover */
    .edvdo_ai_chatbot_action_button:hover {
        background: #f5f5f5;
    }

    .chat-input-outer-container{
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0.8px solid #E5E7EB;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
        background-color: rgba(255, 255, 255, 0.75);
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    #chat-input {
        display: flex;
        width: 80%;
        height: 120px;
        padding: 10px 10px 10px 15px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    #chat-input-inner {
        display: flex;
        width: 100%;
        height: 50px;
        border-radius: 25px;
        border: 0.8px solid rgba(0, 0, 0, 0.00);
        background: #F3F3F5;
        box-shadow: 0 0 0 0.093px rgba(161, 161, 161, 0.02);
        backdrop-filter: blur(0px);
        margin: 10px 20px;
        padding: 10px 10px 10px 15px;
        align-items: center;
        justify-content: center;
    }

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

    #chat-input-inner button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        background: #3f4dcb !important; 
        padding: 10px !important; 
        outline: none !important; 
        border-radius: 50% !important; 
        width: 35px !important; 
        height: 35px !important; 
    }

    #chat-input-inner button:hover {
        background: #000039 !important;
    }


    .chat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        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---------------*/


      #custom-sidebar {
            position: fixed;
            top: 0;
            left: 0; /* Keep it fixed */
            transform: translateX(-100%); /* Hide it off-screen */
            display: flex;
            flex-direction: column;
            width: 370px;
            height: 100vh;
            padding: 16px 20px;
            background: #000039;
            transition: transform 0.35s ease; /* smoother animation */
            z-index: 1101;
        }
            
    
            /* Sidebar Button */
            .sidebar-toggle-btn-bar {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap: 20px;
                position: fixed;
                top: 10%;
                left: 0px; /* Placed on the left side */
                transform: translateY(-10%);
                padding: 50px 0 20px 0;
                /* border-right: 1px solid rgba(132, 132, 132, 0.1); */
                width: 60px;
                height: auto;
                min-height: 100vh;
                z-index: 1100;
            }

            .sidebar-toggle-buttons {
                position: relative; /* Needed for tooltip positioning */
                border-radius: 12px;
                box-shadow: 40px 40px 100px -5px rgba(24, 48, 63, 0.20);
                background: #FFF;
                width: 35px;
                height: 35px;
                border: none;
                cursor: pointer;
                z-index: 1100;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* Keep your hover color reset */
            .sidebar-toggle-buttons:hover {
                color: #fff;
                background-color: #000039;
            }
            
            /* Keep your existing image styling */
            .sidebar-toggle-buttons img {
                width: 100px;
                height: 50px;
            }
            
            /* Tooltip using data-tooltip attribute */
            .sidebar-toggle-buttons::after {
                content: attr(data-tooltip);
                position: absolute;
                left: 100%; /* show tooltip to the right of button */
                top: 50%;
                transform: translateY(-50%);
                margin-left: 8px;
                background-color: #333;
                color: #fff;
                padding: 5px 8px;
                border-radius: 4px;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
                font-size: 12px;
            }
            
            /* Show tooltip on hover */
            .sidebar-toggle-buttons:hover::after {
                opacity: 1;
            }

            





            
    
            /* 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%;
                overflow-y: auto;
                padding-right: 15px;
            }
    

            #custom-sidebar-content::-webkit-scrollbar {
                width: 8px;
            }
            
            #custom-sidebar-content::-webkit-scrollbar-track {
                background: transparent;
            }
            
            #custom-sidebar-content::-webkit-scrollbar-thumb {
                background-color: #4a4aff;
                border-radius: 6px;
            }
              



            /* 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 {
                    min-height: 50vh;
                    }
                
                    #chat-messages-container {
                        padding-bottom: 20vh;
                    }
                
                    /* 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: 70%;
                    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: left;
                    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 */
                    }
                
                    .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: 1101;
                }

        
                /* Close Button */
                #close-sidebar {
                    position: absolute;
                    right: 3%;
                    background: unset;
                    color: white;
                    border: none;
                    padding: 5px 10px;
                    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%;
                    overflow-y: auto;
                }
        
                /* 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){

        .edvdo_ai_chatbot_actions_container {
            padding: 8px 14px 8px 14px;
            gap: 8px;
            justify-content: center;
        }

        #chat-messages-container {
            padding-bottom: 18vh;
        }

        #chat-input {
            display: flex;
            margin: unset;
            width: 100vw;
        }

        #chat-messages {
            min-height: 60vh;
            padding: 5%;
            }
        
            /* General Message Styling */
            .message {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between messages */
            max-width: 80%;
               }


            .bot-icon {
                width: 40px !important;
                height: 40px !important;
                background-color: #F1F7FE;
                margin-right: 5px;
                border-radius: 20px !important;
                padding: 5px;
            }

          /* 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: left;
        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 */
            }
        
            
        
            .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: 1101;
        }

        .sidebar-toggle-btn-bar {
            position: fixed;
            top: 20px;
            left: 0; 
            padding: unset;
            transform: translateY(-10%);
            border-right: unset;
            width: 50px;
            height: auto;
            min-height: unset;
        }
        

        /* Close Button */
        #close-sidebar {
            position: absolute;
            right: 3%;
            background: unset;
            color: white;
            border: none;
            padding: 5px 10px;
            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%;
            overflow-y: auto;
        }

        /* 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-input {
            display: flex;
            margin: unset;
            width: 100vw;
        }

        #chat-messages {
            min-height: 50vh;
            }
        
            /* General Message Styling */
            .message {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between messages */
            max-width: 80%;
               }


        .bot-icon {
            width: 40px !important;
            height: 40px !important;
            background-color: #F1F7FE;
            margin-right: 5px;
            border-radius: 20px !important;
            padding: 5px;
        }       

        
           /* 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: left;
        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 */
            }
        
        
            .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: 1101;
            }

            .sidebar-toggle-btn-bar {
                position: fixed;
                top: 20px;
                left: 0; 
                transform: translateY(-10%);
                border-right: unset;
                width: 50px;
                height: auto;
                min-height: unset;
            }
    
            /* 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%;
                overflow-y: auto;
            }
    
            /* 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-------------------------------------------*/