/* Floating Action Button */
#fab {
    position: fixed;
    right: 2rem; /* right-8 */
    bottom: 3rem; /* bottom-12 */
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    background-color: white; /* bg-white */
    border: 4px solid #5b21b6; /* border-[#5b21b6] border-4 */
    border-radius: 50%; /* rounded-full */
    color: white; /* text-white */
    font-size: 1.875rem; /* text-3xl */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
    transition: all 0.3s ease; /* transition */
}

#fab img {
    display: block; /* block */
    width: 62px; /* specific image width */
    height: 62px; /* specific image height */
}

/* Chat Window */
#chat-window {
    position: fixed;
    right: 1.5rem; /* right-6 */
    bottom: 5rem; /* bottom-20 */
    width: 500px; /* w-[500px] */
    height: 600px; /* h-[600px] */
    background-color: white; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
    z-index: 9999;
}

#chat-window .header {
    background-color: #5b21b6; /* bg-[#5b21b6] */
    color: white; /* text-white */
    padding: 1rem; /* p-4 */
    display: flex; /* flex */
    justify-content: space-between; /* justify-between */
    align-items: center; /* items-center */
    border-top-left-radius: 0.5rem; /* rounded-t-lg */
    border-top-right-radius: 0.5rem; /* rounded-t-lg */
    font-family: Arial, Helvetica, sans-serif;
}

#chat-window button {
    background-color: #5b21b6; /* bg-blue-500 */
    color: white; /* text-white */
    font-weight: bold; /* font-bold */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 1rem; /* rounded */
    border-color: white;
    transition: background-color 0.3s ease; /* Tailwind adds transition on hover */
}

/* Iframe */
#chat-iframe {
    width: 100%; /* w-full */
    height: calc(100% - 56px); /* h-[calc(100%-56px)] */
    border: none; /* border-none */
}

.hidden {
    display: none;
}