/* The app replica: a 1152 × 720 logical Agent Forge window in dark mode, scaled into .win by site.js. */

.app {
  --bg: #0b0d0a; --p1: #141711; --p2: #1a1e17; --fill: #232820; --fill2: #2b3127;
  --ln: #272c23; --ln2: #363d31; --tx: #c9cfbf; --mu: #8f9784; --hd: #f4f6ee; --lime: #ccff4d;
  --ok: #7ee2a8; --warn: #f5b454;
  position: absolute; left: 0; top: 0; width: 1152px; height: 720px;
  display: flex; background: var(--bg); color: var(--tx);
  font: 400 13px/1.4 var(--f-body); letter-spacing: -0.003em;
  transform-origin: 0 0;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(var(--cs, 1));
  transition: transform 760ms var(--ease-out);
  user-select: none; -webkit-user-select: none; cursor: default;
}
.win.jump .app { transition: none; }
.app .ico { width: 16px; height: 16px; }
.app b { font-weight: 600; color: var(--hd); }
.app .mono { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0; }
.app code { font-size: 11.5px; background: var(--fill); color: var(--hd); padding: 1px 5px; border-radius: 4px; }
.app kbd { font-size: 10.5px; background: var(--fill); color: var(--mu); border: 1px solid var(--ln2); border-radius: 4px; padding: 0 5px; }

/* ------------------------------------------------ sidebar */
.a-side { width: 216px; flex: none; background: var(--p1); border-right: 1px solid var(--ln); display: flex; flex-direction: column; padding: 0 8px 10px; }
.a-lights { display: flex; gap: 8px; height: 36px; align-items: center; padding-left: 8px; }
.a-lights i { width: 12px; height: 12px; border-radius: 50%; background: #3a4035; }
.a-lights i:nth-child(1) { background: #ff5f57; } .a-lights i:nth-child(2) { background: #febc2e; } .a-lights i:nth-child(3) { background: #28c840; }
.a-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; }
.a-mark { width: 26px; height: 18px; color: var(--lime); }
.a-brand span { font: 700 16px/1 var(--f-display); color: var(--hd); }
.a-jump { display: flex; align-items: center; gap: 8px; height: 32px; margin: 4px 0 10px; padding: 0 8px; border: 1px solid var(--ln2); border-radius: 6px; color: var(--mu); background: var(--bg); }
.a-jump span { flex: 1; }
.a-row { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px; border-radius: 6px; color: var(--tx); white-space: nowrap; transition: background-color 200ms, color 200ms; }
.a-row .ico { color: var(--mu); }
.a-row.on { background: var(--fill); color: var(--hd); font-weight: 500; }
.a-row.on .ico { color: var(--hd); }
.a-nav .a-row { height: 36px; }
.a-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; font-size: 11.5px; font-weight: 500; color: var(--mu); }
.a-sec .ico { width: 14px; height: 14px; }
.a-agent .m.tile { width: 22px; height: 22px; }
.a-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 8px 0; border-top: 1px solid var(--ln); color: var(--mu); }

/* ------------------------------------------------ main + screens */
.a-main { position: relative; flex: 1; overflow: hidden; }
.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s 320ms; }
.scr.on { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
.scr:not(.scr-canvas) { padding: 26px 28px; }

.ph { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.ph .h3, .ah .h3 { font: 600 20px/1.2 var(--f-body); color: var(--hd); letter-spacing: -0.02em; }
.ph-count { margin-left: 8px; color: var(--mu); font-weight: 500; }
.ph p { margin-top: 4px; color: var(--mu); }
.a-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 6px; font-weight: 600; font-size: 12.5px; white-space: nowrap; border: 1px solid transparent; transition: background-color 200ms, color 200ms, border-color 200ms, transform 160ms; }
.a-btn .ico { width: 14px; height: 14px; }
.a-btn.lime { background: var(--lime); color: #0b0d0a; }
.a-btn.outline { border-color: var(--ln2); color: var(--hd); background: var(--p2); }
.a-btn.soft { background: var(--fill); color: var(--mu); }
.a-btn.ghost { color: var(--tx); }
.a-btn.press { transform: scale(0.95); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--fill); color: var(--mu); }
.chip .ico { width: 13px; height: 13px; }
.p-tile { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--ln2); background: var(--p2); color: var(--hd); }
.p-tile.lime { background: var(--lime); border-color: var(--lime); color: #0b0d0a; }
.sw { width: 28px; height: 16px; border-radius: 8px; background: var(--fill2); position: relative; flex: none; transition: background-color 200ms; }
.sw i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mu); transition: transform 200ms var(--ease-out), background-color 200ms; }
.sw.on { background: var(--lime); }
.sw.on i { transform: translateX(12px); background: #0b0d0a; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ln); }
.tabs span { padding: 0 0 10px; color: var(--mu); font-weight: 500; position: relative; }
.tabs span.on { color: var(--hd); }
.tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hd); border-radius: 2px; }

/* ------------------------------------------------ mascots */
.m { position: relative; display: block; flex: none; padding: 0; border: 0; background: transparent; }
.m > .m-sq { position: absolute; inset: 0; transform-origin: 50% 78%; }
.m .m-l { position: absolute; inset: 0; background-size: 300% 300%; background-repeat: no-repeat; }
.m .m-r { opacity: 0; }
.m.react .m-r { opacity: 1; } .m.react .m-d { opacity: 0; }
.m.tile { width: 34px; height: 34px; border-radius: 7px; background: var(--fill); overflow: hidden; }
.m.tile > .m-sq { inset: -8% -8% -16%; }
.m.free { width: 64px; height: 64px; }
button.m { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.m:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 16px; }

/* ------------------------------------------------ canvas */
.cv { position: absolute; inset: 0; background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, #272c23 1px, transparent 1.4px); background-size: 20px 20px; }
.cv-world { position: absolute; left: 0; top: 0; width: 1010px; height: 720px; transform-origin: 0 0; transform: translate(8px, 24px) scale(0.905); }
.cv-edges { position: absolute; inset: 0; overflow: visible; }
.edge { fill: none; stroke: #4a5243; stroke-width: 1.6; }
.edge-flow { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 6 10; stroke-dashoffset: 0; opacity: 0; transition: opacity 240ms; }
.edge-flow.live { opacity: 1; animation: flow 520ms linear infinite; }
.edge-flow.done { opacity: 0.55; stroke-dasharray: none; animation: none; }
.edge.dim, .edge-flow.dim { opacity: 0.25; }
@keyframes flow { to { stroke-dashoffset: -16; } }

.nd { position: absolute; background: var(--p2); border: 1px solid var(--ln2); border-radius: 9px; box-shadow: 0 8px 16px -8px rgb(0 0 0 / 0.6); transition: border-color 240ms, box-shadow 240ms, opacity 240ms; }
.nd .hd { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--p2); border: 1.5px solid #5d6655; top: 50%; margin-top: -4.5px; }
.nd .hd-in { left: -5px; } .nd .hd-out { right: -5px; }
.nd-start { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 20px 9px 9px 20px; }
.nd-start .ico { color: var(--lime); }
.nd-agent { padding: 10px 12px 10px; }
.nd-head { display: flex; align-items: center; gap: 10px; }
.nd-head .m.tile { width: 42px; height: 42px; }
.nd-t { display: flex; flex-direction: column; min-width: 0; }
.nd-t b { font-size: 14px; white-space: nowrap; }
.nd-t .mono { color: var(--mu); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ln); }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--mu); }
.st i { width: 7px; height: 7px; border-radius: 50%; background: #4f5748; transition: background-color 200ms; }
.st[data-st="run"] { color: var(--hd); }
.st[data-st="run"] i { background: var(--lime); box-shadow: 0 0 0 3px rgb(204 255 77 / 0.18); animation: blip 900ms ease-in-out infinite; }
.st[data-st="done"] i { background: var(--ok); }
.st[data-st="done"] { color: var(--tx); }
@keyframes blip { 50% { box-shadow: 0 0 0 5px rgb(204 255 77 / 0.05); } }
.nd-time { color: var(--mu); }
.nd.run { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 12px 24px -10px rgb(0 0 0 / 0.7); }
.nd.done { border-color: #4a5a3a; }
.nd.skip { opacity: 0.45; }
.nd-if { padding: 10px 0 6px; }
.nd-if .nd-row, .nd-end .nd-row { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; }
.nd-if .nd-row .ico { color: var(--mu); }
.if-row { position: relative; display: flex; align-items: center; height: 30px; padding: 0 12px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--mu); transition: background-color 240ms, color 240ms; }
.if-row code { font-size: 11px; }
.if-row .hd-port { right: -5px; left: auto; }
.if-row.hit { background: rgb(204 255 77 / 0.1); color: var(--hd); }
.if-row.hit .hd { background: var(--lime); border-color: #0b0d0a; }
.nd-end { padding: 10px 0 8px; }
.nd-end .nd-row .ico { color: var(--mu); }
.nd-sub { display: block; padding: 0 12px; font-size: 12px; color: var(--mu); }
.nd.done .hd-out, .nd.done .hd-in, .nd.run .hd-in { border-color: var(--lime); }

.fl { position: absolute; background: var(--p2); border: 1px solid var(--ln2); border-radius: 10px; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.7); }
.cv-title { left: 14px; top: 14px; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 8px 0 14px; }
.cv-title b { font-size: 14px; }
.cv-dock { right: 14px; top: 14px; display: flex; gap: 2px; padding: 5px; }
.cv-dock span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--tx); }
.cv-dock span:nth-child(2) { background: var(--fill); color: var(--hd); }
.cv-comp { left: 50%; bottom: 18px; transform: translateX(-50%); width: 520px; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 8px; transition: left 500ms var(--ease-out); }
.cv-input { flex: 1; min-width: 0; color: var(--hd); font-size: 13.5px; white-space: nowrap; overflow: hidden; display: flex; align-items: center; }
.cv-typed:empty::before { content: "Describe what to build…"; color: var(--mu); }
.caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--lime); margin-left: 1px; animation: caret 1s steps(1) infinite; vertical-align: -0.15em; }
@keyframes caret { 50% { opacity: 0; } }
.cv-comp .a-btn.lime { height: 32px; }
.cv-toast { left: 50%; bottom: 82px; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; opacity: 0; transition: opacity 300ms, transform 400ms var(--ease-out); color: var(--hd); font-weight: 500; }
.cv-toast .ico { color: var(--lime); }
.cv-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* panels (inspector, run log, stores, chat) */
.panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 344px; display: flex; flex-direction: column; background: var(--p2); border: 1px solid var(--ln2); border-radius: 10px; box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.75); transform: translateX(24px); opacity: 0; transition: transform 420ms var(--ease-out), opacity 260ms; }
.p-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--ln); }
.p-head > div { flex: 1; display: flex; flex-direction: column; }
.p-head b { font-size: 14.5px; }
.p-head span { color: var(--mu); font-size: 12px; }
.p-head .m.tile { width: 32px; height: 32px; }
.p-x { color: var(--mu); }
.p-body { flex: 1; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.p-foot { padding: 12px 14px 14px; border-top: 1px solid var(--ln); }
.scr-canvas[data-state="inspect"] .insp, .scr-canvas[data-state="run"] .runlog, .scr.on .store, .scr.on .chat { transform: none; opacity: 1; }
.scr-canvas[data-state="inspect"] .cv-comp, .scr-canvas[data-state="run"] .cv-comp { left: calc(50% - 178px); width: 460px; }
.scr-canvas[data-state="canvas"] .cv-world { transform: translate(36px, -12px) scale(1); }
.scr-canvas[data-state="inspect"] .cv-world, .scr-canvas[data-state="run"] .cv-world { transform: translate(4px, 70px) scale(0.85); }
.cv-world { transition: transform 760ms var(--ease-out); }
.scr-canvas[data-state="inspect"] .cv-dock, .scr-canvas[data-state="run"] .cv-dock { opacity: 0; }
.scr-canvas[data-state="inspect"] .nd:not([data-node="review"]) { opacity: 0.72; }
.scr-canvas[data-state="inspect"] .nd[data-node="review"] { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.insp .tabs { padding: 12px 14px 0; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span { font-weight: 500; color: var(--hd); font-size: 12.5px; }
.fld small { color: var(--mu); font-size: 11.5px; }
.sel { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 4px; border: 1px solid var(--ln2); border-radius: 6px; background: var(--bg); }
.sel .m.tile { width: 26px; height: 26px; }
.sel > span:not(.m) { flex: 1; color: var(--hd); }
.ta { white-space: pre-wrap; font-size: 11.5px; line-height: 1.55; padding: 10px; border: 1px solid var(--lime); box-shadow: 0 0 0 3px rgb(204 255 77 / 0.15); border-radius: 6px; background: var(--bg); color: var(--tx); }
.ta b { color: var(--hd); font-weight: 500; }
.tpl { color: #0b0d0a; background: var(--lime); border-radius: 3px; padding: 0 3px; }
.seg { display: flex; padding: 2px; border-radius: 7px; background: var(--fill); border: 1px solid var(--ln); }
.seg span { flex: 1; text-align: center; height: 26px; line-height: 26px; border-radius: 5px; color: var(--mu); font-weight: 500; }
.seg span.on { background: var(--p2); color: var(--hd); box-shadow: 0 1px 3px rgb(0 0 0 / 0.4), inset 0 0 0 1px var(--ln2); }
.schema { border: 1px solid var(--ln2); border-radius: 6px; overflow: hidden; }
.sc-row { display: flex; justify-content: space-between; align-items: center; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--ln); color: var(--hd); }
.sc-row em { font-style: normal; color: var(--mu); }
.sc-row:first-child { background: rgb(204 255 77 / 0.1); }
.sc-add { color: var(--mu); justify-content: flex-start; gap: 6px; border-bottom: 0; }
.sc-add .ico { width: 13px; height: 13px; }
.hint { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 6px; background: var(--fill); color: var(--tx); font-size: 12px; }
.hint .ico { color: var(--lime); }

.rl-msg { padding: 10px 12px; border-radius: 8px; background: var(--fill); }
.rl-msg .mono { color: var(--mu); font-size: 10.5px; }
.rl-msg p { color: var(--hd); margin-top: 2px; }
.rl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rl-step { display: flex; gap: 10px; padding: 8px 6px; border-radius: 7px; opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 420ms var(--ease-out); }
.rl-step.on { opacity: 1; transform: none; }
.rl-step .m.tile { width: 30px; height: 30px; }
.rl-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--fill); color: var(--mu); }
.rl-main { flex: 1; min-width: 0; }
.rl-top { display: flex; align-items: center; gap: 8px; }
.rl-top b { flex: 1; font-size: 13px; }
.rl-top .mono { color: var(--mu); font-size: 11px; }
.rl-ok { width: 15px; height: 15px; color: var(--ok); }
.rl-out { margin-top: 3px; color: var(--mu); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-out.mono { font-size: 11px; color: var(--tx); }
.rl-done { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--lime); background: rgb(204 255 77 / 0.08); color: var(--hd); font-weight: 500; opacity: 0; transition: opacity 400ms; }
.rl-done span:nth-child(2) { flex: 1; }
.rl-done .ico { color: var(--lime); }
.rl-done .mono { color: var(--mu); }
.rl-done.on { opacity: 1; }

/* ------------------------------------------------ agents grid */
.ac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ac { position: relative; padding: 18px 18px 16px; background: var(--p2); border: 1px solid var(--ln); border-radius: 9px; transition: border-color 200ms, transform 300ms var(--ease-out), box-shadow 300ms; }
.ac:hover { border-color: var(--ln2); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.8); }
.ac .m.free { width: 92px; height: 92px; margin: 0 0 6px -8px; }
.ac b { display: block; font-size: 15px; }
.ac p { margin-top: 3px; color: var(--mu); min-height: 36px; }
.ac-meta { display: block; margin-top: 12px; color: var(--mu); }

/* ------------------------------------------------ agent page */
.ah { display: flex; align-items: center; gap: 12px; margin: -10px 0 16px; }
.ah .m.free { width: 60px; height: 60px; }
.ah-t { flex: 1; }
.ah-t p { color: var(--mu); margin-top: 2px; }
.ah-tabs { margin-bottom: 18px; }
.fs { display: grid; grid-template-columns: 290px 1fr; gap: 14px; height: 520px; }
.fs-tree, .fs-file { border: 1px solid var(--ln); border-radius: 9px; background: var(--p2); overflow: hidden; }
.fs-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--ln); color: var(--hd); }
.fs-bar .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr { display: flex; align-items: center; gap: 8px; height: 32px; margin: 2px 6px; padding: 0 8px 0 calc(8px + var(--d) * 18px); border-radius: 6px; color: var(--tx); font-family: var(--f-mono); font-size: 12px; }
.tr .ico { width: 15px; height: 15px; color: var(--mu); }
.tr.on { background: var(--fill); color: var(--hd); }
.tr.on .ico { color: var(--lime); }
.fs-file pre { margin: 0; padding: 16px 18px; font-size: 12px; line-height: 1.7; color: var(--tx); white-space: pre-wrap; }
.md-h { color: var(--hd); font-weight: 500; }
.saved { display: inline-flex; align-items: center; gap: 5px; color: var(--mu); font-size: 12px; padding-right: 8px; }
.saved .ico { width: 13px; height: 13px; color: var(--ok); }

/* lists + stores */
.list-card { width: 470px; border: 1px solid var(--ln); border-radius: 9px; background: var(--p2); }
.list-card.ghosted { opacity: 0.5; }
.sk, .sv { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 14px; border-bottom: 1px solid var(--ln); }
.sk:last-child, .sv:last-child { border-bottom: 0; }
.sk > .ico { color: var(--mu); }
.sk > div, .sv > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sk span, .sv > div span { color: var(--mu); font-size: 12px; }
.sk b { font-size: 12.5px; }
.sk-new { max-height: 0; min-height: 0; overflow: hidden; opacity: 0; border-bottom-width: 0; transition: max-height 500ms var(--ease-out), opacity 300ms 120ms; }
.sk-new.on { max-height: 58px; min-height: 58px; opacity: 1; border-bottom-width: 1px; }
.store { width: 360px; }
.scr .store, .scr .chat { transition-delay: 80ms; }
.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--ln2); border-radius: 6px; background: var(--bg); color: var(--hd); }
.search .ico { color: var(--mu); }
.ph-text { color: var(--mu); }
.sr { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--ln); border-radius: 8px; }
.sr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-t .mono:not(b) { color: var(--tx); font-size: 11px; }
.sr-t b.mono { font-size: 12.5px; }
.sr-t p { margin-top: 6px; color: var(--tx); font-size: 12px; }
.sr .a-btn { height: 28px; }
.a-btn[data-state="busy"] .ico { animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sv .dot-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.dot-st i { width: 7px; height: 7px; border-radius: 50%; }
.dot-st.ok { color: var(--ok); } .dot-st.ok i { background: var(--ok); }
.dot-st.warn { color: var(--warn); } .dot-st.warn i { background: var(--warn); }
.dot-st.off { color: var(--mu); } .dot-st.off i { background: #4f5748; }
.sv .a-btn { height: 28px; }
.rg-label { font-size: 11.5px; font-weight: 500; color: var(--mu); margin-top: 2px; }
.rg { display: flex; align-items: center; gap: 10px; }
.rg > div { flex: 1; display: flex; flex-direction: column; }
.rg > div span { color: var(--mu); font-size: 12px; }
.rg .a-btn { height: 28px; padding: 0 9px; }

/* chat */
.chat { width: 400px; }
.chat-body { gap: 10px; }
.bub { max-width: 92%; padding: 10px 12px; border-radius: 10px; line-height: 1.5; }
.bub.me { align-self: flex-end; background: var(--fill2); color: var(--hd); border-bottom-right-radius: 4px; }
.bub.ai { color: var(--tx); padding-inline: 2px; min-height: 20px; }
.bub.ai p + p { margin-top: 6px; }
.bub.ai p:first-child { color: var(--hd); }
.tool { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--ln); border-radius: 7px; color: var(--tx); opacity: 0; transform: translateY(4px); transition: opacity 260ms, transform 360ms var(--ease-out); }
.tool.on { opacity: 1; transform: none; }
.tool > .ico { color: var(--mu); width: 14px; height: 14px; }
.tool .mono { flex: 1; font-size: 11px; }
.t-st .ico { width: 14px; height: 14px; color: var(--ok); opacity: 0; transition: opacity 200ms; }
.tool.ok .t-st .ico { opacity: 1; }
.chat-in { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 7px 0 12px; border: 1px solid var(--ln2); border-radius: 9px; background: var(--bg); }
.chat-in .p-tile { width: 30px; height: 30px; }

/* the change the Build step made, inside the run log */
.diff { margin-top: 8px; border: 1px solid var(--ln2); border-radius: 6px; overflow: hidden; font-size: 10.5px; line-height: 1.6; }
.df-file { padding: 4px 8px; background: var(--fill); color: var(--mu); border-bottom: 1px solid var(--ln); }
.df-l { padding: 0 8px; white-space: pre; color: var(--tx); }
.df-l.add { background: rgb(126 226 168 / 0.09); color: #c4f0d6; }
.df-l.del { background: rgb(255 120 110 / 0.09); color: #f3c2bd; }
.rl-step[data-step="build"] .rl-out { white-space: normal; }

/* file previews under a list, and the empty slot in the agents grid */
.peek-file { width: 470px; margin-top: 14px; border: 1px solid var(--ln); border-radius: 9px; background: var(--p2); overflow: hidden; }
.peek-file .fs-bar { height: 38px; }
.peek-file pre { margin: 0; padding: 12px 14px; font-size: 11.5px; line-height: 1.65; color: var(--tx); white-space: pre-wrap; }
.ac-new { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; background: transparent; border-style: dashed; border-color: var(--ln2); }
.ac-new > .ico { width: 28px; height: 28px; padding: 6px; border-radius: 7px; background: var(--fill); color: var(--hd); margin-bottom: 8px; }
.ac-new b { color: var(--hd); }

.sk.on { background: var(--fill); }
.later { display: none; }
.chat-body.more .later { display: block; }
.chat-body.more .tool.later { display: flex; }

/* On the canvas the sidebar folds to its 64px rail, as it does in the app. */
.a-side { transition: width 520ms var(--ease-out), padding 520ms var(--ease-out); overflow: hidden; }
.app.rail .a-side { width: 64px; padding-inline: 10px; }
.a-side .a-row > span:not(.m), .a-brand > span, .a-jump > span, .a-jump kbd, .a-sec, .a-foot > span { transition: opacity 200ms; }
.app.rail .a-side .a-row > span:not(.m), .app.rail .a-brand > span, .app.rail .a-jump > span, .app.rail .a-jump kbd, .app.rail .a-foot > span { opacity: 0; }
.app.rail .a-sec { opacity: 0; height: 12px; padding: 0; }
.app.rail .a-brand { padding: 0 6px; }
.app.rail .a-lights { padding-left: 2px; gap: 5px; }
.app.rail .a-lights i { width: 10px; height: 10px; }
.app.rail .a-jump { padding: 0 11px; }
.app.rail .a-row { padding: 0 11px; }
.app.rail .a-agent { padding: 0 7px; }
.app.rail .a-agent .m.tile { width: 30px; height: 30px; }
.app.rail .a-foot { padding-left: 12px; }