/* ============================================
   Pixia - AI Object Remover studio
   (remove-object.html)
   Complements css/ai-tool.css (.at-* primitives)
   Scope: body.at-remove-object
   ============================================ */

body.at-remove-object {
  --ro-accent: #6366f1;
  --ro-accent-2: #8b5cf6;
  --ro-shadow: 0 16px 34px -18px rgba(99, 102, 241, .7);
  --ro-ease: var(--at-ease, cubic-bezier(.22, .61, .36, 1));
}

body.at-remove-object [hidden] { display: none !important; }

/* Indigo accent replaces the shared identity. */
body.at-remove-object .at-kicker {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
}
body.at-remove-object .at-btn {
  color: #ffffff;
  box-shadow: var(--ro-shadow);
}
body.at-remove-object .at-btn-alt {
  background: var(--glass-bg);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
body.at-remove-object .at-progress-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
body.at-remove-object .at-drop-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(139, 92, 246, .18));
  color: #4f46e5;
}

/* ---------- Layout ---------- */
body.at-remove-object .ro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 22px;
  align-items: start;
}
.ro-main {
  min-width: 0;
  position: sticky;
  inset-block-start: 84px;
  align-self: start;
}
.ro-side {
  min-width: 0;
  display: grid;
  gap: 16px;
}
@media (max-width: 1060px) {
  body.at-remove-object .ro-layout { grid-template-columns: 1fr; }
  .ro-main { position: static; }
}

body.at-remove-object .at-panel { min-height: 0; min-width: 0; }

.ro-panel h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 4px;
}

/* ---------- Source drop ---------- */
.ro-source { display: flex; flex-direction: column; gap: 12px; }
.ro-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 30px 20px;
  border: 1.6px dashed var(--glass-border-hover);
  border-radius: var(--at-radius-lg);
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color .2s var(--ro-ease), background .2s var(--ro-ease), transform .2s var(--ro-ease);
}
.ro-drop:hover { border-color: var(--ro-accent); }
.ro-drop:focus-visible { outline: 2px solid var(--ro-accent); outline-offset: 3px; }
.ro-drop.is-disabled { opacity: .55; pointer-events: none; }
.ro-drop.is-over {
  border-color: var(--ro-accent);
  background: color-mix(in srgb, var(--ro-accent) 10%, var(--glass-bg));
  transform: scale(1.006);
}
.ro-drop input { display: none; }
.ro-drop-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ro-accent) 16%, transparent);
  color: var(--ro-accent);
  margin-block-end: 2px;
}
.ro-drop-icon svg { width: 26px; height: 26px; }
.ro-drop-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text-primary); }
.ro-drop-sub { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.55; }
.ro-drop-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 4px; }
.ro-drop-meta span {
  font-size: 11px; font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- Stage / preview ---------- */
.ro-stage-panel { display: flex; flex-direction: column; }
.ro-stage-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-block-end: 12px;
}
.ro-stage-head h2 { margin: 0; }

.ro-view {
  justify-self: center;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.ro-view-btn {
  min-width: 54px; height: 28px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--text-secondary); font: 600 12px/1 var(--font-primary); cursor: pointer;
  transition: color .2s var(--ro-ease), background .2s var(--ro-ease);
}
.ro-view-btn:hover { color: var(--text-primary); }
.ro-view-btn.is-active { background: var(--bg-card-hover); color: var(--text-primary); }

.ro-zoom {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.ro-zoom-btn {
  min-width: 30px; height: 28px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--text-secondary); font: 600 12px/1 var(--font-primary); cursor: pointer;
  transition: color .2s var(--ro-ease), background .2s var(--ro-ease);
}
.ro-zoom-btn:hover { color: var(--text-primary); }
.ro-zoom-btn svg { width: 15px; height: 15px; }
.ro-zoom-level {
  min-width: 44px; padding-inline: 6px;
  text-align: center;
  font: 600 11.5px/1 var(--font-primary);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.ro-stage-shell {
  position: relative;
  flex: 1;
  min-height: 420px;
  max-height: min(770px, calc(100vh - 240px));
  display: flex;
  flex-direction: column;
}
.ro-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  /* Centering is done by `margin: auto` on the wrap instead of justify/align,
     so a zoomed image that overflows stays scrollable to its far edges. */
  padding: 16px;
  border-radius: var(--at-radius-lg);
  border: 1px solid var(--glass-border);
  /* Checkerboard so transparent pixels (if any) read clearly. */
  background-image: repeating-conic-gradient(rgba(128, 128, 128, .16) 0% 25%, transparent 0% 50%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  overflow: auto;
  overscroll-behavior: contain;
}
.ro-stage-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 34ch;
  margin: auto;
}
.ro-stage-empty svg { width: 44px; height: 44px; color: var(--text-muted); }
.ro-stage-empty strong { font-size: 15px; color: var(--text-secondary); font-weight: 600; }

/* The interactive surface: img + mask overlay + a live brush cursor. */
.ro-canvas-wrap {
  position: relative;
  margin: auto;
  line-height: 0;
  touch-action: none;
  /* Don't let the flex stage shrink the zoomed image back down; let it
     overflow and scroll instead. */
  flex: none;
  /* Clip the brush cursor so its circle can't overhang the image and create
     phantom scrollbars on the scrollable stage. */
  overflow: hidden;
  border-radius: 8px;
}
/* Zoom is written as an inline width on the wrap, the image fills that width
   and the mask canvas is inset over both, so one transition scales the whole
   stage. Switched on only for a user zoom (see applyZoom) so a fit on load, a
   result swap or a window resize still lands instantly. */
.ro-canvas-wrap.ro-zooming {
  transition: width .2s var(--ro-ease);
}
.ro-canvas-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
  cursor: crosshair;
}
.ro-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 8px;
  transition: opacity .2s var(--ro-ease);
}
/* In result view the mask overlay is hidden and the pointer stops selecting. */
.ro-canvas-wrap.is-result img { cursor: default; }
.ro-canvas-wrap.is-result canvas { opacity: 0; }

.ro-brush-cursor {
  position: absolute;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, .55), inset 0 0 0 1.4px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  z-index: 3;
}
.ro-brush-cursor.is-eraser {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .95);
}

/* Busy: the scrim lives inside the zoomed canvas so it tracks the image at
   every zoom level; the spinner stays pinned over the stage viewport. */
.ro-busy-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-primary) 68%, transparent);
  backdrop-filter: blur(3px);
}
.ro-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: var(--at-radius-lg);
  pointer-events: none;
  z-index: 4;
}
.ro-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ro-accent) 24%, transparent);
  border-top-color: var(--ro-accent);
  animation: ro-spin .8s linear infinite;
}
@keyframes ro-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ro-spinner { animation-duration: 1.8s; }
  .ro-canvas-wrap.ro-zooming { transition: none; }
}
.ro-busy-msg { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* ---------- Info strip ---------- */
.ro-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block-start: 12px;
}
.ro-info-cell {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--at-radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.ro-info-k { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em; }
.ro-info-v { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---------- Settings ---------- */
.ro-field { margin-block-start: 16px; }
.ro-field:first-of-type { margin-block-start: 0; }
.ro-legend {
  display: block;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-secondary); margin-block-end: 9px;
}
.ro-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.ro-keys { text-align: center; margin-block-start: 12px; }

.ro-mode-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.ro-actions-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ro-mini-btn { width: 100%; justify-content: center; }

.ro-bg-opt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg);
  color: var(--text-secondary);
  font: 600 12.5px/1.2 var(--font-primary);
  text-align: center;
  cursor: pointer;
  transition: color .2s var(--ro-ease), border-color .2s var(--ro-ease), background .2s var(--ro-ease);
}
.ro-bg-opt:hover { color: var(--text-primary); border-color: var(--glass-border-hover); }
.ro-bg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ro-bg-opt svg { width: 16px; height: 16px; }
.ro-bg-opt:has(input:checked) {
  color: var(--ro-accent);
  border-color: var(--ro-accent);
  background: color-mix(in srgb, var(--ro-accent) 10%, var(--glass-bg));
}
.ro-bg-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* Model picker (run panel) */
.ro-engine-field { margin-block-start: 0; margin-block-end: 14px; }
.ro-engine-opt {
  flex-direction: column;
  gap: 2px;
  padding: 9px 8px;
  line-height: 1.25;
}
.ro-engine-opt strong { font-size: 12.5px; font-weight: 700; }
.ro-engine-opt small { font-size: 10.5px; font-weight: 500; opacity: .72; }
.ro-engine-hint { min-height: 34px; }
.ro-engine-hint.is-lama { color: var(--ro-accent); }

.ro-range { width: 100%; accent-color: var(--ro-accent); }
.ro-range-row { display: flex; align-items: center; gap: 12px; }
.ro-range-out {
  min-width: 34px; text-align: end;
  font-size: 13px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Coverage meter: how much of the image is currently selected. */
.ro-coverage {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.ro-coverage-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width .18s var(--ro-ease);
}

/* ---------- Run / progress ---------- */
.ro-run-actions { display: grid; gap: 10px; }
.ro-run-btn { width: 100%; justify-content: center; }
.ro-cancel {
  border: 0; background: none;
  color: var(--text-muted);
  font: 600 13px/1 var(--font-primary);
  cursor: pointer; padding: 6px;
  border-radius: 8px;
  transition: color .2s var(--ro-ease), background .2s var(--ro-ease);
}
.ro-cancel:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }

.ro-progress { display: grid; gap: 6px; }
.ro-progress-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.ro-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width .2s var(--ro-ease);
}
.ro-progress-msg { font-size: 11.5px; color: var(--text-muted); text-align: center; }

/* ---------- RTL ---------- */
[dir="rtl"] .ro-zoom-level { direction: ltr; }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .ro-stage-shell { min-height: 320px; }
  .ro-info { grid-template-columns: 1fr; }
  .ro-stage-head { grid-template-columns: 1fr; justify-items: center; }
  .ro-zoom { justify-self: center; }
}