/* ==========================================
   GoWorkAI — Light Minimal UI (v3)
   ========================================== */

/* ---------- Theme ---------- */
:root{
  --bg: #f6f8fb;              /* app background */
  --canvas: #f3f6fb;          /* canvas background */
  --panel: #ffffff;
  --border: #e5e7eb;          /* slate-200 */
  --line: #cbd5e1;            /* slate-300 */
  --text: #0f172a;            /* slate-900 */
  --subtle: #475569;          /* slate-600 */

  --brand: #1185ff;           /* primary */
  --brand-200: #cfe4ff;
  --brand-600: #2563eb;

  --ok: #10b981;
  --warn: #f59e0b;
  --rose: #ef4444;

  --shadow-soft: 0 6px 16px rgba(15,23,42,.08);
  --shadow-strong: 0 12px 32px rgba(15,23,42,.12);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(17,133,255,.08), transparent 60%),
    var(--bg);
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, "SF Pro", Arial, sans-serif;
}

/* ---------- Top Bar ---------- */
.topbar{
  height:60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:var(--panel);
  border-bottom:1px solid var(--border); box-shadow: var(--shadow-soft);
  gap:16px;
}
.topbar .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color:var(--brand-600); }
.topbar .subtitle{ color:var(--subtle); font-weight:600; }
.topbar .auth{ display:flex; align-items:center; gap:10px; }
.topbar .btn{
  padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--brand-600); font-weight:700; cursor:pointer;
}
.topbar .btn:hover{ background:#f8fafc; }
.topbar .avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.topbar .who{ color:var(--subtle); font-size:14px; }

.mobile-toggle{ display:none; }

#drawerOverlay{ display:none !important; pointer-events:none !important; }
#drawerOverlay.show{ display:none !important; pointer-events:none !important; }

body.drawer-open{ overflow:hidden; }

/* ---------- Layout ---------- */
.layout{
  height:calc(100vh - 60px);
  display:grid; grid-template-columns: 280px 1fr 320px;
}
.sidebar, .rightbar{
  background:var(--panel); border-right:1px solid var(--border);
  padding:14px; overflow:auto;
  z-index:1;
}
.rightbar{ border-right:none; border-left:1px solid var(--border); }
.sidebar h3, .rightbar h3{
  margin:6px 0 12px; font-size:14px; letter-spacing:.3px; text-transform:uppercase; color:#334155;
}
.project-meta{
  font-size:12px;
  color:#64748b;
  margin:-4px 0 12px;
  word-break:break-all;
}

/* ---------- Toolbox ---------- */
#toolbox .tool{
  user-select:none; cursor:grab; margin-bottom:10px;
  padding:12px 14px; border-radius:12px; font-weight:800;
  color:#0b2a55;
  background: linear-gradient(180deg, #e6f0ff, #d9eaff);
  border:1px solid #cfe1ff;
  box-shadow: var(--shadow-soft);
  transition: transform .06s, box-shadow .12s, filter .1s;
}
#toolbox .tool:hover{ filter:brightness(1.02); box-shadow: var(--shadow-strong); }
#toolbox .tool:active{ cursor:grabbing; transform:scale(.98); }

/* ---------- Canvas ---------- */
.canvas-wrap{
  position:relative; background:var(--canvas);
  background-image:
    radial-gradient(#e2e8f0 1px, transparent 1px),
    radial-gradient(#e2e8f0 1px, transparent 1px);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px, 40px 40px;
  border-left:1px solid var(--border); border-right:1px solid var(--border);
}
#drawflow{ width:100%; height:100%; }

/* ---------- Floating Toolbar ---------- */
.toolbar{
  position:absolute; right:16px; top:16px; display:flex; gap:8px; flex-wrap:wrap;
  background:#ffffffd9; border:1px solid var(--border); border-radius:12px; padding:8px;
  box-shadow: var(--shadow-soft); backdrop-filter: blur(6px);
}
.toolbar button{
  min-width:56px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text); font-weight:800; cursor:pointer;
}
.toolbar button:hover{ background:#f8fafc; }

/* ---------- Rightbar: Projects ---------- */
.project-actions{ display:flex; gap:8px; margin-bottom:12px; }
.project-actions input{
  flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); background:#fff;
}
.project-actions button{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:linear-gradient(180deg, #e8f0ff, #e0ebff); color:#093a8c; font-weight:800; cursor:pointer;
}
#projectList{ list-style:none; padding:0; margin:0; }
#projectList li{
  padding:10px 12px; margin-bottom:10px; border-radius:10px; border:1px solid var(--border);
  background:#fff; transition: transform .06s, box-shadow .12s;
}
#projectList li:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); }

.globals{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.globals h3{ margin:0 0 12px; font-size:14px; letter-spacing:.3px; text-transform:uppercase; color:#334155; }
.globals-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-bottom:12px;
}
.globals-actions input{
  padding:10px; border-radius:10px; border:1px solid var(--border); background:#fff;
}
.globals-actions button{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:linear-gradient(180deg, #f0fdf4, #dcfce7); color:#166534; font-weight:700; cursor:pointer;
}
.globals-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.globals-list li{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.globals-list .globals-empty{
  justify-content:center;
  color:#94a3b8;
  font-style:italic;
}
.globals-list .var-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.globals-list .var-key{
  font-weight:700;
  color:#0f172a;
}
.globals-list .var-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color:#1e3a8a;
  background:#f1f5f9;
  padding:4px 6px;
  border-radius:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height:40px;
  white-space:normal;
  word-break:break-word;
}
.globals-list .var-actions{
  display:flex;
  gap:6px;
}
.globals-list .var-actions button{
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  cursor:pointer;
}
.globals-list .var-actions button:hover{
  background:#f1f5f9;
}
.globals-hint{
  margin-top:10px;
  font-size:12px;
  color:#94a3b8;
}

/* ======================================================
   Drawflow: Node Cards / Ports / Connections
   ====================================================== */

.drawflow .drawflow-node{
  color:var(--text);
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow-soft);
  position:absolute;
  /* SHOW FULL PORT CIRCLES (fixes the "half circle" issue) */
  overflow: visible;
}

/* Title bar inside nodes: flex layout + gradient */
.drawflow .title-box{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  font-weight:900; font-size:13px; letter-spacing:.2px;
  background: linear-gradient(180deg, #f3f7ff, #eef4ff);
  border-bottom:1px solid var(--border);
}
.drawflow .title-box .node-title{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.drawflow .box{ padding:12px 14px; }

/* Node accents (based on className) */
.drawflow .start .title-box{
  background: linear-gradient(180deg, #ffecec, #ffe8e8);
  border-bottom-color: #ffd3d3;
  color:#a31212;
}
.drawflow .worker .title-box{
  background: linear-gradient(180deg, #eef2ff, #e9edff);
  border-bottom-color:#d8defb; color:#1e3a8a;
}
.drawflow .decision .title-box{
  background: linear-gradient(180deg, #fff7e6, #fff3d9);
  border-bottom-color:#ffe6b3; color:#7a4e00;
}
.drawflow .http .title-box{
  background: linear-gradient(180deg, #eaf2ff, #e2ecff);
  border-bottom-color:#cfe1ff; color:#0b2a55;
}
.drawflow .formatter .title-box{
  background: linear-gradient(180deg, #fff1f1, #ffe9e9);
  border-bottom-color:#ffd3d3; color:#8a1d1d;
}
.drawflow .display .title-box{
  background: linear-gradient(180deg, #eefdf4, #e5fbf0);
  border-bottom-color:#c6f6d5; color:#14532d;
}

/* Selected node – soft blue ring (no red) */
.drawflow .drawflow-node.selected{
  border-color: #60a5fa;
  box-shadow:
    0 0 0 4px rgba(125,211,252,.45),
    0 12px 28px rgba(15,23,42,.12);
}

/* --------- Ports (full circles, high contrast) --------- */
.drawflow .input, .drawflow .output{
  width:16px; height:16px; border-radius:50%;
  border:2px solid #0f172a;         /* dark inner ring */
  background:#ffffff;                /* white core */
  box-shadow: 0 0 0 4px #ffffff,     /* white bezel so it pops from node edge */
              0 0 0 6px rgba(17,133,255,.25);  /* subtle blue halo */
}
.drawflow .input:hover, .drawflow .output:hover{
  box-shadow: 0 0 0 4px #ffffff,
              0 0 0 8px rgba(17,133,255,.4),
              0 0 14px rgba(17,133,255,.45);
  transform: scale(1.05);
}

/* --------- Connection Lines --------- */
.drawflow svg path{ stroke: #2563eb; }
.drawflow .connection .main-path{
  stroke-width: 3.5px; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(37,99,235,.25));
}
.drawflow .connection .main-path:hover{
  stroke: #0ea5e9;
  filter: drop-shadow(0 0 6px rgba(14,165,233,.35));
}

/* --------- Form controls inside nodes --------- */
.box .hint{ font-size:12px; color:#64748b; margin-bottom:6px; }
.box .hint.small{ font-size:11px; color:#94a3b8; }

.df-input, .df-textarea, .df-select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff; color:var(--text);
  outline:none;
  transition: border-color .08s ease, box-shadow .08s ease;
}
.df-textarea{ min-height:90px; resize:vertical; }
.df-input:focus, .df-textarea:focus, .df-select:focus{
  border-color:#93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

/* HTTP row: big URL field */
.box .row{ display:flex; gap:8px; align-items:center; }
.df-select{ min-width:110px; }      /* method width */
.box .row .df-input{ flex:1; }      /* URL grows */

/* Buttons inside nodes (future) */
.box .btn{
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#f8fafc; color:#0f172a; font-weight:700; cursor:pointer;
}
.box .btn:hover{ background:#eef2f7; }

/* ---------- Scrollbars (webkit) ---------- */
.sidebar::-webkit-scrollbar,
.rightbar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-thumb,
.rightbar::-webkit-scrollbar-thumb{
  background:#d1d5db; border-radius:10px; border:2px solid transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .layout{ grid-template-columns: 240px 1fr 0; }
  .rightbar{ display:none; }
}
@media (max-width: 820px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
}
/* Reroute handle: make it a circle (not a pill) */
.drawflow .point{
  width:14px; height:14px;
  border-radius:50% !important;
  background:#ffffff;
  border:2px solid #2563eb;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(37,99,235,.25);
}
.drawflow .point:hover,
.drawflow .point.selected{
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 8px rgba(37,99,235,.38), 0 0 12px rgba(37,99,235,.35);
}
/* HTTP node: wide URL row */
.drawflow .http .row{
  display: grid;
  grid-template-columns: 120px 1fr; /* method | URL */
  gap: 8px;
  align-items: center;
}
/* Node title bar: delete button */
.title-box { position: relative; padding-right: 40px; }
.title-box .node-title { display:inline-block; }

.node-del-btn{
  width:28px; height:28px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--border);
  background:#ffffff; color:#1f2937; cursor:pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.node-del-btn:hover{
  background:#f8fafc; border-color:#93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}
.node-del-btn svg{ display:block; }

/* Confirm modal */
#confirm-overlay{
  position: fixed; inset: 0; background: rgba(15,23,42,0.35);
  display:none; align-items:center; justify-content:center; z-index: 9999;
}
#confirm-overlay.show{ display:flex; }

.confirm-dialog{
  width: min(440px, 92vw);
  background: #fff; color:#0f172a;
  border:1px solid #e5e7eb; border-radius:14px;
  box-shadow: 0 16px 48px rgba(15,23,42,.22);
  overflow:hidden;
}
.confirm-title{
  padding:12px 16px; font-weight:800;
  background: linear-gradient(180deg, #f3f7ff, #eef4ff);
  border-bottom:1px solid #e5e7eb;
}
.confirm-body{ padding:14px 16px; color:#334155; }
.confirm-actions{
  display:flex; gap:10px; justify-content:flex-end;
  padding:12px 16px; background:#fafafa; border-top:1px solid #e5e7eb;
}
.confirm-actions .btn-secondary,
.confirm-actions .btn-primary{
  padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb;
  font-weight:800; cursor:pointer;
}
.confirm-actions .btn-secondary{ background:#fff; color:#0f172a; }
.confirm-actions .btn-secondary:hover{ background:#f8fafc; }
.confirm-actions .btn-primary{
  background: linear-gradient(180deg, #e8f0ff, #e0ebff); color:#093a8c; border-color:#cfe1ff;
}
.confirm-actions .btn-primary:hover{ filter:brightness(1.02); }


/* Title row now has an actions cluster on the right */
.node-actions-tray{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -120%);
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border, #e5e7eb);
  background:rgba(255,255,255,.95);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  z-index:2;
  pointer-events:auto;
}
.node-actions-tray .node-btn{
  width:28px; height:28px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--border, #e5e7eb);
  background:#ffffff; color:#1f2937; cursor:pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.node-actions-tray .node-btn:hover{
  background:#f8fafc; border-color:#93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}
.node-actions-tray .node-run-btn{
  color:#0b2a55;
}
.node-actions-tray .node-del-btn{
  color:#8b1a1a;
}
.node-actions-tray .node-info-btn{
  color:#2563eb;
  font-weight:800;
}

.node-brief{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.node-brief .node-desc{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:var(--subtle);
}

.drawflow .drawflow-node.processing{
  animation: nodePulse 1.2s ease-in-out 2;
  border-color:#60a5fa;
  box-shadow:
    0 0 0 4px rgba(96,165,250,.35),
    0 12px 28px rgba(15,23,42,.14);
}

.drawflow .drawflow-node.active{
  background:#f0fdf4;
  border-color:#86efac;
  box-shadow:
    0 0 0 4px rgba(134,239,172,.35),
    0 12px 28px rgba(15,23,42,.12);
}
.drawflow .drawflow-node.active .title-box{
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  border-bottom-color:#86efac;
  color:#14532d;
}

.worker-summary{
  gap:10px;
}
.worker-summary .worker-meta{
  font-size:12px;
  color:#1e293b;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.worker-config-panel{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.worker-log-section h3{
  margin:0 0 6px;
  font-size:15px;
  color:#0f172a;
}
.worker-log-meta{
  margin:0 0 12px;
  color:#64748b;
  font-size:12px;
}
.worker-log-output{
  margin:0;
  padding:12px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#0f172a;
  max-height:260px;
  overflow:auto;
  white-space:pre-wrap;
}
.worker-log-error{
  margin-top:12px;
  padding:10px;
  border-radius:10px;
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
  font-size:13px;
}

.decision-config-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.decision-status{
  padding:12px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-size:13px;
  color:#1f2937;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.decision-last-run{
  color:#64748b;
  font-size:12px;
}
.decision-error{
  padding:8px 10px;
  border-radius:8px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#b91c1c;
  font-size:12px;
}

@media (max-width: 1200px){
  .layout{ grid-template-columns:240px 1fr 280px; }
}

@media (max-width: 1024px){
  .subtitle{ display:none; }
  .layout{ grid-template-columns:220px 1fr 260px; }
  .sidebar,
  .rightbar{
    position:static;
    width:auto;
    max-height:none;
    transform:none !important;
    box-shadow:none;
  }
  .canvas-wrap{ height:auto; }
  .toolbar{ top:16px; right:16px; }
}

@media (max-width: 640px){
  .topbar .brand{ font-size:16px; }
  .topbar .auth .btn{ padding:6px 10px; font-size:13px; }
  .toolbar button{ min-width:48px; padding:6px 10px; }
  .globals-actions button{ padding:8px 10px; }
}

@keyframes nodePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.02); }
}

/* Info modal */
#info-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
#info-overlay.show{ display:flex; }
.info-dialog{
  width:min(640px, 94vw);
  background:#fff;
  border-radius:16px;
  border:1px solid #e2e8f0;
  box-shadow:0 24px 64px rgba(15,23,42,.28);
  display:flex;
  flex-direction:column;
  max-height:90vh;
}
.info-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid #e2e8f0;
  background:linear-gradient(180deg, #f1f5f9, #e2e8f0);
}
.info-header h2{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}
.info-close{
  border:none;
  background:transparent;
  font-size:18px;
  cursor:pointer;
  color:#475569;
}
.info-close:hover{ color:#1e293b; }
.info-body{
  padding:20px;
  overflow:auto;
}
.info-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 20px;
  border-top:1px solid #e2e8f0;
  background:#f8fafc;
}

.node-config-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.node-config-form .cfg-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:#0f172a;
}
.node-config-form .cfg-field input,
.node-config-form .cfg-field textarea,
.node-config-form .cfg-field select{
  padding:10px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:14px;
  background:#fff;
}
.node-config-form .cfg-hint{
  margin:0;
  font-size:12px;
  color:#64748b;
}
.node-info-generic{
  font-size:14px;
  color:#475569;
}

/* Small output box inside AI Worker node for test results */
.worker-output{
  margin-top:10px; padding:10px; border-radius:10px;
  background:#f8fafc; border:1px solid #e5e7eb; color:#0f172a;
  white-space: pre-wrap;
}
/* Allow typing and interaction inside node input fields */
.drawflow .drawflow-node .df-input,
.drawflow .drawflow-node .df-textarea,
.drawflow .drawflow-node .df-select {
  pointer-events: auto !important;
  user-select: text !important;
}

/* General inputs in nodes */
.df-input, .df-textarea, .df-select {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #111;
  box-sizing: border-box;
}

.df-textarea {
  min-height: 60px;
  resize: vertical;
}

.df-select {
  height: 32px;
  cursor: pointer;
}
/* ✅ Allow typing inside node inputs */
.drawflow .drawflow-node .box,
.drawflow .drawflow-node input,
.drawflow .drawflow-node textarea,
.drawflow .drawflow-node select {
  pointer-events: auto !important;
  user-select: text !important;
  cursor: text !important;
}

/* ✅ Make sure fields look editable */
.drawflow .drawflow-node input,
.drawflow .drawflow-node textarea,
.drawflow .drawflow-node select {
  background-color: #fff;
  color: #111;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}

.drawflow .drawflow-node textarea {
  min-height: 60px;
  resize: vertical;
}