/* The agent console. Dark, dense, mono for anything that is a number or a
   call. Shared by the hero (.compact) and the full-screen demo. */

.nx-console{
  --h: 640px;
  display:flex; flex-direction:column; height:var(--h);
  background:var(--c-bg); color:var(--c-ink); border-radius:var(--r-xl); overflow:hidden;
  border:1px solid #1d2026; box-shadow: var(--shadow-2), 0 0 0 6px rgba(21,23,28,.04);
  font:13px/1.45 var(--font-body); text-align:left; position:relative; isolation:isolate;
}
.nx-console *{box-sizing:border-box}
.nx-console .mono{font-family:var(--font-mono); font-size:.93em; letter-spacing:-.01em}
.nx-console button{font:inherit; color:inherit; cursor:pointer}

/* ---- top bar ---- */
.nx-top{display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid var(--c-line); background:#0E1115; min-height:48px}
.nx-top .dots{display:flex; gap:6px}
.nx-top .dots i{width:10px; height:10px; border-radius:50%; background:#2A2E36}
.nx-top .nx-wm{font:500 17px/1 var(--font-display); letter-spacing:-.01em}
.nx-top .nx-wm b{color:var(--c-green); font-weight:500}
.nx-top .co{display:flex; align-items:center; gap:7px; padding:4px 8px 4px 4px; border:1px solid var(--c-line); border-radius:8px; color:var(--c-muted); font-size:12px}
.nx-top .co .av{width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,#FF8A65,#E0457B); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:600}
.nx-top .co svg{width:13px; height:13px}
.nx-top .tabs{display:flex; gap:4px; margin-left:8px; padding:3px; background:var(--c-panel); border:1px solid var(--c-line); border-radius:10px}
.nx-top .tabs button{border:0; background:none; padding:5px 11px; border-radius:7px; color:var(--c-muted); font-size:12.5px}
.nx-top .tabs button.on{background:var(--c-panel-2); color:var(--c-ink); box-shadow:inset 0 0 0 1px var(--c-line)}
.nx-top .ctl{margin-left:auto; display:flex; align-items:center; gap:8px}
.nx-top .ctl > button{width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--c-line); background:var(--c-panel); border-radius:8px; color:var(--c-muted)}
.nx-top .ctl > button:hover{color:var(--c-ink)}
.nx-top .ctl svg{width:14px; height:14px}
.nx-top .speed{width:auto !important; padding:0 8px; font-size:11.5px}
.nx-console .i-play{display:none}
.nx-console.paused .i-play{display:block}
.nx-console.paused .i-pause{display:none}
.nx-top .ask{display:flex; align-items:center; gap:8px; color:var(--c-muted); font-size:12px; cursor:pointer; user-select:none}
.nx-top .ask input{position:absolute; opacity:0; pointer-events:none}
.nx-top .ask .sw{width:28px; height:16px; border-radius:99px; background:#2A2E36; position:relative; transition:background .2s}
.nx-top .ask .sw::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#C9CDD3; transition:transform .2s var(--ease)}
.nx-top .ask input:checked + .sw{background:var(--c-green)}
.nx-top .ask input:checked + .sw::after{transform:translateX(12px); background:#fff}
.nx-top .ask input:focus-visible + .sw{outline:2px solid var(--c-blue); outline-offset:2px}

/* ---- split ---- */
.nx-split{flex:1; display:grid; grid-template-columns:minmax(320px, 400px) 1fr; min-height:0}

/* ---- agent pane ---- */
.nx-agent{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--c-line); background:var(--c-bg)}
.nx-plan{border-bottom:1px solid var(--c-line); padding:10px 14px}
.nx-plan .ph{all:unset; display:flex; justify-content:space-between; width:100%; color:var(--c-faint); font-size:11px; text-transform:uppercase; letter-spacing:.08em; cursor:default}
.nx-plan ol{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:5px}
.nx-plan li{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--c-faint); transition:color .3s}
.nx-plan li .ic{width:14px; height:14px; border-radius:50%; border:1.5px solid #353A43; flex:none; position:relative}
.nx-plan li.running{color:var(--c-ink)}
.nx-plan li.running .ic{border-color:var(--c-amber); border-right-color:transparent; animation:nx-spin .8s linear infinite}
.nx-plan li.done{color:var(--c-muted)}
.nx-plan li.done .ic{border-color:var(--c-green); background:var(--c-green)}
.nx-plan li.done .ic::after{content:""; position:absolute; left:3.5px; top:1px; width:3px; height:6px; border:solid #0B0D10; border-width:0 1.5px 1.5px 0; transform:rotate(45deg)}

.nx-feed{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; overscroll-behavior:contain}
.nx-feed::-webkit-scrollbar, .nx-body-scroll::-webkit-scrollbar{width:8px}
.nx-feed::-webkit-scrollbar-thumb, .nx-body-scroll::-webkit-scrollbar-thumb{background:#262A31; border-radius:8px}
.nx-msg{animation:nx-in .35s var(--ease) both}
.nx-msg p{margin:0}
.nx-msg.user{align-self:flex-end; max-width:88%; background:var(--c-panel-2); border:1px solid var(--c-line); padding:9px 12px; border-radius:12px 12px 4px 12px}
.nx-msg .file{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--c-blue); background:rgba(122,167,255,.1); padding:3px 8px; border-radius:6px; margin-bottom:6px}
.nx-msg .file::before{content:""; width:9px; height:11px; border:1.5px solid currentColor; border-radius:2px}
.nx-msg.agent{color:#D5D8DD; padding-left:24px; position:relative}
.nx-msg.agent:not(.has-mk)::before{content:""; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:5px; background:var(--c-panel-2); box-shadow:inset 0 0 0 1px var(--c-line)}
.nx-msg.agent .mk{position:absolute; left:0; top:0; width:18px; height:18px; border-radius:5px; background:var(--c-panel-2); color:var(--c-ink); box-shadow:inset 0 0 0 1px var(--c-line)}
.nx-msg.agent .mk .nxm svg{width:72%; height:72%}
.nx-msg.agent .mk .nxm-glyph svg{stroke-width:2}
.nx-msg.agent .mk .nxm-icon svg{stroke-width:2.2}
.nx-msg.agent.done .mk{--nxm-node:var(--c-green)}
.nx-msg.agent .who{display:block; font-size:10.5px; color:var(--c-faint); text-transform:uppercase; letter-spacing:.06em; line-height:18px; margin-bottom:1px}
.nx-msg.agent .who + p{margin-top:0}
.nx-msg.tool{border:1px solid var(--c-line); background:var(--c-panel); border-radius:10px; padding:8px 11px; margin-left:24px}
.nx-msg.tool .tl{display:flex; align-items:center; gap:7px; min-width:0}
.nx-msg.tool .nm{color:var(--c-ink)}
.nx-msg.tool .ar{color:var(--c-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nx-msg.tool .spin{width:12px; height:12px; flex:none; border-radius:50%; border:1.5px solid var(--c-amber); border-right-color:transparent; animation:nx-spin .8s linear infinite}
.nx-msg.tool.ok .spin{animation:none; border-color:var(--c-green); background:var(--c-green); position:relative}
.nx-msg.tool.ok .spin::after{content:""; position:absolute; left:3px; top:.5px; width:3px; height:6px; border:solid #0B0D10; border-width:0 1.5px 1.5px 0; transform:rotate(45deg)}
.nx-msg.tool .res{color:var(--c-muted); font-size:12.5px; margin-top:4px}
.nx-msg.tool .res:empty{display:none}

.nx-msg.proposal{margin-left:24px; border:1px solid rgba(242,181,68,.35); background:linear-gradient(180deg, rgba(242,181,68,.06), transparent 60%), var(--c-panel); border-radius:12px; padding:11px 12px}
.nx-msg.proposal.approved{border-color:rgba(61,214,140,.35); background:linear-gradient(180deg, rgba(61,214,140,.06), transparent 60%), var(--c-panel)}
.nx-msg.proposal.rejected{border-color:var(--c-line); opacity:.6}
.pc-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pc-h b{font-weight:500}
.nx-msg .why{color:var(--c-muted); font-size:12.5px; margin:6px 0 8px}
.pc-t{width:100%; border-collapse:collapse; font-size:12px}
.pc-t td{padding:4px 0; border-top:1px dashed #262A31}
.pc-t .c{color:var(--c-faint); width:44px}
.pc-t .n{text-align:right; white-space:nowrap; padding-left:10px}
.pc-t .n i{font-style:normal; color:var(--c-faint); margin-right:4px}
.pc-t select{display:none; background:var(--c-panel-2); color:var(--c-ink); border:1px solid var(--c-amber); border-radius:6px; padding:2px 4px; font:inherit; max-width:100%}
.nx-msg.editing .pc-t select{display:inline-block}
.nx-msg.editing .pc-t .an{display:none}
.pc-meta{display:flex; justify-content:space-between; flex-wrap:wrap; gap:2px 10px; white-space:nowrap; color:var(--c-faint); font-size:11px; margin-top:8px}
.pc-act{display:flex; align-items:center; gap:6px; margin-top:10px}
.pc-act button{border:1px solid var(--c-line); background:var(--c-panel-2); border-radius:8px; padding:5px 11px; font-size:12.5px; transition:transform .15s, background .2s}
.pc-act .ok{background:var(--c-green); border-color:var(--c-green); color:#06140D; font-weight:600}
.pc-act .ok.press{transform:scale(.94)}
.pc-act button:disabled{display:none}
.pc-act .wait{margin-left:auto; white-space:nowrap; color:var(--c-amber); font-size:11.5px; display:none}
.nx-msg.waiting .wait{display:inline}
.nx-msg.waiting .ok{animation:nx-pulse 1.6s ease-in-out infinite}
.nx-msg.auto .pc-act .ok{position:relative; overflow:hidden}
.nx-msg.auto .pc-act .ok::after{content:""; position:absolute; left:0; bottom:0; height:2px; background:rgba(6,20,13,.5); animation:nx-bar 2.4s linear forwards}
.nx-console.paused .nx-msg.auto .pc-act .ok::after{animation-play-state:paused}

.nx-suggest{display:block; margin-top:10px; border:1px dashed #3A404A; background:none; border-radius:9px; padding:7px 11px; color:var(--c-ink); font-size:12.5px; text-align:left}
.nx-suggest:hover{border-color:var(--c-green); color:var(--c-green)}

.nx-composer{display:flex; align-items:center; gap:8px; margin:0 12px 12px; padding:8px 8px 8px 12px; border:1px solid var(--c-line); background:var(--c-panel); border-radius:12px}
.nx-composer .field{flex:1; min-width:0; display:flex; align-items:center; gap:6px; color:var(--c-faint); font-size:12.5px; white-space:nowrap; overflow:hidden}
.nx-composer.typing .field{color:var(--c-ink)}
.nx-composer .txt{overflow:hidden; text-overflow:ellipsis}
.nx-composer .attach .file{font-size:11px; color:var(--c-blue); background:rgba(122,167,255,.1); padding:2px 6px; border-radius:5px}
.nx-composer .caret{width:1.5px; height:14px; background:var(--c-green); display:none; animation:nx-blink 1s steps(1) infinite}
.nx-composer.typing .caret{display:block}
.nx-composer .send{width:28px; height:28px; border-radius:8px; border:0; background:var(--c-panel-2); display:grid; place-items:center; color:var(--c-muted)}
.nx-composer.typing .send{background:var(--c-ink); color:var(--c-bg)}
.nx-composer .send svg{width:14px; height:14px}

/* ---- engine pane ---- */
.nx-engine-host{min-width:0; min-height:0; display:flex}
.nx-engine{flex:1; display:grid; grid-template-columns:auto 1fr; min-height:0; background:var(--c-panel)}
.nx-side{display:flex; flex-direction:column; gap:2px; padding:10px 8px; border-right:1px solid var(--c-line); background:#0F1216}
.nx-side button{display:flex; align-items:center; gap:9px; border:0; background:none; color:var(--c-faint); padding:7px 10px; border-radius:8px; font-size:12.5px; white-space:nowrap; transition:background .2s, color .2s}
.nx-side button svg{width:16px; height:16px; flex:none}
.nx-side button:hover{color:var(--c-ink)}
.nx-side button.on{background:var(--c-panel-2); color:var(--c-ink); box-shadow:inset 0 0 0 1px var(--c-line)}
.nx-main{display:flex; flex-direction:column; min-width:0; min-height:0}
.nx-crumb{display:flex; align-items:center; gap:8px; padding:12px 18px; border-bottom:1px solid var(--c-line); font-size:12.5px; color:var(--c-faint)}
.nx-crumb .p{color:var(--c-ink); font-weight:500}
.nx-crumb .live{margin-left:auto; display:flex; align-items:center; gap:6px; font:11px var(--font-mono); color:var(--c-green); text-transform:uppercase; letter-spacing:.06em}
.nx-crumb .live i{width:6px; height:6px; border-radius:50%; background:var(--c-green); box-shadow:0 0 0 3px var(--c-green-soft); animation:nx-blink 2s ease-in-out infinite}
.nx-body-scroll{flex:1; overflow-y:auto; position:relative; overscroll-behavior:contain}
.nx-panel{padding:16px 18px 40px}
.nx-panel.enter{animation:nx-slide .38s var(--ease) both}

.nx-chip{display:inline-flex; align-items:center; font-size:11px; padding:2px 7px; border-radius:99px; background:#20242B; color:var(--c-muted); white-space:nowrap; font-weight:500}
.nx-chip.s-posted, .nx-chip.s-booked, .nx-chip.s-paid, .nx-chip.s-filed{background:var(--c-green-soft); color:var(--c-green)}
.nx-chip.s-draft, .nx-chip.s-proposed, .nx-chip.s-soon, .nx-chip.s-match{background:var(--c-amber-soft); color:var(--c-amber)}
.nx-chip.s-new{background:rgba(122,167,255,.13); color:var(--c-blue)}
.nx-chip.s-rejected{background:rgba(242,104,92,.13); color:var(--c-red)}

.nx-table{width:100%; border-collapse:collapse; font-size:12.5px}
.nx-table th{text-align:left; font-weight:500; color:var(--c-faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:0 8px 8px; border-bottom:1px solid var(--c-line)}
.nx-table td{padding:8px; border-bottom:1px solid #1C2026; vertical-align:middle}
.nx-table .n{text-align:right; white-space:nowrap}
.nx-table .c{color:var(--c-faint); width:52px}
.nx-table .desc{color:#C4C8CE; font-size:11.5px}
.nx-table .in{color:var(--c-green)}
.nx-table .link{color:var(--c-faint); font-size:11px}
.nx-tb tfoot td{border-bottom:0; border-top:1px solid var(--c-line); font-weight:500; padding-top:10px}
.nx-tb tfoot .nx-chip{margin-left:6px}
.nx-empty{color:var(--c-faint); padding:30px 0; text-align:center}

.nx-je-list{display:grid; gap:10px}
.nx-je{border:1px solid var(--c-line); border-radius:10px; background:#0F1216; overflow:hidden}
.nx-je.draft{border-color:rgba(242,181,68,.45); background:linear-gradient(180deg, rgba(242,181,68,.05), transparent 70%), #0F1216}
.nx-je header{display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #1C2026; font-size:12.5px}
.nx-je header .id{color:var(--c-faint)}
.nx-je header .d{color:var(--c-muted); min-width:42px}
.nx-je header .m{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nx-je header .by{color:var(--c-faint); font-size:11px}
.nx-je table{width:100%; border-collapse:collapse; font-size:12px}
.nx-je td{padding:5px 12px; color:#C4C8CE}
.nx-je td.c{color:var(--c-faint); width:54px}
.nx-je td.n{text-align:right; width:110px}

.nx-recon{display:flex; align-items:center; gap:12px; margin-bottom:14px; color:var(--c-muted); font-size:12px}
.nx-recon .bar{flex:1; height:6px; background:#1C2026; border-radius:99px; overflow:hidden}
.nx-recon .bar i{display:block; height:100%; background:var(--c-green); border-radius:99px; transition:width .6s var(--ease)}

.nx-dl{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.nx-dl li{display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--c-line); border-radius:10px; background:#0F1216}
.nx-dl .cal{width:44px; flex:none; text-align:center; border-radius:8px; background:var(--c-panel-2); padding:5px 0; line-height:1.1}
.nx-dl .cal b{display:block; font:500 17px var(--font-mono)}
.nx-dl .cal i{font-style:normal; font-size:10px; text-transform:uppercase; color:var(--c-faint); letter-spacing:.06em}
.nx-dl .st-soon .cal{background:var(--c-amber-soft); color:var(--c-amber)}
.nx-dl .st-filed .cal{background:var(--c-green-soft); color:var(--c-green)}
.nx-dl .tx{flex:1; min-width:0; display:flex; flex-direction:column}
.nx-dl .tx b{font-weight:500}
.nx-dl .tx i{font-style:normal; color:var(--c-faint); font-size:12px}
.nx-dl .body{font:11px var(--font-mono); color:var(--c-muted); border:1px solid var(--c-line); border-radius:6px; padding:2px 6px}

.nx-filing{border:1px solid var(--c-line); border-radius:12px; background:#0F1216; padding:14px; margin-bottom:12px}
.nx-filing.draft{border-color:rgba(242,181,68,.45)}
.nx-filing header{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.nx-filing header .id{color:var(--c-faint); border:1px solid var(--c-line); padding:1px 6px; border-radius:6px}
.nx-filing header b{font-weight:500; flex:1}
.nx-filing header .by{color:var(--c-faint); font-size:11.5px}
.nx-filing .boxes{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.nx-filing .box{border:1px solid #1C2026; border-radius:9px; padding:9px 11px; background:var(--c-panel)}
.nx-filing .box i{display:block; font-style:normal; color:var(--c-faint); font-size:11.5px}
.nx-filing .box b{font-weight:500; font-size:14px}
.nx-filing .box:last-child{border-color:rgba(61,214,140,.3)}
.nx-filing dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:12.5px}
.nx-filing dt{color:var(--c-faint)}
.nx-filing dd{margin:0}
.nx-filing footer{display:flex; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px dashed var(--c-line); color:var(--c-green); font-size:12px}

.nx-co{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0 0 18px; font-size:12.5px}
.nx-co dt{color:var(--c-faint)} .nx-co dd{margin:0}
.nx-panel h4{margin:16px 0 8px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--c-faint)}
.nx-people{list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap}
.nx-people li{border:1px solid var(--c-line); border-radius:99px; padding:4px 11px; font-size:12.5px}

/* change highlights */
.nx-console .ring, .nx-engine .ring{animation:nx-ring 1.8s var(--ease) both; border-radius:8px}
tr.ring td{animation:nx-ring-row 1.8s var(--ease) both}
.is-new{animation:nx-new .5s var(--ease) both}
tr.flash td{animation:nx-flash 1.6s var(--ease) both}

@keyframes nx-spin{to{transform:rotate(360deg)}}
@keyframes nx-blink{50%{opacity:.25}}
@keyframes nx-in{from{opacity:0; transform:translateY(6px)}}
@keyframes nx-slide{from{opacity:0; transform:translateX(14px)}}
@keyframes nx-new{from{opacity:0; transform:translateY(-6px)}}
@keyframes nx-bar{from{width:0} to{width:100%}}
@keyframes nx-pulse{50%{box-shadow:0 0 0 5px rgba(61,214,140,.18)}}
@keyframes nx-ring{0%{box-shadow:0 0 0 0 rgba(61,214,140,0)} 15%{box-shadow:0 0 0 2px var(--c-green), 0 0 0 7px rgba(61,214,140,.18)} 70%{box-shadow:0 0 0 2px var(--c-green), 0 0 0 7px rgba(61,214,140,.08)} 100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}}
@keyframes nx-ring-row{0%,100%{background:transparent} 15%,60%{background:rgba(61,214,140,.12)}}
@keyframes nx-flash{0%,100%{color:inherit} 20%,60%{color:var(--c-green)}}

/* compact (hero): the agent pane narrows, labels on the side rail hide */
.nx-console.compact{--h: 600px}
.nx-console.compact .nx-side button span{display:none}
.nx-console.compact .nx-side button{padding:8px}
.nx-console.compact .nx-split{grid-template-columns:minmax(300px, 380px) 1fr}

@media (max-width: 1100px){
  .nx-side button span{display:none}
  .nx-side button{padding:8px}
  .nx-top .ask .lbl{display:none}
}
@media (max-width: 820px){
  .nx-console, .nx-console.compact{--h:auto}
  .nx-split, .nx-console.compact .nx-split{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto}
  .nx-agent{border-right:0; border-bottom:1px solid var(--c-line); height:430px}
  .nx-engine-host{height:400px}
  .nx-engine{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .nx-side{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--c-line); padding:6px}
  .nx-side button span{display:inline}
  .nx-top{flex-wrap:wrap; gap:10px}
  .nx-top .co{display:none}
  .nx-top .tabs{order:5; width:100%; margin:0; overflow-x:auto}
  .nx-top .tabs button{flex:1; white-space:nowrap}
  .nx-je td.n{width:auto}
  .nx-filing .boxes{grid-template-columns:1fr 1fr}
  .nx-panel{padding:12px}
}

@media (prefers-reduced-motion: reduce){
  .nx-console *, .nx-engine *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}