/* Root Styling */
body {
    transition: background-color 0.3s, color 0.3s;
  }
  
  .light-mode {
    background-color: #f8f9fa;
    color: #212529;
  }
  
  .dark-mode {
    background-color: #121212;
    color: #f1f1f1;
  }
  
  .dark-mode .form-control,
  .dark-mode .form-select,
  .dark-mode .btn,
  .dark-mode .alert {
    background-color: #1e1e1e;
    color: #f1f1f1;
    border-color: #333;
  }
  
  .dark-mode .form-control:focus,
  .dark-mode .form-select:focus {
    background-color: #2a2a2a;
    color: #fff;
  }
  
  .dark-mode #preview {
    background-color: #ffffff !important; /* keep preview white in dark mode */
    color: #000 !important;
  }
  
  .dark-mode .btn-outline-secondary {
    color: #ccc;
    border-color: #555;
  }
  
  /* Typing Animation */
  .typing {
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid;
    width: 100%;
    animation: typing 5s steps(40, end) infinite, blink 0.75s step-end infinite;
  }
  
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  
  @keyframes blink {
    50% {
      border-color: transparent;
    }
  }
  
  /* Equal height for columns */
  .equal-height {
    display: flex;
    flex-wrap: wrap;
  }
  
  .equal-height > .col-md-6 {
    display: flex;
    flex-direction: column;
  }
  
  .equal-height textarea,
  .equal-height #preview {
    flex-grow: 1;
    height: 100%;
  }
  
  /* Drop Area Styling */
  #dropArea {
    background-color: #f1f1f1;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px dashed #ccc;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    color: #333;
  }
  
  #dropArea:hover {
    background-color: #e0e0e0;
  }
  
  .dark-mode #dropArea {
    background-color: #2a2a2a;
    color: #ffffff;
    border-color: #666;
  }
  
  .dark-mode #dropArea:hover {
    background-color: #3a3a3a;
    color:#fff;
  }
  
  /* Custom Style Area */
  #customStyle {
    font-family: monospace;
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ced4da;
    padding: 0.75rem;
    border-radius: 6px;
    resize: vertical;
    min-height: 150px;
    caret-color: #212529;
  }
  
  .dark-mode #customStyle {
    background-color: #1e1e1e;
    color: #ffffff;
    border-color: #444;
    caret-color: #ffffff;
  }
  
  
  /* Button Enhancements */
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
  
  /* HTML Preview Styling */
  #preview {
    min-height: 400px;
    overflow-y: auto;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #dee2e6;
  }
  
  /* Ensure scrollbar visibility */
  #preview::-webkit-scrollbar {
    width: 8px;
  }
  
  #preview::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 4px;
  }
  
  /* Link Button for Live Export */
  #exportLink {
    white-space: nowrap;
  }
  
  /* Responsive Fix */
  @media (max-width: 768px) {
    .equal-height {
      flex-direction: column;
    }
  }