
jQuery(document).ready(function($) {
    function updatePreview() {
        var selectedStyle = $('#style-selector').val();
        var customCss = $('#custom-css').val();
        
        var styleRules = '';
        switch(selectedStyle) {
            case 'card':
                styleRules = '.commentlist li {background: #fff; padding: 1.5rem; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}';
                break;
            case 'minimal':
                styleRules = '.commentlist li {padding: 1rem 0; border-bottom: 1px solid #e2e8f0;}';
                break;
            case 'dark':
                styleRules = '.commentlist li {background: #1e293b; color: #e2e8f0; padding: 1.5rem; margin-bottom: 1rem; border-radius: 8px;}';
                break;
            default:
                styleRules = '.commentlist li {padding: 1rem 0;}';
        }
        
        $('#comment-preview style').remove();
        $('#comment-preview').append('<style>' + styleRules + customCss + '</style>');
    }
    
    $('#style-selector, #custom-css').on('change input', function() {
        updatePreview();
    });
    
    updatePreview();
});
