/* Home page demo (assets/js/demo.js): a replica of the NexaPilot bar. It always uses the
   app's dark look, like a screenshot of the real thing, whatever the page theme. */
.npd-wrap { padding-top: clamp(48px, 7vw, 88px) !important; padding-bottom: clamp(48px, 7vw, 88px) !important; }
.npd-head { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.npd-head p { color: var(--muted); margin-top: 10px; }
#npd {
  --d-bg: #0f1a29; --d-bg2: #13223a; --d-line: #24384f; --d-text: #eef3f8; --d-muted: #8ea2b8; --d-amber: #f5b83d; --d-sky: #6fd0de; --d-green: #5fd39a; --d-red: #ff7b72;
  max-width: 780px; margin: 0 auto; color: var(--d-text); font: 15px/1.5 var(--body, "Onest", system-ui, sans-serif);
}
#npd *, #npd *::before, #npd *::after { box-sizing: border-box; }
.npd-bar { background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 22px; box-shadow: 0 30px 80px rgba(5, 12, 22, .35), 0 0 0 1px rgba(255,255,255,.03) inset; overflow: hidden; }
.npd-ask { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; }
.npd-orb { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--d-amber); display: grid; place-items: center; }
.npd-orb i { width: 9px; height: 9px; border-radius: 50%; background: var(--d-amber); }
.npd-bar.busy .npd-orb i { animation: npd-pulse 1s ease-in-out infinite; }
.npd-bar.rec .npd-orb { border-color: var(--d-red); }
.npd-bar.rec .npd-orb i { background: var(--d-red); }
@keyframes npd-pulse { 50% { transform: scale(.45); opacity: .5; } }
.npd-field { flex: 1; min-width: 0; }
.npd-field textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--d-text); font: inherit; font-size: 17px; line-height: 1.45; padding: 4px 0; max-height: 120px; }
.npd-field textarea::placeholder { color: var(--d-muted); }
.npd-pills:empty { display: none; }
.npd-pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: rgba(255,123,114,.15); color: var(--d-red); }
.npd-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-bg2); color: var(--d-muted); cursor: pointer; }
.npd-icon:hover, .npd-icon:focus-visible { color: var(--d-text); border-color: #36506d; }
.npd-icon.send { background: var(--d-amber); border-color: var(--d-amber); color: #1a1205; }
.npd-icon.stop { color: var(--d-red); }
.npd-icon[hidden] { display: none; }
#npd :focus-visible { outline: 2px solid var(--d-sky); outline-offset: 2px; }
.npd-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 18px 12px 52px; }
.npd-where { font-size: 12.5px; color: var(--d-muted); }
.npd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.npd-chip { font: inherit; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--d-line); background: var(--d-bg2); color: var(--d-text); cursor: pointer; text-align: left; }
.npd-chip:hover:not(:disabled) { border-color: var(--d-amber); color: var(--d-amber); }
.npd-chip:disabled { opacity: .45; cursor: default; }
#npd section.npd-thread { padding: 4px 18px 16px 52px; border-top: 1px solid var(--d-line); min-height: 170px; max-height: 520px; overflow-y: auto; scroll-behavior: smooth; }
.npd-empty { color: var(--d-muted); font-size: 14px; margin: 16px 0 0; }
.npd-turn { display: grid; gap: 10px; padding-top: 14px; }
.npd-q { justify-self: end; max-width: 85%; background: var(--d-bg2); border: 1px solid var(--d-line); border-radius: 14px 14px 4px 14px; padding: 8px 12px; font-size: 14.5px; }
.npd-status { color: var(--d-muted); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.npd-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--d-line); border-top-color: var(--d-amber); animation: npd-spin .8s linear infinite; }
.npd-status.off::before, .npd-status[hidden] { display: none; }
@keyframes npd-spin { to { transform: rotate(360deg); } }
.npd-answer { display: grid; gap: 10px; }
.npd-say { font-size: 15px; }
.npd-say p { margin: 0 0 6px; }
.npd-say strong { color: #fff; }
.npd-say code { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; background: var(--d-bg2); padding: 1px 5px; border-radius: 5px; }
.npd-caret::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--d-amber); animation: npd-blink 1s steps(1) infinite; }
@keyframes npd-blink { 50% { opacity: 0; } }
.npd-blk { border: 1px solid var(--d-line); border-radius: 14px; background: rgba(255,255,255,.02); padding: 12px 14px; }
.npd-in { animation: npd-in .35s ease-out both; }
@keyframes npd-in { from { opacity: 0; transform: translateY(6px); } }
.npd-blk-title { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--d-muted); margin-bottom: 8px; }
.npd-tscroll { overflow-x: auto; }
.npd-tscroll table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.npd-tscroll th, .npd-tscroll td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--d-line); white-space: nowrap; }
.npd-tscroll th { color: var(--d-muted); font-weight: 600; }
.npd-tscroll .num { text-align: end; font-variant-numeric: tabular-nums; }
.npd-tscroll tr.tot td { font-weight: 700; color: var(--d-amber); border-bottom: 0; }
.npd-chart svg { width: 100%; height: auto; display: block; }
.npd-chart svg text { fill: var(--d-muted); font-size: 11px; font-family: inherit; }
.npd-chart svg text.val { fill: var(--d-text); font-weight: 600; }
.npd-chart svg .grid { stroke: var(--d-line); stroke-width: 1; }
.npd-bar-r { transform-box: fill-box; transform-origin: bottom; animation: npd-grow .6s ease-out both; }
@keyframes npd-grow { from { transform: scaleY(0); } }
.npd-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.npd-files li { display: flex; align-items: center; gap: 10px; }
.npd-files .ico { width: 34px; height: 38px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: #3b82f6; flex: none; }
.npd-files .ico.xlsx { background: #1f9d55; } .npd-files .ico.docx { background: #2f6fd6; } .npd-files .ico.pptx { background: #d4542a; } .npd-files .ico.pdf { background: #d33a3a; }
.npd-files .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npd-files .meta { margin-left: auto; color: var(--d-muted); font-size: 12.5px; white-space: nowrap; }
.npd-pre pre { margin: 0; font: 12.5px/1.55 var(--mono, ui-monospace, monospace); overflow-x: auto; white-space: pre; }
.npd-pre .add { color: var(--d-green); } .npd-pre .del { color: var(--d-red); }
.npd-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.npd-plan-list li { display: flex; gap: 10px; align-items: baseline; }
.npd-plan-list .ic { width: 16px; flex: none; text-align: center; color: var(--d-muted); }
.npd-plan-list .st-doing .ic { color: var(--d-amber); }
.npd-plan-list .st-done .ic { color: var(--d-green); }
.npd-plan-list .st-done span:last-child { color: var(--d-muted); }
.npd-notice { font-size: 14px; border-color: rgba(111,208,222,.35); background: rgba(111,208,222,.06); }
.npd-notice.success { border-color: rgba(95,211,154,.4); background: rgba(95,211,154,.07); }
.npd-notice.warn { border-color: rgba(245,184,61,.45); background: rgba(245,184,61,.07); }
.npd-notice p { margin: 0; }
.npd-confirm { border-color: rgba(245,184,61,.55); background: rgba(245,184,61,.06); }
.npd-confirm .t { font-weight: 700; }
.npd-confirm .d { color: var(--d-muted); font-size: 13.5px; margin-top: 4px; white-space: pre-line; }
.npd-plan-steps { margin: 8px 0 0; padding-inline-start: 20px; font-size: 14px; }
.npd-confirm .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.npd-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-bg2); color: var(--d-text); cursor: pointer; }
.npd-btn.primary { background: var(--d-amber); border-color: var(--d-amber); color: #1a1205; }
.npd-resolved { font-size: 13.5px; color: var(--d-muted); }
.npd-link { display: grid; gap: 2px; text-decoration: none; color: var(--d-text); }
.npd-link .t { font-weight: 700; color: var(--d-amber); }
.npd-link .u { font-size: 13px; color: var(--d-muted); }
.npd-foot { display: flex; justify-content: space-between; gap: 10px; padding: 9px 18px; border-top: 1px solid var(--d-line); font-size: 12px; color: var(--d-muted); }
.npd-foot .brain { display: inline-flex; align-items: center; gap: 6px; }
.npd-foot .brain i { width: 7px; height: 7px; border-radius: 50%; background: var(--d-green); }
.npd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .npd-context, #npd section.npd-thread { padding-left: 16px; padding-right: 16px; }
  .npd-foot .keys { display: none; }
  .npd-field textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #npd *, #npd *::before, #npd *::after { animation: none !important; scroll-behavior: auto !important; }
}