:root {
    --aiint-primary: #3b82f6;
    /* Primary blue */
    --aiint-accent: #ffffff;
    /* Accent white */
    --aiint-glow: rgba(59, 130, 246, 0.6);
    /* Glow effect */
    --aiint-header-bg-start: #2d5f94;
    /* Header gradient start */
    --aiint-header-bg-end: #23377a;
    /* Header gradient end */
    --aiint-body-bg: rgba(10, 26, 63, 0.9);
    /* Chatbot body background */
    --aiint-border-color: rgba(0, 0, 255, 0.5);
    /* Border color */
    --aiint-hover-color: #add8e6;
    /* Hover color for close button */
    --aiint-overlay-gradient-start: rgba(0, 123, 255, 0.2);
    /* Overlay gradient start */
    --aiint-overlay-gradient-end: rgba(255, 255, 255, 0.2);
    /* Overlay gradient end */
    --aiint-slide-duration: 0.5s; /* Duration of the slide animation */
    --aiint-slide-easing: ease-in-out; /* Easing for the animation */
    --aiint-window-closebtn-slash1-color: #1E90FF; /* Dodger blue */
    --aiint-window-closebtn-slash2-color: #4682B4; /* Steel blue */
    --aiint-window-closebtn-hover-opacity: 0.2; /* Opacity change on hover */
    --aiint-window-closebtn-stroke-width: 2; /* Stroke width */
    --aiint-window-closebtn-transform-origin: center; /* Transform origin */
    --aiint-window-closebtn-hover-duration: 0.4s; /* Duration of hover animation */
    --aiint-window-closebtn-hover-easing: ease-in-out; /* Easing for hover animation */
    --aiint-chatbot-button-icon-height: 28px; /* Height of the button icon */
    --aiint-chatbot-button-icon-width: 28px; /* Width of the button icon */
}

.aiint-chatbot-button-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    overflow: visible;
    /* Ensure the badge is not clipped */
}

.aiint-chatbot-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--aiint-primary), var(--aiint-accent));
    box-shadow: 0 0 15px var(--aiint-glow), 0 0 30px var(--aiint-glow);
    color: white;
    transition: all 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    padding: initial;
    cursor: pointer;
    overflow: visible;
}

.aiint-chatbot-button:hover {
    box-shadow: 0 0 25px var(--aiint-glow), 0 0 50px var(--aiint-glow);
    transform: scale(1.1);
}

.aiint-chatbot-button:active {
    transform: scale(0.95); /* Add a slight press effect */
}

.aiint-chatbot-button svg {
    transition: transform 0.3s ease-in-out;
}

.aiint-chatbot-button svg path {
    transition: stroke 0.3s ease-in-out;
}

.aiint-chatbot-button-icon {
    width: var(--aiint-chatbot-button-icon-width);
    height: var(--aiint-chatbot-button-icon-height);
    z-index: 1;
}

.aiint-chatbot-button-badge {
    position: absolute;
    top: -0.5rem;
    /* Adjusted to keep it within bounds */
    right: -0.5rem;
    /* Adjusted to keep it within bounds */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--aiint-primary);
    color: var(--aiint-accent);
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 0 10px var(--aiint-glow);
    z-index: 10;
    /* Ensure it appears above the button */
}

.aiint-chatbot-button:hover .aiint-chatbot-button-border {
    transform: scale(1.2);
}

.aiint-chatbot-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0.5;
    animation: pulse 2s infinite;
    z-index: 0;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }

    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

/* Add a class to hide the chatbot window */
.aiint-hidden {
    display: none !important;
}

/* Chatbot window default state (hidden) */
.aiint-chatbot-window {
    position: fixed;
    bottom: 7rem; /* Final position */
    right: 1.5rem;
    z-index: 50;
    width: 20rem;
    height: 500px;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 15px var(--aiint-glow);
    background: var(--aiint-body-bg);
    border: 1px solid var(--aiint-border-color);
    opacity: 0; /* Fully transparent */
    pointer-events: none; /* Prevent interaction when hidden */
}

/* When the chatbot window is visible */
.aiint-chatbot-window.aiint-visible {
    animation: aiint-slide-up var(--aiint-slide-duration) var(--aiint-slide-easing) forwards;
    opacity: 1; /* Fully visible */
    pointer-events: auto; /* Allow interaction when visible */
}

/* When the chatbot window is closing */
.aiint-chatbot-window.aiint-closing {
    animation: aiint-slide-down var(--aiint-slide-duration) var(--aiint-slide-easing) forwards;
    opacity: 0; /* Fully transparent */
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Keyframes for slide-up animation */
@keyframes aiint-slide-up {
    0% {
        transform: translateY(100%); /* Start off-screen */
        opacity: 0; /* Fully transparent */
    }
    100% {
        transform: translateY(0); /* Slide into view */
        opacity: 1; /* Fully visible */
    }
}

/* Keyframes for slide-down animation */
@keyframes aiint-slide-down {
    0% {
        transform: translateY(0); /* Start in view */
        opacity: 1; /* Fully visible */
    }
    100% {
        transform: translateY(100%); /* Slide off-screen */
        opacity: 0; /* Fully transparent */
    }
}

/* Media query for larger screens */
@media (min-width: 640px) {
    .aiint-chatbot-window {
        width: 24rem;
    }
}

.aiint-chatbot-window .aiint-background-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            var(--aiint-overlay-gradient-start),
            var(--aiint-overlay-gradient-end));
    z-index: -10;
}

.aiint-chatbot-window .aiint-chatbot-container {
    position: relative;
    height: 100%;
    background: var(--aiint-body-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--aiint-border-color);
}

.aiint-chatbot-window .aiint-chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right,
            var(--aiint-header-bg-start),
            var(--aiint-header-bg-end));
    padding: 1rem;
}

.aiint-chatbot-window .aiint-chatbot-header .aiint-logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}

.aiint-chatbot-window .aiint-chatbot-header .aiint-chatbot-title {
    font-weight: bold;
    color: var(--aiint-accent);
}

.aiint-chatbot-window .aiint-chatbot-header .aiint-close-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--aiint-accent);
    transition: color 0.3s;
}

/* Close button hover effect */
.aiint-close-button svg {
    cursor: pointer;
}

.aiint-close-button svg path {
    transform-origin: var(--aiint-window-closebtn-transform-origin); /* Set the origin to the center of the path */
    transition: transform var(--aiint-window-closebtn-hover-duration) var(--aiint-window-closebtn-hover-easing),
        stroke var(--aiint-window-closebtn-hover-duration) var(--aiint-window-closebtn-hover-easing); /* Smooth rotation and color change */
    stroke-width: var(--aiint-window-closebtn-stroke-width); /* Use variable for stroke width */
    stroke-linecap: round; /* Rounded ends */
}

/* Rotate the first slash on hover */
.aiint-close-button:hover svg path:first-child {
    transform: rotate(90deg); /* Rotate clockwise */
    stroke: rgba(var(--aiint-window-closebtn-slash1-color), var(--aiint-window-closebtn-hover-opacity)); /* Change color with 20% opacity */
}

/* Rotate the second slash on hover */
.aiint-close-button:hover svg path:last-child {
    transform: rotate(-90deg); /* Rotate counterclockwise */
    stroke: rgba(var(--aiint-window-closebtn-slash2-color), var(--aiint-window-closebtn-hover-opacity)); /* Change color with 20% opacity */
}

/* Different shades for each slash */
.aiint-close-button svg path:first-child {
    stroke: var(--aiint-window-closebtn-slash1-color); /* Use variable for the first slash color */
}

.aiint-close-button svg path:last-child {
    stroke: var(--aiint-window-closebtn-slash2-color); /* Use variable for the second slash color */
}

.aiint-chatbot-window .aiint-chatbot-header .aiint-close-button:hover {
    color: var(--aiint-hover-color);
}

.aiint-chatbot-window .aiint-chatbot-body {
    height: calc(100% - 80px);
    overflow: hidden;
}

.aiint-chatbot-window .aiint-chatbot-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
}

/* Default state for the chatbot button (open icon) */
.aiint-chatbot-button svg .open-icon {
    display: block;
}

.aiint-chatbot-button svg .close-icon {
    display: none;
}

/* When the chatbot is open, show the close icon and hide the open icon */
.aiint-chatbot-button.chatbot-open svg .open-icon {
    display: none;
}

.aiint-chatbot-button.chatbot-open svg .close-icon {
    display: block;
}

/* Close icon hover effect when chatbot-button is hovered */
.aiint-chatbot-button:hover g.close-icon path {
    transform-origin: var(--aiint-window-closebtn-transform-origin); /* Set the origin to the center of the path */
    transition: transform var(--aiint-window-closebtn-hover-duration) var(--aiint-window-closebtn-hover-easing),
        stroke var(--aiint-window-closebtn-hover-duration) var(--aiint-window-closebtn-hover-easing); /* Smooth rotation and color change */
    stroke-width: var(--aiint-window-closebtn-stroke-width); /* Use variable for stroke width */
    stroke-linecap: round; /* Rounded ends */
}

/* Rotate the first slash on hover */
.aiint-chatbot-button:hover g.close-icon path:first-child {
    transform: rotate(90deg); /* Rotate clockwise */
    stroke: rgba(var(--aiint-window-closebtn-slash1-color), var(--aiint-window-closebtn-hover-opacity)); /* Change color with 20% opacity */
}

/* Rotate the second slash on hover */
.aiint-chatbot-button:hover g.close-icon path:last-child {
    transform: rotate(-90deg); /* Rotate counterclockwise */
    stroke: rgba(var(--aiint-window-closebtn-slash2-color), var(--aiint-window-closebtn-hover-opacity)); /* Change color with 20% opacity */
}

/* Different shades for each slash */
g.close-icon path:first-child {
    stroke: var(--aiint-window-closebtn-slash1-color); /* Use variable for the first slash color */
}

g.close-icon path:last-child {
    stroke: var(--aiint-window-closebtn-slash2-color); /* Use variable for the second slash color */
}