/**
 * Compatibility styles for unified modal system
 * Ensures backward compatibility with existing modal classes
 */

/* Legacy modal classes work alongside unified classes */
.custom-music-popup.ri-unified-modal-overlay,
.multimodal-ai-modal.ri-unified-modal-overlay,
.ri-video-overlay.ri-unified-modal-overlay {
    /* Unified overlay styles apply */
}

.custom-music-popup-content.ri-unified-modal,
.multimodal-ai-modal-content.ri-unified-modal,
.ri-video-modal.ri-unified-modal {
    /* Unified modal styles apply */
}

.custom-music-header.ri-unified-modal-header,
.ri-modal-header.ri-unified-modal-header,
.ri-video-modal-header.ri-unified-modal-header {
    /* Unified header styles apply */
}

.custom-music-close.ri-unified-modal-close,
.ri-video-close-btn.ri-unified-modal-close,
#openai-image-close.ri-unified-modal-close,
#openai-image-edit-close.ri-unified-modal-close {
    /* Unified close button styles apply */
}

/* Ensure music tab buttons work with unified tabs */
.music-tab-navigation {
    /* Inherits from .ri-unified-tabs */
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 20px;
}

.music-tab-btn {
    /* Inherits from .ri-unified-tab */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--message-ai-text);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
}

.music-tab-btn.active,
.music-tab-btn[data-tab].active {
    background: var(--button-bg);
    color: var(--button-text);
}

.music-tab-content {
    /* Inherits from .ri-unified-tab-content */
    display: none;
}

.music-tab-content.active {
    display: block;
}

/* Video tabs compatibility */
.ri-video-main-tabs {
    /* Inherits from .ri-unified-tabs */
}

.ri-video-main-tab {
    /* Inherits from .ri-unified-tab */
}

.ri-video-main-tab.active {
    background: var(--button-bg);
    color: var(--button-text);
}

.ri-video-panel {
    display: none;
}

.ri-video-panel.active {
    display: block;
}

/* Maintain form group compatibility */
.form-group {
    /* Works alongside .ri-form-group */
    margin-bottom: 16px;
}

.form-group.ri-form-group {
    /* Explicit combination works */
}

/* Button compatibility */
.custom-music-generate,
.custom-music-cancel {
    /* Inherits from .ri-btn-primary / .ri-btn-secondary */
}

/* Footer compatibility */
.custom-music-footer,
.ri-video-footer {
    /* Inherits from .ri-unified-modal-footer */
}

/* Ensure modals show properly */
.custom-music-popup.show,
.custom-music-popup[style*="display: flex"],
.custom-music-popup[style*="display:flex"] {
    display: flex !important;
}

.multimodal-ai-modal.show,
.multimodal-ai-modal[style*="display: flex"],
.multimodal-ai-modal[style*="display:flex"] {
    display: flex !important;
}

.ri-video-overlay.show,
.ri-video-overlay[style*="display: flex"],
.ri-video-overlay[style*="display:flex"] {
    display: flex !important;
}