/* ===========================================
   COLOUR-ONLY DECLARATIONS (TOP)
   =========================================== */

/* ===========================================
   LAYOUT AND STRUCTURAL STYLES (NO COLOURS)
   =========================================== */

#openrouter-toggle-visibility svg,
#openrouter-save-config svg,
#openrouter-clear-config svg,
.mathpix-action-button svg,
.mathpix-copy-button svg,
.latex-zip-info svg,
.mathpix-mode-options svg,
.mathpix-canvas-controls svg,
.mathpix-canvas-instructions svg {
  vertical-align: middle;
  /* space between icon and text */
}

/* Structure (color-agnostic) */
.mathpix-download-section {
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid;
}

.mathpix-download-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.mathpix-download-all-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mathpix-download-progress {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
  border: 1px solid;
}

.mathpix-download-status {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Modal */
.mathpix-zoom-button {
  padding: 3px !important;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s;
}

.mathpix-fullscreen-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.mathpix-fullscreen-modal.active {
  display: block;
  overflow: auto;
}

.mathpix-fullscreen-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.mathpix-fullscreen-container {
  border-radius: 8px;
  max-width: 95vw;
  margin: 2.5vh auto;
}

.mathpix-fullscreen-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.mathpix-fullscreen-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
}

.mathpix-fullscreen-close {
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.mathpix-fullscreen-content {
  padding: 2rem;
  overflow: auto;
}

.mathpix-fullscreen-content mjx-container {
  max-width: none !important;
  width: max-content;
}

/* ===========================================
   MATHPIX STROKES CANVAS - TIER 1 LAYOUT
   =========================================== */

.mathpix-draw-container {
  margin: 2rem auto;
  max-width: 100%; /* Changed from 850px to allow larger canvases */
  overflow-x: auto; /* Allow horizontal scroll if canvas too wide */
}

.mathpix-canvas-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: fit-content;
  max-width: 100%; /* Constrain to container */
  margin: 0 auto;
  padding: 0;
}

/* Ensure canvas container stays centered */
.mathpix-canvas-container {
  display: block;
  margin: 0 auto;
}

/* Canvas container with border and shadow */
.mathpix-canvas-container {
  border-radius: 8px;
  overflow: hidden; /* Ensures border-radius applies to canvas */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Ensure canvas doesn't interfere with resize handle */
.mathpix-draw-canvas {
  pointer-events: auto;
}

/* Canvas Size Controls */
.mathpix-canvas-size-controls {
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.size-button-group {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.mathpix-size-btn {
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mathpix-size-btn.active {
  font-weight: bold;
}

input#custom-width,
input#custom-height {
  margin-bottom: 0.5rem;
}

.mathpix-mode-options {
  font-size: 1rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .size-button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .mathpix-size-btn {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mathpix-size-btn {
    transition: none;
  }

  .mathpix-size-btn:hover {
    transform: none;
  }
}

/* Canvas Instructions */
.mathpix-canvas-instructions {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Canvas Element */
.mathpix-draw-canvas {
  cursor: crosshair;
  touch-action: none; /* Prevent scrolling on touch */
  display: block;
  /* NO fixed width/height - let canvas buffer size control display */
  /* NO border, padding, or margin - pure dimensions */
  border: none;
  padding: 0;
  margin: 0;
  /* Prevent any browser default styling */
  box-sizing: content-box;
}

/* Canvas Controls */
.mathpix-canvas-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.mathpix-canvas-btn {
  font-size: 0.8rem;
}

.mathpix-canvas-controls .action-button {
  min-width: 120px;
}

/* Responsive adjustments - only for mobile */
@media (max-width: 768px) {
  .mathpix-draw-container {
    padding: 1rem;
    margin: 1rem auto;
  }

  .mathpix-canvas-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .mathpix-canvas-controls .action-button {
    width: 100%;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mathpix-draw-canvas {
    transition: none;
  }

  .mathpix-draw-canvas:hover {
    box-shadow: 0 2px 8px rgba(0, 19, 29, 0.1);
  }
}

/* Basic Upload Container Layout */
.mathpix-upload-container {
  margin-bottom: 2rem;
}

.drop-zone {
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-zone p {
  margin: 0;
}

.drop-zone small {
  display: block;
  margin-top: 0.5rem;
}

#mathpix-output-container {
  margin-top: 2rem;
}

.code-block-wrapper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.code-block-wrapper pre {
  margin: 0;
  padding: 1rem;
  overflow: auto;
}

.code-block-wrapper code {
  font-size: 0.9rem;
  line-height: 1.4;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Configuration Layout */
.mathpix-config {
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 4px;
}

.config-inputs {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.config-inputs label {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.config-inputs input {
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

#mathpix-save-config {
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
}

@media (prefers-contrast: high) {
  .drop-zone {
    border-width: 3px;
  }
}

/* Multi-Format Output Styling – layout */
.mathpix-format-selection {
  margin: 2px 0;
  padding: 1rem;
  border-radius: 4px;
}

.mathpix-format-selection legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.mathpix-format-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5rem;
}

.mathpix-format-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mathpix-format-option:hover {
  transform: translateY(-1px);
}

.mathpix-format-option input[type="radio"] {
  margin: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}

.format-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mathpix-format-option .format-label {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.mathpix-format-option .format-description {
  font-size: 0.85rem;
  line-height: 1.3;
  margin: 0;
}

.mathpix-format-option.unavailable {
  opacity: 0.6;
  cursor: not-allowed;
}

.mathpix-format-option.unavailable:hover {
  transform: none;
}

.mathpix-format-option.unavailable input[type="radio"] {
  cursor: not-allowed;
}

.mathpix-format-option.unavailable .format-label::after {
  content: " (not available)";
  font-weight: normal;
  font-size: 0.85rem;
}

/* Output Display – layout */
.mathpix-output-display {
  /* margin-top: 1rem;*/
}

.mathpix-format-panel {
  display: none;
}

.mathpix-format-panel.active {
  display: block;
}

.mathpix-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* HTML Preview – layout */
.mathpix-html-preview {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
}

.mathpix-html-preview h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.preview-content {
  padding: 0.5rem;
  border-radius: 4px;
  min-height: 2rem;
}

/* Processing Metadata – layout */
.mathpix-metadata {
  padding: 1rem;
  border-radius: 4px;
}

.mathpix-info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .drop-zone,
  .mathpix-copy-btn,
  .mathpix-format-option {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .mathpix-format-option {
    border-width: 2px;
  }
}

/* Phase 3.2: Line Data Section – layout */
.line-data-section {
  padding: 1rem;
  border-radius: 8px;
}

.line-data-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
}

.line-data-toggle:hover {
  transform: translateY(-1px);
}

.line-data-toggle:active {
  transform: translateY(0);
}

.toggle-icon {
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.line-data-toggle[aria-expanded="true"] .toggle-icon {
  content: "☑";
}

.toggle-text {
  flex: 1;
}

.line-data-content {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 6px;
}

.line-data-summary {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.line-data-summary h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.line-data-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.line-data-summary-list li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.line-data-details {
  margin-top: 1.5rem;
}

.line-data-details h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.line-data-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.line-data-item {
  padding: 0.75rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.line-data-item:last-child {
  padding-bottom: 0;
}

/* Screen reader only class for status text */
.line-data-item .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive adjustments for line data */
@media (max-width: 768px) {
  .line-data-section {
    padding: 0.75rem;
  }

  .line-data-toggle {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
  }

  .line-data-content {
    padding: 0.85rem;
  }

  .line-data-summary-list li,
  .line-data-item {
    font-size: 0.85rem;
  }
}

/* Reduced motion support for line data */
@media (prefers-reduced-motion: reduce) {
  .line-data-toggle,
  .toggle-icon {
    transition: none;
  }

  .line-data-toggle:hover {
    transform: none;
  }
}

/* Print styles for line data */
@media print {
  .line-data-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .line-data-toggle {
    display: none;
  }

  .line-data-content {
    display: block !important;
  }
}

/* Empty content styling – layout */
.empty-content {
  padding: 1rem;
  border-radius: 4px;
  text-align: center;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .mathpix-format-options {
    grid-template-columns: 1fr;
  }

  .mathpix-format-option {
    padding: 1rem;
  }
}

/* Privacy Consent Modal Styling – layout */
.mathpix-privacy-consent {
  max-width: 100%;
  line-height: 1.5;
}

.consent-file-info {
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.consent-file-info p {
  margin: 0;
  font-size: 1.1rem;
}

.consent-section {
  margin-bottom: 1.5rem;
}

.consent-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
}

.consent-section ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
}

.consent-section li {
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

@media (prefers-contrast: high) {
  .consent-section h3 {
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent-section {
    transition: none;
  }
}

@media (max-width: 768px) {
  .mathpix-privacy-consent {
    font-size: 0.9rem;
  }

  .consent-file-info,
  .privacy-protection,
  .gdpr-compliance,
  .data-rights,
  .important-notes,
  .consent-question {
    padding: 0.75rem;
  }

  .consent-section h3 {
    font-size: 0.95rem;
  }

  .consent-section ul {
    padding-left: 1.25rem;
  }
}

/* Testing Options Styling – layout */
.consent-testing-options {
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
}

.consent-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.consent-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.checkbox-label {
  flex: 1;
  line-height: 1.4;
}

@media (prefers-contrast: high) {
  .consent-testing-options {
    border-width: 3px;
  }
}

/* Phase 3 MVP: Responsive Preview Layout */
.mathpix-image-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem auto;
  padding: 1.5rem;
  border-radius: 8px;
  max-width: 450px;
  width: 100%;
  overflow: visible; /* Phase 1F.2: Allow some overflow for rotated images */
  position: relative; /* Phase 1F.2: Positioning context for transforms */
  min-height: 550px; /* Phase 1F.2: Increased space for rotated images */
}
.mathpix-image-preview {
  max-width: 400px;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.3s ease, max-width 0.3s ease, max-height 0.3s ease;
  transform-origin: center center; /* Phase 1F.2: Transform from center */
  margin: 2rem auto 3rem auto; /* Phase 1F.2: Extra bottom spacing, centered */
  flex-shrink: 0; /* Phase 1F.2: Prevent image from shrinking */
}

#mathpix-rotate-capture-btn {
  display: none;
}

.mathpix-image-preview:hover {
  transform: scale(1.02);
}

.mathpix-preview-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.mathpix-open-original-btn {
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mathpix-open-original-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 92, 132, 0.15);
}

.mathpix-open-original-btn:active {
  transform: translateY(0);
}

.mathpix-file-info {
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.4;
}

.mathpix-file-info strong {
  font-weight: 600;
  font-size: 1rem;
}

.mathpix-progress-container {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-radius: 8px;
  max-width: 100%;
}

.mathpix-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  position: relative;
}

.mathpix-progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
  position: relative;
}

.mathpix-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%
  );
  background-size: 20px 20px;
  animation: progress-stripe 1s linear infinite;
}

@keyframes progress-stripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

.mathpix-progress-label {
  font-size: 0.95rem;
  text-align: center;
  font-weight: 500;
  min-height: 1.2rem;
}

.mathpix-comparison-container {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1rem;
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
}

.mathpix-comparison-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  border-radius: 8px;
  min-height: 200px;
  max-width: 100%;
  overflow: hidden;
}

.mathpix-comparison-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 1.25rem 1.25rem 0.75rem 1.25rem;
  padding-bottom: 0.5rem;
  text-align: center;
  flex-shrink: 0;
}

.mathpix-rendered-output {
  overflow-x: auto;
  overflow-y: auto;
  margin: 0 1.25rem 1.25rem 1.25rem;
  padding: 0;
  flex: 1;
  min-width: 0;
}

.mathpix-rendered-output mjx-container {
  display: inline-block;
  max-width: none !important;
  min-width: max-content;
}
.mathpix-original-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  max-height: 300px;
  align-self: center;
}

.mathpix-rendered-output {
  min-height: 120px;
  padding: 1.25rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 1rem;
  line-height: 1.5;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mathpix-confidence-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.mathpix-confidence-badge {
  padding: 0.4rem 0.8rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 4rem;
  text-align: center;
}

/* =============================================================================
   PHASE 1F.2: TRANSFORM CONTROLS STYLING
   ============================================================================= */

/**
 * Transform Controls Container
 * Houses rotate and flip buttons with transform state display
 */
.mathpix-transform-controls {
  display: none; /* Hidden by default, shown for camera captures */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0; /* Phase 1F.2: More spacing from image */
  padding: 0.75rem;
  border-radius: 8px;
  flex-wrap: wrap;
  flex-shrink: 0; /* Phase 1F.2: Prevent controls from shrinking */
}

/**
 * Transform Buttons (Rotate & Flip)
 * Styled to match existing MathPix button design
 */
.mathpix-transform-btn {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
  justify-content: center;
}

.mathpix-transform-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 92, 132, 0.15);
}

.mathpix-transform-btn:active {
  transform: translateY(0);
}

.mathpix-transform-btn:focus {
  outline: 2px solid;
  outline-offset: 2px;
}

/**
 * Transform State Display
 * Shows current transform description (e.g., "Rotated 90° • Flipped")
 */
.mathpix-transform-state {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  min-width: 180px;
  text-align: center;
  line-height: 1.4;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .mathpix-transform-btn {
    border-width: 3px;
  }

  .mathpix-transform-btn:focus {
    outline-width: 3px;
  }

  .mathpix-transform-state {
    border-width: 2px;
  }
}

/* Responsive Design for Transform Controls */
@media (max-width: 768px) {
  .mathpix-transform-controls {
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .mathpix-transform-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    min-width: 100px;
  }

  .mathpix-transform-state {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .mathpix-transform-controls {
    flex-direction: column;
    width: 100%;
  }

  .mathpix-transform-btn,
  .mathpix-transform-state {
    width: 100%;
    min-width: unset;
  }
}

/* =============================================================================
   END PHASE 1F.2 STYLES
   ============================================================================= */

@media (max-width: 768px) {
  .mathpix-comparison-container {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.75rem;
  }

  .mathpix-image-preview {
    max-width: 300px;
    max-height: 250px;
  }

  .mathpix-comparison-panel {
    padding: 1rem;
  }

  .mathpix-image-preview-container {
    padding: 1rem;
    margin: 1rem auto;
    max-width: 350px;
  }

  .mathpix-progress-container {
    padding: 1rem;
    margin: 1rem 0;
  }

  .mathpix-open-original-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .mathpix-file-info {
    font-size: 0.85rem;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .mathpix-comparison-container {
    gap: 1.25rem;
  }

  .mathpix-image-preview {
    max-height: 350px;
  }

  .mathpix-original-image {
    max-height: 250px;
  }
}

@media (min-width: 1200px) {
  .mathpix-comparison-container {
    gap: 2rem;
    padding: 1.5rem;
  }

  .mathpix-comparison-panel {
    padding: 1.5rem;
  }

  .mathpix-image-preview {
    max-height: 450px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mathpix-image-preview,
  .mathpix-open-original-btn,
  .mathpix-progress-fill {
    transition: none;
  }

  .mathpix-progress-fill::after {
    animation: none;
  }

  .mathpix-image-preview:hover {
    transform: none;
  }

  .mathpix-open-original-btn:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .mathpix-image-preview-container,
  .mathpix-progress-container,
  .mathpix-comparison-container,
  .mathpix-comparison-panel {
    border-width: 2px;
  }

  .mathpix-open-original-btn {
    border-width: 2px;
  }

  .mathpix-confidence-badge {
    border-width: 2px;
  }
}

@media print {
  .mathpix-image-preview-container,
  .mathpix-comparison-container {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mathpix-progress-container {
    display: none;
  }

  .mathpix-open-original-btn {
    display: none;
  }
}

/* Phase 3.1: Enhanced Progress Bar & HTML Preview Layout */
.html-preview-controls {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.preview-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
}

.preview-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.preview-toggle-btn:hover {
  transform: translateY(-1px);
}

.preview-toggle-btn:active {
  transform: translateY(0);
}

.toggle-icon {
  transition: transform 0.3s ease;
  font-size: 0.8rem;
  font-weight: bold;
}

.preview-toggle-btn[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

.toggle-text {
  font-weight: 600;
}

.preview-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.preview-stats {
  font-size: 0.9rem;
  font-weight: 500;
}

.line-count {
  font-weight: 700;
}

.size-info {
  font-size: 0.75rem;
  font-style: italic;
}

.preview-summary {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.html-content-container {
  position: relative;
  transition: max-height 0.4s ease-in-out;
  overflow: hidden;
}

.html-content-collapsed {
  max-height: 400px;
  position: relative;
}

.html-content-expanded {
  max-height: none;
}

.html-content-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.html-content-expanded::after {
  opacity: 0;
}

.mathpix-format-content .html-content-container {
  margin-top: 0;
}

.mathpix-format-content .html-preview-controls {
  margin-bottom: 0.5rem;
}

.html-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.html-content-expanded .html-fade-overlay {
  opacity: 0;
}

.progress-container-enhanced {
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.progress-title-section {
  flex-grow: 1;
}

.progress-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.progress-icon {
  font-size: 1.5rem;
}

.progress-subtitle {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
}

.cancel-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  transform: translateY(-1px);
}

.progress-bar-section {
  margin-bottom: 1.5rem;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-container-enhanced .progress-bar {
  flex-grow: 1;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
  position: relative;
  overflow: hidden;
}

.progress-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.progress-percentage-display {
  min-width: 50px;
  text-align: right;
}

.progress-percentage {
  font-size: 1.1rem;
  font-weight: 700;
}

.progress-details-enhanced {
  margin-bottom: 1.5rem;
}

.progress-status-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.status-left {
  flex-grow: 1;
}

.progress-container-enhanced .progress-text {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.detailed-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.current-stage {
  font-weight: 600;
}

.stage-separator {
  font-weight: bold;
}

.stage-progress {
  font-style: italic;
}

.status-right {
  min-width: 200px;
}

.processing-time {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: right;
}

.time-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.time-label {
  font-weight: 500;
}

.time-value {
  font-weight: 700;
  font-family: "Courier New", monospace;
}

.time-estimate {
  font-style: italic;
  opacity: 0.8;
}

.progress-stages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1rem 0;
}

.progress-stages::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
}

.stage-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
  padding: 0 0.5rem;
}

.stage-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
}

.stage-indicator.active .stage-dot {
  transform: scale(1.2);
}

.stage-indicator.completed .stage-dot::after {
  content: "✓";
  font-size: 0.7rem;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stage-label {
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.content-summary-container {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
}

.content-summary h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.content-summary p {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
}

.content-details {
  font-size: 0.8rem;
  font-weight: 500;
}

.content-details span {
  margin-right: 0.5rem;
}

@media (max-width: 768px) {
  .progress-container-enhanced {
    padding: 1rem;
  }

  .progress-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .progress-status-row {
    flex-direction: column;
    gap: 1rem;
  }

  .status-right {
    min-width: auto;
  }

  .processing-time {
    text-align: left;
  }

  .progress-stages {
    overflow-x: auto;
    padding-bottom: 1.5rem;
  }

  .stage-indicator {
    min-width: 80px;
  }

  .preview-control-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .preview-info {
    align-items: center;
  }

  .preview-toggle-btn {
    justify-content: center;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .progress-container-enhanced {
    padding: 1.25rem;
  }

  .progress-status-row {
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-toggle-btn,
  .progress-fill,
  .stage-dot,
  .cancel-btn {
    transition: none;
  }

  .progress-shine {
    animation: none;
  }

  .progress-icon {
    animation: none;
  }

  .html-content-container {
    transition: none;
  }

  .toggle-icon {
    transition: none;
  }
}

@media print {
  .progress-container-enhanced,
  .html-preview-controls {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cancel-btn,
  .preview-toggle-btn {
    display: none;
  }

  .progress-icon {
    animation: none;
  }
}

/* Phase 2.1: PDF Document Processing Layout */
.mathpix-pdf-upload-container {
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 8px;
}

.mathpix-pdf-drop-zone {
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mathpix-pdf-drop-zone p {
  margin: 0;
  font-size: 1.1rem;
}

.mathpix-pdf-drop-zone .help-text {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

.mathpix-pdf-options {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 8px;
}

.mathpix-pdf-options h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.mathpix-option-group {
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 6px;
}

.mathpix-option-group legend {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.mathpix-radio-group,
.mathpix-checkbox-group {
  display: grid;
  gap: 0.75rem;
}

.mathpix-option,
.mathpix-format-checkbox,
.mathpix-view-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mathpix-option:hover,
.mathpix-format-checkbox:hover,
.mathpix-view-option:hover {
  transform: translateY(-1px);
}

.mathpix-option input[type="radio"],
.mathpix-option input[type="checkbox"],
.mathpix-format-checkbox input[type="checkbox"],
.mathpix-view-option input[type="radio"] {
  margin: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}

.option-content,
.format-content,
.view-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.option-label,
.format-label,
.view-label {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.option-description,
.format-description,
.view-description {
  font-size: 0.85rem;
  line-height: 1.3;
  margin: 0;
  opacity: 0.8;
}

.mathpix-custom-range {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 6px;
}

.mathpix-custom-range label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.mathpix-custom-range input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.mathpix-custom-range .help-text {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

.mathpix-pdf-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.mathpix-process-btn,
.mathpix-cancel-btn,
.mathpix-process-another-btn,
.mathpix-clear-results-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mathpix-process-btn:hover,
.mathpix-process-another-btn:hover {
  transform: translateY(-1px);
}

.mathpix-cancel-btn:hover,
.mathpix-clear-results-btn:hover {
  transform: translateY(-1px);
}

.mathpix-pdf-progress {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 8px;
}

.mathpix-pdf-progress h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.mathpix-progress-bar-container {
  margin-bottom: 1rem;
  border-radius: 4px;
  overflow: hidden;
}

.mathpix-progress-text {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.mathpix-progress-details {
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.mathpix-status-text {
  font-size: 0.95rem;
  font-weight: 500;
}

.mathpix-timing-text {
  font-size: 0.85rem;
}

.mathpix-pdf-results {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 8px;
}

.mathpix-pdf-results h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.mathpix-document-info {
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 6px;
}

.mathpix-doc-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}

.mathpix-doc-details dt {
  font-weight: 500;
}

.mathpix-doc-details dd {
  margin: 0;
}

.mathpix-results-controls {
  margin-bottom: 2rem;
}

.mathpix-view-selection {
  padding: 1rem;
  border-radius: 6px;
}

.mathpix-view-selection legend {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.mathpix-view-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.mathpix-results-tabs {
  overflow: hidden;
}

.mathpix-tab-headers {
  display: flex;
  flex-wrap: wrap;
}

.mathpix-tab-header {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 0;
  margin-bottom: 0;
}

.mathpix-tab-header:first-child {
  border-top-left-radius: 8px;
}

.mathpix-tab-header:last-child {
  border-top-right-radius: 8px;
}

.mathpix-tab-header:hover {
  transform: translateY(-1px);
}

.mathpix-tab-panel {
  padding: 1.5rem;
  display: none;
}

.mathpix-tab-panel.active {
  display: block;
}

.mathpix-format-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
}

.mathpix-format-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.mathpix-format-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mathpix-copy-btn,
.mathpix-download-btn,
.mathpix-preview-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mathpix-copy-btn:hover,
.mathpix-download-btn:hover,
.mathpix-preview-btn:hover {
  transform: translateY(-1px);
}

.mathpix-html-preview-area {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 6px;
}

.mathpix-html-preview-area h5 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.mathpix-preview-frame {
  min-height: 200px;
  padding: 1rem;
  border-radius: 4px;
  overflow: auto;
}

.mathpix-docx-info {
  padding: 1.5rem;
  border-radius: 6px;
}

.delimiter-input-group {
  margin-top: 1rem;
}

.mathpix-docx-info p {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mathpix-pdf-final-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #00131d;
}

@media (max-width: 768px) {
  .mathpix-pdf-options,
  .mathpix-pdf-progress,
  .mathpix-pdf-results {
    padding: 1rem;
  }

  .mathpix-option-group {
    padding: 0.75rem;
  }

  .mathpix-option,
  .mathpix-format-checkbox,
  .mathpix-view-option {
    padding: 0.75rem;
  }

  .mathpix-view-options {
    grid-template-columns: 1fr;
  }

  .mathpix-tab-headers {
    flex-direction: column;
  }

  .mathpix-tab-header {
    border-radius: 0 !important;
    border-right: none;
    border-left: none;
  }

  .mathpix-tab-header:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
  }

  .mathpix-format-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .mathpix-format-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .mathpix-pdf-actions,
  .mathpix-pdf-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mathpix-process-btn,
  .mathpix-cancel-btn,
  .mathpix-process-another-btn,
  .mathpix-clear-results-btn {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .mathpix-view-options {
    grid-template-columns: 1fr 1fr;
  }

  .mathpix-tab-header {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mathpix-pdf-drop-zone,
  .mathpix-option,
  .mathpix-format-checkbox,
  .mathpix-view-option,
  .mathpix-process-btn,
  .mathpix-cancel-btn,
  .mathpix-tab-header,
  .mathpix-copy-btn,
  .mathpix-download-btn,
  .mathpix-preview-btn,
  .mathpix-process-another-btn,
  .mathpix-clear-results-btn {
    transition: none;
  }

  .mathpix-option:hover,
  .mathpix-format-checkbox:hover,
  .mathpix-view-option:hover,
  .mathpix-process-btn:hover,
  .mathpix-cancel-btn:hover,
  .mathpix-tab-header:hover,
  .mathpix-copy-btn:hover,
  .mathpix-download-btn:hover,
  .mathpix-preview-btn:hover,
  .mathpix-process-another-btn:hover,
  .mathpix-clear-results-btn:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .mathpix-option,
  .mathpix-format-checkbox,
  .mathpix-view-option,
  .mathpix-document-info,
  .mathpix-view-selection,
  .mathpix-results-tabs,
  .mathpix-html-preview-area,
  .mathpix-docx-info {
    border-width: 2px;
  }
}

@media print {
  .mathpix-pdf-progress,
  .mathpix-pdf-actions,
  .mathpix-format-actions,
  .mathpix-pdf-final-actions {
    display: none;
  }

  .mathpix-pdf-results {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mathpix-tab-panel {
    display: block !important;
  }

  .mathpix-tab-headers {
    display: none;
  }
}

/* Page-by-Page View Mode Navigation Controls */
.mathpix-page-navigation {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  padding: 0.75rem;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mathpix-page-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mathpix-nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mathpix-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mathpix-page-info {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 0.5rem;
  min-width: 80px;
  text-align: center;
}

.mathpix-view-selection {
  margin-bottom: 1rem;
}

.mathpix-view-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mathpix-view-option {
  flex: 1;
  min-width: 200px;
}

.mathpix-page-placeholder {
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
  font-style: italic;
}

#upload-instructions svg {
  vertical-align: middle; /* aligns with text baseline */
  margin-right: 0.5rem; /* space between icon and text */
}

.mathpix-process-confirm-btn svg {
  vertical-align: middle;
  margin-right: 5px;
}
.mathpix-process-btn svg {
  margin-top: 5px;
  vertical-align: middle;
  margin-right: 5px;
  /* space between icon and text */
}

@media (max-width: 768px) {
  .mathpix-page-controls {
    flex-direction: column;
    gap: 0.5rem;
  }

  .mathpix-nav-button {
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================
   MATHPIX STROKES CANVAS - TIER 1 COLOURS
   =========================================== */

/* High contrast support */
@media (prefers-contrast: high) {
  .mathpix-draw-canvas {
    border-width: 3px;
  }
}

/* Processing Options - Structure */
.mathpix-processing-options {
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.mathpix-processing-options legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 0.5rem;
}

.mathpix-option-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}

.mathpix-option-checkbox,
.mathpix-option-radio {
  margin-top: 0.15rem;
  cursor: pointer;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.mathpix-option-text {
  flex: 1;
  line-height: 1.4;
}

.mathpix-option-text code {
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.85em;
  white-space: nowrap;
}

.mathpix-option-description {
  font-size: 0.8rem;
  margin: 0.25rem 0 0.75rem 1.75rem;
  line-height: 1.3;
}

.mathpix-option-description code {
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

.mathpix-delimiter-format {
  border: none;
  padding: 0;
  margin: 0.5rem 0;
}

.mathpix-delimiter-format legend {
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0;
  margin-bottom: 0.5rem;
}

.mathpix-radio-label {
  margin-left: 0.5rem;
}

.mathpix-option-checkbox:focus,
.mathpix-option-radio:focus {
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .mathpix-processing-options {
    padding: 0.75rem;
  }

  .mathpix-option-label {
    font-size: 0.85rem;
  }

  .mathpix-option-description {
    margin-left: 1.5rem;
    font-size: 0.75rem;
  }
}

/* ===========================================
   FEATURE 4: DIAGRAM TEXT EXTRACTION LAYOUT
   =========================================== */

/* Main Section */
.mathpix-diagram-text-section {
  margin: 2rem 0;
  padding: 1rem;
  border-radius: 8px;
}

/* Toggle Button */
.mathpix-diagram-text-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
}

.mathpix-diagram-text-toggle:hover {
  transform: translateY(-1px);
}

.mathpix-diagram-text-toggle:active {
  transform: translateY(0);
}

.mathpix-diagram-text-toggle .toggle-icon {
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.mathpix-diagram-text-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

.mathpix-diagram-text-toggle .toggle-text {
  flex: 1;
}

.diagram-count {
  font-weight: 600;
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

/* Collapsible Content */
.mathpix-diagram-text-content {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 6px;
}

/* Intro Section */
.diagram-text-intro {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

.diagram-text-intro .help-text {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.diagram-text-intro svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Diagram List */
.mathpix-diagram-text-list {
  display: grid;
  gap: 1rem;
}

/* Diagram Card */
.diagram-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Card Header */
.diagram-card-header {
  padding: 1rem;
}

.diagram-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.diagram-card-title svg {
  flex-shrink: 0;
}

.diagram-page {
  font-weight: 500;
  font-size: 0.9rem;
}

.diagram-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.85rem;
}

.stat-label {
  font-weight: 500;
}

.stat-value {
  font-size: 1rem;
}

/* Card Content */
.diagram-card-content {
  padding: 0 1rem 1rem 1rem;
}

.text-elements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 4px;
}

.text-element {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Card Footer */
.diagram-card-footer {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Copy Button */
.diagram-copy-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.diagram-copy-btn:hover {
  transform: translateY(-1px);
}

.diagram-copy-btn svg {
  flex-shrink: 0;
}

/* Empty State */
.mathpix-diagram-text-empty {
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
  margin-top: 1rem;
}

.mathpix-diagram-text-empty p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 1rem;
  font-style: italic;
}

.mathpix-diagram-text-empty svg {
  opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mathpix-diagram-text-section {
    padding: 0.75rem;
    margin: 1rem 0;
  }

  .mathpix-diagram-text-toggle {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
  }

  .mathpix-diagram-text-content {
    padding: 0.85rem;
  }

  .diagram-card-header,
  .diagram-card-content,
  .diagram-card-footer {
    padding: 0.75rem;
  }

  .text-element {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
  }

  .diagram-copy-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .diagram-text-intro {
    padding: 0.75rem;
  }

  .diagram-text-intro .help-text {
    font-size: 0.85rem;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .mathpix-diagram-text-toggle,
  .diagram-card,
  .diagram-copy-btn {
    transition: none;
  }

  .mathpix-diagram-text-toggle:hover,
  .diagram-card:hover,
  .diagram-copy-btn:hover {
    transform: none;
  }

  .mathpix-diagram-text-toggle .toggle-icon {
    transition: none;
  }
}

/* Print Styles */
@media print {
  .mathpix-diagram-text-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mathpix-diagram-text-toggle {
    display: none;
  }

  .mathpix-diagram-text-content {
    display: block !important;
  }

  .diagram-copy-btn {
    display: none;
  }

  .diagram-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
  }
}

/* ============================================
   LAYOUT - Regional Endpoint Selection
   ============================================ */

.endpoint-selector {
  border: none;
  padding: 0;
  margin: 0;
}

.endpoint-options {
  display: flex;
  gap: 1rem;
}

.endpoint-option {
  padding: 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.endpoint-option input[type="radio"] {
  margin-right: 0.5rem;
}

.endpoint-option label {
  display: block;
  cursor: pointer;
}

.endpoint-location {
  display: block;
  font-size: 0.9rem;
  font-weight: normal;
  margin-top: 0.25rem;
}

.endpoint-description {
  font-size: 0.8rem;
  line-height: 1.5;
}
/* Format unavailable message - replaces title tooltip for better styling */
.format-unavailable-message {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* Ensure unavailable formats are visually distinct */
.format-unavailable {
  opacity: 0.6;
}

.format-unavailable .format-label {
  text-decoration: line-through;
}

.mathpix-status-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.5;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
}

.status-item-mp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0; /* Allow text truncation if needed */
}

/* Responsive layout - stack items on small screens */
@media (max-width: 600px) {
  .mathpix-status-indicator {
    flex-direction: column;
    gap: 0.5rem;
  }

  .status-item-mp {
    width: 100%;
  }
}

/* Print styles - hide status indicator */
@media print {
  .mathpix-status-indicator {
    display: none;
  }
}

/* ============================================================================
   MATHPIX HEADER ROW
   Container for mode switcher and status indicator
   ============================================================================ */

.mathpix-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  margin-bottom: 1rem;
}

/* Mode switcher takes available space */
.mathpix-header-row .mathpix-mode-switcher {
  flex: 1 1 auto;
  min-width: 280px; /* Ensure it doesn't get too narrow */
  margin: 0; /* Remove default margin since container handles spacing */
}

/* Status indicator aligns to the right when space allows */
.mathpix-header-row .mathpix-status-indicator {
  flex: 0 1 auto;
  margin: 0; /* Remove default margin since container handles spacing */
}

/* Stack vertically on smaller screens */
@media (max-width: 768px) {
  .mathpix-header-row {
    flex-direction: column;
  }

  .mathpix-header-row .mathpix-mode-switcher,
  .mathpix-header-row .mathpix-status-indicator {
    width: 100%;
  }
}
/* Debug panel */

@media (prefers-contrast: high) {
  .mathpix-debug-panel {
    border-width: 2px;
  }

  .debug-code-container .code-copy-button {
    border-width: 2px;
  }
}

/* Structural/Layout Properties */
.mathpix-debug-panel {
  margin-top: 2rem;
  border-radius: 8px;
}

.debug-panel-summary {
  padding: 1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.debug-panel-summary:focus {
  outline-offset: -2px;
}

.debug-panel-content {
  padding: 1.5rem;
}

.debug-section {
  margin-bottom: 2rem;
}

.debug-section:last-child {
  margin-bottom: 0;
}

.debug-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.debug-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.debug-stats dt {
  font-weight: 600;
}

.debug-stats dd {
  margin: 0;
  font-family: "Courier New", monospace;
}

.confidence-high {
  font-weight: 600;
}

.confidence-medium {
  font-weight: 600;
}

.confidence-low {
  font-weight: 600;
}

.debug-code-container {
  position: relative;
  margin-top: 0.75rem;
}

.debug-code-container .code-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.debug-code-container .code-copy-button:focus {
  outline-offset: 2px;
}

.debug-code-container pre {
  max-height: 400px;
  overflow: auto;
  margin: 0;
  padding: 1rem;
  padding-top: 3rem;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.debug-code-container code {
  font-family: "Courier New", monospace;
}

@media (max-width: 768px) {
  .debug-stats {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .debug-stats dt {
    margin-top: 0.75rem;
  }

  .debug-stats dt:first-child {
    margin-top: 0;
  }

  .debug-code-container pre {
    max-height: 300px;
    font-size: 0.8rem;
  }

  .debug-panel-content {
    padding: 1rem;
  }

  .debug-section {
    margin-bottom: 1.5rem;
  }
}

@media (prefers-contrast: high) {
  .debug-panel-summary {
    font-weight: 700;
  }
}

@media print {
  .mathpix-debug-panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .debug-panel-summary {
    display: none;
  }

  .debug-panel-content {
    display: block !important;
  }

  .debug-code-container .code-copy-button {
    display: none;
  }

  .debug-code-container pre {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .debug-panel-summary:hover,
  .debug-code-container .code-copy-button {
    transition: none;
  }
}

/* Hide canvas size buttons when viewport is too small */

#mathpix-fit-to-width-btn {
  display: none;
}

/* Hide Extra Large (1000×500) below 1100px width */
@media (max-width: 1099px) {
  #mathpix-draw-xlarge-canvas-btn {
    display: none;
  }
}

/* Hide Large (800×400) below 900px width */
@media (max-width: 899px) {
  #mathpix-draw-large-canvas-btn {
    display: none;
  }
}

/* Hide Medium (600×300) below 700px width */
@media (max-width: 699px) {
  #mathpix-draw-medium-canvas-btn {
    display: none;
  }
}

/* Hide Small (400×200) below 500px width */
@media (max-width: 499px) {
  #mathpix-draw-small-canvas-btn {
    display: none;
  }
}

/* Custom Size button handling */
@media (max-width: 499px) {
  #mathpix-custom-size-btn {
    /* Keep visible but consider adding warning in the custom size modal */
    display: block;
  }
}
/* ============================================
   CANVAS SIZE CONTROLS - RESPONSIVE VISIBILITY
   ============================================ */

/* Hide individual size buttons based on viewport constraints */
/* (Your existing media queries for hiding xlarge, large, medium, small) */

/* Hide the entire canvas size control fieldset when only one option remains visible */

/* When only Small (400×200) is visible (viewport < 700px width) */
@media (max-width: 699px) {
  #mathpix-draw-small-canvas-btn {
    display: none;
  }
}

/* Tool Selection Radio Buttons - Shared Styles */
#toolSelection,
.mathpix-mode-switcher,
.mathpix-status-indicator {
  border-radius: 4px;
}

#toolSelection legend,
.mathpix-mode-switcher legend {
  font-weight: 600;
  font-size: 1rem;
}

/* Default layout: inline radio buttons for #toolSelection */
#toolSelection input[type="radio"] {
  margin-right: 0.5rem;
  margin-left: 1rem;
}

#toolSelection input[type="radio"]:first-of-type {
  margin-left: 0;
}

#toolSelection label.radio {
  margin-right: 1rem;
  display: inline;
}

/* Default layout for .mathpix-mode-options (horizontal) */
.mathpix-mode-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mathpix-mode-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.mathpix-mode-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.mathpix-mode-option .mode-icon {
  flex-shrink: 0;
}

.mathpix-mode-option .mode-label {
  white-space: nowrap;
}

/* Mobile/Small viewport: stack radio buttons vertically */
@media (max-width: 640px) {
  /* #toolSelection styles */
  #toolSelection {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
  }

  #toolSelection legend {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  #toolSelection input[type="radio"] {
    margin: 0;
    justify-self: start;
  }

  #toolSelection label.radio {
    margin: 0;
    justify-self: start;
  }

  /* .mathpix-mode-switcher styles */
  .mathpix-mode-options {
    flex-direction: column;
    gap: 0.75rem;
  }

  .mathpix-mode-option {
    justify-content: flex-start;
  }
}

/* ============================================================================
   Phase 1D: Camera Capture Styling
   ============================================================================ */

/* Camera Container */
.mathpix-camera-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Disabled Button State */
.mathpix-camera-controls .mathpix-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Button Icons */
.mathpix-camera-controls .button-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Camera Info Text */
.mathpix-camera-info {
  margin-top: 0.5rem;
}

.mathpix-camera-info .info-text {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;

  border: 1px solid currentcolor;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;

  margin: 0;
}

.mathpix-camera-info .info-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Responsive Design - Mobile Optimizations */
@media (max-width: 640px) {
  .mathpix-camera-wrapper {
    gap: 1rem;
  }

  .mathpix-camera-controls {
    flex-direction: column;
    width: 100%;
  }

  .mathpix-camera-controls .mathpix-button {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    font-size: 1rem;
  }

  #mathpix-camera-video {
    min-height: 240px;
  }

  .mathpix-camera-status {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
  }

  .mathpix-camera-info .info-text {
    font-size: 0.8125rem;
    padding: 0.75rem;
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  .mathpix-camera-controls {
    justify-content: space-between;
  }

  .mathpix-camera-controls .mathpix-button {
    flex: 1 1 auto;
    min-width: 140px;
  }
}

/* Animation for camera activation */
@keyframes camera-activate {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#mathpix-camera-video[src]:not([src=""]) {
  animation: camera-activate 0.3s ease-out;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mathpix-camera-controls .mathpix-button {
    border-width: 2px;
  }

  .mathpix-camera-info .info-text {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mathpix-camera-controls .mathpix-button,
  #mathpix-camera-video {
    transition: none;
    animation: none;
  }

  .mathpix-camera-controls .mathpix-button:hover:not(:disabled) {
    transform: none;
  }
}

/* Camera Controls Layout */
.mathpix-camera-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Camera Buttons - Match existing MathPix button styles */
.mathpix-camera-controls .mathpix-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#mathpix-camera-status-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Camera Status Indicator */
.mathpix-camera-status {
  position: absolute;
  top: 1rem;
  left: 1rem;

  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10;
}

/* Mirror Wrapper - CRITICAL: CSS Mirroring for Natural UX */
.mathpix-camera-mirror-wrapper {
  width: 100%;
  height: 100%;

  /* Phase 1E: Default mirrored for natural front-facing camera UX */
  /* Phase 1F: Transform controlled by toggleMirror() method */
  /* Applied to wrapper instead of video for browser compatibility */
  transform: scaleX(-1);
}

/* Video Element */
#mathpix-camera-video {
  width: 100%;
  height: auto;
  display: block;
  min-height: 300px;
  max-height: 600px;
  object-fit: contain;

  /* CRITICAL: Hardware acceleration for smooth video performance */
  will-change: transform, contents;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  /* Optimize rendering performance */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Video Preview Container */
.mathpix-camera-preview {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Phase 4: File Confirmation Card Styling */
.file-info-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid currentcolor;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.file-icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.file-details {
  flex: 1;
  min-width: 0;
  /* Allows text truncation */
}
.file-name {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: currentcolor;
  word-break: break-word;
}
.file-meta {
  margin: 0;
  font-size: 0.875rem;
}
.file-meta span {
  white-space: nowrap;
}
/* SVG icon styling */
.file-icon svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  stroke: currentColor;
}

/* Description list layout for status indicators */
.mathpix-status-indicator .status-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mathpix-status-indicator .status-item-mp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mathpix-status-indicator .status-term {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: normal;
  margin: 0;
}
.mathpix-status-indicator dd.status-value {
  font-weight: bold;
  margin: 0;
}
.mathpix-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.mathpix-header-row .mathpix-mode-switcher {
  flex: 1 1 auto;
  min-width: 280px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mathpix-mode-switcher .mathpix-mode-options {
  display: flex;
  vertical-align: middle;
}
.mathpix-mode-option {
  padding-top: 7px;
}
.mathpix-header-row .mathpix-status-indicator {
  flex: 1 1 auto;
  min-width: 300px;
  margin: 0;
}
/* Description list layout for status indicators */
.mathpix-status-indicator .status-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.mathpix-status-indicator .status-item-mp {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.mathpix-status-indicator .status-term {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: normal;
  margin: 0;
}
.mathpix-status-indicator dd.status-value {
  font-weight: bold;
  margin: 0;
  margin-left: 0.25rem;
}
/* Responsive: stack status items on very small screens */
@media (max-width: 640px) {
  .mathpix-status-indicator .status-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}
.mathpix-header-row .mathpix-mode-switcher,
.mathpix-header-row .mathpix-status-indicator {
  min-height: 3.5rem;
}

/* ============================================
   MATHPIX FORMAT TABS - ARIA TABS PATTERN
   ============================================ */

/* Tab list container */
.mathpix-format-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Tab buttons - base styles */
.mathpix-format-tab {
  padding: 0.75rem 1rem;
  border: 2px solid;
  border-radius: 6px 6px 0 0;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  min-width: 150px;
}

.mathpix-format-tab .format-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mathpix-format-tab .format-label {
  font-weight: 600;
  font-size: 1rem;
}

.mathpix-format-tab .format-description {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Selected tab state */
.mathpix-format-tab[aria-selected="true"],
.mathpix-format-tab.selected {
  border-bottom: 3px solid;
  font-weight: 600;
}

/* Focus state */
.mathpix-format-tab:focus {
  outline: 3px solid;
  outline-offset: 2px;
}

/* Hover state */
.mathpix-format-tab:hover:not([aria-disabled="true"]) {
  transform: translateY(-2px);
}

/* Disabled/unavailable tabs */
.mathpix-format-tab[aria-disabled="true"],
.mathpix-format-tab.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 768px) {
  .mathpix-format-tabs {
    flex-direction: column;
  }

  .mathpix-format-tab {
    width: 100%;
  }
}
/* ============================================
   MATHPIX FORMAT TABS - ARIA TABS PATTERN
   ============================================ */

/* Navigation wrapper */
.mathpix-format-selection-nav {
  /* margin-bottom: 1.5rem;*/
}

/* Tab list container */
.mathpix-format-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0;
  border-bottom: 2px solid currentcolor;
  margin-bottom: 0;
}

/* Tab buttons - base styles */
.mathpix-format-tab {
  padding: 0.75rem 1rem;
  border: 2px solid currentcolor;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: currentcolor;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  min-width: 140px;
  position: relative;
  margin-bottom: -2px;
}

.mathpix-format-tab .format-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mathpix-format-tab .format-label {
  font-weight: 600;
  font-size: 1rem;
}

.mathpix-format-tab .format-description {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Selected tab state - stands out with bottom border that "connects" to content */
.mathpix-format-tab[aria-selected="true"],
.mathpix-format-tab.selected {
  border-bottom: 3px solid transparent;
  background: rgba(128, 128, 128, 0.1);
  z-index: 1;
}

.mathpix-format-tab[aria-selected="true"] .format-label,
.mathpix-format-tab.selected .format-label {
  font-weight: 700;
}

.mathpix-format-tab[aria-selected="true"] .format-description,
.mathpix-format-tab.selected .format-description {
  opacity: 1;
}

/* Focus state - clear keyboard focus indicator */
.mathpix-format-tab:focus {
  outline: 3px solid currentcolor;
  outline-offset: -3px;
  z-index: 2;
}

/* Hover state */
.mathpix-format-tab:hover:not([aria-disabled="true"]):not(
    [aria-selected="true"]
  ) {
  background: rgba(128, 128, 128, 0.05);
  transform: translateY(-2px);
}

/* Disabled/unavailable tabs */
.mathpix-format-tab[aria-disabled="true"],
.mathpix-format-tab.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hidden tabs (no content available) */
.mathpix-format-tab[style*="display: none"] {
  display: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .mathpix-format-tabs {
    flex-direction: column;
    border-bottom: none;
  }

  .mathpix-format-tab {
    width: 100%;
    border: 2px solid currentcolor;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  .mathpix-format-tab[aria-selected="true"],
  .mathpix-format-tab.selected {
    border: 3px solid currentcolor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mathpix-format-tab {
    transition: none;
  }

  .mathpix-format-tab:hover:not([aria-disabled="true"]) {
    transform: none;
  }
}