/* Ai Components */
.ql-ai-profile,
.ql-ai-generate-btn {
    width: 100px !important;
}
.ql-ai-config-btn,
.ql-ai-generate-btn,
.ql-ai-profile {
    border: 1px solid grey !important;
    border-radius: 5px;
}
.ql-toolbar .ql-formats button.ql-ai-config-btn {
    background-image: url(icons/icon-gear.svg);
}
.ql-ai-generate-btn::before {
    content: "Generate";
    font-size: 14px;
    font-weight: 500;
}

/* Loading effect for AI generate button */
button.ql-ai-generate-btn.loading,
.ql-toolbar .ql-formats button.ql-ai-generate-btn.loading {
    position: relative !important;
    overflow: hidden !important;
    background-image: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #4f46e5) !important;
    background-color: transparent !important;
    background-size: 300% 100% !important;
    animation: loadingGradient 2s linear infinite !important;
    color: white !important;
    border-color: transparent !important;
}

button.ql-ai-generate-btn.loading::before,
.ql-toolbar .ql-formats button.ql-ai-generate-btn.loading::before {
    content: "Generating..." !important;
    position: relative;
    z-index: 1;
}

@keyframes loadingGradient {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}
.ql-picker.ql-ai-profile .ql-picker-label::after {
    content: "Profiles";
    line-height: 22px;
}
.ql-picker.ql-ai-profile .ql-picker-options {
    overflow-y: scroll;
    max-height: 85px;
}

.profile-disabled {
    display: none;
}