/* JARVIS Nova — work side: the workshop board (task, code, preview, status, system), the dock,
   approvals and the sheets the dock opens. */

/* ------------------------------------------------------------------ layout
   Phone: one column that scrolls (thread, then the board) with the dock pinned underneath.
   Desktop: thread + composer on the left, the board on the right, each scrolling on its own. */
#viewWork { flex-direction: column; }
.nv-work__grid { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.nv-work__col--chat { flex: none; }
.nv-work__col--board { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 6px 12px 14px; width: min(100%, 720px); margin: 0 auto; }
.nv-work__dock { position: sticky; bottom: 0; z-index: 20; margin-top: auto; padding-top: 22px; background: linear-gradient(180deg, rgba(4, 6, 12, 0), rgba(4, 6, 12, .62) 36%, rgba(4, 6, 12, .86)); }
.nv-thread--work { overflow: visible; flex: none; padding: 4px 12px 2px; }
.nv-thread--work .nv-thread__in { width: min(100%, 720px); min-height: 0; gap: 14px; padding-bottom: 6px; }

@media (min-width: 1000px) {
  .nv-work__grid { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(440px, 540px); grid-template-rows: minmax(0, 1fr) auto; column-gap: 14px; overflow: hidden; padding: 0 14px; }
  .nv-work__col--chat { grid-column: 1; grid-row: 1; overflow-y: auto; }
  .nv-work__col--board { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; overflow-y: auto; padding: 4px 2px 16px 0; }
  .nv-work__dock { grid-column: 1; grid-row: 2; position: static; padding-top: 0; background: none; }
  .nv-thread--work { padding: 4px 0 2px; }
  .nv-thread--work .nv-thread__in { width: 100%; }
  .nv-work__dock .nv-comp, .nv-work__dock .nv-dock { width: 100%; padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------------------------ work thread */
.nv-work .nv-msg--u .nv-bub { background: rgba(138, 123, 255, .12); border-color: rgba(138, 123, 255, .3); }
.nv-work .nv-msg--j .nv-bub { background: var(--nv-glass-2); }
.nv-clamp { position: relative; max-height: 15.5em; overflow: hidden; }
.nv-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, transparent, rgba(11, 16, 27, .96)); pointer-events: none; }
.nv-clamp-toggle { margin-top: 6px; color: var(--nv-or-2); font: 600 12.5px var(--f-display); letter-spacing: .06em; }
.nv-more { align-self: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--nv-glass); border: 1px solid var(--nv-line); color: var(--nv-ink-2); font: 500 12px var(--f-display); letter-spacing: .05em; }
.nv-more:hover { color: var(--nv-ink); border-color: var(--nv-line-2); }
.nv-note-inline { align-self: stretch; padding: 12px 14px; border-radius: 14px; background: var(--nv-glass); border: 1px dashed var(--nv-line-2); color: var(--nv-ink-2); font-size: 13.5px; line-height: 1.5; }
.nv-note-inline b { color: var(--nv-ink); }

/* ------------------------------------------------------------------ cards */
.nv-card {
  position: relative; padding: 14px 16px; border-radius: var(--r-card);
  background: rgba(10, 14, 24, .46); border: 1px solid var(--nv-line);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.nv-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nv-card__title { font: 600 11px var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--nv-ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-card__tools { display: inline-flex; gap: 4px; align-items: center; }
.nv-card__tools button { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--nv-ink-3); }
.nv-card__tools button:hover { background: rgba(255, 255, 255, .08); color: var(--nv-ink); }
.nv-card__tools .ic { width: 16px; height: 16px; }
.nv-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.nv-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--nv-or-3), var(--nv-or-2)); box-shadow: 0 0 12px var(--nv-or-glow); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.nv-bar--ok i { background: linear-gradient(90deg, #1fae78, var(--nv-ok)); box-shadow: 0 0 12px rgba(52, 211, 153, .4); }
.nv-bar--warn i { background: linear-gradient(90deg, #d99a1c, var(--nv-warn)); box-shadow: none; }
.nv-bar--bad i { background: linear-gradient(90deg, #d93a4a, var(--nv-bad)); box-shadow: none; }
.nv-dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: nvdots 1.4s steps(4, end) infinite; }
@keyframes nvdots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

/* ------------------------------------------------------------------ task card */
.nv-task { padding-bottom: 12px; cursor: pointer; }
.nv-task__top { display: flex; align-items: flex-start; gap: 12px; }
.nv-task__ic { flex: none; position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--nv-or-2); background: var(--nv-or-a); border: 1px solid rgba(255, 138, 43, .4); }
.nv-task__ic .ic { width: 18px; height: 18px; }
.nv-task__ic.is-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--nv-or); border-right-color: rgba(255, 138, 43, .35); animation: nvspin 1.1s linear infinite; }
.nv-task__ic.is-idle { color: var(--nv-ink-3); background: var(--nv-glass-3); border-color: var(--nv-line); }
.nv-task__ic.is-ok { color: var(--nv-ok); background: var(--nv-ok-a); border-color: rgba(52, 211, 153, .4); }
.nv-task__t { flex: 1; min-width: 0; }
.nv-task__t b { display: block; font: 600 15.5px/1.32 var(--f-body); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nv-task__t small { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 12.5px var(--f-body); color: var(--nv-ink-3); }
.nv-task__t small .st { font-weight: 600; color: var(--nv-or-2); }
.nv-task__t small .st.is-ok { color: var(--nv-ok); }
.nv-task__t small .st.is-bad { color: var(--nv-bad); }
.nv-task__t small .st.is-idle { color: var(--nv-ink-3); }
.nv-task__n { flex: none; font: 600 13px var(--f-display); padding: 4px 11px; border-radius: 999px; background: var(--nv-glass-3); border: 1px solid var(--nv-line); color: var(--nv-ink); font-variant-numeric: tabular-nums; }
.nv-task .nv-bar { margin: 14px 0 4px; }
.nv-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.nv-step { display: flex; align-items: center; gap: 12px; padding: 8px 2px; font-size: 14px; color: var(--nv-ink-2); min-height: 38px; }
.nv-step__dot { position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .2); }
.nv-step__dot .ic { width: 12px; height: 12px; }
.nv-step.is-done .nv-step__dot { background: var(--nv-ok); border-color: var(--nv-ok); color: #03150c; }
.nv-step.is-active { color: var(--nv-ink); font-weight: 500; }
.nv-step.is-active .nv-step__dot { border-color: var(--nv-or); background: var(--nv-or-a); }
.nv-step.is-active .nv-step__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--nv-or); animation: nvspin 1s linear infinite; }
.nv-step.is-active.is-still .nv-step__dot::after { animation: none; border-color: rgba(255, 138, 43, .35); }
.nv-step.is-blocked .nv-step__dot { border-color: var(--nv-bad); color: var(--nv-bad); }
.nv-step.is-todo { color: var(--nv-ink-3); }
.nv-step__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-step__code { flex: none; font: 500 11px var(--f-mono); color: var(--nv-ink-3); }
.nv-steps__more { padding: 4px 34px 0; color: var(--nv-ink-3); font-size: 12.5px; }
.nv-task__empty { padding: 4px 2px 2px; color: var(--nv-ink-2); font-size: 14px; line-height: 1.5; }
.nv-task__empty b { color: var(--nv-ink); }

/* ------------------------------------------------------------------ workspace (code / preview) */
.nv-ws__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nv-ws__file { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--nv-ink-2); font: 500 12.5px var(--f-mono); }
.nv-ws__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.nv-ws__file button { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--nv-ink-3); flex: none; }
.nv-ws__file button:hover { background: rgba(255, 255, 255, .08); color: var(--nv-ink); }
.nv-ws__file .ic { width: 15px; height: 15px; }
.nv-code { display: flex; max-height: 310px; overflow: auto; border-radius: 12px; background: rgba(2, 4, 9, .66); border: 1px solid var(--nv-line); font: 12px/1.66 var(--f-mono); -webkit-overflow-scrolling: touch; }
.nv-code__ln { position: sticky; left: 0; flex: none; padding: 12px 10px 12px 12px; text-align: right; color: rgba(255, 255, 255, .26); background: rgba(2, 4, 9, .9); border-right: 1px solid var(--nv-line); user-select: none; white-space: pre; font-variant-numeric: tabular-nums; }
.nv-code pre { margin: 0; padding: 12px 14px; min-width: max-content; white-space: pre; tab-size: 4; }
.nv-code code.hljs { padding: 0; background: transparent; font: inherit; }
.nv-code__more { padding: 8px 12px; text-align: center; color: var(--nv-ink-3); font-size: 12px; border-top: 1px solid var(--nv-line); }
.nv-empty-note { padding: 26px 16px; text-align: center; color: var(--nv-ink-3); font-size: 13.5px; line-height: 1.5; border: 1px dashed var(--nv-line-2); border-radius: 12px; }
.nv-empty-note b { color: var(--nv-ink-2); display: block; margin-bottom: 4px; font: 600 13px var(--f-display); letter-spacing: .06em; }

/* ------------------------------------------------------------------ preview frames */
.nv-frame { position: relative; border-radius: 12px; overflow: hidden; background: #0a0e17; border: 1px solid var(--nv-line); aspect-ratio: 16 / 10; }
.nv-frame iframe { position: absolute; left: 0; top: 0; border: 0; background: #fff; }
.nv-frame--live iframe { width: 100%; height: 100%; }
.nv-frame--thumb iframe { width: 1280px; height: 800px; transform-origin: 0 0; pointer-events: none; }
.nv-frame__shield { position: absolute; inset: 0; cursor: pointer; background: transparent; }
.nv-readme { max-height: 300px; overflow: auto; padding: 4px 4px 4px 2px; font-size: 14px; }
.nv-lp__url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.nv-lp__url span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--nv-line); font: 500 11.5px var(--f-mono); color: var(--nv-ink-2); }

/* ------------------------------------------------------------------ status pair */
.nv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nv-pair .nv-card { padding: 14px 14px 13px; min-width: 0; }
.nv-agent__state { display: flex; align-items: center; gap: 9px; font: 600 19px/1.1 var(--f-display); letter-spacing: .02em; }
.nv-agent__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nv-ink-3); flex: none; }
.nv-agent__dot.is-live { background: var(--nv-ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: nvping 1.8s ease-out infinite; }
.nv-agent__dot.is-warn { background: var(--nv-warn); }
.nv-agent__dot.is-bad { background: var(--nv-bad); }
@keyframes nvping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
.nv-agent__sub { margin-top: 8px; color: var(--nv-ink-3); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 2.9em; }
.nv-agent__sub b { color: var(--nv-ink-2); font-weight: 500; }
.nv-agent .nv-btn { width: 100%; margin-top: 10px; height: 34px; font-size: 13px; }
.nv-meter { margin-top: 10px; }
.nv-meter:first-of-type { margin-top: 0; }
.nv-meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.nv-meter__row span { font: 600 10.5px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--nv-ink-3); }
.nv-meter__row b { font: 500 12.5px var(--f-mono); color: var(--nv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-sys__src { margin-top: 10px; color: var(--nv-ink-3); font-size: 11px; }
@media (max-width: 380px) { .nv-pair { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ dock */
.nv-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 720px); margin: 0 auto; padding: 0 12px 2px; }
.nv-dock button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; border-radius: 16px;
  background: var(--nv-glass); border: 1px solid var(--nv-line); color: var(--nv-ink-2);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  font: 500 11.5px var(--f-display); letter-spacing: .06em; transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.nv-dock button:hover { color: var(--nv-ink); border-color: var(--nv-line-2); }
.nv-dock button:active { transform: scale(.95); }
.nv-dock button .ic { width: 19px; height: 19px; }
.nv-dock button.is-on { color: var(--nv-or-2); border-color: rgba(255, 138, 43, .5); background: var(--nv-or-a); }
.nv-dock button .badge { position: absolute; }

/* ------------------------------------------------------------------ approval */
.nv-approval { width: min(100%, 720px); margin: 0 auto 8px; padding: 0 12px; }
.nv-approval__in { padding: 13px 14px; border-radius: 16px; background: rgba(40, 28, 6, .86); border: 1px solid rgba(255, 194, 71, .5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 34px rgba(0, 0, 0, .4); }
.nv-approval__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--nv-warn); }
.nv-approval__h .ic { width: 16px; height: 16px; }
.nv-approval__cmd { margin: 0 0 6px; padding: 9px 11px; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid var(--nv-line); font: 12.5px/1.5 var(--f-mono); color: #ffe6c2; max-height: 110px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.nv-approval__d { color: var(--nv-ink-2); font-size: 12.5px; margin-bottom: 10px; }
.nv-approval__c { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ sheet contents */
.nv-term { min-height: 100%; padding: 12px 14px; border-radius: 14px; background: rgba(2, 4, 9, .72); border: 1px solid var(--nv-line); font: 12.4px/1.6 var(--f-mono); }
.nv-term > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.nv-term .t-cmd { color: #ffe3c4; margin-top: 8px; }
.nv-term .t-cmd::before { content: "$ "; color: var(--nv-or); }
.nv-term .t-out { color: var(--nv-ink-2); }
.nv-term .t-bad { color: var(--nv-bad); }
.nv-term .t-block { color: var(--nv-warn); opacity: .88; }
.nv-term .t-sys { color: var(--nv-ink-3); font-style: italic; }
.nv-term .t-cyc { margin: 12px 0 4px; padding-top: 8px; border-top: 1px dashed var(--nv-line-2); color: var(--nv-or-2); font-style: normal; font-weight: 600; }
.nv-term__empty { color: var(--nv-ink-3); font-family: var(--f-body); }
.nv-sheet--term .nv-sheet__body { display: flex; flex-direction: column; gap: 10px; }
.nv-sheet--term .nv-term { flex: 1; overflow: auto; }

.nv-browser { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.nv-addr { display: flex; align-items: center; gap: 10px; flex: none; height: 38px; padding: 0 8px 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid var(--nv-line); font: 12.5px var(--f-mono); color: var(--nv-ink-2); }
.nv-addr .ic { width: 15px; height: 15px; color: var(--nv-ok); }
.nv-addr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-addr button { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--nv-ink-3); }
.nv-addr button:hover { background: rgba(255, 255, 255, .09); color: var(--nv-ink); }
.nv-browser .nv-frame { flex: 1; aspect-ratio: auto; min-height: 320px; }
.nv-sheet--browser .nv-sheet__body { display: flex; flex-direction: column; }

.nv-tree { display: flex; flex-direction: column; }
.nv-tree__row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 8px; border-radius: 10px; text-align: left; color: var(--nv-ink-2); font: 500 13.5px var(--f-body); min-height: 38px; }
.nv-tree__row:hover { background: var(--nv-glass-3); color: var(--nv-ink); }
.nv-tree__row.is-on { background: var(--nv-or-a); color: var(--nv-or-2); }
.nv-tree__row .ic { width: 16px; height: 16px; flex: none; color: var(--nv-ink-3); }
.nv-tree__row.is-dir .ic:first-child { color: var(--nv-or-2); }
.nv-tree__row .chev { transition: transform .15s; width: 14px; height: 14px; }
.nv-tree__row.is-open .chev { transform: rotate(90deg); }
.nv-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-tree__size { flex: none; color: var(--nv-ink-3); font: 11.5px var(--f-mono); }
.nv-filter { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 0 10px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--nv-line); color: var(--nv-ink-3); }
.nv-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--nv-ink); font: 16px var(--f-body); }

.nv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.nv-stat { padding: 12px; border-radius: 14px; background: var(--nv-glass-3); border: 1px solid var(--nv-line); }
.nv-stat b { display: block; font: 600 22px/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.nv-stat span { display: block; margin-top: 4px; font: 600 10px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--nv-ink-3); }
.nv-stat--ok b { color: var(--nv-ok); } .nv-stat--or b { color: var(--nv-or-2); } .nv-stat--bad b { color: var(--nv-bad); }
.nv-obj { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--nv-glass-3); border: 1px solid var(--nv-line); color: var(--nv-ink-2); font-size: 13.5px; line-height: 1.55; }
.nv-tk { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; }
.nv-tk + .nv-tk { margin-top: 2px; }
.nv-tk:hover { background: var(--nv-glass-3); }
.nv-tk__code { flex: none; min-width: 52px; padding-top: 2px; font: 500 11.5px var(--f-mono); color: var(--nv-ink-3); }
.nv-tk__main { flex: 1; min-width: 0; }
.nv-tk__main b { display: block; font: 500 14px/1.35 var(--f-body); overflow-wrap: anywhere; }
.nv-tk__main small { display: block; margin-top: 3px; color: var(--nv-ink-3); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.nv-tk.is-hot { background: var(--nv-or-a); border-color: rgba(255, 138, 43, .35); }
details.nv-fold { margin-top: 6px; }
details.nv-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 4px; font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--nv-ink-3); }
details.nv-fold > summary::-webkit-details-marker { display: none; }
details.nv-fold > summary .ic { width: 14px; height: 14px; transition: transform .15s; }
details.nv-fold[open] > summary .ic { transform: rotate(90deg); }

/* ------------------------------------------------------------------ refinements after the first real render */
.nv-thread--work .nv-clamp { max-height: 9.6em; }
.nv-bub--cycle { padding: 10px 13px; }
.nv-bub--cycle .nv-md { font-size: 13.5px; line-height: 1.55; }
.nv-bub--cycle .nv-md.nv-clamp { max-height: 7.8em; }
.nv-work__dock { background: linear-gradient(180deg, rgba(4, 6, 12, 0), rgba(4, 6, 12, .92) 28px, rgba(4, 6, 12, .97)); }
.nv-dock button { background: rgba(13, 18, 30, .92); }
.nv-work__dock .nv-comp__box { background: rgba(10, 14, 24, .86); }