/* The designer's dashboard (Dark Research Knowledge Graph Dashboard), as a skin over the demo's own DOM.
   ---------------------------------------------------------------------
   Nothing here changes what the demo does: every id and handler in style.css / demo-page.css / app.js is
   untouched. demo-comp.js builds the few new pieces of chrome (icon rail, top bar contents, floor row,
   graph toolbar, answer card) and moves existing controls into them; this file lays it all out.
   Loaded LAST so its rules win. Palette: deep navy panels, one purple accent, six node colours. */
:root {
  --bg: #070b16; --panel: #111a30; --line: #243055; --ink: #e9eef9;
  --dim: #8d99b3; --accent: #7d63ff; --ok: #4cd0a0; --bad: #ef5f5f;
  --blue: #6195ff; --purple: #9b72ff;
  --cb-bg: #070b16; --cb-panel: #0d1324; --cb-panel2: #111a30; --cb-line: #1a2340; --cb-line2: #243055;
  --cb-ink: #e9eef9; --cb-dim: #8d99b3; --cb-faint: #5d6a88;
  --cb-purple: #5b46f0; --cb-purple2: #7d63ff; --cb-green: #4cd0a0; --cb-amber: #f2b13c; --cb-red: #ef5f5f;
  --rail: 74px; --c-chats: clamp(214px, 15vw, 300px); --c-wb: clamp(240px, 16.6vw, 330px); --c-chat: clamp(340px, 25.6vw, 470px); --bar-h: 60px;
}
html, body { background: var(--cb-bg); }
body {
  color: var(--cb-ink); font: 14px/1.5 Inter, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  grid-template-columns: var(--rail) var(--c-chats) var(--c-wb) minmax(0, 1fr) var(--c-chat);
  grid-template-rows: var(--bar-h) minmax(0, 1fr);
  grid-template-areas: "bar bar bar bar bar" "rail chats peel center chat";
  gap: 0;
}
body.wb { --c-wb: clamp(240px, 16.6vw, 330px); }
header { display: none; }                                   /* its controls live in the new chrome */
footer.site-footer { display: none; }

/* ── top bar (the old demo bar) ───────────────────────────────────── */
#demobar { grid-area: bar; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 0 20px;
  height: var(--bar-h); background: var(--cb-bg); border-bottom: 1px solid var(--cb-line); font-size: 13px; color: var(--cb-dim); }
#demobar > .desc, #demobar > b { display: none; }
#demobar .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 24px; font-weight: 700;
  letter-spacing: -.02em; flex: none; }
#demobar .brand svg { width: 34px; height: 34px; flex: none; }
#demobar .prod { color: #fff; font-weight: 600; font-size: 14px; margin-left: 6px; white-space: nowrap; }
#demobar .demo-pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8fa6ff; border: 1px solid #34408a; background: #121a3d;
  padding: 3px 10px; border-radius: 999px; }
#demobar .tagline { color: var(--cb-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
#topsearch { position: relative; flex: 1 1 360px; max-width: 480px; margin: 0 auto 0 8px; }
#topsearch svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--cb-dim); pointer-events: none; }
#topsearch #nodesearch { width: 100%; height: 40px; padding: 0 56px 0 40px; border-radius: 12px; background: #0b1124; border: 1px solid var(--cb-line2);
  color: var(--cb-ink); font-size: 13.5px; }
#topsearch #nodesearch::placeholder { color: var(--cb-dim); }
#topsearch kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 11px ui-monospace, Menlo, monospace; color: var(--cb-dim);
  border: 1px solid var(--cb-line2); border-radius: 6px; padding: 2px 6px; background: #0f1630; }
#demobar .spacer { flex: 1 1 0; min-width: 0; }
#demobar a { color: #8fa6ff; }
#demobar .bar-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  color: var(--cb-dim); background: none; border: 0; cursor: pointer; text-decoration: none; }
#demobar .bar-icon:hover { color: #fff; background: #11193a; }
#demobar .bar-icon svg { width: 20px; height: 20px; }
#demobar .avatar { display: inline-flex; align-items: center; gap: 8px; flex: none; color: #fff; text-decoration: none; font-weight: 500; }
#demobar .avatar i { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #5b46f0, #8a6bff); display: inline-flex;
  align-items: center; justify-content: center; font-style: normal; font-weight: 700; }
#demobar .demo-btn { background: #0f1630; border-color: var(--cb-line2); color: #b9c6ee; }
#demobar .demo-btn.primary { background: var(--cb-purple); border-color: var(--cb-purple); color: #fff; }
#demobar .demo-btn.clear { background: #0f1630; border-color: var(--cb-line2); color: #f0cf94; }
#demobar .demo-mode { border-color: #34408a; color: #9bb0ff; }
#demobar .langsel { border-color: var(--cb-line2); }
#demobar .langsel .on { background: #1a2350; color: #b6c4ff; }
#demobar .langsel select { background: #111a30; color: #e9eef9; border: 1px solid var(--cb-line2); border-radius: 7px; padding: 5px 8px; }
#demobar .acct-cta { border-color: var(--cb-line2) !important; color: #b6c4ff !important; border-radius: 10px !important; padding: 5px 12px !important; }
#demobar .acct-cta:hover { background: #151e44 !important; }
#demobar .acct-manual { color: var(--cb-amber) !important; border-color: #5a4520 !important; }
#demobar .work-menu { position: relative; flex: none; color: var(--cb-ink); }
#demobar .work-menu summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  border: 1px solid var(--cb-line2); border-radius: 11px; padding: 5px 10px 5px 5px; background: #0f1629; }
#demobar .work-menu summary::-webkit-details-marker { display: none; }
#demobar .work-menu summary i { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-style: normal; color: white; background: linear-gradient(135deg, #5b46f0, #8a6bff); font-weight: 700; }
#demobar .work-panel { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 24px));
  max-height: min(72vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 14px;
  background: #10182c; border: 1px solid var(--cb-line2); border-radius: 14px; box-shadow: 0 16px 40px #000a; }
#demobar .work-menu:not([open]) .work-panel { display: none; }
#demobar .work-panel > a, #demobar .work-panel > span:not(.spacer) { padding: 7px 8px; }
#demobar .work-panel #demo-ctl { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0; }
#demobar .work-panel .demo-mode { flex-basis: 100%; }
#demobar .work-panel .langsel { align-self: flex-start; }
#demobar .work-panel .spacer { display: none; }

/* ── icon rail ────────────────────────────────────────────────────── */
#rail { grid-area: rail; display: flex; flex-direction: column; align-items: stretch; padding: 14px 8px; gap: 4px; background: var(--cb-bg);
  border-right: 1px solid var(--cb-line); }
#rail a, #rail button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border-radius: 12px; color: var(--cb-dim);
  text-decoration: none; background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; }
#rail a:hover, #rail button:hover { color: #fff; background: #0e1630; }
#rail .on { color: #fff; background: #131c3d; box-shadow: inset 3px 0 0 var(--cb-purple2); }
#rail svg { width: 22px; height: 22px; }
#rail .grow { flex: 1; }

/* ── chats column ─────────────────────────────────────────────────── */
#chatscol { grid-area: chats; background: var(--cb-bg); border-right: 1px solid var(--cb-line); padding: 0 12px 12px; }
#chatscol{position:relative;overflow-x:hidden}#chatscol.calendar-rail-open{overflow-y:hidden}.calendar-rail{position:absolute;inset:0;z-index:7;padding:14px 12px;background:var(--cb-bg);border-right:1px solid var(--cb-line);transform:translateX(-105%);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.22,.8,.24,1),opacity .3s ease;overflow-y:auto}.calendar-rail-open .calendar-rail{transform:translateX(0);opacity:1;pointer-events:auto}.calendar-rail-head,.calendar-rail-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.calendar-rail-head{font-size:21px;margin:4px 0 20px}.calendar-rail-head button,.calendar-rail-controls button,.calendar-rail-today{border:1px solid var(--cb-line2);background:#101a32;color:#e9eef9;border-radius:9px;cursor:pointer}.calendar-rail-head button{font-size:22px;width:30px;height:30px}.calendar-rail-controls button{font-size:20px;width:31px;height:31px}.calendar-rail-controls strong{font-size:13px;text-align:center}.calendar-rail-today{width:100%;padding:7px;margin:10px 0}.calendar-rail-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.calendar-rail-weekday{text-align:center;color:#8d99b3;font-size:10px;padding:5px 0}.calendar-rail-day{height:37px;min-width:0;border:1px solid #263250;border-radius:7px;background:#0d1730;color:#dce5f8;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.calendar-rail-day:hover,.calendar-rail-day:focus-visible{border-color:#8a73ff;background:#211b4c}.calendar-rail-day.today{border-color:#7d63ff}.calendar-rail-day i{font-size:8px;font-style:normal;color:#72dbbc}.calendar-rail-note{color:#8d99b3;font-size:11px;margin:14px 2px}.calendar-rail-loading{grid-column:1/-1;color:#8d99b3;font-size:12px}.calendar-detail-only .calendar-overview{display:none}
body[data-work-focus]{transition:grid-template-columns .42s cubic-bezier(.22,.8,.24,1)}body[data-work-focus] :is(#rail,#chatscol,#peelcol,#graphview,#chatcol){opacity:1!important;filter:none!important}body[data-work-focus] #chatscol{min-width:0}#chatscol .second-rail-close{border:1px solid #2a3655;background:#10182d;color:#dce5f8;border-radius:8px;width:30px;height:30px;font-size:20px;cursor:pointer}.calendar-day-card{margin:10px 14px 0;padding:11px;border:1px solid #34466c;border-radius:12px;background:#101a31;max-height:30vh;overflow:auto;flex:none}.calendar-day-card[hidden]{display:none}.calendar-day-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.calendar-day-card-head button{border:1px solid #34466c;background:#18223a;color:#e8eef9;border-radius:7px;width:27px;height:27px;cursor:pointer}.calendar-day-card p{font-size:12px;margin:7px 0;color:#dce5f8}.calendar-day-card small,.calendar-day-card li span{color:#8d99b3}.calendar-day-card ul{padding-left:18px;margin:7px 0 0}.calendar-day-card li{font-size:11px;margin:4px 0}
#chatscol .colhead { background: var(--cb-bg); border: 0; padding: 18px 4px 10px; font-size: 20px; }
#chatscol .colname { font-size: 21px; font-weight: 650; }
#chatscol #newchat { background: var(--cb-purple); border: 0; color: #fff; border-radius: 10px; padding: 8px 16px; font-weight: 600; font-size: 13.5px; }
#chatscol #newchat:hover { background: var(--cb-purple2); }
#chatscol #organize { background: none; border: 0; color: var(--cb-dim); }
#chatscol .pad { padding: 0 0 10px; }
#chatsearch { background: #0b1124 !important; border: 1px solid var(--cb-line2) !important; border-radius: 12px !important; padding: 10px 12px !important;
  color: var(--cb-ink); font-size: 13.5px !important; }
#chatscol .daygroup { background: var(--cb-bg); border: 0; padding: 14px 6px 6px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--cb-ink);
  font-weight: 500; top: 0; }
#chatscol .chatrow { margin: 2px 0; padding: 10px 12px; border: 0; border-radius: 12px; }
#chatscol .chatrow:hover { background: #0f1630; }
#chatscol .chatrow.active { background: #141d44; box-shadow: none; border: 0; }
#chatscol .chatrow .ct { font-size: 14px; font-weight: 450; }
#chatscol .chatrow .when { color: var(--cb-faint); font-size: 12px; margin-top: 2px; }

/* ── workbench column: always open ────────────────────────────────── */
#peelcol { grid-area: peel; display: block !important; background: var(--cb-bg); border-right: 1px solid var(--cb-line); padding: 14px 14px 18px; }
#peelcol > .colhead, #peelcol > .pad, #peelcol > #pharvest, #peelcol > #presearch, #peelcol > #wb-knowledge { display: none; }
#peelcol .card { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 14px; margin: 10px 0; padding: 14px; }
#peelcol .card h2 { color: var(--cb-ink); font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 650; }
.floorrow { display: flex; align-items: center; gap: 10px; }
.floorrow select { flex: 1; min-width: 0; height: 40px; border-radius: 12px; background: #0b1124; border: 1px solid var(--cb-line2); color: var(--cb-ink); padding: 0 12px; font-size: 14px; }
.floorrow .edges { color: var(--cb-ink); font-size: 14px; white-space: nowrap; }
.floorrow .more { width: 40px; height: 40px; border-radius: 12px; background: #0b1124; border: 1px solid var(--cb-line2); color: var(--cb-ink); cursor: pointer; font-size: 18px; }
.floorrow .drawer-close { display: none; width: 40px; height: 40px; border-radius: 12px; background: #0b1124;
  border: 1px solid var(--cb-line2); color: var(--cb-ink); cursor: pointer; font-size: 23px; }
.wbtabs { display: flex; gap: 6px; margin: 14px 0 12px; border-bottom: 1px solid var(--cb-line); }
.wbtabs button { background: none; border: 0; color: var(--cb-dim); font: inherit; font-size: 13.5px; padding: 8px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wbtabs button.on { color: #fff; border-bottom-color: var(--cb-purple2); }
.wb-index { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: thin; }
.wb-index button { flex: none; min-height: 34px; padding: 6px 9px; border: 1px solid var(--cb-line2); border-radius: 999px; background: #0b1328; color: #b7c3dd; font: inherit; font-size: 11.5px; cursor: pointer; }
.wb-index button:hover, .wb-index button:focus-visible { color: #fff; border-color: var(--cb-purple2); }
.newmind { display: block; width: 100%; text-align: center; padding: 14px 12px; border-radius: 14px; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #5b46f0, #7d63ff); box-shadow: 0 8px 24px #5b46f055; font: inherit; }
.newmind b { display: block; font-size: 15px; } .newmind span { font-size: 12.5px; opacity: .85; }
.wbsec { margin: 18px 0 6px; display: flex; align-items: center; justify-content: space-between; }
.wbsec h3 { margin: 0; font-size: 15px; font-weight: 650; color: #fff; }
.wbsec a, .wbsec button { color: #8fa6ff; font-size: 13px; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.wbsec .btnline { border: 1px solid var(--cb-line2); border-radius: 10px; padding: 6px 12px; color: var(--cb-ink); }
.wbrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: var(--cb-panel); border: 1px solid var(--cb-line);
  cursor: pointer; color: var(--cb-ink); font-size: 13.5px; width: 100%; text-align: left; font-family: inherit; }
.wbrow:hover { border-color: var(--cb-line2); background: #101830; }
.wbrow .ic { width: 38px; height: 38px; border-radius: 10px; background: #151e44; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #9fb0ee; }
.wbrow .t { flex: 1 1 auto; min-width: 0; } .wbrow .t b { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbrow .t span { color: var(--cb-faint); font-size: 12px; }
.wbrow.tile { padding: 9px 10px; gap: 8px; } .wbrow.tile .t b { font-size: 13.5px; } .wbrow.tile .kind, .wbrow.tile .n { font-size: 12px; flex: none; }
.wbrow.tile .dot { width: 18px; height: 18px; }
.wbrow .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.gpop { position: absolute; right: 0; top: 44px; z-index: 9; display: flex; flex-direction: column; gap: 6px; padding: 10px; margin: 0; }
.gpop[hidden] { display: none; }
#chatscol .searchrow { display: flex; gap: 8px; align-items: center; } #chatscol .searchrow #chatsearch { flex: 1; min-width: 0; }
#chatscol .searchrow #organize { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--cb-line2); background: #0b1124; }
.wbrow .kind { color: var(--cb-dim); font-size: 12.5px; } .wbrow .n { margin-left: auto; color: var(--cb-dim); font-size: 12.5px; white-space: nowrap; }
.catrow { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13.5px; color: var(--cb-ink); cursor: pointer; }
.catrow input { accent-color: var(--cb-purple2); width: 16px; height: 16px; }
.catrow i { width: 12px; height: 12px; border-radius: 50%; flex: none; } .catrow .n { margin-left: auto; color: var(--cb-dim); font-size: 12.5px; }
.catrow.off { opacity: .5; }
.catrow .cat-explore{display:flex;align-items:center;gap:8px;flex:1;min-width:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;padding:2px 0}.catrow .cat-explore:hover{color:#bbaaff}.catrow input{cursor:pointer}#peelcol .wbsec .wb-heading-action{border:0;background:transparent;color:#fff;font:inherit;font-weight:650;cursor:pointer;padding:0;text-align:left}#peelcol .wbsec .wb-heading-action:hover{text-decoration:underline;color:#bbaaff}
#libbox label, #libbox .lib { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; color: var(--cb-ink); }

/* ── centre: the graph ────────────────────────────────────────────── */
main#graphview { grid-area: center; position: relative; background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 16px; margin: 12px 10px;
  overflow: hidden; background-image: radial-gradient(70% 60% at 50% 50%, rgba(80, 70, 220, .10), rgba(7, 11, 22, 0) 70%); }
#exploreview, #discoverview, #runsview, #ledgerview, #notebookview, #scientistview, #visionview, #calendarview, #resolverview, #traceview { grid-area: center; margin: 12px 10px; border-radius: 16px;
  border: 1px solid var(--cb-line); background: var(--cb-panel); padding-top: 70px; }
#graphbar { grid-area: center; align-self: start; justify-self: stretch; position: relative; z-index: 6;
  margin: 24px 24px 0; display: flex; align-items: center; gap: 10px; pointer-events: none; min-width: 0; }
#graphbar > * { pointer-events: auto; }
#graphbar .graph-only { display: none; }
#graphbar.show-graph-tools .graph-only { display: inline-flex; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: #0b1124; border: 1px solid var(--cb-line2); }
.seg button { background: none; border: 0; color: var(--cb-dim); font: inherit; font-size: 13.5px; padding: 7px 18px; border-radius: 9px; cursor: pointer; }
.seg button.on { background: #1a2350; color: #fff; }
#graphbar .sp { flex: 1; }
#graphbar select, #graphbar .tb { height: 38px; border-radius: 11px; background: #0b1124; border: 1px solid var(--cb-line2); color: var(--cb-ink); font-size: 13.5px; padding: 0 12px; cursor: pointer; }
#graphbar .tb { width: 40px; padding: 0; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
#graphbar .tb:hover, #graphbar select:hover { border-color: var(--cb-purple2); }
#exploreview{overflow-y:auto;padding:76px 20px 24px!important;color:var(--cb-ink)}.explore-head{display:flex;justify-content:space-between;gap:18px;align-items:start;border-bottom:1px solid var(--cb-line2);padding-bottom:16px;margin-bottom:16px}.explore-head small{color:var(--cb-dim)}.explore-head h2{font-size:21px;margin:6px 0}.explore-head p{font-size:12px;color:var(--cb-dim);line-height:1.5;margin:0}.explore-actions{display:flex;gap:6px;flex:none}.explore-actions button,.explore-back{border:1px solid var(--cb-line2);border-radius:9px;background:#141d38;color:#e7eaff;padding:8px 10px;cursor:pointer}.explore-search{width:100%;border:1px solid var(--cb-line2);border-radius:9px;background:#101a32;color:#eef1ff;padding:10px;margin-bottom:16px}.explore-group{margin:14px 0 24px}.explore-group h3{margin:0 0 8px}.explore-group h3 button{width:100%;text-align:left;background:#182349;border:1px solid #354579;color:#f0f1ff;border-radius:10px;padding:10px;cursor:pointer}.explore-group h3 span{float:right;font-size:11px;color:#a7b2cf}.explore-card{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #253457;border-radius:10px;background:#0e1830;color:#f0f2ff;text-align:left;padding:11px;margin:6px 0;cursor:pointer}.explore-card:hover,.explore-relation button:hover{border-color:#8d78ff;background:#1c2450}.explore-card strong{font-size:12px;overflow-wrap:anywhere;flex:1}.explore-card small{color:#9faccc;font-size:10px;max-width:38%;overflow-wrap:anywhere}.explore-card i{width:11px;height:11px;border-radius:50%;flex:none}.explore-icon{font-size:19px}.explore-count,.explore-empty{color:#acb9d1;font-size:12px}.explore-fields{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;font-size:12px}.explore-fields dt{color:#9faccc;text-transform:capitalize}.explore-fields dd{margin:0;overflow-wrap:anywhere}.explore-fields a,.explore-receipts a,.explore-relation a{color:#97baff}.explore-receipts,.explore-relation{border-top:1px solid #263550;padding:12px 0}.explore-receipts small,.explore-relation small{display:block;color:#92a0bd;font-size:10px;margin-top:3px}.explore-relation button{display:block;border:1px solid #354579;border-radius:8px;background:#131d3d;color:#eef1ff;cursor:pointer;padding:6px;margin:7px 0}.explore-relation p{overflow-wrap:anywhere;font-size:11px}.explore-back{margin-bottom:16px}
#graphbar .gpop { width: 270px; padding: 14px; }
.spatial-title { display:block; margin-bottom:9px; color:#e5e9ff; }
.spatial-control { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:9px 0; font-size:12px; color:#b9c2d7; }
.spatial-control output { color:#85ead6; font-variant-numeric:tabular-nums; }
.spatial-control input { grid-column:1 / -1; width:100%; accent-color:#7658ff; }
.spatial-views { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:12px; }
.spatial-views .btn { padding:5px 2px; font-size:10px; }
.spatial-check { display:block; margin:10px 0; color:#b9c2d7; font-size:11px; }
.spatial-help { margin:10px 0 0; color:#7f8ba5; font-size:10px; line-height:1.45; }
#spatialhud { position:absolute; left:14px; bottom:14px; z-index:4; padding:8px 12px; border:1px solid var(--cb-line); border-radius:999px; background:rgba(7,12,26,.84); color:#91a0bc; font-size:11px; backdrop-filter:blur(10px); }
#spatialhud.active { color:#a6ffeb; border-color:#276b63; box-shadow:0 0 24px rgba(73,245,207,.18); }
.molecule-spatial { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin:10px 0; padding:10px; border:1px solid var(--cb-line,#26304b); border-radius:10px; background:#080e1d; }
.molecule-spatial label { display:grid; grid-template-columns:1fr auto; color:#b9c2d7; font-size:11px; gap:3px 8px; }
.molecule-spatial output { color:#7fffe1; font-variant-numeric:tabular-nums; }
.molecule-spatial input { grid-column:1/-1; width:100%; accent-color:#7658ff; }
.molecule-spatial>div { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.molecule-spatial button { border:1px solid #283554; background:#10172c; color:#dce4f5; border-radius:7px; padding:6px; cursor:pointer; }
#graphctl { display: none; }
#viewbtn { font-size: 0 !important; width: 40px !important; padding: 0 !important; }
#viewbtn::before { content: "⋯"; font-size: 20px; line-height: 1; }
.floorrow select { text-overflow: ellipsis; }                                 /* the old controls; their buttons are re-homed in #graphbar */
#legend { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-radius: 14px;
  background: rgba(10, 15, 32, .88); border: 1px solid var(--cb-line2); font-size: 13px; max-width: calc(100% - 190px); }
#graphstat { position: absolute; right: 14px; bottom: 14px; z-index: 4; padding: 12px 18px; border-radius: 14px; background: rgba(10, 15, 32, .88);
  border: 1px solid var(--cb-line2); font-size: 13px; color: var(--cb-ink); line-height: 1.5; }
#graphstat button { display:block;width:100%;padding:1px 0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit; }
#graphstat button:hover,#dbstat:hover,.src[role="button"]:hover { color:#9cebd7;text-decoration:underline;text-underline-offset:3px; }
#dbstat { cursor:pointer;border-radius:6px;padding:3px 5px; }
.src[role="button"] { cursor:pointer;border-radius:8px;padding:8px; }
.relation-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:14px}.relation-head span{color:#7d63ff;font-size:10px;font-weight:800;letter-spacing:.12em}.relation-head h2{font-size:24px;margin:3px 0}.relation-head p{color:#8d99b3}.relation-head button,.relation-tools input,.relation-tools select{border:1px solid #2b385b;background:#0b1225;color:#e7ecf8;border-radius:9px;padding:8px 10px}.relation-tools{display:grid;grid-template-columns:1fr 230px;gap:8px;margin-bottom:10px}.relation-patterns{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px}.relation-patterns button{white-space:nowrap;border:1px solid #253252;background:#0b1325;color:#9eabc5;border-radius:999px;padding:5px 9px;cursor:pointer}.relation-patterns button:hover,.relation-patterns button.active{border-color:#735cff;background:#21194b;color:#fff}.relation-patterns b{color:#73e4c2;margin-left:3px}.relation-grid{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(135px,.9fr) minmax(130px,1.1fr) minmax(170px,1.25fr) 105px;gap:10px;align-items:center}.relation-grid-head{padding:8px 10px;color:#76839f;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.relation-rows{border:1px solid #202b49;border-radius:12px;overflow:hidden}.relation-rows article{padding:10px;border-bottom:1px solid #202b49;background:#090f1e}.relation-rows article:last-child{border-bottom:0}.relation-rows article:hover{background:#0e1730}.relation-node,.relation-next{border:1px solid #2a385d;background:#111a31;color:#cfd8f4;border-radius:8px;padding:7px 8px;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.relation-node:hover,.relation-next:hover{border-color:#735cff;color:#fff}.relation-type{display:block;color:#73e4c2;font-size:12px}.relation-grid small{display:block;color:#75819a;font-size:9px;margin-top:3px}.relation-why b,.relation-why a,.relation-why span{display:block;font-size:10px}.relation-why a{color:#8fa6ff}.relation-mini{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #243055}.relation-mini button{border:1px solid #2a385d;background:#111a31;color:#dce5f8;border-radius:7px;padding:7px;cursor:pointer}.relation-mini b{color:#73e4c2;font-size:11px}

/* ── right: ask Lois ──────────────────────────────────────────────── */
#chatcol { grid-area: chat; display: flex; flex-direction: column;
  height: 100%; max-height: 100%;
  background: var(--cb-bg); border-left: 1px solid var(--cb-line);
  padding: 0; min-height: 0; overflow: hidden; }
#chatcol > .colhead, #chatcol > .calendar-day-card { flex: none; }
#chatcol > .chat-content { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#chatcol > #chatbar { flex: none; margin-top: auto; width: 100%; min-width: 0; z-index: 3; }
#chatcol > .chat-content > #qtitle { flex: none; }
#chatcol > .chat-content > :is(#chatlog, .insights, .chat-history, .connections) { flex: 1 1 0; min-height: 0; overflow-y: auto; }
#chatcol > .chat-content > [hidden] { display: none !important; }
#chatcol > [hidden] { display: none !important; }
#chatcol .colhead { background: var(--cb-bg); border: 0; padding: 0 16px; gap: 6px; justify-content: flex-start; height: 58px; flex: none;
  border-bottom: 1px solid var(--cb-line); }
#chatcol .colhead .tabs2 { display: flex; gap: 22px; flex: 1; }
#chatcol .colhead .tabs2 button { background: none; border: 0; color: var(--cb-dim); font: inherit; font-size: 15px; padding: 18px 2px 16px; cursor: pointer;
  border-bottom: 2px solid transparent; }
#chatcol .colhead .tabs2 button.on { color: #fff; border-bottom-color: var(--cb-purple2); }
#chatcol .colhead #chattitle { display: none; }
#chatcol #modelsel { display: none; }
#chatcol .histbtn { background: none; border: 1px solid var(--cb-line2); color: var(--cb-ink); border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; }
#chatcol .histbtn.on { border-color: var(--cb-purple2); background: #1b1941; }
#qtitle { margin: 0; padding: 20px 20px 4px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; flex: none; }
#chatlog { padding: 12px 16px; flex: 1; min-height: 0; overflow-y: auto; }
#chatlog .userbubble { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 14px; padding: 14px 16px; margin: 10px 0; max-width: 100%; align-self: stretch;
  color: var(--cb-ink); display: flex; gap: 12px; align-items: center; }
#chatlog .userbubble::before { content: attr(data-initial); width: 42px; height: 42px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #5b46f0, #8a6bff);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
#chatlog .floorbubble { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 14px; padding: 16px; max-width: 100%; color: var(--cb-ink); }
#chatlog .floorbubble.comp-answer { background: transparent; border: 0; padding: 0; }
#chatbar { padding: 12px 16px 16px; background: var(--cb-bg); border-top: 1px solid var(--cb-line); margin: 0; }
#chatbar #cmsg { background: #0b1124; border: 1px solid var(--cb-line2); border-radius: 12px; height: 48px; padding: 0 14px; color: var(--cb-ink); font-size: 14px; }
#chatbar #csend, #chatbar button[type=submit], #chatbar .send { background: var(--cb-purple); border: 0; color: #fff; border-radius: 12px; width: 52px; height: 48px; font-size: 18px; cursor: pointer; }
#chatbar #toolbtn { background: #0b1124; border: 1px solid var(--cb-line2); color: var(--cb-dim); border-radius: 12px; height: 48px; }

/* ── the answer card ──────────────────────────────────────────────── */
.ans { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 16px; padding: 18px; color: var(--cb-ink); }
.ans-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ans-h .av { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6f8cff, #2b2f8f); flex: none; }
.ans-h b { font-size: 16px; font-weight: 650; }
.ans-h .ver { margin-left: auto; font-size: 13px; color: var(--cb-green); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ans-h .ver.part { color: var(--cb-amber); }
.ans .body { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }
.ans-trust { margin: 12px 0; padding: 12px; border: 1px solid #285661; border-radius: 12px; background: #0a1c2c; }
.ans-trust b { display: block; margin-bottom: 4px; color: #d8f9f2; font-size: 13px; }
.ans-trust span { display: block; color: #a9c5cc; font-size: 12px; }
.ans .body p { margin: 0 0 8px; }
.ans .lois-s.unv { color: #aab4cf; }
.ans .lois-cite { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #1f6f5a; color: #fff; font-size: 11px; align-items: center; justify-content: center; margin: 0 2px; text-decoration: none; vertical-align: 1px; }
.ans .lois-unv-tag { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--cb-amber); border: 1px solid #5a4520; border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.ans .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ans .chips span { padding: 6px 14px; border-radius: 999px; background: #17214a; border: 1px solid var(--cb-line2); color: #cfd8ff; font-size: 13px; }
.ans .kp { border: 1px solid var(--cb-line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: #0a1020; }
.ans .kp b { display: block; margin-bottom: 8px; font-size: 15px; }
.ans .kp ul { margin: 0; padding-left: 18px; } .ans .kp li { margin: 5px 0; font-size: 14px; line-height: 1.5; }
.ans .raw-intelligence { margin: 12px 0; border: 1px solid var(--cb-line); border-radius: 12px; background: #080e1d; }
.ans .raw-intelligence>summary { cursor: pointer; padding: 12px 14px; color: #d8f9f2; font-size: 13px; font-weight: 650; }
.ans .raw-intelligence>summary span { float: right; color: var(--cb-dim); font-weight: 400; }
.ans .raw-intelligence article { padding: 12px 14px; border-top: 1px solid var(--cb-line); font-size: 12px; line-height: 1.45; }
.ans .raw-intelligence article>b { display: block; color: #e4e9ff; margin-bottom: 8px; font-size: 13px; }
.ans .raw-intelligence article div { margin-top: 7px; padding-left: 10px; border-left: 2px solid #285661; }
.ans .raw-intelligence article span { color: #8fa6ff; }
.ans .raw-intelligence article p { color: #a9b3ca; margin: 3px 0 0; }
.ans .cit-h { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; font-size: 15px; font-weight: 650; }
.ans .cit-h span { color: var(--cb-dim); font-weight: 400; font-size: 13px; }
.ans a.cit { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--cb-ink); text-decoration: none; font-size: 13.5px; }
.ans a.cit:hover { background: #111a38; }
.ans a.cit .n { width: 24px; height: 24px; border-radius: 50%; background: #1f6f5a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.ans a.cit .src { color: #8fa6ff; font-size: 12.5px; min-width: 62px; }
.ans a.cit .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans a.cit .ext { color: var(--cb-dim); }
.ans .note { font-size: 12.5px; color: var(--cb-dim); margin: 8px 0 0; }
.ans .next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ans .next button { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--cb-line2); background: #0f1630; color: #cfd8ff; cursor: pointer; }
.ans .next button:hover { border-color: var(--cb-purple2); }
.lois-partner { margin-top: 14px; padding: 12px; border: 1px solid var(--cb-line2); border-radius: 11px; background: #101a30; }
.lois-partner b { display: block; font-size: 13px; }
.lois-partner p { margin: 6px 0; color: var(--cb-ink); font-size: 12px; }
.lois-partner small { color: var(--cb-dim); }
.lois-moves { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.lois-moves strong { margin-bottom: 2px; color: var(--cb-dim); font-size: 11px; }
.lois-moves button { padding: 8px 10px; border: 1px solid var(--cb-line2); border-radius: 9px; background: #111a31; color: var(--cb-ink); text-align: left; font: inherit; cursor: pointer; }
.lois-moves button:hover { border-color: var(--cb-purple2); background: #1b2040; }
.lois-moves button b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: #2b225c; color: #d9d0ff; font-size: 11px; }
.insights { padding: 20px; flex: 1; min-height: 0; overflow-y: auto; } .insights h4 { margin: 0 0 10px; font-size: 15px; } .insights .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cb-line); font-size: 13.5px; }
.insights .row span { color: var(--cb-dim); }
.chat-history { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px; }
.chat-history h3 { margin: 0 0 12px; font-size: 16px; }
.chat-history .history-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--cb-line2); border-radius: 10px; background: var(--cb-panel); color: var(--cb-ink); cursor: pointer; }
.chat-history .history-item:hover { border-color: var(--cb-purple2); }
.chat-history .history-item small { color: var(--cb-dim); }
.repl-answer .repl-output { max-height: 52vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border: 1px solid var(--cb-line2); border-radius: 10px; background: #080e1d; color: var(--cb-ink); font: 11px/1.5 ui-monospace, Menlo, monospace; }
.repl-command-hint { margin: 0 0 10px; color: var(--cb-dim); font-size: 12px; }
.repl-command-list { display: grid; gap: 7px; max-height: 52vh; overflow-y: auto; }
.repl-command-list > :is(button, .repl-command-unavailable) { display: grid; gap: 3px; width: 100%; padding: 9px 11px; border: 1px solid var(--cb-line2); border-radius: 9px; text-align: left; background: #101a30; color: var(--cb-ink); font: inherit; }
.repl-command-list > button { cursor: pointer; }
.repl-command-list > button:hover, .repl-command-list > button:focus-visible { border-color: var(--cb-purple2); background: #1d2450; }
.repl-command-list b { font-size: 12px; }
.repl-command-list span, .repl-command-list small { color: var(--cb-dim); font-size: 11px; }
.repl-command-unavailable { opacity: .62; }
.repl-run-state { margin: 8px 0; color: #f0cf94; font-size: 12px; }
.repl-artifact-download { margin-top: 12px; padding: 9px 12px; border: 1px solid #67cdb6; border-radius: 9px; background: #10352d; color: #d6fff4; font: inherit; cursor: pointer; }
.repl-artifact-download:hover { background: #17483c; }
.repl-open-run { margin-top: 10px; padding: 9px 12px; border: 1px solid #7462e8; border-radius: 9px; background: #211b54; color: #f1edff; font: inherit; cursor: pointer; }
.repl-open-run:hover { background: #35297b; }
.repl-open-visual { margin-top: 10px; padding: 9px 12px; border: 1px solid #67cdb6; border-radius: 9px; background: #10352d; color: #d6fff4; font: inherit; cursor: pointer; }
.repl-open-visual:hover { background: #17483c; }
.repl-raw { margin-top: 12px; border: 1px solid var(--cb-line2); border-radius: 10px; }
.repl-raw summary { padding: 10px 12px; cursor: pointer; color: var(--cb-dim); font-size: 12px; }
.repl-raw .repl-output { margin: 0; border: 0; border-top: 1px solid var(--cb-line2); }
.repl-scene { display: grid; gap: 18px; }
.repl-scene-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 9px; }
.repl-scene-metric { display: grid; gap: 3px; padding: 12px; border: 1px solid #304060; border-radius: 12px; background: #101b35; }
.repl-scene-metric strong { color: #e7eaff; font-size: 21px; }
.repl-scene-metric span { color: #9faccc; font-size: 11px; }
.repl-scene-section { min-width: 0; border: 1px solid #263550; border-radius: 12px; padding: 14px; background: #0b152b; }
.repl-scene-section h3 { margin: 0 0 11px; font-size: 13px; }
.repl-scene-nodes,.repl-scene-ids { display: flex; flex-wrap: wrap; gap: 7px; }
.repl-scene-node { max-width: 100%; padding: 7px 9px; border: 1px solid #485a81; border-radius: 8px; background: #18234a; color: #dbeaff; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.repl-scene-node:hover,.repl-scene-node:focus-visible { border-color: #8d78ff; background: #28245d; }
.repl-scene-ids code { padding: 6px 8px; border-radius: 6px; background: #19223a; color: #bbcbeb; font-size: 11px; }
.repl-scene-flow { display: grid; gap: 9px; margin-top: 10px; border-left: 2px solid #6659ad; padding-left: 14px; }
.repl-scene-tile,.repl-scene-neighbour,.repl-scene-fact,.repl-scene-receipt { border: 1px solid #263550; border-radius: 10px; background: #101b33; padding: 10px; }
.repl-scene-tile { display: flex; align-items: start; gap: 10px; }
.repl-scene-tile > span { font-size: 21px; }
.repl-scene-tile div { display: grid; gap: 4px; min-width: 0; }
.repl-scene-tile strong { font-size: 12px; line-height: 1.5; }
.repl-scene-tile em { color: #aab8d2; font: 11px/1.4 ui-monospace,monospace; overflow-wrap: anywhere; }
.repl-scene-tile small,.repl-scene-fact small,.repl-scene-receipt small { display: block; color: #96a6c5; font-size: 10px; }
.repl-scene-neighbour { display: flex; align-items: center; gap: 8px; }
.repl-scene-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 6px 0; }
.repl-scene-fact b { font-size: 11px; color: #b7c6e6; }
.repl-scene-fact small { flex-basis: 100%; overflow-wrap: anywhere; }
.repl-scene-receipt { display: grid; gap: 5px; margin: 6px 0; overflow-wrap: anywhere; font-size: 11px; }
.repl-scene-receipt a { color: #91c0ff; }
.repl-scene-verdict { display: grid; gap: 6px; border: 1px solid #7567b6; border-radius: 13px; padding: 15px; background: #1a1b3d; }
.repl-scene-verdict strong { color: #e5dcff; font-size: 25px; }
.repl-scene-verdict small,.repl-scene-verdict span { color: #adb9d4; }
.repl-scene-verdict.supported,.repl-scene-verdict.passed { border-color: #49a995; background: #10342f; }
.repl-scene-verdict.conflicting,.repl-scene-verdict.failed { border-color: #dc7878; background: #3a202d; }
.repl-scene-3d:not([hidden]) { min-height: 400px; padding: 12px; border: 1px solid #3c6082; border-radius: 12px; background: #080f20; }
.repl-scene-3d canvas { max-width: 100%; }
.repl-artifact-error { margin-top: 10px; color: #f0b6a8; font-size: 12px; }
.repl-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.repl-progress-head button { border: 1px solid var(--cb-line2); border-radius: 8px; padding: 5px 10px; background: #19152d; color: #f0cf94; cursor: pointer; }
.repl-progress-output { max-height: 46vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cb-ink); font: 11px/1.5 ui-monospace, Menlo, monospace; }
.repl-answer .repl-receipts { margin-top: 12px; border: 1px solid var(--cb-line2); border-radius: 10px; max-height: 40vh; overflow-y: auto; }
.repl-answer .repl-receipts summary { padding: 10px 12px; cursor: pointer; color: var(--cb-ink); font-weight: 650; }

/* ── laptop widths: the rail and columns tighten ──────────────────── */
@media (max-width: 1700px) { #demobar .tagline { display: none; } }
@media (max-width: 1280px) {
  body, body.wb { --rail: 64px; --c-chats: 200px; --c-wb: 236px; --c-chat: 320px; }
  #rail a span, #rail button span { display: none; }
  #demobar .prod { display: none; }
}
@media (max-width: 1080px) and (min-width: 861px) {
  body, body.wb { --c-chats: 180px; --c-wb: 0px; --c-chat: 300px; }
  #peelcol { display: none !important; }
  body.wb #peelcol { display: block !important; position: fixed; z-index: 25; left: 244px; top: var(--bar-h);
    bottom: 0; width: 280px; box-shadow: 18px 0 36px #0008; }
  .floorrow .drawer-close { display: block; }
}
body.focus { --rail: 0px; --c-chats: 0px; --c-wb: 0px; }
body.focus #peelcol { display: none !important; }
@media (max-width: 860px) {
  body, body.wb, body.focus { --mobile: 1; --rail: 0px; --c-chats: 0px; --c-wb: 0px; --c-chat: 0px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "bar" "main"; }
  #rail { display: none !important; }
  #chatscol, #peelcol, #chatcol, main, #exploreview, #discoverview, #runsview, #journalview, #ledgerview, #notebookview, #scientistview,
  #visionview, #labview, #calendarview, #resolverview, #traceview, #graphbar { grid-area: main; }
  #chatscol, #peelcol, #chatcol { display: none !important; }
  body[data-pane="chats"] #chatscol { display: block !important; }
  body[data-pane="wb"] #peelcol { display: block !important; }
  .floorrow .drawer-close { display: block; }
  body[data-pane="lois"] #chatcol { display: flex !important; }
  body:not([data-pane="work"]) #graphbar { display: none; }
  #demobar { flex-wrap: nowrap; height: auto; padding: 8px 12px; gap: 8px; }
  #demobar .prod, #demobar .spacer, #demobar .bar-icon { display: none; }
  #topsearch { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
  #demobar .brand { font-size: 0; } #demobar .brand svg { width: 30px; height: 30px; }
  #demobar .work-menu summary span { display: none; }
  #graphbar { margin: 20px 22px 0; }
}