<?php
/**
 * Admin Q&A template for Ask Any plugin
 *
 * This template displays the Q&A management interface with:
 * - Q&A list with search and filter
 * - Add/Edit Q&A form
 * - Bulk actions
 * - Pagination
 *
 * @package Askany
 * @since 1.0.0
 */

// Exit if accessed directly
if ( ! defined('ABSPATH') ) {
	exit;
}

?>
<div class="wrap askany-qa-management">
	<h1>
		<?php esc_html_e('Q&A Management', 'askany'); ?>
		<?php
		$plugin = \Askany\Plugin::get_instance();
		$is_pro = $plugin->is_pro_active();
		$qa_count = count( $qa_pairs );
		$free_limit = 10;
		
		if ( ! $is_pro ) {
			echo '<span class="askany-qa-limit-badge">';
			echo esc_html( sprintf( __( '%d / %d Q&A pairs', 'askany' ), $qa_count, $free_limit ) );
			echo '</span>';
		}
		?>
	</h1>
	
	<div class="card">
		<h2><?php esc_html_e('Add New Q&A Pair', 'askany'); ?></h2>
		<?php
		$is_limit_reached = ! $is_pro && $qa_count >= $free_limit;
		if ( $is_limit_reached ) : ?>
			<div class="askany-pro-notice">
				<div class="askany-pro-notice-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
						<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
					</svg>
				</div>
				<div class="askany-pro-notice-content">
					<h3><?php esc_html_e( 'Q&A Limit Reached', 'askany' ); ?></h3>
					<p><?php echo esc_html( sprintf( __( 'Free plan allows up to %d Q&A pairs. Upgrade to Pro for unlimited Q&A pairs.', 'askany' ), $free_limit ) ); ?></p>
					<button type="button" class="button button-primary askany-open-pro-modal">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 6px;">
							<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
						</svg>
						<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>
					</button>
				</div>
			</div>
		<?php endif; ?>
		<form id="askany-qa-form" method="post" <?php echo $is_limit_reached ? 'style="display:none;"' : ''; ?>>
			<input type="hidden" id="qa-id" name="qa-id" value="0">
			
			<div class="form-field">
				<label for="qa-question"><?php esc_html_e('Question', 'askany'); ?></label>
				<input type="text" id="qa-question" name="qa-question" required>
				<p class="description"><?php esc_html_e('Enter the question that users might ask.', 'askany'); ?></p>
			</div>
			
			<div class="form-field">
				<label for="qa-answer"><?php esc_html_e('Answer', 'askany'); ?></label>
				<textarea id="qa-answer" name="qa-answer" rows="10" required></textarea>
				<p class="description"><?php esc_html_e('Enter the answer with markdown formatting support (bold, italic, lists, links, etc.).', 'askany'); ?></p>
			</div>
			
			<div class="form-actions">
				<button type="submit" class="button button-primary" id="qa-submit">
					<?php esc_html_e('Add Q&A Pair', 'askany'); ?>
				</button>
				<button type="button" class="button" id="qa-cancel" style="display:none;">
					<?php esc_html_e('Cancel', 'askany'); ?>
				</button>
			</div>
		</form>
	</div>
	
	<div class="card">
		<h2><?php esc_html_e('Q&A Pairs', 'askany'); ?></h2>
		
		<?php if ( empty($qa_pairs) ) : ?>
			<p><?php esc_html_e('No Q&A pairs have been added yet.', 'askany'); ?></p>
		<?php else : ?>
			<table class="wp-list-table widefat fixed striped">
				<thead>
					<tr>
						<th><?php esc_html_e('Question', 'askany'); ?></th>
						<th><?php esc_html_e('Answer', 'askany'); ?></th>
						<th><?php esc_html_e('Created', 'askany'); ?></th>
						<th><?php esc_html_e('Actions', 'askany'); ?></th>
					</tr>
				</thead>
				<tbody>
					<?php foreach ( $qa_pairs as $qa_pair ) { ?>
						<tr data-id="<?php echo esc_attr($qa_pair->id); ?>">
							<td>
								<?php echo esc_html($qa_pair->question); ?>
							</td>
							<td>
								<?php echo wp_kses_post(wpautop(substr($qa_pair->answer, 0, 100) . ( strlen($qa_pair->answer) > 100 ? '...' : '' ))); ?>
							</td>
							<td>
								<?php echo esc_html(date_i18n(get_option('date_format'), strtotime($qa_pair->created_at))); ?>
							</td>
							<td>
								<button type="button" class="button button-small view-qa" data-id="<?php echo esc_attr($qa_pair->id); ?>">
									<?php esc_html_e('View', 'askany'); ?>
								</button>
								<button type="button" class="button button-small edit-qa" data-id="<?php echo esc_attr($qa_pair->id); ?>">
									<?php esc_html_e('Edit', 'askany'); ?>
								</button>
								<button type="button" class="button button-small button-link-delete delete-qa" data-id="<?php echo esc_attr($qa_pair->id); ?>">
									<?php esc_html_e('Delete', 'askany'); ?>
								</button>
							</td>
						</tr>
					<?php } ?>
				</tbody>
			</table>
		<?php endif; ?>
	</div>
	
	<!-- Export/Import Section -->
	<div class="card">
		<h2><?php esc_html_e('Export & Import Q&A Pairs', 'askany'); ?></h2>
		
		<div class="askany-export-import-container">
			<div class="askany-export-section">
				<h3><?php esc_html_e('Export Q&A Pairs', 'askany'); ?></h3>
				<p class="description"><?php esc_html_e('Export your Q&A pairs to backup or transfer to another site.', 'askany'); ?></p>
				
				<div class="askany-export-options">
					<label>
						<input type="radio" name="export_format" value="json" checked>
						<?php esc_html_e('JSON Format', 'askany'); ?>
					</label>
					<label>
						<input type="radio" name="export_format" value="csv">
						<?php esc_html_e('CSV Format', 'askany'); ?>
					</label>
				</div>
				
				<button type="button" class="button button-primary" id="export-qa-pairs" <?php echo empty($qa_pairs) ? 'disabled' : ''; ?>>
					<span class="dashicons dashicons-download"></span>
					<?php esc_html_e('Export Q&A Pairs', 'askany'); ?>
				</button>
			</div>
			
			<div class="askany-import-section">
				<h3><?php esc_html_e('Import Q&A Pairs', 'askany'); ?></h3>
				<p class="description"><?php esc_html_e('Import Q&A pairs from a JSON or CSV file. Existing pairs with the same question will be updated.', 'askany'); ?></p>
				
				<div class="askany-import-form">
					<input type="file" id="import-qa-file" accept=".json,.csv" style="display: none;">
					<button type="button" class="button" id="select-import-file">
						<span class="dashicons dashicons-upload"></span>
						<?php esc_html_e('Select File', 'askany'); ?>
					</button>
					<span id="selected-file-name" class="askany-file-name"></span>
					
					<div class="askany-import-actions" style="display: none;">
						<button type="button" class="button button-primary" id="import-qa-pairs">
							<?php esc_html_e('Import Q&A Pairs', 'askany'); ?>
						</button>
						<button type="button" class="button" id="cancel-import">
							<?php esc_html_e('Cancel', 'askany'); ?>
						</button>
					</div>
				</div>
				
				<div id="import-preview" class="askany-import-preview" style="display: none;">
					<h4><?php esc_html_e('Import Preview', 'askany'); ?></h4>
					<div id="import-preview-content"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- View Q&A Modal -->
<div id="askany-qa-view-modal" class="askany-modal" style="display: none;">
	<div class="askany-modal-content">
		<div class="askany-modal-header">
			<h3><?php esc_html_e('View Q&A Pair', 'askany'); ?></h3>
			<button type="button" class="askany-modal-close">&times;</button>
		</div>
		<div class="askany-modal-body">
			<div class="askany-qa-view-content">
				<div class="askany-qa-field">
					<label><?php esc_html_e('Question:', 'askany'); ?></label>
					<div id="view-qa-question" class="askany-qa-text"></div>
				</div>
				<div class="askany-qa-field">
					<label><?php esc_html_e('Answer:', 'askany'); ?></label>
					<div id="view-qa-answer" class="askany-qa-text askany-markdown-content"></div>
				</div>
				<div class="askany-qa-field">
					<label><?php esc_html_e('Created:', 'askany'); ?></label>
					<div id="view-qa-created" class="askany-qa-text"></div>
				</div>
			</div>
		</div>
		<div class="askany-modal-footer">
			
		</div>
	</div>
</div>


<script>
jQuery(document).ready(function($) {
	// Initialize Markdown Editor for Q&A Answer field
	var qaAnswerEditor = null;
	
	function initMarkdownEditor() {
		if (qaAnswerEditor) {
			qaAnswerEditor.destroy();
		}
		qaAnswerEditor = new AskanyMarkdownEditor('qa-answer', {
			showPreview: true,
			showTabs: true,
			height: '250px',
			placeholder: 'Write your answer here... Markdown supported!\n\nExamples:\n**Bold text**\n*Italic text*\n- List item\n[Link](url)'
		});
	}
	
	// Initialize editor on page load
	if (typeof AskanyMarkdownEditor !== 'undefined') {
		initMarkdownEditor();
	} else {
		console.warn('Markdown Editor not loaded');
	}
	
	// Pro status and limits
	window.askanyQA = window.askanyQA || {};
	window.askanyQA.isPro = <?php echo $is_pro ? 'true' : 'false'; ?>;
	window.askanyQA.qaCount = <?php echo (int) $qa_count; ?>;
	window.askanyQA.freeLimit = <?php echo (int) $free_limit; ?>;
	
	// Update Pro lock UI based on current Q&A count
	window.askanyQA.updateProLockUI = function() {
		const isLimitReached = !window.askanyQA.isPro && window.askanyQA.qaCount >= window.askanyQA.freeLimit;
		
		if (isLimitReached) {
			// Show Pro notice and hide form
			if ($('.askany-pro-notice').length === 0) {
				const proNoticeHtml = `
					<div class="askany-pro-notice">
						<div class="askany-pro-notice-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
								<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
								<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
							</svg>
						</div>
						<div class="askany-pro-notice-content">
							<h3><?php esc_html_e( 'Q&A Limit Reached', 'askany' ); ?></h3>
							<p><?php echo esc_html( sprintf( __( 'Free plan allows up to %d Q&A pairs. Upgrade to Pro for unlimited Q&A pairs.', 'askany' ), $free_limit ) ); ?></p>
							<button type="button" class="button button-primary askany-open-pro-modal">
								<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 6px;">
									<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
								</svg>
								<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>
							</button>
						</div>
					</div>
				`;
				$('#askany-qa-form').before(proNoticeHtml);
			}
			$('#askany-qa-form').hide();
		} else {
			// Remove Pro notice and show form
			$('.askany-pro-notice').remove();
			$('#askany-qa-form').show();
		}
		
		// Update badge count if it exists
		$('.askany-qa-limit-badge').text(`${window.askanyQA.qaCount} / ${window.askanyQA.freeLimit} Q&A pairs`);
	};
	
	// Handle Pro modal open button
	$(document).on('click', '.askany-open-pro-modal', function(e) {
		e.preventDefault();
		if (typeof AskanyPro !== 'undefined') {
			AskanyPro.openModal({
				title: '<?php esc_html_e( 'Upgrade to Pro', 'askany' ); ?>',
				description: '<?php esc_html_e( 'Unlock unlimited Q&A pairs and premium features', 'askany' ); ?>',
				features: [
					'<?php esc_html_e( 'Unlimited Q&A pairs', 'askany' ); ?>',
					'<?php esc_html_e( 'Unlimited chat agents', 'askany' ); ?>',
					'<?php esc_html_e( 'Unlimited chat sessions', 'askany' ); ?>',
					'<?php esc_html_e( 'Priority support', 'askany' ); ?>',
					'<?php esc_html_e( 'Advanced analytics', 'askany' ); ?>'
				]
			});
		}
	});
	
	// View Q&A functionality
	$(document).on('click', '.view-qa', function() {
		var qaId = $(this).data('id');
		
		$.ajax({
			url: askanyAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'askany_get_qa_pair',
				id: qaId,
				nonce: askanyAdmin.nonce
			},
			success: function(response) {
				if (response.success && response.data.qa_pair) {
					var qa = response.data.qa_pair;
					$('#view-qa-question').text(qa.question);
					
					// Render markdown for answer
					if (typeof AskanyMarkdown !== 'undefined' && AskanyMarkdown.parse) {
						$('#view-qa-answer').html(AskanyMarkdown.parse(qa.answer));
					} else {
						$('#view-qa-answer').html(qa.answer.replace(/\n/g, '<br>'));
					}
					
					$('#view-qa-created').text(new Date(qa.created_at).toLocaleDateString());
					$('#askany-qa-view-modal').show();
				} else {
					Toast.error('<?php esc_html_e('Error loading Q&A pair', 'askany'); ?>');
				}
			},
			error: function() {
				Toast.error('<?php esc_html_e('Error loading Q&A pair', 'askany'); ?>');
			}
		});
	});
	
	// Modal close functionality
	$(document).on('click', '.askany-modal-close', function() {
		$('.askany-modal').hide();
	});
	
	// Close modal when clicking outside
	$(document).on('click', '.askany-modal', function(e) {
		if (e.target === this) {
			$(this).hide();
		}
	});
	
	// Export Q&A pairs
	$('#export-qa-pairs').on('click', function() {
		var format = $('input[name="export_format"]:checked').val();
		var button = $(this);
		
		button.prop('disabled', true).text('<?php esc_html_e('Exporting...', 'askany'); ?>');
		
		$.ajax({
			url: askanyAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'askany_export_qa_pairs',
				format: format,
				nonce: askanyAdmin.nonce
			},
			success: function(response) {
				if (response.success) {
					// Create download link
					var blob = new Blob([response.data.content], { 
						type: format === 'json' ? 'application/json' : 'text/csv' 
					});
					var url = window.URL.createObjectURL(blob);
					var a = document.createElement('a');
					a.href = url;
					a.download = response.data.filename;
					document.body.appendChild(a);
					a.click();
					window.URL.revokeObjectURL(url);
					document.body.removeChild(a);
					
					Toast.success('<?php esc_html_e('Q&A pairs exported successfully!', 'askany'); ?> (' + response.data.count + ' <?php esc_html_e('pairs', 'askany'); ?>)');
				} else {
					Toast.error(response.data.message || '<?php esc_html_e('Export failed', 'askany'); ?>');
				}
			},
			error: function() {
				Toast.error('<?php esc_html_e('Export failed', 'askany'); ?>');
			},
			complete: function() {
				button.prop('disabled', false).html('<span class="dashicons dashicons-download"></span> <?php esc_html_e('Export Q&A Pairs', 'askany'); ?>');
			}
		});
	});
	
	// File selection for import
	$('#select-import-file').on('click', function() {
		$('#import-qa-file').click();
	});
	
	$('#import-qa-file').on('change', function() {
		var file = this.files[0];
		if (file) {
			$('#selected-file-name').text(file.name);
			$('.askany-import-actions').show();
			
			// Show preview for JSON files
			if (file.name.toLowerCase().endsWith('.json')) {
				var reader = new FileReader();
				reader.onload = function(e) {
					try {
						var data = JSON.parse(e.target.result);
						if (Array.isArray(data) && data.length > 0) {
							var previewHtml = '<p><strong>' + data.length + '</strong> <?php esc_html_e('Q&A pairs found', 'askany'); ?></p>';
							previewHtml += '<ul>';
							data.slice(0, 3).forEach(function(qa) {
								previewHtml += '<li><strong>Q:</strong> ' + qa.question + '</li>';
							});
							if (data.length > 3) {
								previewHtml += '<li>... <?php esc_html_e('and', 'askany'); ?> ' + (data.length - 3) + ' <?php esc_html_e('more', 'askany'); ?></li>';
							}
							previewHtml += '</ul>';
							$('#import-preview-content').html(previewHtml);
							$('#import-preview').show();
						}
					} catch (e) {
						$('#import-preview-content').html('<p class="error"><?php esc_html_e('Invalid JSON file', 'askany'); ?></p>');
						$('#import-preview').show();
						Toast.error('<?php esc_html_e('Invalid JSON file format', 'askany'); ?>');
					}
				};
				reader.readAsText(file);
			}
		}
	});
	
	// Cancel import
	$('#cancel-import').on('click', function() {
		$('#import-qa-file').val('');
		$('#selected-file-name').text('');
		$('.askany-import-actions').hide();
		$('#import-preview').hide();
	});
	
	// Import Q&A pairs
	$('#import-qa-pairs').on('click', function() {
		var file = $('#import-qa-file')[0].files[0];
		if (!file) {
			Toast.warning('<?php esc_html_e('Please select a file first', 'askany'); ?>');
			return;
		}
		
		// Show confirmation dialog
		Toast.ask('<?php esc_html_e('Import Q&A Pairs', 'askany'); ?>', '<?php esc_html_e('Are you sure you want to import Q&A pairs? Existing pairs with the same questions will be updated.', 'askany'); ?>')
			.then(result => {
				if (!result.ok) return;
				
				var button = $('#import-qa-pairs');
				button.prop('disabled', true).text('<?php esc_html_e('Importing...', 'askany'); ?>');
				
				var formData = new FormData();
				formData.append('action', 'askany_import_qa_pairs');
				formData.append('file', file);
				formData.append('nonce', askanyAdmin.nonce);
				
				$.ajax({
					url: askanyAdmin.ajaxUrl,
					type: 'POST',
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
						if (response.success) {
							Toast.success(response.data.message);
							// Reload the page to show imported Q&A pairs
							setTimeout(function() {
								window.location.reload();
							}, 1500);
						} else {
							Toast.error(response.data.message || '<?php esc_html_e('Import failed', 'askany'); ?>');
						}
					},
					error: function() {
						Toast.error('<?php esc_html_e('Import failed', 'askany'); ?>');
					},
					complete: function() {
						button.prop('disabled', false).text('<?php esc_html_e('Import Q&A Pairs', 'askany'); ?>');
					}
				});
			});
	});
	
	// Intercept form submission if limit reached (only for new additions, not updates)
	var $qaForm = $('#askany-qa-form');
	if ($qaForm.length && !window.askanyQA.isPro && window.askanyQA.qaCount >= window.askanyQA.freeLimit) {
		// Prevent form submission only when adding new (not updating)
		$qaForm.on('submit', function(e) {
			var qaId = $('#qa-id').val();
			var isUpdate = qaId && qaId !== '0';
			
			// Allow updates, block new additions
			if (!isUpdate) {
				e.preventDefault();
				e.stopImmediatePropagation();
				
				if (typeof AskanyPro !== 'undefined') {
					AskanyPro.openModal();
				}
				return false;
			}
		});
	}
});
</script>

<style>
/* Q&A limit badge */
.askany-qa-limit-badge {
	display: inline-block;
	padding: 4px 12px;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 500;
	color: #50575e;
	margin-left: 10px;
	vertical-align: middle;
}

/* Pro notice box */
.askany-pro-notice {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	border: 2px solid #667eea;
	border-radius: 12px;
	margin-bottom: 20px;
}

.askany-pro-notice-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.askany-pro-notice-icon svg {
	stroke: white;
}

.askany-pro-notice-content {
	flex: 1;
}

.askany-pro-notice-content h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 600;
	color: #2d3748;
}

.askany-pro-notice-content p {
	margin: 0 0 15px 0;
	font-size: 14px;
	color: #4a5568;
	line-height: 1.6;
}

.askany-open-pro-modal {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	border-color: #667eea !important;
	color: white !important;
	font-weight: 600;
	padding: 8px 20px !important;
	height: auto !important;
	transition: all 0.3s ease;
}

.askany-open-pro-modal:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.askany-open-pro-modal svg {
	vertical-align: middle;
}

/* Q&A Management styling */
.askany-qa-management .card {
	max-width: 100%;
	margin-bottom: 20px;
}

.askany-qa-management .form-field {
	margin-bottom: 20px;
}

.askany-qa-management .form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.askany-qa-management .form-field input[type="text"],
.askany-qa-management .form-field textarea {
	width: 100%;
}

.askany-qa-management .form-actions {
	margin-top: 20px;
}

/* Export/Import Section */
.askany-export-import-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-top: 20px;
}

.askany-export-section,
.askany-import-section {
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #f9f9f9;
}

.askany-export-section h3,
.askany-import-section h3 {
	margin-top: 0;
	margin-bottom: 10px;
	color: #333;
}

.askany-export-options {
	margin: 15px 0;
}

.askany-export-options label {
	display: inline-block;
	margin-right: 20px;
	font-weight: normal;
}

.askany-export-options input[type="radio"] {
	margin-right: 5px;
}

.askany-import-form {
	margin-top: 15px;
}

.askany-file-name {
	margin-left: 10px;
	font-style: italic;
	color: #666;
}

.askany-import-actions {
	margin-top: 15px;
}

.askany-import-preview {
	margin-top: 20px;
	padding: 15px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.askany-import-preview h4 {
	margin-top: 0;
	margin-bottom: 10px;
}

.askany-import-preview ul {
	margin: 10px 0;
	padding-left: 20px;
}

.askany-import-preview .error {
	color: #d63638;
}

/* Modal Styles */
.askany-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.askany-modal-content {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.askany-modal-header {
	padding: 20px;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.askany-modal-header h3 {
	margin: 0;
	color: #333;
}

.askany-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #666;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.askany-modal-close:hover {
	color: #333;
}

.askany-modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

.askany-modal-footer {
	padding: 20px;
	border-top: 1px solid #ddd;
	text-align: right;
}

.askany-qa-view-content {
	max-width: 100%;
}

.askany-qa-field {
	margin-bottom: 20px;
}

.askany-qa-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #333;
}

.askany-qa-text {
	padding: 10px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
	line-height: 1.6;
	word-wrap: break-word;
}

/* Markdown content styling in view modal */
.askany-markdown-content h1,
.askany-markdown-content h2,
.askany-markdown-content h3,
.askany-markdown-content h4,
.askany-markdown-content h5,
.askany-markdown-content h6 {
	margin-top: 12px;
	margin-bottom: 8px;
	font-weight: 600;
}

.askany-markdown-content p {
	margin: 8px 0;
}

.askany-markdown-content strong {
	font-weight: 600;
}

.askany-markdown-content code {
	padding: 2px 4px;
	background: #f0f0f0;
	border-radius: 3px;
	font-family: monospace;
	font-size: 13px;
}

.askany-markdown-content pre {
	background: #f5f5f5;
	padding: 10px;
	border-radius: 4px;
	overflow-x: auto;
	margin: 8px 0;
}

.askany-markdown-content ul,
.askany-markdown-content ol {
	margin: 8px 0;
	padding-left: 25px;
}

.askany-markdown-content blockquote {
	margin: 8px 0;
	padding: 8px 12px;
	background: #f9f9f9;
	border-left: 3px solid #2271b1;
}

.askany-markdown-content a {
	color: #2271b1;
	text-decoration: none;
}

.askany-markdown-content a:hover {
	text-decoration: underline;
}


/* Responsive design */
@media (max-width: 768px) {
	.askany-export-import-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.askany-modal-content {
		width: 95%;
		margin: 20px;
	}
}
</style>
