/* static/styles.css */

:root{

  --bg: #0b0d12;

  --bg2: #0f1220;

  --panel: rgba(255,255,255,.06);

  --panel2: rgba(255,255,255,.08);

  --stroke: rgba(255,255,255,.10);

  --stroke2: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);

  --muted: rgba(255,255,255,.64);

  --muted2: rgba(255,255,255,.46);

  --shadow: 0 18px 55px rgba(0,0,0,.45);

  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --radius: 18px;

  --radius2: 14px;

  --radius3: 12px;

  --gap: 14px;

  --green: #29d37c;

  --red: #ff4d6d;

  --amber: #ffcc66;

  --blue: #5ab0ff;



  --grad1: radial-gradient(1200px 800px at 20% -10%, rgba(100,140,255,.22), transparent 60%),

           radial-gradient(900px 600px at 100% 0%, rgba(255,120,200,.18), transparent 55%),

           radial-gradient(900px 900px at 60% 110%, rgba(80,255,190,.14), transparent 55%);



  --glass: blur(18px);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

}



[data-theme="light"]{

  --bg: #f7f8fb;

  --bg2: #eff1f7;

  --panel: rgba(0,0,0,.04);

  --panel2: rgba(0,0,0,.06);

  --stroke: rgba(0,0,0,.08);

  --stroke2: rgba(0,0,0,.12);

  --text: rgba(15,18,32,.92);

  --muted: rgba(15,18,32,.62);

  --muted2: rgba(15,18,32,.48);

  --shadow: 0 18px 55px rgba(0,0,0,.16);

  --shadow2: 0 10px 30px rgba(0,0,0,.12);

  --grad1: radial-gradient(1200px 800px at 20% -10%, rgba(90,140,255,.14), transparent 60%),

           radial-gradient(900px 600px at 100% 0%, rgba(255,120,200,.12), transparent 55%),

           radial-gradient(900px 900px at 60% 110%, rgba(60,220,160,.10), transparent 55%);

}



*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  font-family: var(--sans);

  background: var(--bg);

  color: var(--text);

  overflow:hidden; /* never scroll the whole page on desktop */

}



a{color:inherit}

.hidden{display:none !important}

.mono{font-family:var(--mono)}

.mt10{margin-top:10px}

.mt12{margin-top:12px}

.mt8{margin-top:8px}

.gap8{gap:8px}



.app{

  height:100%;

  display:flex;

  flex-direction:column;

  background: var(--grad1), linear-gradient(180deg, var(--bg), var(--bg2));

}



.topbar{

  position:sticky;

  top:0;

  z-index:40;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 14px 18px;

  border-bottom:1px solid var(--stroke);

  background: rgba(0,0,0,.14);

  backdrop-filter: var(--glass);

}

[data-theme="light"] .topbar{ background: rgba(255,255,255,.55); }



.brand{display:flex; align-items:center; gap:12px}

.brand-mark{

  width:36px;height:36px;

  display:grid;place-items:center;

  border-radius:12px;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));

  border:1px solid var(--stroke);

  box-shadow: var(--shadow2);

}

.brand-mark svg{color:var(--text)}

.brand-title{font-weight:700; letter-spacing:.2px}

.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}



.topbar-actions{display:flex; align-items:center; gap:10px}



.pill{

  height:36px;

  border-radius:999px;

  padding: 0 12px;

  border:1px solid var(--stroke);

  display:flex; align-items:center; gap:10px;

  background: rgba(255,255,255,.06);

  backdrop-filter: var(--glass);

}

.pill-soft{background: rgba(255,255,255,.04)}

.pill-strong{background: rgba(255,255,255,.08)}

.userlabel{font-size:13px; color:var(--text); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.avatar{

  width:24px;height:24px;border-radius:999px;

  background: linear-gradient(180deg, rgba(120,160,255,.35), rgba(255,120,200,.22));

  display:grid; place-items:center;

  font-weight:700; font-size:12px;

  border:1px solid var(--stroke2);

}



.dot{width:9px;height:9px;border-radius:99px; display:inline-block}

.dot-ok{background: var(--green); box-shadow:0 0 0 4px rgba(41,211,124,.10)}

.dot-warn{background: var(--amber); box-shadow:0 0 0 4px rgba(255,204,102,.10)}

.dot-bad{background: var(--red); box-shadow:0 0 0 4px rgba(255,77,109,.10)}



.iconbtn{

  height:36px; width:36px;

  border-radius:12px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.05);

  display:grid; place-items:center;

  color: var(--text);

  cursor:pointer;

  transition: transform .08s ease, background .15s ease, border-color .15s ease;

}

.iconbtn:hover{background: rgba(255,255,255,.08); border-color: var(--stroke2)}

.iconbtn:active{transform: translateY(1px)}



.user-menu{position:relative}

.chev{opacity:.8}

.menu{

  position:absolute;

  right:0; top:44px;

  min-width: 200px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(18,20,34,.88);

  backdrop-filter: var(--glass);

  box-shadow: var(--shadow);

  padding:8px;

  display:none;

  z-index:60;

}

[data-theme="light"] .menu{background: rgba(255,255,255,.92)}

.menu.show{display:block}

.menu-item{

  width:100%;

  display:flex; align-items:center; gap:10px;

  padding:10px 10px;

  border-radius:12px;

  border:0;

  background: transparent;

  color: var(--text);

  cursor:pointer;

  text-align:left;

}

.menu-item:hover{background: rgba(255,255,255,.07)}

.menu-item.danger{color: #ff90a5}

.menu-item.danger:hover{background: rgba(255,77,109,.12)}

.menu-sep{height:1px; background: var(--stroke); margin:8px 6px}

.mi-icon{width:18px; text-align:center; opacity:.9}



.layout{

  flex:1;

  display:grid;

  grid-template-columns: 320px 1fr;

  min-height:0;

}



.sidebar{

  border-right:1px solid var(--stroke);

  background: rgba(0,0,0,.10);

  backdrop-filter: var(--glass);

  min-height:0;

  display:flex;

  flex-direction:column;

}

[data-theme="light"] .sidebar{background: rgba(255,255,255,.50)}



.sidebar-section{padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0}

.sidebar-title{font-weight:700}

.sidebar-sub{font-size:12px; color:var(--muted)}

.sidebar-footer{padding:14px 16px; border-top:1px solid var(--stroke)}

.tiny{font-size:12px}

.muted{color:var(--muted)}

.muted2{color:var(--muted2)}



.searchbox{

  display:flex; align-items:center; gap:10px;

  padding:10px 12px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.05);

}

.search-ico{opacity:.8}

.searchinput{

  border:0; outline:none;

  background: transparent;

  color: var(--text);

  width:100%;

  font-size:13px;

}

.searchinput::placeholder{color:var(--muted2)}



.list{

  display:flex; flex-direction:column;

  gap:8px;

  min-height:0;

  overflow:auto;

  padding-right:4px;

}

.list::-webkit-scrollbar{width:10px}

.list::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}

[data-theme="light"] .list::-webkit-scrollbar-thumb{background: rgba(0,0,0,.10)}



.item{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.05);

  border-radius: 14px;

  padding:10px 12px;

  cursor:pointer;

  transition: background .15s ease, border-color .15s ease, transform .08s ease;

}

.item:hover{background: rgba(255,255,255,.08); border-color: var(--stroke2)}

.item:active{transform: translateY(1px)}

.item-title{font-weight:650; font-size:13px}

.item-sub{font-size:12px; color:var(--muted); margin-top:4px}

.item-row{display:flex; align-items:center; gap:10px}

.badge{

  font-size:11px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.06);

  padding: 3px 8px;

  border-radius: 999px;

  color: var(--muted);

}



.sidebar-actions{display:flex; gap:10px; margin-top:auto}

.btn{

  height:38px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.06);

  color: var(--text);

  cursor:pointer;

  padding:0 12px;

  display:flex; align-items:center; justify-content:center; gap:10px;

  transition: background .15s ease, border-color .15s ease, transform .08s ease;

  user-select:none;

}

.btn:hover{background: rgba(255,255,255,.09); border-color: var(--stroke2)}

.btn:active{transform: translateY(1px)}

.btn-strong{

  background: linear-gradient(180deg, rgba(90,170,255,.32), rgba(255,120,200,.18));

  border-color: rgba(160,180,255,.28);

}

.btn-strong:hover{background: linear-gradient(180deg, rgba(90,170,255,.38), rgba(255,120,200,.22))}

.btn-soft{background: rgba(255,255,255,.04)}

.btn-ico{opacity:.95}



.content{

  min-height:0;

  overflow:auto; /* home/admin can scroll here */

}

body[data-page="project"] .content{

  overflow:hidden; /* project view: only panes scroll */

}

.content::-webkit-scrollbar{width:12px}

.content::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}

[data-theme="light"] .content::-webkit-scrollbar-thumb{background: rgba(0,0,0,.10)}



.page{padding:18px; min-height:0}

.page-home{padding: 26px 26px 26px 22px}

.page-project{height:100%; overflow:hidden}



.home-hero{

  display:grid;

  grid-template-columns: 1.3fr .9fr;

  gap: 18px;

  align-items:center;

  padding: 22px;

  border-radius: 22px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.05);

  box-shadow: var(--shadow2);

  overflow:hidden;

  position:relative;

}

.home-hero::before{

  content:"";

  position:absolute; inset:-60px -60px auto auto;

  width: 360px; height: 360px;

  background: radial-gradient(circle at 30% 30%, rgba(90,170,255,.32), transparent 60%),

              radial-gradient(circle at 70% 70%, rgba(255,120,200,.22), transparent 60%);

  filter: blur(12px);

  opacity:.95;

  pointer-events:none;

}

.hero-copy{position:relative}

.hero-kicker{

  display:inline-flex; align-items:center; gap:8px;

  font-size:12px; color:var(--muted);

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  padding: 6px 10px;

  border-radius: 999px;

}

.hero-title{margin:12px 0 10px 0; font-size: 34px; letter-spacing: -.5px; line-height:1.08}

.hero-desc{margin:0; color:var(--muted); max-width: 58ch}

.hero-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}



.hero-pluswrap{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:10px;

}

.plusbtn{

  width: 156px; height: 156px;

  border-radius: 999px;

  border:1px solid rgba(255,255,255,.16);

  background: rgba(255,255,255,.04);

  box-shadow: var(--shadow);

  cursor:pointer;

  position:relative;

  overflow:hidden;

  display:grid; place-items:center;

}

.plusbtn-ring{

  position:absolute; inset:-60px;

  background: conic-gradient(from 0deg, rgba(90,170,255,.55), rgba(255,120,200,.42), rgba(60,220,160,.35), rgba(90,170,255,.55));

  filter: blur(16px);

  opacity:.9;

  animation: spin 5.5s linear infinite;

}

@keyframes spin{to{transform:rotate(360deg)}}

.plusbtn-core{

  position:relative;

  width: 118px; height: 118px;

  border-radius: 999px;

  display:grid; place-items:center;

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));

  border:1px solid var(--stroke);

}

.plusbtn svg{color:var(--text)}

.plusbtn:hover .plusbtn-core{background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06))}

.plusbtn:active{transform: translateY(1px)}

.hero-pluslabel{font-size:12px; color:var(--muted)}



.home-grid{

  margin-top: 16px;

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.card{

  border-radius: 20px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.05);

  box-shadow: var(--shadow2);

  padding: 16px;

}

.card-glow{

  position:relative;

  overflow:hidden;

}

.card-glow::before{

  content:"";

  position:absolute;

  inset:auto -90px -90px auto;

  width: 280px; height: 280px;

  background: radial-gradient(circle at 30% 30%, rgba(60,220,160,.18), transparent 60%),

              radial-gradient(circle at 70% 70%, rgba(90,170,255,.16), transparent 60%);

  filter: blur(12px);

  opacity:.9;

  pointer-events:none;

}

.card-title{font-weight:700}

.card-sub{font-size:12px; color:var(--muted); margin-top:6px}

.steps{display:flex; flex-direction:column; gap:12px; margin-top:12px}

.step{display:flex; gap:12px}

.step-num{

  width:28px;height:28px;border-radius:10px;

  display:grid;place-items:center;

  background: rgba(255,255,255,.06);

  border:1px solid var(--stroke);

  color: var(--muted);

  font-weight:700;

  flex:0 0 auto;

}

.step-title{font-weight:650; font-size:13px}

.step-desc{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.35}

.bullets{margin:12px 0 0 18px; color:var(--muted); padding:0}

.bullets li{margin:8px 0}

.callout{

  margin-top:14px;

  border-radius: 16px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  padding:12px;

  display:flex; gap:10px; align-items:flex-start;

}

.callout-ico{font-size:18px}

.callout-title{font-weight:650}

.callout-desc{color:var(--muted); font-size:12px; margin-top:2px}



/* Project shell (nodes | middle panel | chat on far right) */

.project-shell{

  height: calc(100% - 0px);

  display:grid;

  grid-template-columns: 540px 1fr 420px;

  gap: 14px;

  min-height:0;

  align-items:stretch;

}



.nodes, .chat, .rightpane{

  border:1px solid var(--stroke);

  background: rgba(18,20,34,.92);   /* increase/decrease .92 to taste */

  border-radius: 20px;

  min-height:0;

  overflow:hidden;

  box-shadow: var(--shadow2);

}



.nodes{display:flex; flex-direction:column}

.nodes-top{padding:14px; border-bottom:1px solid var(--stroke); display:flex; flex-direction:column; gap:12px}

.projhead{display:flex; align-items:flex-start; gap:10px; position:relative}

.projname-wrap{flex:1; min-width:0}

.projname{

  width:100%;

  background: transparent;

  border:0;

  outline:none;

  color: var(--text);

  font-size: 16px;

  font-weight: 750;

  padding:0;

  margin:0;

}





.projname:focus{outline:none}

.nodes-actions{display:flex; gap:10px}

.nodes-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

.nodes-search{display:flex; align-items:center; gap:10px}





/* Rename affordance (project name) */

.projname-row{

  position:relative;

  display:flex;

  align-items:center;

  gap:10px;

}

.projname{

  padding-right: 40px; /* room for pencil button */

  border-radius: 12px;

  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;

}

.projname:hover{

  background: rgba(255,255,255,.04);

  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;

}

.projname:focus{

  background: rgba(255,255,255,.05);

  box-shadow: 0 0 0 1px rgba(90,170,255,.35) inset;

}

.renamebtn{

  position:absolute;

  right:6px;

  top:50%;

  transform: translateY(-50%);

  height:30px;

  width:30px;

  border-radius: 10px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  color: var(--muted);

  cursor:pointer;

}

.renamebtn:hover{ background: rgba(255,255,255,.07); color: var(--text); border-color: var(--stroke2); }

.renamehint{

  margin-top:6px;

  font-size:12px;

  color: var(--muted2);

}



.projhead-actions{

  display:flex;

  align-items:center;

  gap:8px;

}





.input, .textarea{

  width:100%;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  color: var(--text);

  padding: 10px 12px;

  outline:none;

}

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

.input::placeholder,.textarea::placeholder{color:var(--muted2)}



.segmented{

  display:flex; gap:6px;

  padding: 4px;

  border-radius: 999px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

}

.segbtn{

  border:0;

  background: transparent;

  color: var(--muted);

  padding: 8px 10px;

  border-radius: 999px;

  cursor:pointer;

  font-size:12px;

}

.segbtn.active{

  color: var(--text);

  background: rgba(255,255,255,.07);

  border:1px solid var(--stroke);

}

.chk{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}

.chk input{accent-color: #7aa7ff}



.nodes-list{

  flex:1;

  min-height:0;

  overflow:auto;

  padding: 10px 10px 14px 10px;

  display:flex;

  flex-direction:column;

  gap:8px;

}

.nodes-list::-webkit-scrollbar{width:10px}

.nodes-list::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}



.nodeitem{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  border-radius: 16px;

  padding: 10px 10px;

  display:flex;

  gap:10px;

  cursor:pointer;

  transition: background .15s ease, border-color .15s ease, transform .08s ease;

}

.nodeitem:hover{background: rgba(255,255,255,.07); border-color: var(--stroke2)}

.nodeitem:active{transform: translateY(1px)}

.nodeitem.selected{border-color: rgba(90,170,255,.45); background: rgba(90,170,255,.08)}

.nodechk{margin-top:3px}

.nodebody{flex:1; min-width:0}

.nodetitle{

  font-weight:650;

  font-size:13px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

.nodemeta{

  margin-top:5px;

  display:flex; align-items:center; gap:8px; flex-wrap:wrap;

  font-size:12px; color:var(--muted);

}

.schip{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  padding: 3px 8px;

  border-radius: 999px;

  font-size:11px;

  color: var(--muted);

}

.schip.green{border-color: rgba(41,211,124,.35); color: rgba(41,211,124,.95); background: rgba(41,211,124,.08)}

.schip.red{border-color: rgba(255,77,109,.35); color: rgba(255,77,109,.95); background: rgba(255,77,109,.09)}

.schip.amber{border-color: rgba(255,204,102,.35); color: rgba(255,204,102,.95); background: rgba(255,204,102,.09)}

.schip.blue{border-color: rgba(90,170,255,.35); color: rgba(90,170,255,.95); background: rgba(90,170,255,.09)}



.lock{opacity:.85}



.nodes-bottom{

  padding: 12px 14px;

  border-top:1px solid var(--stroke);

}



/* Run controls group */

.runbox{

  display:flex;

  align-items:center;

  gap:10px;

  padding: 6px 8px;

  border-radius: 16px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

}



/* Switch (uses checkbox under the hood) */

.switch{

  display:flex;

  align-items:center;

  gap:10px;

  user-select:none;

  cursor:pointer;

  font-size:12px;

  color: var(--muted);

}

.switch input{

  position:absolute;

  opacity:0;

  pointer-events:none;

}

.slider{

  width:44px;

  height:26px;

  border-radius: 999px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  position:relative;

  transition: background .15s ease, border-color .15s ease;

}

.slider::after{

  content:"";

  position:absolute;

  top:3px;

  left:3px;

  width:20px;

  height:20px;

  border-radius:999px;

  background: rgba(255,255,255,.70);

  transition: transform .15s ease;

}

.switchlabel{ color: var(--muted); font-weight:650; }



.switch input:checked + .slider{

  background: rgba(90,170,255,.22);

  border-color: rgba(90,170,255,.35);

}

.switch input:checked + .slider::after{

  transform: translateX(18px);

}

.switch input:checked ~ .switchlabel{

  color: var(--text);

}







.statusbar{

  display:flex;

  align-items:center;

  gap:10px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  border-radius: 14px;

  padding: 10px 12px;

}

.spacer{flex:1}



/* Middle panel */

.rightpane{display:flex; flex-direction:column; position:relative}

.right-top{

  padding: 12px 12px;

  border-bottom:1px solid var(--stroke);

  display:flex; align-items:center; justify-content:space-between;

  gap:10px;

}

.tabs{display:flex; gap:8px; align-items:center}

.tab{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  color: var(--muted);

  padding: 8px 10px;

  border-radius: 999px;

  cursor:pointer;

  font-size:12px;

}

.tab.active{color: var(--text); background: rgba(255,255,255,.06); border-color: var(--stroke2)}

.right-body{padding: 14px; overflow:auto; min-height:0}

.right-body::-webkit-scrollbar{width:10px}

.right-body::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}



/* Collapsible sections */

.collapse{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  border-radius: 18px;

  margin-bottom: 12px;

  overflow:hidden;

}

.collapse > summary{

  list-style:none;

  cursor:pointer;

  padding: 14px 14px;

  display:flex; align-items:center; gap:10px;

  user-select:none;

}

.collapse > summary::-webkit-details-marker{display:none}

.collapse > summary .sumtitle{font-weight:800}

.collapse > summary .sumsub{font-size:12px; color:var(--muted); margin-top:2px}

.collapse > summary .sumright{margin-left:auto; color:var(--muted2); font-size:12px}

.collapse[open] > summary{border-bottom:1px solid var(--stroke)}

.collapse-body{padding: 14px}



/* Fields (simplified: only title + value) */

.fields{display:flex; flex-direction:column; gap:10px; margin-top:12px}

.fieldrow{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  border-radius: 16px;

  padding: 10px;

}

.fieldrow.compact .fieldrow-top{gap:10px}

.fieldtitlein{font-weight:700}

.fieldvalue{min-height: 110px}

.fieldkey{font-size:11px; color:var(--muted2); font-family: var(--mono)}

.minibtn{

  height:28px; padding:0 10px;

  border-radius: 12px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  color: var(--muted);

  cursor:pointer;

  font-size:12px;

}

.minibtn:hover{background: rgba(255,255,255,.06); border-color: var(--stroke2)}

.minibtn.danger{color:#ff90a5}

.minibtn.danger:hover{background: rgba(255,77,109,.12)}



.label{font-size:12px; color:var(--muted); display:block}

.row{display:flex; align-items:center}



/* Node viewer cards */

.panel-sep{height:1px; background: var(--stroke); margin: 14px 2px}

.rv-panels{display:flex; flex-direction:column; gap:10px}

.rv-card{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  border-radius: 16px;

  padding: 10px;

}

.rv-title{font-weight:650; font-size:12px; color:var(--muted)}

.pre{

  margin:8px 0 0 0;

  padding: 10px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(0,0,0,.18);

  color: var(--text);

  overflow:auto;

  max-height: 220px;

  font-family: var(--mono);

  font-size: 12px;

}

[data-theme="light"] .pre{background: rgba(255,255,255,.70)}

.md{

  margin-top:8px;

  padding: 10px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.02);

  max-height: 360px;

  overflow:auto;

  font-size: 13px;

  line-height:1.55;

}

.md .sp{height:10px}

.md p{margin:0 0 10px 0}

.md h1,.md h2,.md h3{margin: 10px 0 8px 0; letter-spacing:-.2px}

.md h1{font-size:18px}

.md h2{font-size:16px}

.md h3{font-size:14px}

.md ul,.md ol{margin:0 0 10px 18px; padding:0}

.md li{margin: 6px 0}

.md a{text-decoration: underline; text-underline-offset: 2px}

.md .icode{

  font-family: var(--mono);

  font-size: 12px;

  border:1px solid var(--stroke);

  background: rgba(0,0,0,.18);

  padding: 1px 6px;

  border-radius: 10px;

}

.md .code{

  margin: 8px 0 10px 0;

  padding: 10px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(0,0,0,.18);

  overflow:auto;

  max-height: 320px;

}

[data-theme="light"] .md .code{background: rgba(255,255,255,.70)}

.md .code code{

  font-family: var(--mono);

  font-size: 12px;

  white-space: pre;

  display:block;

}



/* Runs list */

.runs{display:flex; flex-direction:column; gap:8px; margin-top:10px}

.runitem{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  border-radius: 16px;

  padding: 10px;

  cursor:pointer;

}

.runitem:hover{background: rgba(255,255,255,.06); border-color: var(--stroke2)}

.runitem.active{border-color: rgba(90,170,255,.45); background: rgba(90,170,255,.08)}

.runmeta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted)}

.runid{font-family: var(--mono); color: var(--muted2); font-size: 11px}



/* Chat (now far right, narrower) */

.chat{display:flex; flex-direction:column}

.chat-top{

  padding:14px;

  border-bottom:1px solid var(--stroke);

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:10px;

}

.chat-title .chip{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding: 6px 10px;

  border-radius: 999px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  font-size:12px;

  color: var(--muted);

}

.chat-actions{display:flex; gap:10px; flex-wrap:wrap}

.chat-body{

  flex:1;

  min-height:0;

  overflow:auto;

  padding: 14px;

  display:flex;

  flex-direction:column;

  gap: 12px;

}

.chat-body::-webkit-scrollbar{width:10px}

.chat-body::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}



.msg{

  display:flex;

  gap:10px;

  align-items:flex-start;

}

.bubble{

  max-width: 100%;

  border-radius: 18px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  padding: 10px 12px;

  line-height:1.45;

  font-size: 13px;

  white-space:pre-wrap;

}

.bubble.rich{white-space:normal}

.bubble.rich p{margin:0 0 10px 0}

.bubble.rich .sp{height:10px}

.bubble.rich ul,.bubble.rich ol{margin:0 0 10px 18px; padding:0}

.bubble.rich .code{

  margin: 8px 0 10px 0;

  padding: 10px;

  border-radius: 14px;

  border:1px solid var(--stroke);

  background: rgba(0,0,0,.18);

  overflow:auto;

}

.bubble.rich code.icode{

  font-family: var(--mono);

  font-size: 12px;

  border:1px solid var(--stroke);

  background: rgba(0,0,0,.18);

  padding: 1px 6px;

  border-radius: 10px;

}

.msg.user .bubble{

  margin-left:auto;

  background: linear-gradient(180deg, rgba(90,170,255,.16), rgba(255,120,200,.10));

  border-color: rgba(160,180,255,.25);

}

.msg .rolechip{

  width:30px;height:30px;border-radius: 12px;

  display:grid; place-items:center;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  color: var(--muted);

  font-weight:700;

  flex:0 0 auto;

  user-select:none;

}

.msg.user .rolechip{background: rgba(90,170,255,.12); color: rgba(90,170,255,.95); border-color: rgba(90,170,255,.20)}

.msg.assistant .rolechip{background: rgba(60,220,160,.10); color: rgba(60,220,160,.95); border-color: rgba(60,220,160,.18)}



.chat-compose{

  padding: 14px;

  border-top: 1px solid var(--stroke);

  display:flex;

  gap:10px;

  align-items:flex-end;

}

.compose{

  width:100%;

  border-radius: 18px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  color: var(--text);

  padding: 11px 12px;

  outline:none;

  resize:none;

  min-height: 44px;

  max-height: 160px;

  overflow:auto;

  line-height:1.35;

}

.compose::placeholder{color:var(--muted2)}

.sendbtn{

  width:44px;height:44px;border-radius: 16px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.06);

  color: var(--text);

  cursor:pointer;

  display:grid; place-items:center;

  transition: transform .08s ease, background .15s ease, border-color .15s ease;

}

.sendbtn:hover{background: rgba(255,255,255,.09); border-color: var(--stroke2)}

.sendbtn:active{transform: translateY(1px)}



/* Admin */

.admin-shell{max-width: 1200px; margin:0 auto}

.admin-head{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;

  padding: 8px 4px 14px 4px;

}

.kicker{font-size:12px; color:var(--muted)}

.title{margin:6px 0 0 0; font-size: 24px}

.admin-grid{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.card-wide{grid-column: 1 / -1}

.split{display:grid; grid-template-columns: 320px 1fr; gap: 12px; margin-top: 12px}

.split-left{min-height:0}

.split-right{min-height:0}

.admin-editor{min-height:0}

.fields-admin{display:flex; flex-direction:column; gap:10px; margin-top:10px}

.fieldadmin{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  border-radius: 16px;

  padding: 10px;

}

.tablewrap{overflow:auto; margin-top:10px}

.table{

  width:100%;

  border-collapse: separate;

  border-spacing: 0;

  overflow:hidden;

  border-radius: 16px;

  border:1px solid var(--stroke);

}

.table th, .table td{

  text-align:left;

  padding: 10px 12px;

  border-bottom:1px solid var(--stroke);

  font-size: 12px;

  color: var(--muted);

}

.table th{color: var(--text); font-weight:650; background: rgba(255,255,255,.04)}

.table tr:last-child td{border-bottom:0}

.table .select{

  border-radius: 12px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  color: var(--text);

  padding: 6px 10px;

}

.table .miniinput{

  width: 90px;

  border-radius: 12px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  color: var(--text);

  padding: 6px 10px;

}

.table .savecell{width: 90px}

.table .minibtn{height:30px}



.empty-state{

  height: 260px;

  border:1px dashed var(--stroke2);

  border-radius: 18px;

  display:grid;

  place-items:center;

  color: var(--muted);

  text-align:center;

  padding: 14px;

}

.empty-ico{font-size: 22px}

.empty-title{font-weight:650; margin-top:8px; color:var(--text)}

.empty-desc{font-size:12px; color:var(--muted); margin-top:4px}



/* Overlay & modals */

.overlay{

  position:fixed;

  inset:0;

  background: rgba(0,0,0,.55);

  z-index:80;

}

.modal{

  position:fixed;

  left:50%; top:50%;

  transform: translate(-50%, -50%);

  width: min(780px, calc(100vw - 24px));

  max-height: min(84vh, 860px);

  overflow:hidden;

  border-radius: 22px;

  border:1px solid var(--stroke);

  background: rgba(18,20,34,.92);

  backdrop-filter: var(--glass);

  box-shadow: var(--shadow);

  z-index:90;

}

.modal.authmodal{width: min(560px, calc(100vw - 24px))}

[data-theme="light"] .modal{background: rgba(255,255,255,.92)}

.modal-head{

  padding: 14px 14px;

  border-bottom: 1px solid var(--stroke);

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:10px;

}

.modal-title{font-weight:800}

.modal-sub{font-size:12px; color:var(--muted); margin-top:4px}

.modal-body{padding: 14px; overflow:auto; max-height: calc(84vh - 70px)}



.tplgrid{

  display:grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

}

.tplcard{

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  border-radius: 18px;

  padding: 12px;

  cursor:pointer;

  transition: background .15s ease, border-color .15s ease, transform .08s ease;

  min-height: 110px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}

.tplcard:hover{background: rgba(255,255,255,.07); border-color: var(--stroke2)}

.tplcard:active{transform: translateY(1px)}

.tplname{font-weight:700}

.tpldesc{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.35}

.tplmeta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}



/* Auth polish */

.auth-tabs{

  display:flex;

  gap:6px;

  padding: 4px;

  border-radius: 999px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.03);

  margin-bottom:12px

}

.auth-tabs .tab{flex:1; justify-content:center}

.auth-form{display:block}

.auth-actions{display:flex; gap:10px; margin-top:12px; align-items:center}

.auth-actions .btn{flex:1}



/* Toasts */

.toasts{

  position:fixed;

  right: 14px;

  bottom: 14px;

  z-index: 120;

  display:flex;

  flex-direction:column;

  gap: 10px;

}

.toast{

  width: min(360px, calc(100vw - 28px));

  border-radius: 16px;

  border:1px solid var(--stroke);

  background: rgba(18,20,34,.92);

  backdrop-filter: var(--glass);

  box-shadow: var(--shadow2);

  padding: 12px 12px;

}

[data-theme="light"] .toast{background: rgba(255,255,255,.92)}

.toast-title{font-weight:700; font-size:13px}

.toast-desc{color:var(--muted); font-size:12px; margin-top:4px; line-height:1.35}

.toast.good .toast-title{color: rgba(41,211,124,.95)}

.toast.bad .toast-title{color: rgba(255,77,109,.95)}

.toast.warn .toast-title{color: rgba(255,204,102,.95)}



/* Responsive */

@media (max-width: 1100px){

  .project-shell{grid-template-columns: 340px 1fr}

  .chat{display:none}

}

@media (max-width: 860px){

  body{overflow:auto} /* mobile: allow normal scrolling */

  .layout{grid-template-columns: 1fr}



  .page{padding: 14px}

  .home-hero{grid-template-columns: 1fr; gap: 14px}

  .home-grid{grid-template-columns: 1fr}

  .tplgrid{grid-template-columns: 1fr}

  .project-shell{grid-template-columns: 1fr; min-height:auto}

  .nodes{min-height: 52vh}

  .rightpane{min-height: 48vh}

  .chat{display:block; min-height: 48vh}

}







.section-divider{

  height: 1px;

  width: 100%;

  margin: 14px 0;

  background: rgba(255,255,255,0.10);

}



/* Make Answer/Critic cards taller and let their content area grow */



/* give the stack real vertical space */

.output-stack{

  display:grid;

  grid-template-rows: 1fr 1fr;   /* equal height Answer + Critic */

  gap: 12px;

  min-height: 68vh;             /* increase/decrease to taste */

}



/* allow the cards to stretch and the md area to fill */

.output-stack .section-card{

  display:flex;

  flex-direction:column;

  min-height:0;

}



.output-stack .section-card .md{

  flex:1;

  min-height: 320px;            /* makes them taller even if content is short */

  max-height: 600px;             /* overrides the global .md max-height */

}



.section-card{

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.04);

  border-radius: 14px;

  padding: 12px 12px 10px;

}



.section-head{

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  padding-bottom: 10px;

  margin-bottom: 10px;

  border-bottom: 1px solid rgba(255,255,255,0.10);

}



.section-title{

  font-weight: 800;

  letter-spacing: 0.2px;

  font-size: 13px;

  text-transform: uppercase;

}



.section-sub{

  font-size: 12px;

  opacity: 0.75;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 55%;

}

/* Project metadata fields layout: 2–3 column grid */

.fields{

  display:grid;

  gap: 10px;

  margin-top:12px;



  /* 2 columns by default */

  grid-template-columns: repeat(2, minmax(0, 1fr));

  align-items:start;

}



/* On wider screens, go to 3 columns */

@media (min-width: 1400px){

  .fields{

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



/* On small screens, fall back to 1 column */

@media (max-width: 900px){

  .fields{

    grid-template-columns: 1fr;

  }

}



/* Field card should fill its grid cell cleanly */

.fieldrow{

  width:100%;

  min-width:0;

}

.fieldrow textarea,

.fieldrow input{

  width:100%;

  min-width:0;

}

/* Right-pane tabs should look like real tabs (not pill buttons) */

.rtabs{

  display:flex;

  gap:0;

  padding: 0 6px;

  border-bottom: 1px solid var(--stroke);

}

.rtab{

  border:0;

  background:transparent;

  color: var(--muted);

  padding: 10px 12px;

  cursor:pointer;

  font-size: 12px;

  position:relative;

  border-radius: 10px 10px 0 0;

}

.rtab:hover{ background: rgba(255,255,255,.04); color: var(--text); }

.rtab.active{

  color: var(--text);

}

.rtab.active::after{

  content:"";

  position:absolute;

  left:10px; right:10px;

  bottom:-1px;

  height:2px;

  background: rgba(90,170,255,.85);

  border-radius: 99px;

}



/* ADD/REPLACE your .nodegrid rule with this (outputs column wider) */

.nodegrid{

  display:grid;

  grid-template-columns: minmax(340px, 1fr) minmax(520px, 1.55fr);

  gap: 12px;

  align-items:start;

}



@media (max-width: 1200px){

  .nodegrid{ grid-template-columns: 1fr; }

}



.nodecol{

  display:flex;

  flex-direction:column;

  gap: 12px;

  min-width:0;

}



/* Card styling for every section inside Inspector */

.nodecard{

  border:1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.03);

  border-radius: 18px;

  padding: 12px;

  overflow:hidden;

}

.nodecard-head{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap: 12px;

  padding-bottom: 10px;

  margin-bottom: 10px;

  border-bottom: 1px solid rgba(255,255,255,.10);

}

.nodecard-title{

  font-weight: 800;

  letter-spacing: .2px;

}

.nodecard-sub{

  font-size:12px;

  color: var(--muted);

  margin-top: 3px;

}

.nodecard-actions{

  display:flex;

  align-items:center;

  gap: 10px;

  flex-wrap:wrap;

}



/* Collapse to 1 column when the center panel gets narrower */

@media (max-width: 1200px){

  .nodegrid{ grid-template-columns: 1fr; }

}





/* Settings modal: draggable + pinnable */

.settingsmodal{

  width: min(820px, calc(100vw - 24px));

  z-index: 95;

}

.settings-head{

  cursor: grab;

}

.settings-head:active{

  cursor: grabbing;

}

.settingsmodal.pinned{

  z-index: 160;

  box-shadow: 0 22px 80px rgba(0,0,0,.55);

}

/* static/styles.css — add near the bottom */



/* Topbar project controls */

.topbar{gap:12px}

.topbar-project{

  display:none;

  flex:1;

  min-width:0;

  align-items:center;

  justify-content:center;

  gap:10px;

}

body[data-page="project"] .topbar-project{display:flex}



.topbar-projname-wrap{min-width:0; max-width: 520px}

.topbar-project .projname{font-size:14px}

.topbar-project .renamehint{display:none} /* keep header compact */



.project-more{position:relative}



/* Make sure the header doesn’t explode on narrower screens */

@media (max-width: 1200px){

  .topbar-projname-wrap{max-width: 360px}

}

@media (max-width: 980px){

  .topbar-project{display:none !important}

}

/* Review row: approve/reject + score in one line */

.reviewbar{

  display:flex;

  align-items:center;

  gap:8px;

  flex-wrap:nowrap;

}



.scoreinput{

  width:110px;

  max-width:120px;

  padding-left:10px;

  padding-right:10px;

}



/* If the window gets too narrow, allow wrapping instead of overflow */

@media (max-width: 520px){

  .reviewbar{ flex-wrap:wrap; }

  .scoreinput{ width:100%; max-width:100%; }

}

/* Input tab: Project metadata summary with right-side actions */

.panel-summary{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}



.panel-summary-actions{

  display:flex;

  align-items:center;

  gap:8px;

  margin-left:auto;

}



/* Smaller pin button that still matches iconbtn */

.pinbtn{

  width:34px;

  height:34px;

  border-radius:12px;

}



/* Visual “on” state */

.pinbtn.is-on{

  background: rgba(90,170,255,.18);

  border-color: rgba(90,170,255,.35);

}



/* When settings modal is pinned, dock it (optional but feels “pinned”) */

.settingsmodal.pinned{

  left:auto;

  top:auto;

  right:16px;

  bottom:16px;

  transform:none;

  width: min(520px, calc(100vw - 32px));

  max-height: min(72vh, 900px);

}



/* On small screens, pinned behaves like normal modal */

@media (max-width: 860px){

  .settingsmodal.pinned{

    left:50%;

    top:50%;

    right:auto;

    bottom:auto;

    transform: translate(-50%, -50%);

    width: min(780px, calc(100vw - 24px));

  }

}



/* Mobile floating chat (bubble + drawer) */

.chat-overlay{

  position:fixed;

  inset:0;

  background: rgba(0,0,0,.45);

  backdrop-filter: blur(2px);

  z-index: 75;

}



.chatfab{

  position:fixed;

  right:14px;

  bottom:14px;

  width:56px;

  height:56px;

  border-radius:999px;

  border:1px solid var(--stroke2);

  background: linear-gradient(180deg, rgba(90,170,255,.38), rgba(255,120,200,.22));

  color: var(--text);

  display:grid;

  place-items:center;

  box-shadow: var(--shadow);

  cursor:pointer;

  z-index: 90;

  transition: transform .08s ease, filter .15s ease;

}

.chatfab:hover{ filter: brightness(1.05); }

.chatfab:active{ transform: translateY(1px); }

.chatfab.hidden{ display:none !important; }



@media (max-width: 900px){

  /* Collapse to one column in project view */

  body[data-page="project"] .project-shell{

    grid-template-columns: 1fr;

    gap: 12px;

  }



  /* Make chat a fixed drawer (hidden until opened) */

  body[data-page="project"] .project-shell > .chat{

    position:fixed;

    right:12px;

    bottom:84px; /* leaves room above the bubble */

    width: calc(100vw - 24px);

    max-width: 440px;

    height: min(72vh, 560px);

    z-index: 85;



    display:none;           /* hidden by default on mobile */

    flex-direction:column;  /* keep your internal layout */

  }



  body[data-page="project"] .project-shell > .chat.mobile-open{

    display:flex;           /* show when opened */

  }



  /* Show the close button only on mobile */

  .chatclose.hidden{ display:flex !important; }

}





/* ===== Mobile Drawer (off-canvas) ===== */



.icon-btn {

  border: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;

  padding: 10px;

  border-radius: 10px;

  line-height: 1;

}



.icon-btn:active { transform: scale(0.98); }



.menu-btn { display: none; } /* shown only on mobile */



.hamburger {

  display: inline-block;

  width: 22px;

  height: 16px;

  position: relative;

}

.hamburger::before,

.hamburger::after,

.hamburger span {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  height: 2px;

  border-radius: 2px;

  background: currentColor;

}

.hamburger::before { top: 0; }

.hamburger span { top: 7px; }

.hamburger::after { bottom: 0; }



/* overlay */

.drawer-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.55);

  opacity: 0;

  pointer-events: none;

  transition: opacity 180ms ease;

  z-index: 999;

}



/* IMPORTANT: this assumes #sidePanel exists and currently sits in your layout normally on desktop */

@media (max-width: 820px) {

  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }



  /* Hide any “top bar actions” area you don’t want visible on mobile.

     If you have a container for top-right buttons, give it an id like #topActions and hide it: */

  /* #topActions { display: none !important; } */



  /* Turn the side panel into a drawer */

  #sidePanel.side-panel,

  #sidePanel {

    position: fixed;

    top: 0;

    left: 0;

    height: 100dvh;

    width: min(360px, 88vw);

    transform: translateX(-105%);

    transition: transform 220ms ease;

    z-index: 1000;



    /* match your theme */

    background: var(--panel-bg, #0b0d12);

    border-right: 1px solid rgba(255,255,255,0.08);

    box-shadow: 0 10px 40px rgba(0,0,0,0.45);



    overflow: auto;

    -webkit-overflow-scrolling: touch;



    padding-top: env(safe-area-inset-top);

    padding-bottom: env(safe-area-inset-bottom);

  }



  body.drawer-open #sidePanel { transform: translateX(0); }



  body.drawer-open .drawer-overlay {

    opacity: 1;

    pointer-events: auto;

  }



  /* Make main content full-width (so Nodes + Metadata are the focus).

     Adjust these selectors to match your layout wrapper. */

  .layout,

  .app-layout,

  .container {

    grid-template-columns: 1fr !important;

  }



  /* If you have a desktop sidebar column, hide it on mobile (only if it’s NOT #sidePanel). */

  /* .sidebar { display: none !important; } */

}



/* Prevent background scroll when drawer is open */

body.drawer-open {

  overflow: hidden;

}



/* static/styles.css */



/* ===== Mobile project view: make Nodes + Rightpane internally scrollable ===== */

@media (max-width: 900px){

  /* Your desktop rule sets project .content to overflow:hidden.

     On mobile we want the page to be allowed to scroll between panels. */

  body[data-page="project"] .content{

    overflow: auto !important;

    -webkit-overflow-scrolling: touch;

  }



  /* The project page is currently height:100%/overflow:hidden.

     On mobile, let it flow naturally. */

  body[data-page="project"] .page-project{

    height: auto !important;

    overflow: visible !important;

    padding-bottom: 96px; /* breathing room for chat FAB */

  }



  /* Stack the panels and keep spacing nice */

  body[data-page="project"] .project-shell{

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;

    height: auto !important;

    min-height: 0 !important;

  }



  /* CRITICAL: give each panel a constrained height so its inner scroller can scroll */

  body[data-page="project"] .nodes{

    height: min(60dvh, 720px);

    min-height: 700px;

  }



  body[data-page="project"] .rightpane{

    height: min(75dvh, 980px);

    min-height: 700px;

  }



  /* Smooth/touch-friendly scrolling inside the panes */

  body[data-page="project"] .nodes-list,

  body[data-page="project"] .right-body{

    overflow: auto;

    min-height: 0;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain; /* prevents “scroll chaining” feeling */

  }



  /* Optional: make touch targets slightly nicer */

  body[data-page="project"] .segbtn,

  body[data-page="project"] .btn,

  body[data-page="project"] .minibtn{

    min-height: 40px;

  }

}