/* ===================================================================
   Media Processing UI Components
   =================================================================== */

/* View toggle buttons */
.mp-view-btn { color: var(--text-muted); background: transparent; transition: all 150ms; }
.mp-view-btn:hover { color: var(--text-primary); background: var(--surface-tertiary); }
.mp-view-active { color: var(--brand-400); background: rgba(108,92,231,0.1); }

/* Asset card */
.mp-asset-card { cursor: pointer; border-radius: var(--radius-lg); transition: all 150ms; padding: 4px; }
.mp-asset-card:hover { background: var(--surface-tertiary); }
.mp-asset-selected { background: rgba(108,92,231,0.08) !important; outline: 2px solid var(--brand-500); outline-offset: -2px; border-radius: var(--radius-lg); }

/* Checkbox */
.mp-checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; transition: all 150ms; cursor: pointer; }
.mp-checkbox-active { background: var(--brand-500) !important; border-color: var(--brand-500) !important; }
.mp-checkbox-sm { width: 16px; height: 16px; border-radius: 4px; border-width: 1.5px; border-color: var(--border-subtle); background: var(--surface-tertiary); }

/* Type badges */
.mp-type-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 4px; }
.mp-type-panorama { background: rgba(236,72,153,0.15); color: #EC4899; }
.mp-type-image { background: rgba(59,130,246,0.15); color: #3B82F6; }
.mp-type-video { background: rgba(239,68,68,0.15); color: #EF4444; }
.mp-type-audio { background: rgba(16,185,129,0.15); color: #10B981; }
.mp-type-document { background: rgba(107,114,128,0.15); color: #6B7280; }
.mp-type-model_3d { background: rgba(168,85,247,0.15); color: #A855F7; }
.mp-type-file { background: var(--surface-tertiary); color: var(--text-muted); }

/* Status badges */
.mp-status-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.mp-status-ready { background: rgba(34,197,94,0.1); color: #22C55E; }
.mp-status-processing { background: rgba(250,204,21,0.1); color: #FACC15; }
.mp-status-queued { background: rgba(59,130,246,0.1); color: #3B82F6; }
.mp-status-completed { background: rgba(34,197,94,0.1); color: #22C55E; }
.mp-status-failed { background: rgba(239,68,68,0.1); color: #EF4444; }
.mp-status-cancelled { background: rgba(107,114,128,0.1); color: #6B7280; }

/* Quick action buttons */
.mp-quick-action { padding: 6px; border-radius: 8px; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); color: #fff; transition: all 150ms; }
.mp-quick-action:hover { background: rgba(0,0,0,0.7); transform: scale(1.05); }

/* Processing indicator */
.mp-processing-indicator { padding: 4px; border-radius: 6px; background: rgba(250,204,21,0.2); backdrop-filter: blur(8px); color: #FACC15; }

/* Batch buttons */
.mp-batch-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-primary); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.06); transition: all 150ms; white-space: nowrap; }
.mp-batch-btn:hover { background: rgba(255,255,255,0.14); }
.mp-batch-btn-danger { color: #FCA5A5; }
.mp-batch-btn-danger:hover { background: rgba(239,68,68,0.2); }

/* Info cells in detail panel */
.mp-info-cell { padding: 8px 10px; border-radius: 8px; background: var(--surface-tertiary); }
.mp-info-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 2px; }
.mp-info-value { font-size: 13px; font-weight: 500; color: var(--text-primary); }

/* Tool section labels */
.mp-tool-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); padding: 4px 0; }

/* Tool buttons */
.mp-tool-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; transition: all 150ms; text-align: left; background: none; border: none; cursor: pointer; }
.mp-tool-btn:hover { background: var(--surface-tertiary); }
.mp-tool-btn-danger:hover { background: rgba(239,68,68,0.08) !important; }
.mp-tool-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-tool-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.mp-tool-desc { font-size: 11px; color: var(--text-muted); }

/* Job card */
.mp-job-card { padding: 10px 12px; border-radius: 10px; background: var(--surface-tertiary); }
.mp-job-card + .mp-job-card { margin-top: 6px; }

/* Progress bar */
.mp-progress-bar { height: 3px; border-radius: 3px; background: var(--surface-primary); overflow: hidden; }
.mp-progress-fill { height: 100%; border-radius: 3px; }
.mp-progress-queued { width: 100%; background: var(--brand-500); opacity: 0.3; animation: mp-pulse 2s ease-in-out infinite; }
.mp-progress-active { width: 60%; background: var(--brand-500); animation: mp-indeterminate 1.5s ease-in-out infinite; }
@keyframes mp-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes mp-indeterminate { 0% { width: 20%; margin-left: 0; } 50% { width: 60%; margin-left: 20%; } 100% { width: 20%; margin-left: 80%; } }

/* List view rows */
.mp-list-row:hover { background: var(--surface-tertiary); }
.mp-list-row-selected { background: rgba(108,92,231,0.08) !important; }

/* Batch toolbar gradient */
.mp-batch-bar { background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(108,92,231,0.08)); border: 1px solid rgba(108,92,231,0.3); }

/* Pagination */
.mp-page-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--surface-tertiary); transition: all 150ms; text-decoration: none; white-space: nowrap; }
.mp-page-btn:hover { color: var(--text-primary); background: var(--surface-hover, var(--surface-tertiary)); }
.mp-page-active { color: #fff !important; background: var(--brand-500) !important; pointer-events: none; }

/* Modal backdrop */
.mp-modal-backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.mp-modal-content { background: var(--surface-secondary); border: 1px solid var(--border-subtle); }

/* ===================================================================
   Tool Panel — Interactive Controls
   =================================================================== */

/* Back button */
.mp-tool-back-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-tertiary); color: var(--text-muted); transition: all 150ms; flex-shrink: 0; border: none; cursor: pointer; }
.mp-tool-back-btn:hover { background: var(--surface-primary); color: var(--text-primary); }

/* Tool controls container */
.mp-tool-controls { display: flex; flex-direction: column; gap: 6px; }

/* Slider labels */
.mp-slider-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 4px; }
.mp-slider-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); font-size: 12px; min-width: 36px; text-align: right; }

/* Range slider */
.mp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--surface-primary); outline: none; cursor: pointer; margin: 2px 0; }
.mp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-400); border: 2px solid var(--surface-secondary); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 100ms; }
.mp-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.mp-range::-webkit-slider-thumb:active { transform: scale(1.25); background: var(--brand-300); }
.mp-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand-400); border: 2px solid var(--surface-secondary); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.mp-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--surface-primary); }

/* Select */
.mp-select { width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-primary); background: var(--surface-tertiary); border: 1px solid var(--border-subtle); outline: none; cursor: pointer; transition: border-color 150ms; }
.mp-select:focus { border-color: var(--brand-400); }

/* Text input */
.mp-text-input { width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 12px; color: var(--text-primary); background: var(--surface-tertiary); border: 1px solid var(--border-subtle); outline: none; transition: border-color 150ms; }
.mp-text-input:focus { border-color: var(--brand-400); }
.mp-text-input::placeholder { color: var(--text-muted); opacity: 0.5; }

/* Toggle / checkbox label */
.mp-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 6px 0; }
.mp-checkbox-input { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--brand-400); cursor: pointer; flex-shrink: 0; }

/* Watermark position grid */
.mp-position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100px; }
.mp-position-cell { width: 28px; height: 22px; border-radius: 4px; background: var(--surface-tertiary); border: 1.5px solid var(--border-subtle); cursor: pointer; transition: all 150ms; }
.mp-position-cell:hover { border-color: var(--brand-400); background: rgba(108,92,231,0.08); }
.mp-position-active { border-color: var(--brand-400) !important; background: rgba(108,92,231,0.2) !important; }

/* ===================================================================
   Results Display
   =================================================================== */

.mp-result-card { padding: 12px; border-radius: 12px; }
.mp-result-success { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); }
.mp-result-error { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15); }

.mp-result-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-result-icon-success { background: rgba(34,197,94,0.15); color: #22C55E; }
.mp-result-icon-error { background: rgba(239,68,68,0.15); color: #EF4444; }

/* Quality score ring text */
.mp-quality-score-text { font-size: 10px; font-weight: 700; }

/* ===================================================================
   Processing Spinner
   =================================================================== */

.mp-processing-overlay { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; border-radius: 12px; background: var(--surface-tertiary); }

.mp-spinner { width: 28px; height: 28px; border: 3px solid var(--surface-primary); border-top-color: var(--brand-400); border-radius: 50%; animation: mp-spin 0.7s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ===================================================================
   Activity Panel Enhancements
   =================================================================== */

/* Pulsing badge */
.mp-badge-pulse { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-weight: 700; color: #fff; background: var(--brand-500); animation: mp-badge-glow 2s ease-in-out infinite; }
@keyframes mp-badge-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(108,92,231,0.4); } 50% { box-shadow: 0 0 0 6px rgba(108,92,231,0); } }

/* Active job card glow */
.mp-job-active { border-left: 2px solid var(--brand-400); }

/* Job action buttons */
.mp-job-action-btn { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 6px; color: var(--text-muted); background: var(--surface-primary); border: none; cursor: pointer; transition: all 150ms; }
.mp-job-action-btn:hover { color: var(--text-primary); background: var(--surface-tertiary); }
.mp-job-action-retry { color: var(--brand-400); background: rgba(108,92,231,0.1); }
.mp-job-action-retry:hover { background: rgba(108,92,231,0.2); }

/* Detach / pop-out button */
.mp-detach-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 150ms; }
.mp-detach-btn:hover { color: var(--text-primary); background: var(--surface-tertiary); }

/* Error details */
.mp-error-details summary { list-style: none; user-select: none; }
.mp-error-details summary::-webkit-details-marker { display: none; }
.mp-error-details[open] summary { margin-bottom: 2px; }

/* ============================================================
   Before / After Image Comparison Slider
   ============================================================ */
.mp-compare { border-radius: 12px; overflow: hidden; background: var(--surface-secondary); border: 1px solid var(--border-subtle); }
.mp-compare-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.mp-compare-viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; cursor: ew-resize; background: #000; }
.mp-compare-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.mp-compare-before { position: absolute; inset: 0; z-index: 2; }
.mp-compare-handle { position: absolute; top: 0; bottom: 0; z-index: 3; transform: translateX(-50%); pointer-events: none; display: flex; align-items: center; justify-content: center; }
.mp-compare-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.5); }
.mp-compare-grip { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,0.95); border-radius: 999px; padding: 4px 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); color: #1a1a2e; z-index: 1; }
.mp-compare-grip svg { width: 14px; height: 14px; }
.mp-compare-label { position: absolute; top: 10px; z-index: 4; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(4px); pointer-events: none; }
.mp-compare-label-before { left: 10px; }
.mp-compare-label-after { right: 10px; }
.mp-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 5; margin: 0; -webkit-appearance: none; appearance: none; }