/* ---- editor chrome ---- */
:root{
  --chrome:#100f1a; --chrome-2:#191826; --chrome-3:#222034;
  --line:#2c2a3d; --ink:#b6b2c8; --ink-bright:#efeefa; --ink-dim:#7d7994;
  --accent:#6c5eb5; --hi:#eeee77; --ok:#aaff66; --warn:#ff7777; --cy:#aaffee; --org:#dd8855;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--chrome); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--hi); outline-offset:2px}

header.bar{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--line); background:var(--chrome-2)}
.wordmark{font-weight:600; color:var(--ink-bright); margin-right:auto}
.wordmark small{display:block; font-weight:400; font-size:12px; color:#6f6b85}
nav.tabs{display:flex; gap:2px}
nav.tabs button{background:transparent; border:1px solid transparent; border-radius:6px;
  padding:6px 14px; cursor:pointer; color:#8b87a0}
nav.tabs button:hover{color:var(--ink-bright)}
nav.tabs button[aria-selected="true"]{background:var(--chrome-3); color:#fff; border-color:#3a3752}
.btn{background:var(--chrome-3); border:1px solid #3a3752; border-radius:6px;
  padding:6px 12px; cursor:pointer; color:#ded9ef}
.btn:hover{background:#302d48}
.btn.primary{background:var(--accent); border-color:#8072d6; color:#0f0d22; font-weight:600}
.btn.primary:hover{background:#7d70c9}
.btn.sm{padding:3px 8px; font-size:13px}
.btn.danger:hover{background:#4a2230; border-color:#6b3040; color:#ffc9d2}
.btn:disabled{opacity:.4; cursor:not-allowed}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

main{padding:16px; max-width:1240px; margin:0 auto}
.panel{display:none} .panel.on{display:block}

/* map editor */
.editlayout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start}
.toolbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.tool{background:var(--chrome-2); border:1px solid var(--line); border-radius:6px;
  padding:6px 12px; cursor:pointer; color:#9d99b2}
.tool:hover{color:var(--ink-bright)}
.tool[aria-pressed="true"]{background:var(--accent); border-color:#8072d6; color:#0f0d22; font-weight:600}
.sizebox{margin-left:auto; display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink-dim)}
.sizebox input{width:52px; background:#0f0e18; border:1px solid var(--line); border-radius:5px;
  padding:4px 7px; font-family:var(--mono); font-size:13px}
.canvaswrap{background:#0d0c16; border:1px solid var(--line); border-radius:8px;
  padding:14px; overflow:auto; max-height:66vh}
#canvas{position:relative}
#wires{position:absolute; inset:0; pointer-events:none; overflow:visible}
.cell{position:absolute; border-radius:6px; border:1px dashed #262437; background:#141322;
  cursor:pointer; padding:0; overflow:hidden; color:var(--ink)}
.cell:hover{border-color:#443f63; background:#191828}
.cell.room{border:1px solid #4b4470; background:#241f3d; background-size:cover; background-position:center}
.cell.room:hover{border-color:#7d70c9}
.cell.sel{outline:2px solid var(--hi); outline-offset:1px; z-index:3}
.cell .label{position:absolute; left:0; right:0; bottom:0; padding:3px 5px; font-size:11px;
  line-height:1.25; font-family:var(--mono); background:rgba(12,10,26,.82); color:#dcd7f5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cell .badges{position:absolute; top:3px; left:4px; font-size:11px; font-family:var(--mono);
  color:var(--hi); text-shadow:0 1px 2px #000; z-index:2}
.cell .dk{position:absolute; top:3px; right:4px; font-size:11px; z-index:2}
.hint{color:var(--ink-dim); font-size:13.5px; margin:10px 2px 0; min-height:20px}

/* inspector */
.insp{background:var(--chrome-2); border:1px solid var(--line); border-radius:8px; padding:14px;
  max-height:78vh; overflow-y:auto}
.insp h2{margin:0 0 4px; font-size:15px; color:var(--ink-bright)}
.insp h3{margin:18px 0 8px; font-size:12.5px; color:var(--ink-dim); font-weight:600;
  border-top:1px solid var(--line); padding-top:12px}
.insp h3:first-of-type{border-top:0; padding-top:0}
.field{margin-bottom:10px}
.field label{display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:3px}
.field input[type=text], .field textarea, .field select, .obj input[type=text], .obj textarea, .obj select,
.trig select, .trig input[type=text], .trig textarea{
  width:100%; background:#0f0e18; border:1px solid var(--line); border-radius:5px;
  padding:6px 9px; font-size:13.5px}
.field textarea{min-height:64px; resize:vertical; line-height:1.5}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--accent); outline:none}
.check{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink)}
.exitrow{display:grid; grid-template-columns:56px 1fr auto; gap:7px; align-items:center;
  margin-bottom:5px; font-size:13px}
.exitrow .dir{font-family:var(--mono); color:var(--ink-dim)}
.exitrow select{padding:4px 6px; font-size:13px}
.exitrow .lk{font-size:12px; color:var(--org); display:flex; align-items:center; gap:4px; cursor:pointer}
.imgbox{display:flex; gap:9px; align-items:flex-start}
.imgbox .prev{width:76px; height:57px; flex:none; border-radius:4px; border:1px solid var(--line);
  background:#0d0b26; object-fit:cover; image-rendering:pixelated}
.imgbox .prev.blank{display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:#4d4a63; font-family:var(--mono); text-align:center}
.imgbox .ctl{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.obj, .trig{border:1px solid var(--line); border-radius:6px; padding:9px; margin-bottom:8px; background:#15142199}
.obj.nested{margin-left:14px; border-left:2px solid var(--accent)}
.obj .top, .trig .top{display:flex; gap:6px; align-items:center; margin-bottom:6px}
.obj .top input{flex:1}
.obj .more{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line)}
.obj .flags{display:flex; gap:12px; flex-wrap:wrap; margin-top:7px; font-size:12.5px}
.trig .grid2{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.empty{color:#5d5975; font-size:13px; font-style:italic}
.lede{max-width:70ch; color:#9d99b2; margin:0 0 18px}
.lede code{background:#221f33; padding:1px 5px; border-radius:3px; font-family:var(--mono);
  font-size:13px; color:var(--cy)}
.storyform{max-width:620px}
pre.dump{background:#0f0e18; border:1px solid var(--line); border-radius:6px; padding:12px;
  font-family:var(--mono); font-size:12.5px; color:#a7a2c0; overflow:auto; max-height:400px}
.flag{border-left:2px solid var(--org); padding-left:10px; margin:10px 0; font-size:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:16px 0}
.stat{background:var(--chrome-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.stat b{display:block; font-family:var(--mono); font-size:20px; color:var(--ink-bright); font-weight:500}
.stat span{font-size:12.5px; color:var(--ink-dim)}
.hidden{display:none!important}

/* conversation editor (dialog tree canvas) */
.dlgOverlay{position:fixed; inset:0; background:rgba(8,7,14,.72); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:22px}
.dlgModal{background:var(--chrome-2); border:1px solid var(--line); border-radius:10px;
  width:min(1200px,96vw); height:min(780px,92vh); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dlgHead{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--chrome-3)}
.dlgHead h2{margin:0; font-size:14.5px; color:var(--ink-bright); margin-right:6px}
.dlgHead .spacer{flex:1}
.dlgZoom{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px;
  color:var(--ink-dim)}
.dlgZoom #dlgZoomLabel{min-width:38px; text-align:center}
.dlgZoom .btn{padding:3px 10px}
.dlgBody{flex:1; min-height:0; display:flex}
.dlgCanvasWrap{flex:1; min-width:0; position:relative; overflow:auto;
  background:#0d0c16; border-right:1px solid var(--line)}
.dlgCanvas{position:relative}
.dlgCanvasInner{position:relative; transform-origin:0 0}
.dlgWires{position:absolute; inset:0; pointer-events:none; overflow:visible}
.dlgSide{width:320px; flex:none; padding:14px; overflow-y:auto}
.dlgSide h3{margin:16px 0 8px; font-size:12.5px; color:var(--ink-dim); font-weight:600;
  border-top:1px solid var(--line); padding-top:12px}
.dlgSide h3:first-of-type{border-top:0; padding-top:0}
.dlgNode, .dlgResp{position:absolute; border-radius:6px; padding:7px 9px; cursor:grab; user-select:none}
.dlgNode{width:180px; background:#241f3d; border:1px solid #4b4470}
.dlgNode:hover{border-color:#7d70c9}
.dlgNode.sel, .dlgResp.sel{outline:2px solid var(--hi); outline-offset:1px; z-index:3}
.dlgNode.start{border-color:var(--ok)}
.dlgNode.orphan{border-style:dashed; opacity:.7}
.dlgResp.gated{border-color:var(--org)}
.dlgNode .tag, .dlgResp .tag{display:block; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ok); margin-bottom:3px}
.dlgNode.orphan .tag{color:var(--warn)}
.dlgResp .tag{color:var(--org)}
.dlgNode .who, .dlgResp .who{display:block; font-size:9.5px; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:3px}
.dlgNode .who{color:#9d99b2}
.dlgResp .who{color:var(--cy)}
.dlgNode .txt, .dlgResp .txt{font-size:12.5px; line-height:1.4; color:var(--ink); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.dlgResp{width:150px; background:#182733; border:1px solid #3a5a66}
.dlgResp:hover{border-color:#5a8fa0}
.dlgAddNext{position:absolute; width:150px; border:1px dashed #4a4560; border-radius:6px;
  padding:8px 9px; font-size:11.5px; line-height:1.35; color:var(--ink-dim); cursor:pointer; text-align:center}
.dlgAddNext:hover{border-color:var(--accent); color:var(--ink-bright)}
.dlgRespJump{display:block; width:100%; text-align:left; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-bottom:5px}
@media (max-width:900px){ .editlayout{grid-template-columns:minmax(0,1fr)}
  .dlgModal{width:100vw; height:100vh; border-radius:0} .dlgBody{flex-direction:column}
  .dlgCanvasWrap{border-right:0; border-bottom:1px solid var(--line); min-height:45vh}
  .dlgSide{width:auto} }