/* Редактор квестов. Палитра и кнопки — из style.css. */

.ed-body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

.ed-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(6, 12, 20, 0.95);
  border-bottom: 1px solid var(--line);
}

.ed-top button { padding: 9px 12px; font-size: 12px; }
.ed-top select, .ed-inspector input, .ed-inspector select, .ed-inspector textarea {
  min-width: 0;
  padding: 7px 9px;
  color: var(--paper);
  background: rgba(3, 8, 14, 0.85);
  border: 1px solid rgba(126, 231, 255, 0.25);
  font: 14px/1.35 "Segoe UI", Bahnschrift, sans-serif;
}

.ed-top select { max-width: 280px; }
.ed-brand-game { color: var(--cyan); }
.ed-back { color: var(--muted); text-decoration: none; font-size: 13px; }
.ed-back:hover { color: var(--cyan); }
.ed-brand { letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; }
.ed-spacer { flex: 1; }
.ed-user { color: var(--muted); font-size: 12px; }
.ed-status { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.ed-top > :not(.ed-status) { flex-shrink: 0; }

@media (min-width: 1200px) {
  .ed-top { flex-wrap: nowrap; }
}
.ed-status.is-dirty, .ed-status.is-warn { color: var(--amber); }
.ed-status.is-ok { color: #c9f27a; }
.ed-status.is-error { color: var(--danger); }
#ed-save.is-dirty { box-shadow: 0 0 0 2px var(--amber); }

.ed-main {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 360px;
  min-height: 0;
}

.ed-tools {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 10px;
  background: rgba(6, 12, 20, 0.9);
  border-right: 1px solid rgba(126, 231, 255, 0.16);
}

.ed-tools p { margin: 8px 0 2px; color: var(--muted); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.ed-tool {
  padding: 8px 6px;
  font-size: 12px;
  text-align: left;
  color: var(--paper);
  background: rgba(126, 231, 255, 0.05);
  border: 1px solid rgba(126, 231, 255, 0.22);
  border-left: 4px solid var(--node-color, var(--cyan));
}

/* Цвета типов узлов */
.type-start { --node-color: #c9f27a; }
.type-scene { --node-color: #7ee7ff; }
.type-choice { --node-color: #ffc14a; }
.type-condition { --node-color: #d6b4ff; }
.type-action { --node-color: #7ef0c3; }
.type-end { --node-color: #ff8b6a; }

/* ---------- рабочая область ---------- */

.ed-canvas {
  position: relative;
  overflow: hidden;
  cursor: grab;
  background-color: #05080f;
  background-image:
    linear-gradient(rgba(126, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 231, 255, 0.05) 1px, transparent 1px);
  background-size: var(--grid-size, 32px) var(--grid-size, 32px);
  touch-action: none;
  user-select: none;
}

.ed-canvas.is-panning { cursor: grabbing; }
.ed-canvas.is-connecting { cursor: crosshair; }

.ed-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ed-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ed-nodes { position: absolute; left: 0; top: 0; }

.ed-edge-line { fill: none; stroke: rgba(126, 231, 255, 0.55); stroke-width: 2; }
.ed-edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.ed-edge:hover .ed-edge-line { stroke: var(--cyan); }
.ed-edge.is-selected .ed-edge-line { stroke: var(--amber); stroke-width: 3; }
.ed-edge-label { fill: var(--muted); font: 12px "Segoe UI", sans-serif; text-anchor: middle; paint-order: stroke; stroke: #05080f; stroke-width: 4px; }
.ed-edge-temp { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 4; }

.ed-node {
  position: absolute;
  /* Уже шага 220px в существующих раскладках, чтобы выходы не прятались под соседом. */
  width: 196px;
  color: var(--paper);
  background: rgba(9, 18, 30, 0.96);
  border: 1px solid rgba(126, 231, 255, 0.25);
  border-top: 3px solid var(--node-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  cursor: default;
}

.ed-node.is-start { box-shadow: 0 0 0 2px rgba(201, 242, 122, 0.55), 0 10px 26px rgba(0, 0, 0, 0.45); }
.ed-node.type-end { border-bottom: 3px solid var(--node-color); }
.ed-node:hover { z-index: 2; }
.ed-node.is-selected { z-index: 3; outline: 2px solid var(--amber); outline-offset: 2px; }
.ed-node.is-source { outline: 2px dashed var(--amber); outline-offset: 4px; }
.ed-node.is-current { box-shadow: 0 0 0 3px #c9f27a, 0 0 30px rgba(201, 242, 122, 0.4); }
.ed-node.has-error { border-color: var(--danger); }
.ed-node.has-warning { border-color: rgba(255, 193, 74, 0.7); }

.ed-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: move;
  background: rgba(126, 231, 255, 0.05);
}

.ed-node-type { color: var(--node-color); font: 600 10px/1 Bahnschrift, sans-serif; letter-spacing: 0.14em; }
.ed-node-id { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px Consolas, monospace; color: var(--muted); }
.ed-node-image { color: var(--cyan); }
.ed-node-mark { display: grid; place-items: center; width: 16px; height: 16px; font: 700 11px/1 sans-serif; color: #071018; background: var(--amber); border-radius: 50%; }
.has-error .ed-node-mark { background: var(--danger); }

.ed-node-body { padding: 8px 10px; font-size: 13px; line-height: 1.4; color: #b9cad8; overflow-wrap: anywhere; }
.ed-node-body strong { display: block; color: var(--paper); margin-bottom: 2px; }
.ed-muted { color: var(--muted); }

.ed-node-outs { border-top: 1px solid rgba(126, 231, 255, 0.12); padding: 4px 0; }
.ed-out { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 24px; padding: 2px 18px 2px 10px; font-size: 12px; color: var(--muted); }
.ed-out-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-port {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  background: var(--node-color);
  border: 2px solid #05080f;
  border-radius: 50%;
  cursor: crosshair;
}
.ed-out.is-open .ed-port { background: #05080f; border-color: var(--danger); }
.ed-port:hover { transform: scale(1.35); }
.ed-port-in {
  position: absolute;
  left: -6px;
  top: 12px;
  width: 11px;
  height: 11px;
  background: #05080f;
  border: 2px solid rgba(126, 231, 255, 0.6);
  border-radius: 50%;
}
.type-start .ed-port-in { display: none; }

.ed-hint, .ed-legend {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  pointer-events: none;
}
.ed-hint { top: 12px; color: #071018; background: var(--amber); }
.ed-legend { bottom: 8px; color: var(--muted); background: rgba(6, 12, 20, 0.7); white-space: nowrap; }

.ed-issues {
  position: absolute;
  left: 12px;
  bottom: 40px;
  width: min(460px, calc(100% - 24px));
  max-height: 38%;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(6, 12, 20, 0.94);
  border: 1px solid var(--line);
  font-size: 13px;
  cursor: default;
}
.ed-issues ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ed-issues li { padding-left: 8px; border-left: 3px solid var(--amber); line-height: 1.35; }
.ed-issues li.is-error { border-left-color: var(--danger); }
.ed-issues-title { margin: 0; font-weight: 600; }
.ed-issues-title.is-error { color: var(--danger); }
.ed-issues-title.is-ok { color: #c9f27a; }
.ed-link { padding: 0; font: 12px Consolas, monospace; text-transform: none; letter-spacing: 0; color: var(--cyan); background: none; text-decoration: underline; }

/* ---------- свойства ---------- */

.ed-inspector {
  overflow-y: auto;
  padding: 14px 16px 30px;
  background: rgba(6, 12, 20, 0.94);
  border-left: 1px solid rgba(126, 231, 255, 0.16);
}

.ed-panel-kicker {
  margin: 0 0 12px;
  padding-bottom: 8px;
  color: var(--node-color, var(--cyan));
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(126, 231, 255, 0.16);
}

.ed-field { display: grid; gap: 4px; margin-bottom: 10px; font-size: 11px; text-transform: none; letter-spacing: 0.02em; }
.ed-field-label { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ed-field small { color: var(--muted); font-size: 11px; }
.ed-inspector textarea { resize: vertical; line-height: 1.5; }
.ed-inspector input:focus, .ed-inspector select:focus, .ed-inspector textarea:focus { outline: 1px solid var(--cyan); }
.ed-inspector input:invalid { border-color: var(--danger); }

.ed-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--paper); }
.ed-section { margin: 14px 0; }
.ed-section h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ed-rows { display: grid; gap: 6px; }
.ed-row { display: flex; gap: 6px; align-items: center; }
.ed-row > input, .ed-row > select { flex: 1; }
.ed-row-var { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 28px; }
.ed-row-head span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.ed-narrow { flex: 0 0 96px !important; width: 96px; }
.ed-option { display: grid; gap: 6px; padding: 8px; margin-bottom: 8px; border: 1px solid rgba(126, 231, 255, 0.14); background: rgba(3, 8, 14, 0.45); }
.ed-x { flex: none; width: 28px; padding: 6px 0; color: var(--muted); background: transparent; border: 1px solid rgba(215, 231, 242, 0.2); font-size: 12px; }
.ed-x:disabled { opacity: 0.35; cursor: default; }
.ed-add { padding: 7px 10px; font-size: 11px; color: var(--cyan); background: transparent; border: 1px dashed rgba(126, 231, 255, 0.45); }
.ed-add:disabled { opacity: 0.4; }
.ed-delete { width: 100%; margin-top: 18px; }
.ed-help { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ed-inspector > input { width: 100%; margin-bottom: 6px; }
.ed-image-preview { display: block; width: 100%; max-height: 160px; object-fit: cover; margin: 6px 0 12px; border: 1px solid rgba(126, 231, 255, 0.25); }

/* ---------- предпросмотр ---------- */

.ed-preview {
  position: fixed;
  inset: 56px 360px 0 112px;
  z-index: 6;
  overflow-y: auto;
  padding: 18px 26px;
  background: rgba(5, 10, 18, 0.97);
  border: 1px solid var(--line);
}
.ed-preview-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ed-preview-top > div { flex: 1; }
.ed-preview-top .ed-help { margin: 2px 0 0; }
.ed-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 26px; }
.ed-preview-node { margin: 0 0 8px; color: var(--muted); font: 11px Consolas, monospace; }
.ed-state { margin: 0 0 16px; padding: 0; list-style: none; font: 13px/1.6 Consolas, monospace; color: var(--paper); }

.ed-gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(3, 7, 13, 0.96);
}
.ed-gate h2 { margin: 0; }
.ed-gate p { max-width: 560px; color: var(--muted); line-height: 1.5; }
.ed-gate-link { color: var(--cyan); }

@media (max-width: 1100px) {
  .ed-main { grid-template-columns: 96px minmax(0, 1fr) 300px; }
  .ed-preview { inset: 56px 0 0 0; }
}

/* ---------- изображения в свойствах ---------- */

.ed-image-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid rgba(126, 231, 255, 0.14);
  background: rgba(3, 8, 14, 0.45);
}

.ed-image-field .ed-row > .ed-add { flex: 1; }
.ed-remove { width: auto; padding: 6px 10px; }
.ed-image-field .ed-image-preview { margin: 2px 0 0; }
.ed-image-preview.is-portrait { width: 96px; height: 96px; object-fit: cover; }
.ed-image-preview.is-background { max-height: 90px; filter: brightness(0.6); }
.ed-upload-status { min-height: 1em; color: var(--muted); font-size: 11px; }
.ed-upload-status.is-error { color: var(--danger); }
.ed-show { width: 100%; margin-bottom: 12px; }

.ed-preview-scene .scene-stage { min-height: 260px; }