<template>
  <v-container fluid class="text-to-markdown">
    <v-row>
      <v-col cols="12">
        <h1 class="text-h4 text-center font-weight-bold mx-3 my-3">Text to Markdown Converter</h1>
      </v-col>
    </v-row>
    <v-divider :thickness="1" color="white" class="border-opacity-100"></v-divider>
    <v-row class="mx-3 my-3">
      <!-- Input Section -->
      <v-col cols="12" md="4" class="pa-3">
        <v-card elevation="2" class="input-card">
          <v-card-title class="card-title">Input Text</v-card-title>
          <v-card-text>
            <v-textarea
              v-model="inputText"
              @input="handleInput"
              placeholder="Enter your text here to convert to Markdown preview..."
              variant="outlined"
              rows="10"
              class="text-input"
            ></v-textarea>
            
            <div class="button-group">
              <v-btn 
                @click="convertNow" 
                :loading="isProcessing"
                color="primary"
                class="convert-btn"
              >
                Convert Now
              </v-btn>
              <v-btn 
                @click="clearAll" 
                variant="outlined"
                color="secondary"
              >
                Clear All
              </v-btn>
            </div>
            <!-- Status Indicator -->
            <v-alert :type="alertType" 
                    :icon="alertIcon"
                    variant="tonal"
                    density="compact"
                    class="my-2">
              {{ statusText }}
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>
      
      <!-- Output Section -->
      <v-col cols="12" md="8" class="pa-3">
        <h3>Markdown Preview</h3>
        
        <!-- Preview Section -->
        <div class="diagram-section">
          <div class="diagram-header">
            <h4>Visual Preview:</h4>
            <!-- Preview Controls -->
            <div class="diagram-controls">
              <div class="zoom-controls">
                <label for="zoom-slider" class="zoom-label">Zoom:</label>
                <input 
                  id="zoom-slider"
                  type="range" 
                  v-model="zoomLevel" 
                  @input="updateZoom"
                  min="0.5" 
                  max="3" 
                  step="0.1" 
                  class="zoom-slider"
                />
                <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
                <button @click="resetZoom" class="zoom-btn reset-btn">Reset</button>
              </div>
              
              <button @click="toggleFullscreen" class="fullscreen-btn" v-if="markdownCode">
                Fullscreen
              </button>
            </div>
          </div>
          <div class="markdown-container" ref="markdownContainerWrapper">
            <div
              v-if="markdownCode"
              class="markdown-preview"
              ref="markdownContainer"
              :style="{ transform: `scale(${zoomLevel})` }"
              v-html="renderedMarkdown"
            ></div>
            <div v-else class="placeholder">
              <p>Your Markdown preview will appear here</p>
            </div>
          </div>
        </div>
        
        <!-- Generated Markdown Section -->
        <div class="code-section">
          <div class="diagram-header">
            <h4>Generated Markdown:</h4>
            <div class="diagram-controls">
              <button @click="copyToClipboard" class="copy-btn" :disabled="!markdownCode">
                {{ copyButtonText }}
              </button>
            </div>
          </div>
          <div class="code-container">
            <pre><code>{{ markdownCode || 'Your generated markdown will appear here...' }}</code></pre>
          </div>
        </div>
        
        <!-- Fullscreen Modal -->
        <div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
          <div class="modal-content" @click.stop>
            <div class="modal-header">
              <h3>Markdown Preview - Fullscreen View</h3>
              <div class="modal-controls">
                <div class="zoom-controls">
                  <label for="fullscreen-zoom-slider" class="zoom-label">Zoom:</label>
                  <input 
                    id="fullscreen-zoom-slider"
                    type="range" 
                    v-model="fullscreenZoomLevel" 
                    @input="updateFullscreenZoom"
                    min="0.5" 
                    max="3" 
                    step="0.1" 
                    class="zoom-slider"
                  />
                  <span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span>
                  <button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button>
                </div>
                
                <!-- Single Download Button -->
                <button @click="downloadPreview" class="download-btn" v-if="markdownCode">
                  Download
                </button>
                
                <button @click="closeFullscreen" class="close-btn">&times;</button>
              </div>
            </div>
            <div
              class="modal-body"
              @mousedown="startDrag"
              @mousemove="onDrag"
              @mouseup="stopDrag"
              @mouseleave="stopDrag"
              @wheel="onWheel"
              @contextmenu.prevent
            >
              <div
                class="fullscreen-preview"
                ref="fullscreenPreview"
                :style="{
                  cursor: isDragging ? 'grabbing' : 'grab'
                }"
              >
                <div
                  class="fullscreen-preview-inner"
                  :style="{
                    transform: `scale(${fullscreenZoomLevel}) translate(${dragOffset.x}px, ${dragOffset.y}px)`,
                    'transform-origin': 'center center',
                    width: '100%',
                    height: '100%'
                  }"
                  v-html="renderedMarkdown"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Generated Markdown Section -->
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { marked } from 'marked'

// State variables
const inputText = ref('')
const markdownCode = ref('')
const markdownContainer = ref(null)
const isProcessing = ref(false)
const currentState = ref('ready') // 'typing', 'processing', 'ready', 'error'
const zoomLevel = ref(1)
const markdownContainerWrapper = ref(null)

// Fullscreen state
const isFullscreen = ref(false)
const fullscreenPreview = ref(null)
const fullscreenZoomLevel = ref(1)
const isDragging = ref(false)
const dragStart = ref({ x: 0, y: 0 })
const dragOffset = ref({ x: 0, y: 0 })

// Copy button state
const copyButtonText = ref('Copy to Clipboard')

let debounceTimeout = null

// Debounced conversion logic
const handleInput = () => {
  currentState.value = 'typing'
  if (debounceTimeout) clearTimeout(debounceTimeout)
  debounceTimeout = setTimeout(() => {
    convertToMarkdown()
  }, 500)
}

// Update zoom functions
const updateZoom = () => {}
const resetZoom = () => { zoomLevel.value = 1 }

// Fullscreen functions
const toggleFullscreen = () => {
  if (isFullscreen.value) {
    closeFullscreen()
  } else {
    openFullscreen()
  }
}
const openFullscreen = async () => {
  isFullscreen.value = true
  fullscreenZoomLevel.value = 1
  dragOffset.value = { x: 0, y: 0 }
  // No need to copy innerHTML!
  // await nextTick()
  // if (fullscreenPreview.value && markdownContainer.value) {
  //   fullscreenPreview.value.innerHTML = markdownContainer.value.innerHTML
  // }
}
const closeFullscreen = () => {
  isDragging.value = false
  isFullscreen.value = false
  fullscreenZoomLevel.value = 1
  dragOffset.value = { x: 0, y: 0 }
}

// Markdown conversion
const convertToMarkdown = async () => {
  if (!inputText.value.trim()) {
    markdownCode.value = ''
    if (markdownContainer.value) markdownContainer.value.innerHTML = ''
    currentState.value = 'ready'
    closeFullscreen()
    return
  }
  isProcessing.value = true
  currentState.value = 'processing'
  try {
    // For now, just use the input as Markdown
    markdownCode.value = inputText.value
    await nextTick()
    if (markdownContainer.value) {
      markdownContainer.value.innerHTML = marked.parse(markdownCode.value)
      resetZoom()
      closeFullscreen()
    }
    currentState.value = 'ready'
  } catch (error) {
    currentState.value = 'error'
    markdownCode.value = ''
    if (markdownContainer.value) markdownContainer.value.innerHTML = ''
    closeFullscreen()
  } finally {
    isProcessing.value = false
  }
}

const convertNow = () => {
  if (debounceTimeout) clearTimeout(debounceTimeout)
  convertToMarkdown()
}

const clearAll = () => {
  inputText.value = ''
  markdownCode.value = ''
  if (markdownContainer.value) markdownContainer.value.innerHTML = ''
  currentState.value = 'ready'
}

const alertType = computed(() => {
  switch (currentState.value) {
    case 'error': return 'error'
    case 'processing': return 'info'
    case 'ready': return 'success'
    case 'typing': return 'warning'
    default: return 'info'
  }
})

const alertIcon = computed(() => {
  switch (currentState.value) {
    case 'error': return 'mdi-alert-circle'
    case 'processing': return 'mdi-progress-clock'
    case 'ready': return 'mdi-check-circle'
    case 'typing': return 'mdi-pencil'
    default: return 'mdi-information'
  }
})

const statusText = computed(() => {
  switch (currentState.value) {
    case 'typing': return 'Typing...'
    case 'processing': return 'Converting...'
    case 'ready': return 'Ready'
    case 'error': return 'Error occurred'
    default: return 'Ready'
  }
})

// Rendered Markdown (computed for v-html)
const renderedMarkdown = computed(() => {
  return markdownCode.value ? marked.parse(markdownCode.value) : ''
})

// Keyboard handler
const handleKeydown = (event) => {
  if (event.key === 'Escape' && isFullscreen.value) {
    closeFullscreen()
  }
}

// Fullscreen zoom functions
const updateFullscreenZoom = () => {}
const resetFullscreenZoom = () => {
  fullscreenZoomLevel.value = 1
  dragOffset.value = { x: 0, y: 0 }
}

// Drag functions
const startDrag = (event) => {
  if (event.target.closest('.modal-header')) return
  isDragging.value = true
  dragStart.value = {
    x: event.clientX - dragOffset.value.x,
    y: event.clientY - dragOffset.value.y
  }
  event.preventDefault()
}
const onDrag = (event) => {
  if (!isDragging.value) return
  dragOffset.value = {
    x: event.clientX - dragStart.value.x,
    y: event.clientY - dragStart.value.y
  }
  event.preventDefault()
}
const stopDrag = () => {
  isDragging.value = false
}

// Zoom-to-mouse for fullscreen
const onWheel = (event) => {
  event.preventDefault()
  const modalBody = event.currentTarget
  const rect = modalBody.getBoundingClientRect()
  const mouseX = event.clientX - rect.left
  const mouseY = event.clientY - rect.top
  const oldZoom = fullscreenZoomLevel.value
  const zoomSpeed = 0.1
  const delta = event.deltaY > 0 ? -zoomSpeed : zoomSpeed
  const newZoom = Math.max(0.5, Math.min(3, oldZoom + delta))
  if (Math.abs(newZoom - oldZoom) > 0.01) {
    const centerX = rect.width / 2
    const centerY = rect.height / 2
    const currentMouseOffsetX = mouseX - centerX
    const currentMouseOffsetY = mouseY - centerY
    const diagramPointX = (currentMouseOffsetX - dragOffset.value.x) / oldZoom
    const diagramPointY = (currentMouseOffsetY - dragOffset.value.y) / oldZoom
    fullscreenZoomLevel.value = Math.round(newZoom * 10) / 10
    dragOffset.value.x = currentMouseOffsetX - (diagramPointX * newZoom)
    dragOffset.value.y = currentMouseOffsetY - (diagramPointY * newZoom)
  }
}

// Download rendered HTML
const downloadPreview = async () => {
  try {
    if (!markdownCode.value) {
      alert('No preview to download. Please generate a preview first.')
      return
    }
    // Use the rendered HTML
    const htmlContent = `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>Markdown Preview</title>
        <style>
          body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 40px; }
        </style>
      </head>
      <body>
        ${marked.parse(markdownCode.value)}
      </body>
      </html>
    `
    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `markdown-preview-${Date.now()}.html`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    alert('Preview downloaded successfully as HTML file!')
  } catch (error) {
    alert('Error downloading preview')
  }
}

// Copy to clipboard function
const copyToClipboard = async () => {
  if (!markdownCode.value) return
  
  try {
    await navigator.clipboard.writeText(markdownCode.value)
    copyButtonText.value = 'Copied!'
    setTimeout(() => {
      copyButtonText.value = 'Copy to Clipboard'
    }, 2000)
  } catch (err) {
    console.error('Failed to copy: ', err)
    copyButtonText.value = 'Copy Failed'
    setTimeout(() => {
      copyButtonText.value = 'Copy to Clipboard'
    }, 2000)
  }
}

// Mount/unmount
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.text-to-markdown {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 100%;
}
.converter-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 40px;
  margin: 40px;
}
.input-section, .output-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}
.output-section {
  /* background: #f8f9fa; */
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  max-width: 100%;
}
.text-input {
  width: 100%;
  max-width: 100%;  /* Increased maximum width */
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}
.button-group {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}
.convert-btn, .clear-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}
.convert-btn {
  background-color: #007bff;
  color: white;
}
.convert-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}
.clear-btn {
  background-color: #6c757d;
  color: white;
}
.clear-btn:hover {
  background-color: #545b62;
}
.status {
  margin-top: 10px;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
  min-width: 100px;
  text-align: center;
}

.status.typing {
  background-color: #e2f0ff;
  color: #007bff;
  border: 1px solid #b8daff;
}

.status.processing {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.status.ready {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Diagram Section (now first) */
.diagram-section {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 20px;  /* Add space between diagram and code */
}

/* Code Section (now second) */
.code-section {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  overflow: hidden;
  margin-bottom: 0;     /* No bottom margin since it's last */
}

.code-section h4 {
  margin: 0;
  padding: 15px 20px;
  background: #e9ecef;
  color: #495057;
  border-bottom: 1px solid #dee2e6;
}

.code-container {
  max-height: 300px;  /* Limit height */
  overflow-y: auto;   /* Vertical scroll */
  overflow-x: auto;   /* Horizontal scroll for long lines */
  padding: 15px 20px;
}

.code-container pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #495057;
  line-height: 1.4;
}

/* Diagram Header with Zoom Controls */
.diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 32px; /* Increased right/left padding */
  background: #e9ecef;
  border-bottom: 1px solid #dee2e6;
  max-width: 100%;
  overflow-x: auto;
}

.diagram-header h4 {
  margin: 0;
  color: #495057;
}

/* Diagram Controls Layout */
.diagram-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  min-width: 320px; /* Ensure enough width for controls */
  flex-wrap: nowrap; /* Prevent wrapping */
  max-width: 100%;
  overflow-x: auto;
}

/* Zoom Controls with Slider */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zoom-label {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
  white-space: nowrap;
}

.zoom-slider {
  width: 100px;
  height: 8px; /* Slightly taller */
  border-radius: 4px;
  background: #dee2e6; /* Darker background */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 1px solid #adb5bd; /* Darker border */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.zoom-slider::-webkit-slider-thumb:hover {
  background: #0056b3;
}

.zoom-slider::-webkit-slider-track {
  height: 8px;
  border-radius: 4px;
  background: #dee2e6;
  border: 1px solid #adb5bd;
}

/* Firefox */
.zoom-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.zoom-slider::-moz-range-thumb:hover {
  background: #0056b3;
}

.zoom-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: #dee2e6;
  border: 1px solid #adb5bd;
}

.zoom-level {
  min-width: 50px;
  text-align: center;
  font-weight: 500;
  color: #495057;
  font-size: 14px;
}

.reset-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.reset-btn:hover {
  background: #545b62;
}

.fullscreen-btn {
  padding: 8px 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.fullscreen-btn:hover {
  background: #218838;
}

.fullscreen-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Update mermaid container for zoom */
.markdown-container {
  min-height: 100px;  /* Very small minimum */
  height: auto;       /* Let content determine height */
  max-height: 400px;  /* Still limit maximum */
  padding: 15px;      /* Reduce padding */
  background: white;
  overflow: auto;
  position: relative;
}

/* Target journey diagrams specifically */
.markdown-container:has(svg[data-diagram-type="journey"]) {
  max-height: 350px;  /* Smaller max for journey diagrams */
}

.markdown-preview {
  text-align: left;
  width: 100%;
  max-width: 100%;
  transform-origin: top center;
  transition: transform 0.2s ease;
}

/* Custom scrollbar for code container */
.code-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.code-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.code-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #6c757d;
  font-style: italic;
}
/* Fullscreen Modal */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 95vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Modal Controls Layout */
.modal-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1; /* Take available space */
  justify-content: flex-end; /* Align to the right */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  position: relative;
}

.modal-header h3 {
  margin: 0;
  color: #495057;
  flex-shrink: 0; /* Prevent title from shrinking */
}

.modal-header .zoom-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0; /* Prevent zoom controls from shrinking */
}

/* Update close button positioning */
.close-btn {
  background: #dc3545;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: white;
  padding: 8px 12px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
  position: static; /* Remove absolute positioning */
  top: auto;
  right: auto;
  z-index: auto;
  font-weight: bold;
  flex-shrink: 0; /* Prevent close button from shrinking */
}

.close-btn:hover {
  background: #c82333;
  color: white;
}

/* Ensure proper spacing */
.modal-header .reset-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  margin-right: 10px; /* Add space between reset and close */
}

.modal-header .reset-btn:hover {
  background: #545b62;
}

/* Modal body for drag */
.modal-body {
  flex: 1;
  padding: 20px;
  overflow: hidden; /* Hide overflow for drag */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none; /* Prevent text selection during drag */
  will-change: transform;
}

/* Optimize fullscreen diagram for smooth zoom */
.fullscreen-preview {
  text-align: left;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background: white;
  padding: 20px;
  overflow: auto;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  user-select: none;
}

.fullscreen-preview-inner {
  width: 100%;
  height: 100%;
  /* The transform is applied here via :style binding */
}

.fullscreen-preview:active {
  cursor: grabbing;
}

.fullscreen-preview svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  pointer-events: none;
  will-change: transform;
}

/* Add visual feedback for drag state */
.modal-body.dragging {
  cursor: grabbing;
}

/* Optional: Add drag instructions */
.modal-header::after {
  content: "Drag to pan • Scroll to zoom • Ctrl+Scroll for fine zoom";
  font-size: 12px;
  color: #6c757d;
  margin-left: 20px;
  font-style: italic;
}

/* Modal Controls Layout */
.modal-header .zoom-label {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
  white-space: nowrap;
}

.modal-header .zoom-slider {
  width: 120px; /* Slightly wider for fullscreen */
  height: 8px;
  border-radius: 4px;
  background: #dee2e6;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 1px solid #adb5bd;
}

/* Apply the same slider styling for fullscreen */
.modal-header .zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.modal-header .zoom-slider::-webkit-slider-thumb:hover {
  background: #0056b3;
}

.modal-header .zoom-slider::-webkit-slider-track {
  height: 8px;
  border-radius: 4px;
  background: #dee2e6;
  border: 1px solid #adb5bd;
}

.modal-header .zoom-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.modal-header .zoom-slider::-moz-range-thumb:hover {
  background: #0056b3;
}

.modal-header .zoom-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: #dee2e6;
  border: 1px solid #adb5bd;
}

.modal-header .zoom-level {
  min-width: 50px;
  text-align: center;
  font-weight: 500;
  color: #495057;
  font-size: 14px;
}

.modal-header .reset-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.modal-header .reset-btn:hover {
  background: #545b62;
}

/* Keyboard shortcut hint */
.modal-header::after {
  display: none;
}

/* Add smooth zoom transitions */
.fullscreen-preview {
  text-align: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  transform-origin: center center;
  transition: transform 0.1s ease; /* Smooth zoom and drag */
  cursor: grab;
  user-select: none;
}

/* Optional: Add zoom indicator */
.modal-body::before {
  content: attr(data-zoom);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.modal-body.zooming::before {
  opacity: 1;
}

/* Zoom indicator styles */
.zoom-indicator {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.3s;
  opacity: 0;
}

/* Download button in fullscreen - same size as reset button */
.modal-header .download-btn {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-weight: bold;
  flex-shrink: 0;
  /* Ensure same dimensions as reset button */
  min-width: 80px; /* Slightly wider for "Download" text */
  min-height: 32px;
  position: relative; /* For dropdown positioning */
}

.modal-header .download-btn:hover {
  background: #5a6268;
}

/* Button group for consistent sizing */
.modal-header .button-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.modal-header .button-group .download-btn,
.modal-header .button-group .reset-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  font-weight: bold;
  flex-shrink: 0;
}

.modal-header .button-group .download-btn:hover,
.modal-header .button-group .reset-btn:hover {
  background: #5a6268;
}

/* Ensure reset button has same dimensions for consistency */
.modal-header .reset-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  min-width: 60px;
  min-height: 32px;
  font-weight: bold;
  flex-shrink: 0;
}

.modal-header .reset-btn:hover {
  background: #545b62;
}

/* Fullscreen button in normal window - same size as reset button */
.fullscreen-btn {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-weight: bold;
  flex-shrink: 0;
  /* Ensure same dimensions as reset button */
  min-width: 80px; /* Slightly wider for "Fullscreen" text */
  min-height: 32px;
}

.fullscreen-btn:hover {
  background: #0056b3;
}

/* Ensure reset button in normal window has consistent styling */
.reset-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  min-width: 60px;
  min-height: 32px;
  font-weight: bold;
  flex-shrink: 0;
}

.reset-btn:hover {
  background: #545b62;
}

/* Ensure zoom controls have consistent button styling */
.zoom-controls .zoom-btn {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
  min-width: 60px;
  min-height: 32px;
  font-weight: bold;
  flex-shrink: 0;
}

.zoom-controls .zoom-btn:hover {
  background: #545b62;
}

/* @media (max-width: 768px) {
  .converter-container {
    grid-template-columns: 1fr;
  }
  .button-group {
    flex-direction: column;
  }
}
@media (min-width: 1920px) {
  .text-to-mermaid {
    max-width: 2800px;
  }
  
  .converter-container {
    gap: 80px;
  }
} */

/* Markdown content styles */
.markdown-preview,
.fullscreen-preview {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
  background: white;
  padding: 0;
  line-height: 1.7;
  word-break: break-word;
}

.markdown-preview h1,
.fullscreen-preview h1 { font-size: 2em; margin: 0.67em 0; }
.markdown-preview h2,
.fullscreen-preview h2 { font-size: 1.5em; margin: 0.75em 0; }
.markdown-preview h3,
.fullscreen-preview h3 { font-size: 1.17em; margin: 0.83em 0; }
.markdown-preview h4,
.fullscreen-preview h4 { font-size: 1em; margin: 1.12em 0; }
.markdown-preview h5,
.fullscreen-preview h5 { font-size: 0.83em; margin: 1.5em 0; }
.markdown-preview h6,
.fullscreen-preview h6 { font-size: 0.75em; margin: 1.67em 0; }

.markdown-preview p,
.fullscreen-preview p { margin: 1em 0; }

.markdown-preview code,
.fullscreen-preview code {
  background: #f4f4f4;
  color: #c7254e;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 95%;
}

.markdown-preview pre,
.fullscreen-preview pre {
  background: #f4f4f4;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 95%;
  margin: 1em 0;
}

.markdown-preview blockquote,
.fullscreen-preview blockquote {
  border-left: 4px solid #007bff;
  background: #f8f9fa;
  color: #555;
  margin: 1em 0;
  padding: 0.5em 1em;
  border-radius: 4px;
}

.markdown-preview ul,
.fullscreen-preview ul,
.markdown-preview ol,
.fullscreen-preview ol {
  margin: 1em 0 1em 2em;
  padding: 0;
}

.markdown-preview table,
.fullscreen-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.markdown-preview th,
.fullscreen-preview th,
.markdown-preview td,
.fullscreen-preview td {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
}

.markdown-preview th,
.fullscreen-preview th {
  background: #e9ecef;
  font-weight: bold;
}

.markdown-preview a,
.fullscreen-preview a {
  color: #007bff;
  text-decoration: underline;
  word-break: break-all;
}

.markdown-preview img,
.fullscreen-preview img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}

.markdown-preview ul,
.fullscreen-preview-inner ul,
.markdown-preview ol,
.fullscreen-preview-inner ol {
  margin-left: 1.5em;
  list-style-position: inside;
}

.markdown-preview,
.fullscreen-preview-inner {
  padding-left: 1.5em;
}

.markdown-preview ul,
.fullscreen-preview-inner ul,
.markdown-preview ol,
.fullscreen-preview-inner ol {
  margin-left: 1.5em;
  list-style-position: inside;
}

.markdown-preview pre,
.fullscreen-preview-inner pre {
  background: #f4f4f4;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 95%;
  margin: 1em 0;
  color: #222;
}

.markdown-preview code,
.fullscreen-preview-inner code {
  background: #f4f4f4;
  color: #c7254e;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 95%;
}
</style>