<template>
    <!-- <div class="text-to-mermaid"> -->
    <v-container fluid class="text-to-mermaid">
      <!-- <h1 class="page-title">Text to Mermaid Converter</h1> -->
      <v-row>
        <v-col cols="12">
          <h1 class="text-h4 text-center font-weight-bold mx-3 my-3">Text to Mermaid Converter</h1>
        </v-col>
      </v-row>
      <v-divider :thickness="1" color="white" class="border-opacity-100"></v-divider>
      <!-- <div class="converter-container"> -->
      <v-row class="mx-3 my-3"> 
        <!-- Input Section -->
        <v-col cols="12" md="4" class="pa-3">
          <!-- <div class="input-section"> -->
          <v-card elevation="2" class="input-card">
            <!-- <h3>Input Text</h3> -->
            <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 Mermaid diagram..."
                class="text-input"
                variant="outlined"
                rows="10"
              ></v-textarea>
            
              <div class="button-group">
                <v-btn
                  @click="convertNow"
                  :loading="isProcessing"
                  color="primary"
                  class="convert-btn"
                >
                  Convert Now
                </v-btn>
                <!-- <button @click="clearAll" class="clear-btn">Clear All</button> -->
                <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>
        
        <v-col cols="12" md="8" class="pa-3">
          <!-- Output Section -->
          <div elevation="2" class="output-section">
            <!-- <h3>Mermaid Diagram</h3> -->
            <v-card-title class="text-h6 pa-0 ma-2">Mermaid Diagram</v-card-title>
            
            <!-- Diagram Section -->
            <v-card-text>
              <div class="diagram-header">
                <!-- <h4>Visual Diagram:</h4> -->
                <v-card-subtitle class="text-subtitle-1 pa-0">Visual Diagram:</v-card-subtitle>
                <!-- Diagram 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"
                    /> -->
                    <v-slider
                      id="zoom-slider"
                      v-model="zoomLevel"
                      :min="0.5"
                      :max="3"
                      :step="0.1"
                      hide-details
                      class="zoom-slider"
                    />
                    <span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
                    <!-- <button @click="resetZoom" class="zoom-btn reset-btn">Reset</button> -->
                    <v-btn
                      @click="resetZoom"
                      color="secondary"
                      variant="outlined">
                      Reset
                    </v-btn>
                  </div>
                  
                  <!-- <button @click="toggleFullscreen" class="fullscreen-btn" v-if="mermaidCode">
                    Fullscreen
                  </button> -->
                  <v-btn
                    @click="toggleFullscreen"
                    color="primary"
                    variant="flat"
                    v-if="mermaidCode">
                    Fullscreen
                  </v-btn>
                </div>
              </div>
              <div class="mermaid-container" ref="mermaidContainerWrapper">
                <div v-if="mermaidCode" class="mermaid-diagram" ref="mermaidContainer" :style="{ transform: `scale(${zoomLevel})` }"></div>
                <div v-else class="placeholder">
                  <p>Your Mermaid diagram will appear here</p>
                </div>
              </div>
            </v-card-text>
            
            <!-- Fullscreen Modal -->
            <div v-if="isFullscreen" class="fullscreen-modal" @click="closeFullscreen">
              <div class="modal-content" @click.stop>
                <div class="modal-header">
                  <h3>Mermaid Diagram - 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"
                      /> -->
                      <v-slider
                        id="fullscreen-zoom-slider"
                        v-model="fullscreenZoomLevel"
                        :min="0.5"
                        :max="3"
                        :step="0.1"
                        hide-details
                        class="zoom-slider"
                      />
                      <span class="zoom-level">{{ Math.round(fullscreenZoomLevel * 100) }}%</span>
                      <!-- <button @click="resetFullscreenZoom" class="zoom-btn reset-btn">Reset</button> -->
                      <v-btn
                        @click="resetFullscreenZoom"
                        color="secondary"
                        variant="outlined"
                      >
                        Reset
                      </v-btn>
                    </div>
                    
                    <!-- Single Download Button -->
                    <!-- <button @click="downloadDiagram" class="download-btn" v-if="mermaidCode">
                      Download
                    </button> -->
                    <v-btn
                      @click="downloadDiagram"
                      v-if="mermaidCode"
                      color="primary"
                      variant="flat"
                    >
                      Download
                    </v-btn>
                    
                    <!-- <button @click="closeFullscreen" class="close-btn">&times;</button> -->
                    <v-btn
                      @click="closeFullscreen"
                      icon
                    >
                      <v-icon>mdi-close</v-icon>
                    </v-btn>
                  </div>
                </div>
                <div class="modal-body" 
                    @mousedown="startDrag" 
                    @mousemove="onDrag" 
                    @mouseup="stopDrag" 
                    @mouseleave="stopDrag"
                    @wheel="onWheel"
                    @contextmenu.prevent> <!-- Prevent right-click context menu -->
                  <div class="fullscreen-diagram" 
                      ref="fullscreenDiagram" 
                      :style="{ 
                        transform: `scale(${fullscreenZoomLevel}) translate(${dragOffset.x}px, ${dragOffset.y}px)`,
                        cursor: isDragging ? 'grabbing' : 'grab'
                      }">
                  </div>
                </div>
              </div>
            </div>

            <!-- Generated Code Section (Now Second) -->
<v-card v-if="mermaidCode" class="code-section">
  <v-card-text class="pa-0">
    <v-card-title class="text-subtitle-1 pa-3">Generated Mermaid Code:</v-card-title>
    <v-divider></v-divider>
    <div class="code-container">
      <pre><code>{{ mermaidCode }}</code></pre>
    </div>
  </v-card-text>
</v-card>
          </div>
        </v-col>
      <!-- </div> -->
      </v-row>
    <!-- </div> -->
    </v-container>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
  import mermaid from 'mermaid'
  import { isMermaidCode } from '../config/mermaidTypes.js'
  
  // State variables
  const inputText = ref('')
  const mermaidCode = ref('')
  const mermaidContainer = ref(null)
  const isProcessing = ref(false)
  const currentState = ref('ready') // 'typing', 'processing', 'ready', 'error'
  const zoomLevel = ref(1)
  const mermaidContainerWrapper = ref(null)
  
  // Add these reactive variables
  const isFullscreen = ref(false)
  const fullscreenDiagram = ref(null)
  
  // Add fullscreen zoom state
  const fullscreenZoomLevel = ref(1)
  
  // Add drag state variables
  const isDragging = ref(false)
  const dragStart = ref({ x: 0, y: 0 })
  const dragOffset = ref({ x: 0, y: 0 })
  
  let debounceTimeout = null
  
  // Add to your reactive variables
  // const showDownloadMenu = ref(false) // Removed as per edit hint
  
  // Debounced conversion logic
  const handleInput = () => {
    currentState.value = 'typing'
    if (debounceTimeout) clearTimeout(debounceTimeout)
    debounceTimeout = setTimeout(() => {
      convertToMermaid()
    }, 500)
  }
  
  // Update zoom functions
  const updateZoom = () => {
    // The slider directly updates zoomLevel.value
    // No additional logic needed since v-model handles it
  }

  const resetZoom = () => {
    zoomLevel.value = 1
  }

  // Add fullscreen functions
  const toggleFullscreen = () => {
    if (isFullscreen.value) {
      closeFullscreen()
    } else {
      openFullscreen()
    }
  }

  // Update the openFullscreen function to reset zoom
  const openFullscreen = async () => {
    isFullscreen.value = true
    fullscreenZoomLevel.value = 1 // Reset zoom when opening fullscreen
    dragOffset.value = { x: 0, y: 0 } // Reset drag position
    await nextTick()
    
    // Copy the diagram to fullscreen modal
    if (fullscreenDiagram.value && mermaidContainer.value) {
      fullscreenDiagram.value.innerHTML = mermaidContainer.value.innerHTML
    }
  }

  // Update closeFullscreen to reset zoom
  const closeFullscreen = () => {
    isDragging.value = false
    isFullscreen.value = false
    fullscreenZoomLevel.value = 1 // Reset zoom when closing
    dragOffset.value = { x: 0, y: 0 }
  }

  // Update the convertToMermaid function to reset zoom
  const convertToMermaid = async () => {
    if (!inputText.value.trim()) {
      mermaidCode.value = ''
      if (mermaidContainer.value) mermaidContainer.value.innerHTML = ''
      currentState.value = 'ready'
      closeFullscreen() // Close fullscreen when clearing
      return
    }
    isProcessing.value = true
    currentState.value = 'processing'
    try {
      const converted = convertTextToMermaid(inputText.value)
      mermaidCode.value = converted

      await nextTick()
      if (mermaidContainer.value) {
        mermaidContainer.value.innerHTML = ''
        mermaid.render('mermaid-diagram', converted).then(({ svg }) => {
          mermaidContainer.value.innerHTML = svg
          resetZoom() // Reset zoom when new diagram is loaded
          closeFullscreen() // Close fullscreen when new diagram loads
        })
      }
      currentState.value = 'ready'
    } catch (error) {
      currentState.value = 'error'
      mermaidCode.value = ''
      if (mermaidContainer.value) mermaidContainer.value.innerHTML = ''
      closeFullscreen() // Close fullscreen on error
    } finally {
      isProcessing.value = false
    }
  }
  
  const convertNow = () => {
    if (debounceTimeout) clearTimeout(debounceTimeout)
    convertToMermaid()
  }
  
  const clearAll = () => {
    inputText.value = ''
    mermaidCode.value = ''
    if (mermaidContainer.value) mermaidContainer.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'
    }
  })

  const convertTextToMermaid = (text) => {
    const trimmedText = text.trim()
    
    // Check if input is already Mermaid code
    if (isMermaidCode(trimmedText)) {
      return trimmedText // Return Mermaid code as-is
    }
    
    // If not Mermaid code, convert to flowchart
    const lines = trimmedText.split('\n').filter(line => line.trim())
    if (lines.length === 0) return ''
    
    let code = 'graph TD\n'
    lines.forEach((line, index) => {
      const nodeId = `A${index}`
      code += `    ${nodeId}["${line.trim()}"]\n`
      if (index > 0) code += `    A${index - 1} --> ${nodeId}\n`
    })
    return code
  }
  
  // Initialize Mermaid
  onMounted(() => {
    mermaid.initialize({
      startOnLoad: false,
      theme: 'default',
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true
      }
    })
  })

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

  // Add fullscreen zoom functions
  const updateFullscreenZoom = () => {
    // The slider directly updates fullscreenZoomLevel.value
    // No additional logic needed since v-model handles it
  }

  const resetFullscreenZoom = () => {
    fullscreenZoomLevel.value = 1
    dragOffset.value = { x: 0, y: 0 }
  }

  // Add drag functions
  const startDrag = (event) => {
    if (event.target.closest('.modal-header')) return // Don't drag if clicking header
    
    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
  }

  // More precise zoom-to-mouse implementation
  const onWheel = (event) => {
    event.preventDefault()
    
    const modalBody = event.currentTarget
    const rect = modalBody.getBoundingClientRect()
    
    // Mouse position relative to modal body
    const mouseX = event.clientX - rect.left
    const mouseY = event.clientY - rect.top
    
    // Current zoom and position
    const oldZoom = fullscreenZoomLevel.value
    
    // Calculate new zoom
    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) {
      // Modal center
      const centerX = rect.width / 2
      const centerY = rect.height / 2
      
      // Current mouse offset from center
      const currentMouseOffsetX = mouseX - centerX
      const currentMouseOffsetY = mouseY - centerY
      
      // Calculate the point in diagram coordinates that the mouse is over
      const diagramPointX = (currentMouseOffsetX - dragOffset.value.x) / oldZoom
      const diagramPointY = (currentMouseOffsetY - dragOffset.value.y) / oldZoom
      
      // Update zoom
      fullscreenZoomLevel.value = Math.round(newZoom * 10) / 10
      
      // Calculate new drag offset to keep the same diagram point under mouse
      dragOffset.value.x = currentMouseOffsetX - (diagramPointX * newZoom)
      dragOffset.value.y = currentMouseOffsetY - (diagramPointY * newZoom)
    }
  }

  // Add zoom indicator with current position info
  const showZoomIndicator = (event) => {
    const modalBody = event.currentTarget
    const rect = modalBody.getBoundingClientRect()
    const mouseX = event.clientX - rect.left
    const mouseY = event.clientY - rect.top
    
    // Create or update zoom indicator
    let indicator = modalBody.querySelector('.zoom-indicator')
    if (!indicator) {
      indicator = document.createElement('div')
      indicator.className = 'zoom-indicator'
      modalBody.appendChild(indicator)
    }
    
    indicator.textContent = `${Math.round(fullscreenZoomLevel.value * 100)}%`
    indicator.style.left = `${mouseX + 10}px`
    indicator.style.top = `${mouseY - 30}px`
    indicator.style.opacity = '1'
    
    setTimeout(() => {
      indicator.style.opacity = '0'
    }, 1000)
  }

  // Make sure onMounted includes the event listener
  onMounted(() => {
    mermaid.initialize({
      startOnLoad: false,
      theme: 'default',
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true
      }
    })
    
    // Add keyboard listener for ESC key
    document.addEventListener('keydown', handleKeydown)
  })

  onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown)
  })

  // Remove these variables and functions
  // const showDownloadMenu = ref(false)
  // const toggleDownloadMenu = () => { ... }
  // const downloadFile = async (type) => { ... }

  // Simple download function
  const downloadDiagram = async () => {
    try {
      console.log('Starting diagram download')
      
      // Use the fullscreen diagram element
      const svgElement = fullscreenDiagram.value?.querySelector('svg')
      console.log('Fullscreen SVG element found:', !!svgElement)
      
      if (!svgElement) {
        alert('No diagram to download. Please generate a diagram first.')
        return
      }
      
      await downloadSVG(svgElement)
      
    } catch (error) {
      console.error('Error downloading diagram:', error)
      alert(`Error downloading diagram: ${error.message}`)
    }
  }

  // Simplified SVG download function
  const downloadSVG = async (svgElement) => {
    try {
      // Clone SVG to avoid modifying the original
      const clonedSvg = svgElement.cloneNode(true)
      
      // Get SVG dimensions
      const svgRect = svgElement.getBoundingClientRect()
      const width = svgRect.width || 800
      const height = svgRect.height || 600
      
      // Set SVG attributes for proper rendering
      clonedSvg.setAttribute('width', width)
      clonedSvg.setAttribute('height', height)
      clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
      
      // Add viewBox if not present
      if (!clonedSvg.getAttribute('viewBox')) {
        clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`)
      }
      
      // Convert SVG to string
      const svgData = new XMLSerializer().serializeToString(clonedSvg)
      
      // Create blob and download
      const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
      const svgUrl = URL.createObjectURL(svgBlob)
      
      // Create download link
      const link = document.createElement('a')
      link.href = svgUrl
      link.download = `mermaid-diagram-${Date.now()}.svg`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(svgUrl)
      
      console.log('Diagram download completed')
      
      // Show success message
      alert('Diagram downloaded successfully as SVG file!')
      
    } catch (error) {
      console.error('Error downloading SVG:', error)
      alert('Error downloading diagram')
    }
  }

  // Update the closeDownloadMenu function (simplified)
  const closeDownloadMenu = (event) => {
    // No longer needed since we removed the dropdown
    // Keep this function in case you want to add dropdowns later
  }

  // Add to onMounted
  onMounted(() => {
    mermaid.initialize({
      startOnLoad: false,
      theme: 'default',
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true
      }
    })
    
    // Add keyboard listener for ESC key
    document.addEventListener('keydown', handleKeydown)
    document.addEventListener('click', closeDownloadMenu)
  })

  onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown)
    document.removeEventListener('click', closeDownloadMenu)
  })
  </script>
  
  <style scoped>
  .text-to-mermaid {
    /* max-width: 2400px; */
    /* display: grid;
    grid-template-rows: 1fr; */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* margin: 10px; */
    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;
  } */

  .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;
  }
  .status.typing { color: #888; }
  .status.processing { color: #007bff; }
  .status.ready { color: #28a745; }
  .status.error { color: #dc3545; }
  /* 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 */
  .mermaid-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 */
  .mermaid-container:has(svg[data-diagram-type="journey"]) {
    max-height: 350px;  /* Smaller max for journey diagrams */
  }

  .mermaid-diagram {
    text-align: center;
    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-diagram {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    transition: none; /* Remove transition for instant zoom response */
    cursor: grab;
    user-select: none;
    position: relative;
    will-change: transform; /* Optimize for transform changes */
  }

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

  .fullscreen-diagram 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-diagram {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
  }

  .page-title {
    font-size: 2.4rem;           /* Larger, more prominent */
    font-weight: 700;            /* Bold */
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.2;
    /* Optional: add a subtle shadow for depth */
    text-shadow: 0 2px 8px rgba(76, 110, 245, 0.08);
    /* Optional: add a divider line below */
    border-bottom: 1px solid black;
    padding-bottom: 12px;
  }
  </style>