/* BODHI Dashboard · css/image-editor.css · 改图编辑器（fabric）：PS 式布局 + 透明棋盘格
   ⚠ 层叠顺序 = index.html 里 <link> 的先后，别随手调换。*/

/* ── 改图编辑器（fabric）· z 高于 modal/picker/lightbox ── */
.editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.86);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.editor-panel {
  background: rgb(28 25 23);
  border-radius: 10px;
  max-width: 96vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.editor-toolbar, .editor-subbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgb(68 64 60);
  background: rgb(28 25 23);
}
.editor-subbar { background: rgb(41 37 36); }
.editor-tool {
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgb(41 37 36);
  color: rgb(214 211 209);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.editor-tool:hover { background: rgb(68 64 60); }
.editor-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.editor-tool-active { background: #b08642; color: #fff; }
.editor-save { background: #2b7fff; color: #fff; }
.editor-save:hover { background: #1a6ff0; }
.editor-cancel:hover { background: #7f1d1d; color: #fff; }
.editor-ai-go { background: #7c3aed; color: #fff; }
.editor-ai-go:hover { background: #6d28d9; }
.editor-ai-go:disabled { opacity: 0.55; }
.editor-sep { width: 1px; align-self: stretch; background: rgb(68 64 60); margin: 2px 3px; }
.editor-color {
  width: 30px; height: 26px; padding: 0;
  border: 1px solid rgb(68 64 60); border-radius: 5px; background: none; cursor: pointer;
}
.editor-swatch {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0;
}
.editor-swatch:hover { border-color: #fff; }
.editor-range { width: 96px; accent-color: #b08642; }
.editor-size-wrap {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: rgb(168 162 158); white-space: nowrap;
}
.editor-size-input {
  width: 58px; padding: 2px 4px; font-size: 11px; font-family: ui-monospace, monospace;
  border: 1px solid rgb(68 64 60); border-radius: 5px;
  background: rgb(28 25 23); color: rgb(231 229 228);
}
.editor-stage {
  overflow: auto;
  padding: 14px;
  display: flex;
  /* 居中用子元素 margin:auto（flex 的 align/justify center 在内容溢出时会裁掉左上角，滚不到） */
  background: #0c0a09;
  flex: 1 1 auto;
  min-height: 0;
}
.editor-stage .canvas-container { margin: auto; }

/* PS 式布局：主区 = 左工具栏 + 画布 */
.editor-main { display: flex; flex: 1 1 auto; min-height: 0; }
.editor-toolrail {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 6px; width: 96px; flex: 0 0 auto;
  border-right: 1px solid rgb(68 64 60); background: rgb(28 25 23);
  overflow-y: auto;
}
.editor-toolrail .editor-tool { text-align: left; }
.editor-rail-label {
  font-size: 10px; color: rgb(120 113 108); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 6px 3px 1px;
}
.editor-rail-label:first-child { padding-top: 0; }
.editor-optionsbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 10px; background: rgb(41 37 36);
  border-bottom: 1px solid rgb(68 64 60);
}
.editor-opt-label { font-size: 11px; color: rgb(168 162 158); white-space: nowrap; }

/* 透明画布：棋盘格底 + 金色边框，看得见画布边界（导出 PNG 仍透明，棋盘只是 CSS） */
.editor-stage .canvas-container {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border: 2px solid rgba(201, 163, 107, 0.95);
  outline: 1px solid rgba(0,0,0,0.35);
  background-color: #2a2725;
  background-image:
    linear-gradient(45deg, #3f3a36 25%, transparent 25%),
    linear-gradient(-45deg, #3f3a36 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3f3a36 75%),
    linear-gradient(-45deg, transparent 75%, #3f3a36 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.editor-aibar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid rgb(68 64 60);
  background: rgb(41 37 36);
}
.editor-ai-input {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid rgb(68 64 60);
  background: rgb(28 25 23);
  color: rgb(231 229 228);
  resize: vertical;
}
.editor-ai-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(124,58,237,0.5); }
.editor-ai-select {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgb(68 64 60);
  background: rgb(28 25 23);
  color: rgb(231 229 228);
}