/* The app as it draws itself: the mark (Mark.module.css), the node glyph
   (DESIGN.md §4.5) and the app window. The window keeps the app's own dark
   tokens (tokens.generated.css, dark and opaque, indigo accent) so it reads
   as the real app on the page's Nord ground. */

.window {
  --background: #181818;
  --shell: #202020;
  --raised: #2d2d2d;
  --glass: #383838;
  --input: #2a2a2a;
  --text: #ffffff;
  --muted: #b4b4b6;
  --faint: #8a8a8c;
  --border: rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.16);
  --hover: rgb(255 255 255 / 0.08);
  --selected: rgb(255 255 255 / 0.08);
  --accent: #7c82ff;
  --accent-ink: #7c82ff;
  --accent-wash: rgb(124 130 255 / 0.22);
  --user-bubble: rgb(124 130 255 / 0.14);
  --success: #3dd68c;
  --danger: #ff6369;
  --claude: #d97757;
  --code-bg: #2e2e2e;
  --shadow-float: 0 8px 28px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
  color: var(--text);
}

/* ── The mark (Mark.module.css) ──────────────────────────────────────── */

[data-mark] {
  display: inline-block;
  flex: none;
}

.mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.m-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 28;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark[data-motion='lively'] .m-line {
  stroke-width: 34;
}

.m-eye {
  fill: currentColor;
}

.m-arm-l,
.m-arm-r,
.m-loop-l,
.m-loop-r,
.m-eyes {
  transform-box: fill-box;
}

.m-arm-l {
  transform-origin: 100% 0;
}
.m-arm-r {
  transform-origin: 0 0;
}
.m-loop-l,
.m-loop-r {
  transform-origin: 50% 0;
}
.m-eyes {
  transform-origin: 50% 50%;
}

.mark[data-alive='1'] .m-arm-l {
  animation: sway-left var(--t-orbit) var(--ease-in-out) infinite alternate;
}
.mark[data-alive='1'] .m-arm-r {
  animation: sway-right var(--t-orbit) var(--ease-in-out) infinite alternate;
  animation-delay: var(--t-stagger);
}
.mark[data-alive='1'] .m-loop-l {
  animation: reach var(--t-orbit) var(--ease-in-out) infinite alternate;
  animation-delay: var(--t-stagger);
}
.mark[data-alive='1'] .m-loop-r {
  animation: reach var(--t-orbit) var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--t-stagger) * 3);
}
.mark[data-alive='1'] .m-eyes {
  animation: blink var(--t-sweep) var(--ease-in-out) infinite;
}

.mark[data-alive='1'][data-motion='lively'] .m-arm-l {
  animation: tap-left var(--t-tap) var(--ease-in-out) infinite;
}
.mark[data-alive='1'][data-motion='lively'] .m-arm-r {
  animation: tap-right var(--t-tap) var(--ease-in-out) infinite;
  animation-delay: calc(var(--t-tap) / 2);
}
.mark[data-alive='1'][data-motion='lively'] .m-loop-l {
  animation: fidget var(--t-orbit) var(--ease-in-out) infinite alternate;
}
.mark[data-alive='1'][data-motion='lively'] .m-loop-r {
  animation: fidget var(--t-orbit) var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--t-stagger) * 3);
}

/* The eyes blink with `scale`, so script can still move them with `translate`
   to follow the pointer. */
.mark[data-eyes='1'] .m-eyes {
  transition: translate 260ms var(--ease-out-quint);
}

@keyframes sway-left {
  from {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-9deg);
  }
}
@keyframes sway-right {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(9deg);
  }
}
@keyframes reach {
  from {
    transform: scaleY(0.88);
  }
  to {
    transform: scaleY(1.1);
  }
}
@keyframes blink {
  0%,
  92%,
  100% {
    scale: 1 1;
  }
  96% {
    scale: 1 0.1;
  }
}
@keyframes tap-left {
  0%,
  55%,
  100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-16deg);
  }
}
@keyframes tap-right {
  0%,
  55%,
  100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(16deg);
  }
}
@keyframes fidget {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}

/* ── The node glyph (DESIGN.md §4.5) ─────────────────────────────────── */

.node {
  --hue-c: var(--hue, var(--faint));
  position: relative;
  flex: none;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hue-c) 55%, transparent) inset;
}

.node::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--hue-c);
  transition:
    inset 360ms var(--ease-out-quint),
    opacity 360ms ease;
}

.is-working .node::after,
.node-orbit::after {
  inset: 4px;
  opacity: 0.35;
}

.is-working .node::before,
.node-orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--hue-c);
  animation: orbit var(--t-orbit) linear infinite;
}

.is-pending .node {
  box-shadow: 0 0 0 1.5px rgb(133 133 138 / 0.35) inset;
}

.is-pending .node::after {
  opacity: 0;
}

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

/* ── Stage: the app window ───────────────────────────────────────────── */

.window {
  position: relative;
  border-radius: 12px;
  background: var(--shell);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 50px 140px -30px rgb(0 0 0 / 0.95),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  transform-origin: 50% 0;
}

.window svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The titlebar: the way back and forward, the sidebar toggle, the run's
   title and project, then its state while it works, the Agents toggle (the
   mark, pressed while the panel shows) and the side panel toggle. */
.titlebar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.lights {
  display: inline-flex;
  gap: 8px;
  margin-right: 10px;
}

.lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.lights i:nth-child(1) {
  background: #ff5f57;
}
.lights i:nth-child(2) {
  background: #febc2e;
}
.lights i:nth-child(3) {
  background: #28c840;
}

.tb-icons {
  display: inline-flex;
  gap: 14px;
  margin-right: 24px;
}

.tb-icons .dim {
  opacity: 0.4;
}

.tb-run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tb-title {
  color: var(--text);
  font-size: 13px;
}

.tb-where {
  color: var(--faint);
}

.tb-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
}

.tb-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tb-state i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
}

.window.is-done .tb-state {
  display: none;
}

.tb-agents {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 6px;
  background: var(--selected);
  color: var(--text);
}

/* The rail, the sidebar and the run's card. The card (the room and the
   Agents panel) is the canvas colour with a hairline and a radius, set into
   the shell. */
.win-body {
  display: grid;
  grid-template-columns: 52px 236px minmax(0, 1fr) 280px;
  grid-template-rows: minmax(0, 1fr);
  height: 660px;
  padding: 0 6px 6px 0;
}

.w-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  color: var(--muted);
}

.w-rail svg {
  box-sizing: content-box;
  padding: 8px;
  border-radius: 8px;
}

.w-rail .is-on {
  background: var(--selected);
  color: var(--text);
}

.w-rail-foot {
  margin-top: auto;
  margin-bottom: 4px;
}

.w-side,
.w-canvas,
.w-panel {
  background: var(--background);
  border-block: 1px solid var(--border);
}

.w-side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 10px 0 0 10px;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
}

.s-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 8px;
  font-weight: 600;
  font-size: 14px;
}

.s-brand > svg {
  margin-left: auto;
  color: var(--muted);
}

.s-brand-mark {
  width: 17px;
  height: 17px;
}

.s-chev {
  color: var(--faint);
  font-weight: 400;
  font-size: 11px;
}

.s-row,
.s-run,
.s-roles li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 29px;
  padding: 0 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.s-row svg {
  color: var(--muted);
}

.s-label {
  margin-top: 14px;
  padding: 4px 8px;
  color: var(--faint);
}

.s-run {
  padding-left: 32px;
  color: var(--text);
}

.s-run-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-current,
.s-current ~ .s-sub,
.s-current ~ .s-roles {
  background: var(--selected);
}

.s-current {
  border-radius: 8px 8px 0 0;
}

.s-live {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--accent);
}

.window.is-done .s-live {
  display: none;
}

.s-sub {
  padding: 0 8px 2px 32px;
  color: var(--faint);
  font-size: 12px;
}

.s-roles {
  margin: 0 0 4px;
  padding: 0 0 6px;
  list-style: none;
  border-radius: 0 0 8px 8px;
}

.s-roles li {
  min-height: 26px;
  padding-left: 32px;
  color: var(--muted);
  font-size: 12.5px;
}

/* A role the run has not reached is not drawn (DESIGN.md: unstarted roles
   are not drawn). */
.s-roles li.is-pending {
  display: none;
}

.s-roles .p-av {
  width: 14px;
  height: 14px;
}

.s-roles em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}

.s-roles li.is-working {
  color: var(--text);
}

/* ── The run room ──────────────────────────────────────────────────────── */

.w-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.c-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(100%, 640px);
  min-height: 0;
  margin: 0 auto;
  padding: 24px 20px 12px;
  overflow: hidden;
  justify-content: flex-end;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Your message: an accent-washed bubble on the right. */
.c-user {
  align-self: flex-end;
  max-width: 78%;
  padding: 9px 15px;
  border-radius: 18px;
  background: var(--user-bubble);
  color: var(--text);
}

.c-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-msg p {
  margin: 0;
}

/* A role's head: its mark in hue (alive while it works), its name, the
   agent's logo before the model, the time. */
.c-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 12.5px;
}

.c-head b {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}

.c-mark {
  width: 22px;
  height: 22px;
  color: var(--hue);
}

.c-agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.logo-claude {
  color: var(--claude);
}

.c-msg code,
.c-pr span span {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.c-msg code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--code-bg);
}

/* "Took …": a finished turn's tools, folded, over a hairline. */
.c-fold {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--faint);
  font-size: 12.5px;
}

.c-fold span {
  margin-left: 2px;
}

.ok {
  color: var(--success);
}

/* A handoff, a consult and a question: cards on the canvas, hairline-framed. */
.c-handoff,
.c-consult,
.c-ask,
.c-pr {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.02);
}

.c-handoff,
.c-consult {
  padding: 9px 12px;
  color: var(--muted);
  font-size: 12.5px;
}

.c-handoff-to,
.c-consult-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 500;
}

.c-consult-mark {
  width: 14px;
  height: 14px;
  color: var(--ask);
}

.c-consult-a {
  display: block;
  margin-top: 4px;
  color: var(--text);
}

.c-ask {
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.c-ask-head {
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 500;
}

.c-ask-q {
  margin: 2px 0 10px;
  font-size: 14px;
  font-weight: 500;
}

.c-ask-opts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  transition:
    background-color 300ms ease,
    color 300ms ease;
}

.opt i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--hover);
  font-style: normal;
  font-size: 11px;
  color: var(--faint);
}

.opt.is-picked {
  background: var(--accent-wash);
  color: var(--text);
}

.c-pr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.c-pr > svg {
  color: var(--success);
}

.c-pr-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.c-pr-text b {
  font-weight: 500;
}

.c-pr-text span {
  color: var(--faint);
}

.c-pr-open {
  margin-left: auto;
  white-space: nowrap;
  color: var(--accent-ink);
  font-size: 12.5px;
}

/* "Working · 1m 8s": the live mark while the run works. */
.c-working {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.c-working-mark {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.c-working span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
}

.window.is-done .c-working {
  display: none;
}

/* The composer: the tray of where the run works, then the field and its
   footer (+, model, effort; to whom, the usage ring, send). */
.c-dock {
  position: relative;
  width: min(100% - 32px, 600px);
  margin: 0 auto 14px;
}

.c-tray {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 14px;
  padding: 5px 12px 4px;
  border-radius: 12px 12px 0 0;
  background: var(--raised);
  color: var(--muted);
  font-size: 12px;
}

.c-where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.c-where svg {
  width: 13px;
  height: 13px;
}

.c-branch {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}

.c-composer {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--input);
}

.c-input {
  padding: 13px 16px 6px;
  color: var(--faint);
}

.c-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.c-plus {
  width: 26px;
  text-align: center;
  font-size: 17px;
  color: var(--muted);
}

.c-chip,
.c-to {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.c-chip i,
.c-to i {
  font-style: normal;
  font-size: 10px;
  color: var(--faint);
}

.c-effort svg {
  width: 14px;
  height: 14px;
}

.c-to {
  margin-left: auto;
  color: var(--faint);
}

.c-to .node {
  width: 9px;
  height: 9px;
}

.c-to b,
.c-to {
  font-weight: 400;
}

.c-ring {
  margin: 0 6px;
}

.c-ring circle {
  stroke: var(--muted);
}

.c-ring path {
  fill: var(--muted);
  stroke: none;
}

.c-send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 45%, var(--background));
  color: #000;
  font-weight: 600;
}

/* The usage popover, opened from the ring: what this run cost, its tokens
   and time, and each role's share. */
.c-usage {
  position: absolute;
  right: 24px;
  bottom: calc(100% + 8px);
  z-index: 3;
  display: none;
  width: 270px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass);
  box-shadow:
    0 0 0 1px var(--border),
    var(--shadow-float);
  font-size: 12.5px;
}

.window.is-costs .c-usage,
.note-crop .c-usage {
  display: block;
}

.note-crop .c-usage {
  position: static;
  width: auto;
  box-shadow: none;
  background: none;
  padding: 0;
}

.u-head {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
}

.u-head b {
  font-weight: 600;
}

.u-sub {
  margin: 2px 0 10px;
  color: var(--faint);
}

.u-roles {
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.u-roles li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.u-roles b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.u-mark {
  width: 14px;
  height: 14px;
  color: var(--hue);
}

/* ── Agents panel: Active · N, then Done · N ──────────────────────────── */

.w-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}

.w-canvas {
  border-right: 0;
}

.p-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 8px;
  font-size: 14px;
}

.p-head b {
  font-weight: 600;
}

.p-x {
  color: var(--muted);
  font-size: 16px;
}

.p-group-head {
  padding: 2px 8px 4px;
  color: var(--faint);
  font-size: 12.5px;
}

.p-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.p-list li b {
  font-weight: 400;
}

.p-list li span:not(.p-av) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--faint);
  font-size: 12px;
}

.p-list time {
  margin-left: auto;
  color: var(--faint);
  font-size: 12px;
}

.p-av {
  width: 18px;
  height: 18px;
  color: var(--hue);
}

/* Active lists the role working now; Done every other role reached. */
.p-active li:not(.is-working),
.p-done li.is-working,
.p-done li.is-pending {
  display: none;
}

.p-none {
  display: none;
  margin: 0;
  padding: 0 8px;
  color: var(--faint);
  font-size: 12.5px;
}

.window.is-done .p-none {
  display: block;
}

@media (max-width: 1200px) {
  .win-body {
    grid-template-columns: 52px 220px minmax(0, 1fr);
  }

  .w-panel {
    display: none;
  }

  .w-canvas {
    border-right: 1px solid var(--border);
    border-radius: 0 10px 10px 0;
  }
}

@media (max-width: 960px) {
  .win-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 6px 6px;
  }

  .w-side,
  .w-rail,
  .tb-icons {
    display: none;
  }

  .w-canvas {
    border: 1px solid var(--border);
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  .win-body {
    height: 560px;
  }

  .tb-where,
  .tb-state,
  .c-effort,
  .c-branch,
  .c-head time {
    display: none;
  }

  .c-column {
    padding: 8px 12px 10px;
  }

  .c-dock {
    width: calc(100% - 16px);
  }

  .c-usage {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark .m-arm-l,
  .mark .m-arm-r,
  .mark .m-loop-l,
  .mark .m-loop-r,
  .mark .m-eyes,
  .is-working .node::before,
  .node-orbit::before {
    animation: none !important;
  }
}