/* Square-cornered, flat, tool-like UI. No border-radius anywhere. */
:root {
  --bg: #e9eef3;
  --bg2: #dbe3ea;
  --panel: #f7f9fb;
  --panel-2: #eef2f6;
  --line: #b9c4cf;
  --ink: #17212b;
  --ink-soft: #5b6b7b;
  --accent: #ff8a3d;
  --accent-ink: #1a1206;
  --sky: linear-gradient(180deg, #5db4f5 0%, #9fd8fb 55%, #e6f5ff 100%);
  --shadow: 0 6px 22px rgba(20, 40, 60, 0.18);
  --top: 52px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e151d;
    --bg2: #121c27;
    --panel: #17212c;
    --panel-2: #1d2936;
    --line: #2e3d4d;
    --ink: #e8f0f7;
    --ink-soft: #93a6b8;
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  }
}
* { box-sizing: border-box; border-radius: 0 !important; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- top bar */
#topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--top); padding-top: env(safe-area-inset-top); z-index: 5;
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
#topbar h1 { margin: 0 10px 0 0; font-size: 16px; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
#topbar .spacer { flex: 1; }
#actions { display: contents; }
#menu { display: none; }
#scrim { position: fixed; inset: var(--top) 0 0 0; z-index: 14; background: rgba(5, 15, 25, 0.55); }
button {
  padding: 6px 12px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--line); background: var(--panel-2);
}
button:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
input[type="search"], input[type="text"] {
  height: 32px; padding: 0 10px; border: 1px solid var(--line); background: var(--panel-2); width: min(300px, 32vw);
}
#newfolder { display: flex; gap: 6px; }
#newfolder input { width: 150px; }

/* ---- layout: folders always on the left */
#layout { position: fixed; inset: var(--top) 0 0 0; display: flex; }
#sidebar {
  width: 230px; flex: none; padding: 10px 0; overflow: auto;
  border-right: 1px solid var(--line); background: var(--panel);
}
.tree-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 12px; border: 0; border-left: 3px solid transparent; background: none; font-size: 14px;
}
.tree-item:hover { background: var(--panel-2); color: var(--ink); border-color: transparent; border-left-color: var(--accent); }
.tree-item.active { background: var(--panel-2); border-left-color: var(--accent); font-weight: 600; color: var(--ink); }
.tree-item .ico { color: var(--accent); width: 12px; }
.side-head { margin: 16px 12px 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.tree-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item .cnt, .cnt { font-size: 12px; opacity: 0.65; font-variant-numeric: tabular-nums; }

#content { flex: 1; overflow: auto; padding: 16px 22px 90px; background: linear-gradient(160deg, var(--bg), var(--bg2)); }
#crumbs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 14px; flex-wrap: wrap; }
.crumb { background: none; border: 0; padding: 3px 6px; color: var(--ink-soft); }
button.crumb:hover { background: var(--panel-2); color: var(--ink); }
.crumb.current { color: var(--ink); font-weight: 600; }
.sep { color: var(--ink-soft); opacity: 0.6; }

#tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.tagbar-inline { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.tagchip { padding: 3px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.tagchip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.group-toggle { margin-left: auto; font-size: 13px; }

.section { margin-bottom: 22px; }
.section-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; color: var(--ink);
}
.section-head:hover { background: none; color: var(--ink); }
button.section-head:hover h2 { color: var(--accent); }
.section-head h2 { margin: 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.section-head .caret { width: 12px; color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
#empty { color: var(--ink-soft); padding: 30px 6px; }

.card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  border: 1px solid var(--line); background: var(--panel); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.card-main { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 8px; border: 0; background: none; color: inherit; }
.card-main:hover { background: none; color: inherit; }
.card .name { font-weight: 600; padding: 4px 2px 0; }
.card .sub { font-size: 12px; color: var(--ink-soft); padding: 0 2px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px 2px; }
.tag { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--panel-2); }
.thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky); }
.thumb canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s; }
.thumb canvas.ready { opacity: 1; }
.badge, .fmt {
  position: absolute; top: 6px; font-size: 10px; padding: 2px 6px; letter-spacing: .5px; font-weight: 600;
}
.badge { right: 6px; background: var(--accent); color: var(--accent-ink); display: none; }
.card.is-open .badge { display: block; }
.fmt { left: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; }
/* being generated: a flat label top-right plus a thin sweeping bar along the bottom of the thumbnail */
.busy {
  position: absolute; top: 6px; right: 6px; padding: 2px 6px; font-size: 10px; font-weight: 600; letter-spacing: .6px;
  background: rgba(10, 14, 18, 0.72); color: var(--accent); border: 1px solid rgba(255, 138, 61, 0.55);
}
.card.is-open .busy { top: 28px; }
.thumb .busy-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: rgba(255, 138, 61, 0.15); }
.thumb .busy-bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent); animation: busy-sweep 1.4s ease-in-out infinite;
}
@keyframes busy-sweep { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .thumb .busy-bar::before { animation: none; left: 0; width: 100%; opacity: .6; } }
.tag-edit {
  position: absolute; top: 14px; right: 14px; padding: 2px 8px; font-size: 11px; opacity: 0; transition: opacity .12s;
}
.card:hover .tag-edit, .tag-edit:focus-visible { opacity: 1; }
.card.is-open .tag-edit { top: 38px; }
.card.folder { align-items: center; justify-content: center; min-height: 170px; padding: 10px; }
.card.folder .folder-ico { font-size: 44px; line-height: 1; color: var(--accent); }

/* ---- floating windows */
#windows { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  min-width: 420px; min-height: 320px; resize: both; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(5, 20, 40, 0.45);
}
.win.active { border-color: var(--accent); box-shadow: 0 20px 60px rgba(5, 20, 40, 0.55), 0 0 0 1px var(--accent); }
.win.maximized { inset: 56px 6px 6px 6px !important; width: auto !important; height: auto !important; resize: none; }
.win-bar {
  display: flex; align-items: center; gap: 10px; flex: none; padding: 0 0 0 14px; height: 38px;
  cursor: grab; user-select: none; touch-action: none; background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.win-bar:active { cursor: grabbing; }
.win.active .win-bar { border-bottom-color: var(--accent); }
.win-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-fmt { font-size: 10px; padding: 1px 6px; border: 1px solid var(--line); color: var(--ink-soft); letter-spacing: .5px; }
.win-actions { margin-left: auto; display: flex; height: 100%; }
.win-actions button { width: 44px; height: 100%; border: 0; border-left: 1px solid var(--line); background: transparent; font-size: 13px; }
.win-actions button:hover { background: var(--accent); color: var(--accent-ink); }
.win-actions button[data-act="close"]:hover { background: #e5484d; color: #fff; }
.win-body { position: relative; flex: 1; min-height: 0; background: var(--sky); }
.win-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
.win-body canvas:active { cursor: grabbing; }
.win-tools {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 12px; font-size: 13px; background: var(--panel); border-top: 1px solid var(--line); opacity: 0.96;
}
.win-tools button { padding: 4px 10px; font-size: 12px; }
.win-tools .sel { display: inline-flex; align-items: center; gap: 6px; }
select { height: 26px; padding: 0 6px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; }
.win-stat { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.win-tokens { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 12px; }
.card .tokens { padding: 0 2px; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.win-tools button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* segmented view toggles: one rectangle, divided, click to flip */
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--panel-2); }
.seg button { border: 0; background: none; padding: 4px 12px; font-size: 12px; color: var(--ink-soft); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--panel); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* parts sidebar (VS Code-style outline) */
.win-side {
  position: absolute; top: 0; left: 0; bottom: 46px; width: 270px; z-index: 2; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .16s ease;
}
.win-body.side-open .win-side { transform: none; }
.side-title { flex: none; padding: 9px 12px 7px 44px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.side-toggle {
  position: absolute; top: 8px; left: 8px; z-index: 3; width: 28px; height: 26px; padding: 0; display: grid; place-items: center;
  background: var(--panel); color: var(--ink-soft); border: 1px solid var(--line);
}
.side-toggle:hover, .side-toggle[aria-expanded="true"] { background: var(--panel-2); color: var(--accent); border-color: var(--line); }
.ptree { flex: 1; overflow: auto; padding-bottom: 8px; font-size: 13px; user-select: none; }
.prow {
  --indent: 12px; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 calc(6px + var(--depth) * var(--indent));
  color: var(--ink-soft); cursor: pointer; white-space: nowrap; outline: none; position: relative;
}
.prow:hover { background: var(--panel-2); color: var(--ink); }
.prow:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.prow.selected { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--ink); }
.pchev { flex: none; width: 16px; height: 16px; display: grid; place-items: center; color: var(--ink-soft); transition: transform .1s; }
.prow[aria-expanded="true"] > .pchev { transform: rotate(90deg); }
.picon { flex: none; width: 10px; height: 10px; margin-right: 3px; }
.picon.model { background: var(--accent); }
.picon.group { border: 1.5px solid var(--accent); }
.picon.leaf { width: 6px; height: 6px; margin: 0 5px 0 2px; background: var(--ink-soft); border-radius: 50%; opacity: .7; }
.plbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pmeta { flex: none; font-size: 11px; opacity: .55; font-variant-numeric: tabular-nums; }
/* indent guides */
.pkids { position: relative; }
.pkids::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6;
  left: calc(14px + var(--gdepth, 0) * 12px);
}
.ptree:hover .pkids::before { opacity: 1; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle input {
  appearance: none; width: 30px; height: 16px; background: var(--line); position: relative; cursor: pointer; margin: 0; transition: background .15s;
}
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--panel); transition: transform .15s; }
.toggle input:checked { background: var(--accent); }
.toggle input:checked::after { transform: translateX(14px); background: #fff; }

/* ---- dock + toast + dialog */
#dock {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; gap: 4px; padding: 4px; max-width: calc(100vw - 24px); overflow-x: auto;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.chip { padding: 6px 14px; white-space: nowrap; }
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.min { opacity: 0.7; font-style: italic; }

#toast {
  position: fixed; top: calc(var(--top) + 12px); left: 50%; transform: translate(-50%, -10px); z-index: 60; opacity: 0; pointer-events: none;
  padding: 9px 18px; background: var(--ink); color: var(--bg); font-size: 13px; transition: .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

dialog { border: 1px solid var(--accent); background: var(--panel); color: var(--ink); padding: 18px 20px; width: min(460px, 92vw); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(5, 15, 25, 0.55); }
dialog h2 { margin: 0 0 4px; font-size: 16px; }
dialog .hint { margin: 0 0 10px; font-size: 12px; color: var(--ink-soft); }
dialog input { width: 100%; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- touch devices: no hover, so show what hover reveals; bigger hit areas */
@media (hover: none) {
  .tag-edit { opacity: 1; }
  .card:hover { transform: none; box-shadow: none; }
}
@media (pointer: coarse) {
  button { min-height: 40px; }
  .tag-edit { min-height: 28px; }
  .win-tools button, .seg button, .o-btn, .tagchip, .lane-view { min-height: 34px; }
  .win-actions button { width: 52px; }
  .prow { height: 32px; }
  select { height: 34px; }
  .toggle input { width: 38px; height: 20px; }
  .toggle input::after { width: 16px; height: 16px; }
  .toggle input:checked::after { transform: translateX(18px); }
}

/* ---- phones: folders become a slide-in drawer, actions get their own scrolling row, cards use the full width */
@media (max-width: 700px) {
  :root { --top: calc(96px + env(safe-area-inset-top)); }
  #topbar { flex-wrap: wrap; align-content: flex-start; gap: 6px 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 0; }
  #topbar h1, #topbar .spacer { display: none; }
  #menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; font-size: 18px; }
  #topbar input[type="search"] { flex: 1; min-width: 0; width: auto; height: 40px; font-size: 16px; }
  #actions {
    display: flex; flex: 0 0 100%; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none;
  }
  #actions::-webkit-scrollbar { display: none; }
  #actions > * { flex: none; white-space: nowrap; }
  #newfolder input { width: 130px; height: 40px; font-size: 16px; }
  input[type="text"], input[type="search"], textarea, select { font-size: 16px; } /* stops iOS zooming into fields */

  #sidebar {
    position: fixed; top: var(--top); bottom: 0; left: 0; z-index: 15; width: min(300px, 86vw);
    transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.side-open #sidebar { transform: none; }
  .tree-item { padding: 11px 12px; font-size: 14px; }
  #content { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card.folder { min-height: 120px; }
  .card .name { overflow-wrap: anywhere; }
  .group-toggle { margin-left: 0; }

  .win, .win.maximized { inset: env(safe-area-inset-top) 0 calc(54px + env(safe-area-inset-bottom)) 0 !important; width: auto !important; height: auto !important; resize: none; min-width: 0; min-height: 0; }
  .win-bar { cursor: default; padding-left: 10px; }
  .win-fmt { display: none; }
  .win-tools { gap: 6px 10px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .win-stat { margin-left: 0; flex-basis: 100%; }
  .win-side { width: min(270px, 80%); bottom: 0; }
  #dock { bottom: calc(8px + env(safe-area-inset-bottom)); }
  dialog { width: 94vw; }
  .b-row { grid-template-columns: 1fr; }
  .lane-log, .o-pre { max-height: 36vh; }
}
@media (max-width: 360px) { .cards { grid-template-columns: 1fr; } }

/* ---- builds panel (right drawer) */
#builds {
  position: fixed; top: var(--top); right: 0; bottom: 0; width: min(460px, 100vw); z-index: 30;
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow);
}
body.builds-open #layout { right: min(460px, 100vw); }
.b-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.b-head h2 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; flex: 1; }
.b-close { padding: 4px 9px; }
.b-form { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.b-form label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.b-form textarea, .b-form input[type="text"] { width: 100%; font: inherit; font-size: 13px; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line); background: var(--panel); }
.b-form textarea { resize: vertical; min-height: 90px; }
.b-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.b-actions { display: flex; justify-content: flex-end; }
.b-runs { max-height: 42vh; overflow: auto; border-bottom: 1px solid var(--line); flex: none; }
.b-empty { margin: 12px; color: var(--ink-soft); font-size: 13px; }
.b-runrow {
  display: grid; grid-template-columns: 10px 1fr; grid-template-rows: auto auto; column-gap: 8px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 7px 12px;
}
.b-runrow .dot { grid-row: 1 / 3; align-self: center; }
.b-runrow .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-runrow .tm { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.b-runrow.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.b-runrow:hover .tm { color: inherit; }
.dot { width: 9px; height: 9px; border-radius: 50% !important; background: var(--ink-soft); display: inline-block; flex: none; }
.s-running .dot, .s-thinking .dot, .s-writing .dot, .s-checking .dot { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.s-done .dot { background: #4bbf73; }
.s-failed .dot { background: #e5484d; }
.s-waiting .dot { background: #6aa6e8; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }
.b-run { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.b-run-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.b-run-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-run-meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.b-open-final { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.pill { padding: 1px 7px; border: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.pill.s-running { border-color: var(--accent); color: var(--accent); }
.pill.s-done { border-color: #4bbf73; color: #4bbf73; }
.pill.s-failed { border-color: #e5484d; color: #e5484d; }
.b-err { flex-basis: 100%; color: #e5484d; }
.b-lanes { flex: 1; overflow: auto; }
.lane { position: relative; border-bottom: 1px solid var(--line); }
.lane-top {
  display: grid; grid-template-columns: 10px auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 64px 2px 12px;
}
.lane-top:hover { background: var(--panel-2); color: inherit; }
.lane-top .lbl { font-weight: 600; font-size: 13px; }
.lane-top .role { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); border: 1px solid var(--line); padding: 0 5px; }
.lane-top .st { font-size: 12px; color: var(--ink-soft); }
.lane-top .tk { grid-column: 2 / 5; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lane-view { position: absolute; top: 8px; right: 10px; padding: 3px 10px; font-size: 12px; }
.lane-note { padding: 0 12px 4px 30px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.lane-note:empty { display: none; }
.lane-tick {
  margin: 0 12px 8px 30px; font: 11px/1.4 ui-monospace, Consolas, monospace; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.lane-tick[hidden] { display: none; }
.k-reasoning { color: var(--ink-soft); opacity: .8; }
.k-content { color: var(--ink); }
.lane-log {
  margin: 0 12px 10px 12px; max-height: 42vh; overflow: auto; padding: 8px; background: var(--bg); border: 1px solid var(--line);
  font: 11px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lane-log .k-reasoning { font-style: italic; }

.lane-top .role.low { border-color: #6aa6e8; color: #6aa6e8; }

/* ---- orchestration panel (right drawer; sits left of the Builds panel when both are open) */
#orch {
  position: fixed; top: var(--top); right: 0; bottom: 0; width: min(420px, 100vw); z-index: 29;
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow);
}
body.builds-open #orch { right: min(460px, 100vw); }
body.orch-open #layout { right: min(420px, 100vw); }
body.orch-open.builds-open #layout { right: min(880px, 100vw); }
#orch-toggle[aria-expanded="true"], #builds-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.o-scroll { flex: 1; overflow: auto; padding: 10px 12px 30px; }
.o-model { font-size: 12px; display: grid; gap: 2px; }
.o-soft { color: var(--ink-soft); font-size: 12px; }
.o-ctx { margin: 8px 0 12px; font-size: 12px; color: var(--ink-soft); padding: 6px 8px; border: 1px dashed var(--line); }
.o-flow { display: grid; gap: 14px; }
.o-stage { position: relative; border: 1px solid var(--line); background: var(--panel-2); }
.o-stage + .o-stage::before { content: ""; position: absolute; left: 21px; top: -15px; height: 14px; border-left: 2px solid var(--line); }
.o-stage.s-optional, .o-stage.s-skipped { border-style: dashed; background: transparent; }
.o-stage.s-skipped { opacity: .6; }
.o-stage.s-thinking { border-color: var(--accent); }
.o-stage.s-done { border-left: 3px solid #4bbf73; }
.o-stage.s-failed { border-left: 3px solid #e5484d; }
.o-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px;
}
.o-top:hover { background: var(--panel); color: inherit; }
.o-num { width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--panel); border: 1px solid var(--line); }
.o-title { font-weight: 600; font-size: 13px; }
.o-agent { font-size: 12px; color: var(--ink-soft); }
.o-eff, .o-opt { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 0 5px; border: 1px solid var(--line); color: var(--ink-soft); }
.o-eff.e-high, .o-eff.e-max { border-color: var(--accent); color: var(--accent); }
.o-eff.e-low { border-color: #6aa6e8; color: #6aa6e8; }
.o-opt { border-style: dashed; }
.o-st { margin-left: auto; font-size: 11px; color: var(--ink-soft); }
.o-stage:not(.s-thinking):not(.s-done):not(.s-failed):not(.s-waiting) .o-top .dot { display: none; }
.o-live { padding: 0 10px 8px 38px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.o-live[hidden] { display: none; }
.o-body { padding: 0 10px 10px; border-top: 1px solid var(--line); }
.o-body[hidden] { display: none; }
.o-body dl { margin: 8px 0; display: grid; grid-template-columns: 62px 1fr; gap: 4px 8px; font-size: 12px; }
.o-body dt { color: var(--ink-soft); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; padding-top: 2px; }
.o-body dd { margin: 0; }
.o-btns, .o-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.o-files .o-soft { flex-basis: 100%; }
.o-btn { padding: 3px 9px; font-size: 12px; }
.o-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.o-view:empty { display: none; }
.o-view { margin-top: 8px; }
.o-pre {
  margin: 0; max-height: 50vh; overflow: auto; padding: 8px; background: var(--bg); border: 1px solid var(--line);
  font: 11px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.o-img { display: block; max-width: 100%; border: 1px solid var(--line); }
.o-foot { margin: 4px 0 0; }
@media (max-width: 700px) { body.builds-open #layout, body.orch-open #layout { right: 0; } body.builds-open #orch { right: 0; } }

/* ---- collapsible sidebar */
.tree-item .caret, .side-head .caret { display: inline-block; width: 14px; flex: none; text-align: center; color: var(--ink-soft); font-size: 11px; }
.tree-item .caret:not(.none):hover { color: var(--accent); }
.side-head { display: flex; align-items: center; gap: 4px; width: calc(100% - 12px); margin: 16px 6px 6px; padding: 4px 6px; border: 0; background: none; text-align: left; cursor: pointer; }
.side-head:hover { color: var(--ink); }

/* ---- scrollbars: slim, theme-coloured, accent on hover */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-soft) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-soft) 40%, transparent); border: 3px solid transparent; background-clip: content-box; min-height: 36px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }
#actions::-webkit-scrollbar { display: none; }

/* ---- build batches */
.b-batch { border-bottom: 1px solid var(--line); }
.b-batch-head { display: grid; grid-template-columns: 14px 1fr auto; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 3px; width: 100%; text-align: left; border: 0; background: var(--panel-2); padding: 8px 12px; }
.b-batch-head .caret { grid-row: 1 / 4; align-self: center; color: var(--ink-soft); font-size: 11px; }
.b-batch-head .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-batch-head .ct { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.b-batch-head .tm { grid-column: 2 / 4; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar { grid-column: 2 / 4; height: 6px; background: color-mix(in srgb, var(--ink-soft) 22%, transparent); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .6s ease; }
.bar.done > i { background: #4bbf73; }
.bar.failed > i { background: #e5484d; }
.b-batch-body { border-top: 1px solid var(--line); }
.b-batch-body .b-runrow { grid-template-columns: 10px 1fr auto; padding-left: 22px; }
.b-batch-body .b-runrow .bar { grid-column: 2 / 4; height: 4px; margin-top: 3px; }
.b-runrow .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 1px 5px; border: 1px solid var(--line); color: var(--ink-soft); align-self: center; }
.b-batch-foot { display: flex; gap: 6px; padding: 6px 12px 8px 22px; font-size: 12px; color: var(--ink-soft); align-items: center; }
.b-batch-foot button { padding: 3px 9px; font-size: 12px; }
.b-form select { width: 100%; font: inherit; font-size: 13px; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line); background: var(--panel); }

/* ---- thinking panel (right drawer; sits left of the Orchestration and Builds panels when they are open) */
body.builds-open { --rb: min(460px, 100vw); }
body.orch-open { --ro: min(420px, 100vw); }
#think {
  position: fixed; top: var(--top); right: calc(var(--rb, 0px) + var(--ro, 0px)); bottom: 0; width: min(440px, 100vw); z-index: 28;
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow);
}
#think[hidden] { display: none; }
body.think-open #layout, body.think-open.orch-open #layout, body.think-open.builds-open #layout, body.think-open.orch-open.builds-open #layout {
  right: calc(var(--rb, 0px) + var(--ro, 0px) + min(440px, 100vw));
}
#think-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.t-scroll-wrap { flex: 1; overflow: auto; padding: 10px 12px 30px; }
.t-ctx { margin: 0 0 12px; font-size: 12px; color: var(--ink-soft); padding: 6px 8px; border: 1px dashed var(--line); }
.t-scroll { display: grid; gap: 12px; }
.t-soft { color: var(--ink-soft); font-size: 12px; margin: 4px 0; }
.t-agent { border: 1px solid var(--line); background: var(--panel-2); }
.t-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.t-name { font-weight: 600; font-size: 13px; }
.t-role, .t-eff { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 0 5px; border: 1px solid var(--line); color: var(--ink-soft); }
.t-eff.e-high { border-color: var(--accent); color: var(--accent); }
.t-eff.e-low { border-color: #6aa6e8; color: #6aa6e8; }
.t-round { border-top: 1px solid var(--line); }
.t-round:first-of-type { border-top: 0; }
.t-round.cut { border-left: 3px solid #e5484d; }
.t-rtop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 10px; font-size: 12px; }
.t-rtop:hover { background: var(--panel); color: inherit; }
.t-rn { font-weight: 600; }
.t-cut { color: #e5484d; font-size: 11px; }
.t-chg { color: var(--accent); font-size: 11px; }
.t-caret { margin-left: auto; color: var(--ink-soft); }
.t-rbody { padding: 0 10px 10px; font-size: 12px; }
.t-h { margin: 8px 0 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }
.t-h.warn { color: var(--accent); }
.t-list { margin: 0; padding-left: 18px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.t-list.warn { border-left: 2px solid var(--accent); padding-left: 20px; }
.t-notes, .t-raw {
  margin: 0; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line);
  font: 11px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.t-raw { max-height: 50vh; overflow: auto; margin-top: 6px; }
.t-more { margin-top: 8px; padding: 3px 9px; font-size: 12px; }
@media (max-width: 700px) {
  #think, body.builds-open #think, body.orch-open #think { right: 0; }
  body.think-open #layout, body.think-open.orch-open #layout, body.think-open.builds-open #layout, body.think-open.orch-open.builds-open #layout { right: 0; }
}

/* Thinking shortcut on a model card: sits under the Category button */
.tag-edit.think-btn { top: 42px; }
.card.is-open .tag-edit.think-btn { top: 66px; }
.t-pipe { margin-left: auto; padding: 3px 9px; font-size: 12px; }
.b-head .t-pipe + .t-close { margin-left: 8px; }