/* ── Responsive: Mobile / Narrow Screens ──────────────── */
@media (max-width: 768px) {
  /* Ribbon scrolls horizontally on mobile */
  .ribbon-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ribbon-bar::-webkit-scrollbar { display: none; }
  .ribbon-group { padding: 0.375rem 0.5rem; }
  .ribbon-sep-v { display: none; }
  .ribbon-label { font-size: 0.5rem; padding-top: 2px; }
  .ribbon-row { gap: 3px; }
  .ribbon-bar .tool-btn { padding: 3px 5px; font-size: 0.65rem; }
  .ribbon-bar .input-field { padding: 3px 4px; font-size: 0.65rem; }
  .ribbon-bar .select-field { padding: 2px 16px 2px 4px; font-size: 0.65rem; }
  .ribbon-bar .btn-primary { padding: 3px 8px; font-size: 0.65rem; }
  .ribbon-bar .range-value { font-size: 0.6rem; min-width: 1rem; }
  .ribbon-mini-label { font-size: 0.55rem; min-width: 10px; }

  /* Tool ribbon: horizontal scroll on mobile instead of wrapping tall */
  .tool-ribbon {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 6px;
    padding: 0.375rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tool-ribbon::-webkit-scrollbar { display: none; }
  .tool-ribbon .ribbon-title { font-size: 0.6rem; white-space: nowrap; }
  .tool-ribbon .ribbon-sep { height: 18px; flex-shrink: 0; }
  .tool-ribbon .tool-btn { padding: 4px 8px; font-size: 0.65rem; white-space: nowrap; flex-shrink: 0; }
  .tool-ribbon .btn-primary { padding: 4px 10px; font-size: 0.65rem; white-space: nowrap; flex-shrink: 0; }
  .tool-ribbon .select-field { padding: 3px 18px 3px 6px; font-size: 0.65rem; flex-shrink: 0; }
  .tool-ribbon .input-field { padding: 3px 4px; font-size: 0.65rem; flex-shrink: 0; }
  .tool-ribbon .range-input { width: 70px; flex-shrink: 0; }
  .tool-ribbon .range-value { font-size: 0.6rem; flex-shrink: 0; }
  .tool-ribbon .toggle-chip { font-size: 0.6rem; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; }
  .tool-ribbon label { white-space: nowrap; flex-shrink: 0; }
  .tool-ribbon > span { white-space: nowrap; flex-shrink: 0; }

  /* Topbar compact */
  .topbar { padding: 0.375rem 0.5rem; height: 40px; }
  .topbar-left { gap: 0.25rem; }
  .topbar-right { gap: 0.25rem; }
  .back-btn { padding: 3px 6px 3px 4px; font-size: 0.6rem; }
  .lib-btn { padding: 3px 8px; font-size: 0.6rem; }

  /* Home grid: 2 columns on mobile */
  .home-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .home-card { padding: 0.75rem 0.5rem; }
  .home-card-title { font-size: 0.8rem; }
  .home-card-desc { font-size: 0.6rem; }
  .home-card-icon { width: 32px; height: 32px; margin-bottom: 0.5rem; }

  /* Quick actions wrap */
  .quick-actions-row { gap: 4px; }
  .qa-btn { padding: 4px 8px; font-size: 0.6rem; }

  /* Work area: full width */
  .work-area canvas { max-width: 95%; max-height: 80%; }
  .dropzone { padding: 1.5rem 1rem; }

  /* Hint bar compact */
  .home-hint-bar { padding: 4px 10px; min-height: 28px; }
  .home-hint-bar .hint-name { font-size: 0.65rem; }
  .home-hint-bar .hint-tips { font-size: 0.6rem; }

  /* Convert file list narrower */
  #convert-file-list { width: 140px; }
}

@media (max-width: 480px) {
  /* Extra small: single column grid, stacked layout */
  .home-grid { grid-template-columns: 1fr; }
  .ribbon-bar { padding: 0.125rem 0; }
  .ribbon-group { padding: 0.25rem 0.375rem; }
  .topbar { height: 36px; }

  /* Tool ribbon: tighter, hide decorative elements */
  .tool-ribbon { gap: 4px; padding: 0.25rem 0.375rem; }
  .tool-ribbon .ribbon-sep { display: none; }
  .tool-ribbon .ribbon-title { display: none; }
  .tool-ribbon .tool-btn { font-size: 0.6rem; padding: 3px 6px; }
  .tool-ribbon .btn-primary { font-size: 0.6rem; padding: 3px 8px; }

  /* Hide non-essential topbar items */
  #btn-tour, #btn-help-page, #btn-shortcuts, #btn-ribbon-customize { display: none; }

  /* Full-width file list */
  #convert-file-list { width: 100%; max-height: 120px; border-right: none; border-bottom: 1px solid var(--slate-800); }
}

/* ── PWA Mode: hide extension-only features ───────────── */
.pwa-mode #btn-tour { display: none; }
.pwa-mode .lib-btn { display: none; } /* Library uses IndexedDB — keep if available */
.pwa-mode #qa-screenshot,
.pwa-mode #sp-qa-screenshot,
.pwa-mode #sp-qa-region,
.pwa-mode #pqa-screenshot,
.pwa-mode #pqa-region,
.pwa-mode #pqa-color { display: none; }

/* PWA: show library if IndexedDB available (it is in PWA) */
.pwa-mode .lib-btn { display: flex; }

/* ── Touch-friendly: larger tap targets ───────────────── */
@media (pointer: coarse) {
  .tool-btn { min-height: 32px; min-width: 32px; }
  .format-btn { min-height: 32px; padding: 4px 10px; }
  .ribbon-bar .select-field { min-height: 30px; }
  .ribbon-bar .input-field { min-height: 30px; }
  .ribbon-bar input[type="range"] { height: 20px; }
  .tool-ribbon .tool-btn { min-height: 30px; min-width: unset; padding: 4px 10px; }
  .tool-ribbon .btn-primary { min-height: 30px; padding: 4px 12px; }
  .tool-ribbon .select-field { min-height: 30px; }
  .tool-ribbon .input-field { min-height: 30px; }
  .tool-ribbon .toggle-chip { min-height: 28px; padding: 4px 10px; }
  .qa-btn { padding: 8px 12px; }
  .home-card { padding: 1rem 0.75rem; }
  .dropzone { padding: 2rem 1.5rem; }
  .lm-ctx-item { padding: 10px 14px; }

  /* Larger resize handles */
  .img-resize-handle { width: 16px !important; height: 16px !important; }

  /* Prevent long-press context menu on canvas */
  canvas { -webkit-touch-callout: none; touch-action: none; }
}

/* Spinner animation */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Convert tool responsive ──────────────────────────── */
@media (max-width: 768px) {
  /* Actions bar: wrap buttons */
  #convert-actions-bar { flex-wrap: wrap; gap: 4px; padding: 5px 8px; }
  #convert-actions-bar button { padding: 5px 10px; font-size: 0.65rem; }

  /* File panel: bottom strip instead of left column */
  #convert-file-panel {
    width: 100% !important;
    max-height: 140px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--slate-800);
    flex-direction: row !important;
  }
  #convert-file-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px;
    padding: 4px 6px !important;
  }
  #convert-file-list > div {
    flex-shrink: 0 !important;
    width: 120px !important;
    min-width: 120px !important;
  }

  /* Preview: stack vertically */
  #convert-preview > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
  }
  #convert-img { max-width: 80vw !important; max-height: 35vh !important; }
  #convert-output-box { max-width: 80vw !important; }

  /* Custom panel: full width */
  #cvt-custom-panel { max-width: 100% !important; }

  /* Work area: stack not row */
  #mode-convert .work-area { flex-direction: column !important; }
}

@media (max-width: 480px) {
  #convert-actions-bar button { padding: 4px 8px; font-size: 0.6rem; }
  #convert-file-panel { max-height: 100px !important; }
  #convert-img { max-width: 90vw !important; max-height: 30vh !important; }

  /* Hide less important action buttons */
  #btn-convert-clear-sel { display: none; }
}

/* Convert preview overlay responsive */
@media (max-width: 768px) {
  #convert-preview-overlay > div { margin: 0.5rem; border-radius: 8px; }
  #convert-preview-overlay > div > div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.75rem !important;
    gap: 1rem !important;
  }
  #convert-preview-overlay > div > div:last-child > div {
    max-width: 90vw !important;
    min-width: unset !important;
  }
  #convert-img { max-width: 85vw !important; max-height: 35vh !important; }
  #convert-output-box { max-width: 85vw !important; }
}

/* Convert table responsive */
@media (max-width: 768px) {
  #convert-table-wrap { overflow-x: auto; }
  #convert-table { min-width: 500px; }
  #convert-table th, #convert-table td { padding: 5px 3px; }
}

@media (max-width: 480px) {
  /* Hide less critical columns on very small screens */
  #convert-table th:nth-child(5),
  #convert-table td:nth-child(5) { display: none; } /* Resolution */
  #convert-table th:nth-child(6),
  #convert-table td:nth-child(6) { display: none; } /* Arrow */
  #convert-table th:nth-child(8),
  #convert-table td:nth-child(8) { display: none; } /* Size */
  #convert-table { min-width: unset; }
}