/* ============================================================
   GenBox — éditeur plein écran (masque d'inpainting)
   et éditeur de détourage. Les deux partagent la coquille .editor-*.
   ============================================================ */

.editor-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.editor-topbar {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  background: var(--base);
  border-bottom: 1px solid var(--line-soft);
}
.editor-title { font-size: 14.5px; font-weight: 600; }
.editor-provider-note { font-size: var(--fs-sm); color: var(--tx3); }
.editor-close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--tx2);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.editor-close:hover { background: var(--raised); color: var(--tx); }

.editor-body { flex: 1; display: flex; min-height: 0; }

/* ---------- scène ---------- */
.editor-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  min-width: 0;
  overflow: hidden;
  /* Damier discret : rend la transparence lisible sans agresser l'œil. */
  background-color: var(--void);
  background-image:
    linear-gradient(45deg, oklch(0.185 0.012 295) 25%, transparent 25%),
    linear-gradient(-45deg, oklch(0.185 0.012 295) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, oklch(0.185 0.012 295) 75%),
    linear-gradient(-45deg, transparent 75%, oklch(0.185 0.012 295) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.editor-canvas-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.editor-canvas-wrap canvas { max-width: 100%; max-height: calc(100vh - 120px); display: block; }
#editor-mask-canvas { position: absolute; inset: 0; cursor: crosshair; }
#detour-canvas { max-width: 100%; max-height: calc(100vh - 120px); }

/* ---------- panneau ---------- */
.editor-sidebar {
  width: 336px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s4);
  overflow-y: auto;
  background: var(--base);
  border-left: 1px solid var(--line-soft);
}
.editor-section { display: flex; flex-direction: column; gap: var(--s2); }
.editor-section-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
}
.editor-row { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-row .btn-sm {
  background: var(--raised);
  color: var(--tx2);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-weight: 500;
}
.editor-row .btn-sm:hover { background: var(--hover); color: var(--tx); }
.editor-row .btn-sm.active { background: var(--violet); color: var(--void); font-weight: 600; }

.editor-slider {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--tx2);
}
.editor-brush-controls { display: flex; flex-direction: column; gap: var(--s3); }

.editor-refs { display: flex; gap: 6px; flex-wrap: wrap; }
.editor-ref-thumb { position: relative; }
.editor-ref-thumb img {
  width: 54px; height: 54px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: block;
}
.editor-ref-thumb button {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--tx2);
  font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.editor-ref-thumb button:hover { background: var(--danger); color: var(--void); }
.editor-add-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--raised);
  color: var(--tx2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.editor-add-ref:hover { background: var(--hover); color: var(--tx); }

.editor-prompt-section textarea { resize: none; }
.editor-status { font-size: var(--fs-sm); color: var(--tx3); line-height: 1.5; min-height: 18px; }

.editor-history { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.editor-hist-thumb {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color var(--speed);
}
.editor-hist-thumb:hover { border-color: var(--violet); }
.editor-hist-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Méthodes de détourage */
.detour-method { flex: 1; }

@media (max-width: 900px) {
  .editor-body { flex-direction: column; }
  .editor-stage { padding: var(--s3); min-height: 40vh; }
  .editor-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--line-soft); }
  .editor-canvas-wrap canvas, #detour-canvas { max-height: 38vh; }
}