/* text_builder — dark, high-contrast, legible. */
:root{
  --bg:#1b1f27; --panel:#262c38; --panel2:#2f3645; --edge:#3c4456;
  --ink:#f2f4f8; --muted:#9aa6bd; --accent:#3aa0ff; --accent2:#37c871;
  --grid:#2a313e; --grid2:#333c4c;
  --dialogue:#3a6ea5; --response:#7a5fb0; --end:#a04a4a; --rep:#b0863f; --prog:#3f9e8f;
  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.4;overflow:hidden;
  -webkit-font-smoothing:antialiased}

/* ---------- toolbar ---------- */
#toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--edge);
  position:relative;z-index:30}
.tgroup{display:flex;align-items:center;gap:6px}
.tgroup.grow{flex:1;justify-content:flex-end}
.brand{font-size:18px;letter-spacing:.5px;color:var(--accent)}
#toolbar button{font:inherit;font-size:14px;color:var(--ink);background:var(--panel2);
  border:1px solid var(--edge);border-radius:8px;padding:7px 11px;cursor:pointer}
#toolbar button:hover{background:#3a4253;border-color:#55607a}
#toolbar button:active{transform:translateY(1px)}
#toolbar button:disabled{opacity:.45;cursor:default;transform:none}
#toolbar #btn-save.dirty{background:var(--accent2);color:#10241a;border-color:var(--accent2);font-weight:bold}
#toolbar #btn-save.dirty:hover{filter:brightness(1.1)}
#toolbar button.add{color:#fff;font-weight:bold;border:1px solid rgba(0,0,0,.3)}
#toolbar button.add[data-add="dialogue"]{background:var(--dialogue)}
#toolbar button.add[data-add="response"]{background:var(--response)}
#toolbar button.add[data-add="end"]{background:var(--end)}
#toolbar button.add[data-add="reputation"]{background:var(--rep)}
#toolbar button.add[data-add="progression"]{background:var(--prog)}
#toolbar button.add:hover{filter:brightness(1.18)}
.view-switch{display:flex;border:1px solid var(--edge);border-radius:8px;overflow:hidden}
#toolbar .view-switch button.vs{border:none;border-radius:0;background:var(--panel2);color:var(--muted);font-weight:bold}
#toolbar .view-switch button.vs:hover{background:#3a4253}
#toolbar .view-switch button.vs.on{background:var(--accent);color:#fff}
#toolbar .view-switch button.vs.on:hover{background:var(--accent);filter:brightness(1.1)}
#status{color:var(--muted);font-size:13px}
#status b{color:var(--ink)}

/* ---------- layout ---------- */
#layout{display:flex;height:calc(100% - 53px)}
#sidebar{width:210px;flex:none;background:var(--panel);border-right:1px solid var(--edge);
  display:flex;flex-direction:column;overflow:hidden}
.side-head{padding:9px 12px;font-weight:bold;color:var(--muted);
  border-bottom:1px solid var(--edge);text-transform:uppercase;font-size:12px;letter-spacing:1px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
#folder-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
#btn-newfile{flex:none;font:inherit;font-size:12px;font-weight:bold;color:var(--ink);background:var(--panel2);
  border:1px solid var(--edge);border-radius:6px;padding:3px 9px;cursor:pointer;
  text-transform:none;letter-spacing:0}
#btn-newfile:hover{background:#3a4253}
#file-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
#file-list li{padding:5px 6px 5px 9px;border-radius:6px;font-size:13px;
  display:flex;align-items:center;gap:6px}
#file-list li:hover{background:var(--panel2)}
#file-list li.muted{color:var(--muted)}
#file-list li.active{background:var(--accent);color:#fff}
#file-list li .fname{flex:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#file-list li.unsaved::after{content:'●';flex:none;color:#ffb13a;font-size:11px}
#file-list li.active.unsaved::after{color:#fff}
.file-del{flex:none;background:none;border:none;cursor:pointer;font-size:13px;opacity:.5;
  padding:2px 5px;border-radius:5px;color:inherit}
.file-del:hover{opacity:1;background:rgba(255,90,90,.3)}

/* ---------- canvas ---------- */
#viewport{position:relative;flex:1;overflow:hidden;cursor:default;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid2) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
}
#viewport.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
#wires{position:absolute;left:-50000px;top:-50000px;width:100000px;height:100000px;
  overflow:visible;pointer-events:none}
#wires path.wire{fill:none;stroke-width:3;pointer-events:none}
#wires path.wire-hit{fill:none;stroke:transparent;stroke-width:22;stroke-linecap:round;
  pointer-events:stroke;cursor:pointer}
/* hover the (wide) hit path -> highlight the visible wire that follows it */
#wires path.wire-hit:hover + path.wire{stroke-width:5;filter:drop-shadow(0 0 5px rgba(255,255,255,.85))}
#wires path.wire.sel{filter:drop-shadow(0 0 5px #fff)}
#wires path.temp{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:6 5;opacity:.8}
#hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  color:var(--muted);font-size:12px;text-align:center;pointer-events:none;
  background:rgba(20,24,31,.7);padding:6px 12px;border-radius:8px}

/* ---------- nodes ---------- */
.node{position:absolute;width:250px;background:var(--panel);
  border:1px solid var(--edge);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);user-select:none;color:var(--ink)}
.node.dragging{box-shadow:0 12px 30px rgba(0,0,0,.6);z-index:20}
.node .head{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:10px 10px 0 0;cursor:move;font-weight:bold;font-size:14px}
.node[data-type="dialogue"] .head{background:var(--dialogue)}
.node[data-type="response"] .head{background:var(--response)}
.node[data-type="end"]      .head{background:var(--end)}
.node[data-type="reputation"] .head{background:var(--rep)}
.node[data-type="progression"] .head{background:var(--prog)}
.node .head .num{background:rgba(0,0,0,.35);border-radius:6px;padding:1px 7px;font-size:12px}
.node .body{padding:9px 10px;display:flex;flex-direction:column;gap:7px}
.node.has-outs .body{padding-bottom:24px}   /* room for bottom output labels */
.resize-handle{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:7;
  border-radius:0 0 10px 0;opacity:.55;
  background:linear-gradient(135deg,transparent 45%,var(--muted) 45%,var(--muted) 55%,
    transparent 55%,transparent 68%,var(--muted) 68%,var(--muted) 78%,transparent 78%)}
.resize-handle:hover{opacity:1}
.node textarea,.node input,.node select{font:inherit;font-size:13px;color:var(--ink);
  background:var(--panel2);border:1px solid var(--edge);border-radius:6px;padding:6px 7px;width:100%}
.node textarea{resize:vertical;min-height:46px}
.node textarea:focus,.node input:focus,.node select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.attr-row,.opt-row{display:flex;gap:6px;align-items:center}
.attr-row select{flex:0 0 130px}
.opt-row .idx{flex:none;color:var(--muted);width:14px;text-align:center}
.row-btns{display:flex;gap:6px;align-items:center;justify-content:flex-start}
.mini{font:inherit;font-size:14px;line-height:1;color:var(--ink);background:var(--panel2);
  border:1px solid var(--edge);border-radius:6px;width:26px;height:26px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.mini:hover{background:#3a4253}
.mini[disabled]{opacity:.35;cursor:not-allowed}
.mini.del{flex:none}
.chars{display:flex;flex-direction:column;gap:7px}
.char-card{border:1px solid var(--edge);border-radius:8px;padding:5px 8px;background:rgba(0,0,0,.16)}
.char-card > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:bold;color:var(--muted)}
.char-card > summary::-webkit-details-marker{display:none}
.char-card > summary::before{content:'▸';font-size:10px;color:var(--accent)}
.char-card[open] > summary::before{content:'▾'}
.char-card[open] > summary{margin-bottom:6px}
.char-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.char-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.char-field span{font-size:10px;color:var(--muted)}
.coord-row{display:flex;gap:6px}
.coord-row input{text-align:center}
.label{font-size:12px;color:var(--muted)}

/* ---------- ports ---------- */
/* ports — DEFAULT is UNWIRED: bright amber, glowing + pulsing so open sockets jump out */
.port{position:absolute;width:16px;height:16px;border-radius:50%;
  background:#1b1f27;border:2px solid #ffb13a;cursor:crosshair;z-index:5;
  transform:translateX(-50%);transform-origin:center;
  box-shadow:0 0 7px 2px rgba(255,177,58,.8);
  animation:portPulse 1.3s ease-in-out infinite;transition:transform .08s}
@keyframes portPulse{0%,100%{box-shadow:0 0 5px 1px rgba(255,177,58,.55)}
  50%{box-shadow:0 0 11px 4px rgba(255,177,58,1)}}
.port:hover{background:#ffb13a;transform:translateX(-50%) scale(1.4)}
/* WIRED ports — calm, solid, no glow/pulse */
.port.wired{box-shadow:none;animation:none;background:var(--accent);border-color:var(--accent)}
.port.wired.in{background:var(--accent2);border-color:var(--accent2)}
.port.wired:hover{transform:translateX(-50%) scale(1.4);filter:brightness(1.2)}
.port-top{left:50%;top:-9px}
.port-bottom{left:50%;bottom:-9px}
.port.linkable{animation:none;box-shadow:0 0 0 5px rgba(58,160,255,.6)}
/* labels sit OUTSIDE the node so they never cover content or each other */
.port-tag{position:absolute;font-size:10px;font-weight:bold;color:var(--ink);white-space:nowrap;
  background:rgba(20,24,31,.88);padding:1px 5px;border-radius:4px;pointer-events:none;z-index:6}
.port-tag.bk-low{color:#ff6b6b}
.port-tag.bk-mid{color:#ffd23f}
.port-tag.bk-high{color:#37c871}

/* reputation legend */
.rep-legend{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);
  background:var(--panel2);border-radius:6px;padding:6px 8px}
.rep-legend b{display:inline-block;width:34px;text-align:center;border-radius:4px;
  color:#1b1f27;font-size:11px;margin-right:5px;padding:1px 0;font-weight:bold}
.rep-legend .bk-low{background:#ff6b6b}
.rep-legend .bk-mid{background:#ffd23f}
.rep-legend .bk-high{background:#37c871}

/* ---------- context menus ---------- */
.ctx-menu{position:fixed;z-index:100;background:var(--panel2);border:1px solid var(--edge);
  border-radius:10px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:150px}
.ctx-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;
  color:var(--ink);background:none;border:none;border-radius:6px;padding:7px 9px;cursor:pointer}
.ctx-menu button:hover{background:var(--accent)}
.ctx-head{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:3px 9px 5px}
#add-menu button[data-add="dialogue"]{border-left:4px solid var(--dialogue)}
#add-menu button[data-add="response"]{border-left:4px solid var(--response)}
#add-menu button[data-add="end"]{border-left:4px solid var(--end)}
#add-menu button[data-add="reputation"]{border-left:4px solid var(--rep)}
#add-menu button[data-add="progression"]{border-left:4px solid var(--prog)}
.ctx-row.colors{display:flex;gap:6px;padding:5px 7px}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.25)}
.swatch:hover{transform:scale(1.15);border-color:#fff}

/* ---------- json view (fills the map area, like an alternate view) ---------- */
#viewport[hidden],#json-view[hidden]{display:none}
#json-view{flex:1;display:flex;flex-direction:column;min-width:0;background:#15191f}
.jv-head{display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--edge);font-weight:bold}
.jv-head small{color:var(--muted);font-weight:normal;font-size:12px;margin-left:6px}
#json-status{font-size:12px;font-weight:bold;margin-left:10px;padding:2px 8px;border-radius:6px}
#json-status.ok{color:var(--accent2);background:rgba(55,200,113,.12)}
#json-status.warn{color:#ffb13a;background:rgba(255,177,58,.14)}
#json-status.error{color:#ff6b6b;background:rgba(255,107,107,.16)}
#json-copy{font:inherit;font-size:13px;color:var(--ink);background:var(--panel2);
  border:1px solid var(--edge);border-radius:7px;padding:6px 11px;cursor:pointer}
#json-copy:hover{background:#3a4253}
#json-editor{flex:1;min-height:0;width:100%}
#json-fallback{flex:1;width:100%;border:none;background:#15191f;color:#cfe3ff;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:13px;line-height:1.5;
  padding:12px 14px;resize:none;white-space:pre}
#json-fallback:focus{outline:none}

/* ---------- folder gate ---------- */
#gate{position:fixed;inset:0;z-index:300;background:rgba(12,15,20,.86);
  display:flex;align-items:center;justify-content:center}
#gate[hidden]{display:none}
.gate-box{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:28px 32px;max-width:440px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.gate-brand{font-size:24px;font-weight:bold;color:var(--accent);margin-bottom:10px}
#gate-msg{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 20px}
#gate-open{font:inherit;font-size:16px;font-weight:bold;color:#fff;background:var(--accent);
  border:none;border-radius:10px;padding:12px 22px;cursor:pointer}
#gate-open:hover{filter:brightness(1.1)}