:root {
  --bg: #e9e8e4;
  --dot: #c9c7c0;
  --panel: #fbfaf8;
  --ink: #1d1c1a;
  --muted: #6d6b66;
  --line: #dedcd6;
  --field: #ffffff;
  --accent: #2f5bea;
  --ok: #138a4b;
  --bad: #c0281b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1b1d; --dot: #34343a; --panel: #232326; --ink: #ecebe8; --muted: #9b9a96;
    --line: #38383d; --field: #2c2c30; --accent: #7d9bff; --ok: #4cc584; --bad: #ff7468;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1b1d; --dot: #34343a; --panel: #232326; --ink: #ecebe8; --muted: #9b9a96;
  --line: #38383d; --field: #2c2c30; --accent: #7d9bff; --ok: #4cc584; --bad: #ff7468;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }

.app { display: grid; grid-template-columns: 1fr 340px; height: 100vh; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 55vh 45vh; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
}

/* --- canvas --------------------------------------------------------------------- */

.viewport {
  position: relative; overflow: hidden; touch-action: none; cursor: grab;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
}
.viewport.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv-zoom: 1; }

.lane { position: absolute; }
.lane-head {
  position: absolute; left: 0; bottom: 100%;
  width: calc(var(--w) / var(--inv-zoom));
  transform: scale(var(--inv-zoom)); transform-origin: 0 100%;
  display: flex; align-items: center; gap: 8px; padding: 0 0 8px;
  white-space: nowrap; font-size: 12px; color: var(--muted); cursor: move; user-select: none;
}
.lane-head .agent { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.lane-head .agent i { width: 8px; height: 8px; border-radius: 50%; background: var(--agent); }
.lane-head .title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lane-head .status { padding: 1px 7px; border-radius: 99px; background: var(--line); color: var(--ink); font-size: 11px; }
.lane-head .status[data-s="designing"] { background: var(--agent); color: #fff; }
.lane-head .status[data-s="done"] { background: var(--ok); color: #fff; }
.lane-head .debug { display: none; margin-left: auto; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
body.debug .lane-head .debug { display: block; }

.board-wrap { position: relative; width: 100%; height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.10); }
.board-wrap .artboard { margin: 0; }
.lane.done .board-wrap { box-shadow: 0 0 0 calc(3px * var(--inv-zoom)) var(--ok), 0 8px 30px rgba(0,0,0,.10); transition: box-shadow .4s; }
.overlay { position: absolute; inset: 0; pointer-events: none; }

/* typing caret and text selection, drawn inside text elements while editing */
.artboard .caret {
  display: inline-block; width: 0; height: 1em; margin-right: -2px; vertical-align: -0.12em;
  border-left: max(2px, calc(2px * var(--inv-zoom))) solid var(--agent);
  animation: blink 1s steps(1) infinite;
}
.artboard .text-sel { background: color-mix(in srgb, var(--agent) 35%, transparent); }
@keyframes blink { 50% { opacity: 0; } }

/* --- agent cursor ----------------------------------------------------------------- */

.agent-cursor { position: absolute; left: 0; top: 0; z-index: 3; transition: opacity .5s; will-change: transform; }
.agent-cursor.gone { opacity: 0; }
.agent-cursor .inner { transform: scale(var(--inv-zoom)); transform-origin: 0 0; position: relative; }
.agent-cursor .pointer { position: absolute; left: -2px; top: -2px; color: var(--agent); transition: transform .08s; transform-origin: 3px 3px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.agent-cursor .pointer svg { display: block; }
.agent-cursor .ibeam { display: none !important; }
.agent-cursor[data-shape="text"] .arrow { display: none; }
.agent-cursor[data-shape="text"] .ibeam { display: block !important; transform: translate(-8px, -9px); }
.agent-cursor.down .pointer { transform: scale(.82); }
.agent-cursor .label {
  position: absolute; left: 15px; top: 19px; display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px 10px 10px 10px; background: var(--agent); color: #fff;
  font: 600 12px/1.2 system-ui, -apple-system, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.agent-cursor .dots { display: none; gap: 2px; }
.agent-cursor .dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: dot 1.1s infinite ease-in-out; }
.agent-cursor .dots i:nth-child(2) { animation-delay: .15s; }
.agent-cursor .dots i:nth-child(3) { animation-delay: .3s; }
.agent-cursor.thinking .dots { display: inline-flex; }
@keyframes dot { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.agent-cursor.hesitant .label { animation: shake .45s ease-in-out 2; }
.agent-cursor.hesitant .label::after { content: "?"; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.agent-cursor .carry { position: absolute; left: 12px; top: -64px; }
.agent-cursor .carry img { display: block; width: 84px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35); outline: 2px solid var(--agent); transform: rotate(-4deg); object-fit: cover; }

.click-ripple { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; }
.click-ripple::after {
  content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--agent); transform: scale(calc(.2 * var(--inv-zoom))); opacity: .9;
  animation: ripple .45s ease-out forwards;
}
@keyframes ripple { to { transform: scale(calc(1.3 * var(--inv-zoom))); opacity: 0; } }

/* --- selection box ------------------------------------------------------------------ */

.selection { position: absolute; z-index: 2; outline: calc(1.5px * var(--inv-zoom)) solid var(--agent); transform-origin: center; }
.selection .h {
  position: absolute; width: calc(8px * var(--inv-zoom)); height: calc(8px * var(--inv-zoom));
  background: #fff; border: calc(1.5px * var(--inv-zoom)) solid var(--agent); transform: translate(-50%, -50%);
}
.selection .tl { left: 0; top: 0; } .selection .tr { left: 100%; top: 0; }
.selection .bl { left: 0; top: 100%; } .selection .br { left: 100%; top: 100%; }
.selection .dims {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0) scale(var(--inv-zoom)); transform-origin: 50% 0;
  margin-top: calc(8px * var(--inv-zoom)); padding: 1px 6px; border-radius: 4px; background: var(--agent); color: #fff;
  font: 600 11px/1.4 system-ui, -apple-system, sans-serif; white-space: nowrap;
}

.ghost {
  position: absolute; z-index: 1; transform-origin: center; border-radius: calc(2px * var(--inv-zoom));
  outline: calc(1.5px * var(--inv-zoom)) dashed var(--agent); background: color-mix(in srgb, var(--agent) 7%, transparent);
  animation: ghost 1.4s ease-in-out infinite;
}
@keyframes ghost { 50% { outline-color: color-mix(in srgb, var(--agent) 40%, transparent); } }

/* --- panel ---------------------------------------------------------------------------- */

.panel { overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 0 0 40px; }
.panel header { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 10px; }
.panel h1 { font-size: 15px; margin: 0; }
.panel h3 { font-size: 13px; margin: 10px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.section { border-top: 1px solid var(--line); }
.section > summary { padding: 10px 16px; font-weight: 600; cursor: pointer; list-style-position: inside; }
.section > .body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

button, select, input[type="number"] {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px;
}
button { cursor: pointer; }
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.link { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 600; align-self: flex-start; text-align: left; }
button.link:hover { color: var(--accent); }
button.icon { padding: 0 6px; line-height: 20px; }
input[type="number"] { width: 72px; padding: 3px 6px; }
input[type="range"] { accent-color: var(--accent); }

.runs { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.group { display: flex; flex-direction: column; gap: 2px; }
.run { display: flex; gap: 6px; align-items: center; padding-left: 4px; cursor: pointer; }
.run .muted { margin-left: auto; font-size: 11px; }
.tag { font-size: 10px; padding: 0 5px; border-radius: 4px; background: var(--line); }

.seg { display: flex; }
.seg button { border-radius: 0; flex: 1; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button + button { margin-left: -1px; }
.seg button.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.field { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.lanes { display: flex; flex-direction: column; gap: 10px; }
.lane-row { display: flex; flex-direction: column; gap: 3px; }
.lane-row .top { display: flex; gap: 6px; align-items: center; min-width: 0; }
.lane-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--agent); flex: none; }
.lane-row .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.lane-row .status { font-size: 11px; color: var(--muted); }
.lane-row .status[data-s="designing"] { color: var(--agent); font-weight: 600; }
.lane-row .status[data-s="done"] { color: var(--ok); }
.lane-row .scrub { position: relative; }
.lane-row .scrub input { width: 100%; margin: 0; }
.lane-row .marker { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--agent); pointer-events: none; border-radius: 1px; }
.lane-row .time { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }

.tune-group > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.tune { display: grid; grid-template-columns: 1fr 96px 64px; gap: 6px; align-items: center; font-size: 12px; padding: 1px 0; }
.tune input[type="number"] { width: 64px; }

.verify-out:empty { display: none; }
.vres { padding: 4px 0; word-break: break-all; }
.vres.ok b { color: var(--ok); }
.vres.bad b { color: var(--bad); }
.vres ul { margin: 4px 0 0; padding-left: 18px; color: var(--bad); font-size: 11px; }