/* ===== Responsive / Mobile ===== */

@media (max-width: 768px) {
  :root {
    --header-h: 52px;
    --footer-h: 56px;
  }

  /* Stack panes vertically */
  .workspace {
    flex-direction: column;
  }

  .pane-input {
    flex: 0 0 auto;
    max-height: 45vh;
    min-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .pane-preview {
    flex: 1;
    min-height: 0;
  }

  .resize-handle {
    width: 100%;
    height: 4px;
    cursor: row-resize;
  }

  /* Compact header */
  .brand-subtitle { display: none; }

  .brand-title { font-size: 15px; }

  .header-actions .btn-primary span { display: none; }

  /* Footer stacks */
  .app-footer {
    flex-direction: column;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }

  .footer-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Smaller buttons in footer */
  .footer-actions .btn {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Modal full width */
  .modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 48px);
  }

  /* Preview padding */
  .preview-raw,
  .preview-rendered {
    padding: 12px 14px;
  }

  /* Drop zone compact */
  .drop-zone {
    padding: 20px 16px;
    margin: 8px;
  }

  .drop-icon { width: 32px; height: 32px; }
  .drop-title { font-size: 14px; }
}

@media (max-width: 480px) {
  /* Hide Download All on very small screens */
  #btn-download-all { display: none; }

  .view-toggle { display: none; }

  .footer-actions { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-color-scheme: light) {
  /* Keep dark by default; users can override via settings in future */
}