body { font-family: Arial, sans-serif; }

        #chat-container{
    background-color: white;
        }
        
            #chat-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 320px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
            background: white;
            z-index: 9999;
            overflow: hidden;
            display: block;
            transition: all 0.3s;
        }

        #chatbot-container {
            position: fixed;
            bottom: 90px;
            right: 8px;
            width: 320px; /* Adjusted width to include frame */
            height: 400px; /* Adjusted height to include frame */
            max-width: 90%;
            max-height: 80%;
            background-color: #e6e6e4; /* Light beige background */
            border: 3px solid #fbc834; /* Frame-like border */
            border-radius: 20px; /* Rounded corners for the frame */
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Softer shadow */
            overflow: hidden;
            display: block;
            z-index: 1000;
            padding: 10px;
            animation: slideIn 0.4s ease-out;
        }

        #chatbot-container.open {
            display: block; /* Show when open */
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 320px; /* Adjusted width to include frame */
            height: 440px; 
            max-width: 90%;
            max-height: 80%;
            background-color: #e6e6e4; /* Light beige background */
            border: 3px solid #fbc834; /* Frame-like border */
            border-radius: 20px; /* Rounded corners for the frame */
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Softer shadow */
            overflow: hidden;
            z-index: 9999;
            padding: 10px;
            animation: slideIn 0.4s ease-out;
        }

        #messages { 
            list-style: none; 
            padding: 0; 
            max-height: 300px; 
            overflow-y: auto; 
            margin: 0;
            background: #f9f9f9;
        }

        #messages li { 
            padding: 10px; 
            border-bottom: 1px solid #ddd; 
            border-radius: 5px; 
            margin: 5px; 
            max-width: 80%; 
        }


        input[type="text"] { 
            width: 70%; 
            padding: 10px; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
            margin: 10px; 
        }

        #user-input {
            width: 62%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #e4e4e4;
        }


        #send-btn {
            width: 20%;
            padding: 10px;
            background: #fbc834;
            color: rgb(0, 0, 0);
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }


        #chat-box {
            height: 300px;
            overflow-y: scroll;
            border-bottom: 1px solid #d7ddc0;
            margin-bottom: 10px;
            padding: 10px;
        }


        /* User message styling */
        .user-message {
            background-color: #fbc834; /* Light green */
            color: #333; /* Text color */
            padding: 10px 15px;
            border-radius: 20px;
            margin: 10px 0;
            /* max-width: 100%;  */
            word-wrap: break-word;
            align-self: flex-end; /* Align user messages to the right */
            display: block;
            justify-content: flex-end; /* Align text within the message to the right */
            float:right;
            clear: both;
        }

        /* Bot message styling */
        .bot-message {
            background-color: #17a2b8; /* Light gray */
            color: #333; /* Text color */
            padding: 10px 15px;
            border-radius: 20px;
            margin: 10px 0;
            max-width: 75%; /* Adjusted to limit message width */
            word-wrap: break-word;
            align-self: flex-start; /* Align bot messages to the left */
            display: block;
            float: left;
            clear: both;
            justify-content: flex-start; /* Align text within the message to the left */
        }

        #send-btn:hover {
            background: #ffdd78;
        }

        #chatbot-iframe {
            transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */
        }

.close-btn {
    position: absolute;
    top: 5px;
    right: 20px;
    background-color: transparent;
    color: #17a2b8;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    transition: background-color 0.3s ease;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition on hover */

}

.close-btn:hover {
    color: #000000;
    transform: scale(1.1);
}

#chatbot-iframe {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 580px;
    border: none;
    z-index: 500;
    transition: width 0.3s ease, height 0.3s ease;
    display: none; /* Initially hidden */
}

#clear-chat-btn {
    position: absolute; 
    top: 10px; 
    right: 25px; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    z-index: 1001; 
}

.clear-icon {
    width: 20px; 
    height: 20px;
    transition: transform 0.3s ease; 
}

#clear-chat-btn:hover .clear-icon {
    transform: scale(1.1); 
}


        @keyframes slideIn {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }