/* =========================================================
   NineClip Tools — Tool Interface Widgets
   In-tool UI: dropzone, options, results, preview, code,
   color pickers, range sliders, file list
   ========================================================= */

.tool-ui { display: flex; flex-direction: column; gap: var(--space-5); }
.tool-ui h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }

/* File list */
.file-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.file-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.file-item .file-thumb {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--color-primary-600);
  flex-shrink: 0;
}
.file-item .file-info { flex: 1; min-width: 0; }
.file-item .file-info .file-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .file-info .file-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }
.file-item .file-actions { display: flex; gap: var(--space-1); }
.file-item .file-actions button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-tertiary); }
.file-item .file-actions button:hover { background: var(--bg-surface); color: var(--color-danger); }
.file-item .file-progress { height: 4px; background: var(--bg-soft-2); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.file-item .file-progress-bar { height: 100%; background: var(--grad-primary); border-radius: 2px; transition: width var(--dur-base) var(--ease-out); }

/* Range slider */
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.range-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 6px;
  background: var(--bg-soft-2);
  border-radius: var(--radius-full);
  outline: none;
}
.range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  background: var(--color-primary-600);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out);
}
.range-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-row input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--color-primary-600); border: 3px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-md); }
.range-row .range-value { min-width: 56px; text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Checkbox / radio */
.check-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--color-primary-600); }

/* Color swatch grid */
.color-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--space-3); }
.color-swatch {
  cursor: pointer; padding: var(--space-2);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); transition: all var(--dur-fast) var(--ease-out);
  text-align: center;
}
.color-swatch:hover { border-color: var(--color-primary-400); transform: translateY(-2px); }
.color-swatch .swatch-color { height: 60px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); border: 1px solid var(--border-soft); }
.color-swatch .swatch-label { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }

/* Code block with copy */
.code-block {
  position: relative;
  background: var(--bg-inverse);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}
.code-block pre { background: transparent; padding: 0; margin: 0; color: #E2E8F0; }
.code-block .copy-btn {
  position: absolute; top: var(--space-2); right: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  display: inline-flex; align-items: center; gap: 4px;
  transition: background var(--dur-fast);
}
.code-block .copy-btn:hover { background: rgba(255,255,255,0.18); }
.code-block .copy-btn svg { width: 14px; height: 14px; }

/* Result preview */
.result-preview {
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}
.result-preview img { max-width: 100%; border-radius: var(--radius-md); margin: 0 auto; }
.result-preview .download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.result-preview .download-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-soft); border-radius: var(--radius-md);
  text-decoration: none; color: inherit;
  transition: all var(--dur-fast) var(--ease-out);
}
.result-preview .download-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Inline output */
.output-area {
  width: 100%;
  padding: var(--space-4);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  min-height: 120px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
}

/* Image canvas / preview area */
.canvas-wrap {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.canvas-wrap canvas { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.canvas-wrap .checkerboard {
  background-image:
    linear-gradient(45deg, var(--bg-soft-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-soft-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-soft-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-soft-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* Two-pane layout for some tools */
.tool-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .tool-split { grid-template-columns: 1fr; } }

/* Inline toast / status messages inside tool */
.tool-status {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.tool-status.info { background: rgba(59,130,246,.08); color: var(--color-primary-700); }
.tool-status.success { background: rgba(16,185,129,.08); color: var(--color-success); }
.tool-status.warning { background: rgba(245,158,11,.08); color: var(--color-warning); }
.tool-status.error { background: rgba(239,68,68,.08); color: var(--color-danger); }

/* Options panel */
.options-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}
.options-panel .option { display: flex; flex-direction: column; gap: var(--space-2); }
.options-panel label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }

/* Progress bar */
.progress-bar { height: 6px; background: var(--bg-soft-2); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar .progress-fill { height: 100%; background: var(--grad-primary); border-radius: inherit; transition: width var(--dur-base) var(--ease-out); }

/* Pill list (selected options) */
.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-3);
  background: var(--color-primary-50); color: var(--color-primary-700);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.pill button { color: inherit; opacity: 0.7; }
.pill button:hover { opacity: 1; }

/* Drag handle for sortable items */
.sortable-item { cursor: grab; user-select: none; }
.sortable-item:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); }

/* CropperJS container overrides */
.cropper-container { max-width: 100%; max-height: 480px; }