/* Aspect Grid Visualizer Styles */
.aspect-preset-btn {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  border: 1px solid var(--border-mid);
  background: rgba(14, 13, 11, 0.4);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.aspect-preset-btn:hover:not(.active) {
  background: rgba(200, 145, 42, 0.08);
  border-color: rgba(200, 145, 42, 0.4);
}
.aspect-preset-btn.active {
  background: rgba(200, 145, 42, 0.15) !important;
  border-color: var(--da-accent) !important;
  box-shadow: 0 0 10px var(--da-accent-glow);
}
.aspect-preset-btn.active span {
  border-color: var(--da-accent) !important;
  color: var(--da-accent) !important;
}

/* Mobile Overrides */
@media (max-width: 768px) {
  /* Fix the preview-canvas container's height and aspect-ratio on mobile */
  #aspectTool .preview-canvas {
    aspect-ratio: auto !important;
    min-height: 300px !important;
    padding: 1.25rem 1rem !important;
  }

  /* Canvas bounding box: keep it at 220px to match JS maxCanvasSize and prevent overflow */
  #aspectCanvasInner {
    width: 220px !important;
    height: 220px !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto;
  }

  /* Preset button grid: 2-column grid with a tight gap */
  #aspectPresetsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
  }

  /* Make preset buttons more compact and touch-friendly */
  .aspect-preset-btn {
    padding: 0.4rem 0.25rem !important;
    min-height: 52px !important;
    width: 100% !important;
  }

  /* Tighten spacing of the visual ratio indicators inside preset buttons */
  .aspect-preset-btn span:first-child {
    margin-top: 0 !important;
    margin-bottom: 0.2rem !important;
  }

  /* Force send button to be full width on mobile for easy access */
  #sendAspectToBuilderBtn {
    width: 100% !important;
    margin-top: 0.5rem;
    text-align: center;
  }

  /* Align copy feedback properly on mobile */
  #aspectCopyFeedback {
    width: 100%;
    text-align: center;
    margin-bottom: 0.25rem;
  }
}