:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel2: #1c2230;
  --border: #2a313c;
  --fg: #d6deeb;
  --muted: #8b97a7;
  --accent: #5ec8f7;
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.brand { font-weight: 700; font-size: 15px; }
.brand span { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.controls select, .controls input {
  background: var(--panel2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
}
.controls input { min-width: 340px; }
.controls button {
  background: var(--accent);
  color: #06121b;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.controls button#rerun { background: var(--panel2); color: var(--fg); border: 1px solid var(--border); }
.controls button#reset-ds { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.controls button#reset-ds:hover { color: var(--fg); border-color: var(--accent); }
.controls button:disabled { opacity: .5; cursor: default; }

.backend-note {
  padding: 6px 16px;
  font-size: 12px;
  color: var(--amber);
  background: #1a1d12;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.backend-note:empty { display: none; }

main {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}

.pane { background: var(--bg); overflow-y: auto; padding: 12px 14px; }
.pane h2 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

/* tree */
.tree { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
.tree .node { cursor: default; white-space: nowrap; }
.tree .dir > .label { cursor: pointer; color: var(--accent); }
.tree .file > .label { color: var(--fg); }
.tree .children { margin-left: 14px; border-left: 1px dotted var(--border); padding-left: 8px; }
.tree .label.hit { background: #3a2d05; border-radius: 3px; padding: 0 3px; }
.tree .caret { display: inline-block; width: 12px; color: var(--muted); }

/* timeline */
.timeline-h2 { display: flex; align-items: center; gap: 10px; }
.agent-status {
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 2px 9px; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px;
}
.agent-status:empty { display: none; }
.agent-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.agent-status.running { color: var(--amber); background: #2a2410; }
.agent-status.running::before { animation: pulse 1s ease-in-out infinite; }
.agent-status.done { color: var(--green); background: #122017; }
.agent-status.error { color: var(--red); background: #2a1413; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.timeline { display: flex; flex-direction: column; gap: 8px; }
.card { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--panel); }
.card.msg { background: transparent; border-style: dashed; color: var(--fg); font-size: 12.5px; line-height: 1.55; }

/* markdown inside agent messages */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md-p { margin: 6px 0; }
.md-h { margin: 10px 0 5px; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.md-ul, .md-ol { margin: 6px 0; padding-left: 20px; }
.md-ul li, .md-ol li { margin: 2px 0; }
.md-ic { font-family: var(--mono); font-size: 11.5px; background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; color: var(--accent); }
.md-code { font-family: var(--mono); font-size: 11.5px; background: #0b0e13; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; overflow-x: auto; white-space: pre; }
.md-quote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--border); color: var(--muted); }
.md-table { border-collapse: collapse; margin: 8px 0; font-size: 12px; width: 100%; display: block; overflow-x: auto; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; }
.md-table th { background: var(--panel2); color: var(--fg); font-weight: 600; white-space: nowrap; }
.md-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.md a { color: var(--accent); }
.md strong { color: var(--fg); }
.card.call { border-left: 3px solid var(--accent); }
.card.result { border-left: 3px solid var(--green); }
.card.result.err { border-left-color: var(--red); }
.card.err { border-left: 3px solid var(--red); }
.card .head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.card .tool { font-family: var(--mono); font-weight: 600; }
.card .obs { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.card .body { font-size: 12.5px; }
.params { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: pre-wrap; word-break: break-all; }

.match { font-family: var(--mono); font-size: 12px; padding: 2px 0; }
.match .path { color: var(--accent); }
.match .line { color: var(--muted); }
.match .snip { color: var(--fg); }

.diff { font-family: var(--mono); font-size: 12px; white-space: pre; overflow-x: auto; margin: 0; padding: 6px 8px; background: #0b0e13; border-radius: 6px; }
.diff .add { color: var(--green); }
.diff .del { color: var(--red); }
.diff .hunk { color: var(--accent); }
.err-text { color: var(--red); font-size: 12.5px; }
.sugg { color: var(--amber); font-size: 12px; margin-top: 3px; }

/* observability */
.totals { font-family: var(--mono); font-size: 13px; margin-bottom: 10px; line-height: 1.6; }
.totals b { color: var(--accent); }
.obs-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.obs-table th, .obs-table td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.obs-table th:first-child, .obs-table td:first-child { text-align: left; }
.obs-table td.op { color: var(--accent); }
.hint { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.hint b { color: var(--amber); }

/* run history */
.hist-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--border);
}
.hist-head h3 {
  margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.hist-head h3 span { text-transform: none; letter-spacing: 0; color: var(--accent); font-weight: 400; margin-left: 6px; }
.hist-head button {
  background: var(--panel2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 10px; font-size: 11px; cursor: pointer;
}
.hist-head button:hover { color: var(--fg); border-color: var(--muted); }

/* history cards */
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-card {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 8px 10px;
}
.hist-card.flash { animation: row-flash 1.4s ease-out; }
.hist-card-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; font-family: var(--mono); margin-bottom: 5px;
}
.hist-no { color: var(--muted); font-weight: 700; }
.hist-backend {
  color: var(--accent); font-weight: 700;
  background: #0c2330; border: 1px solid var(--border);
  border-radius: 4px; padding: 0 6px;
}
.hist-mode {
  color: var(--amber); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 6px;
}
.hist-ds { color: var(--muted); }
.hist-time { color: var(--muted); margin-left: auto; }
.hist-task {
  font-size: 12px; color: var(--fg); line-height: 1.45;
  margin-bottom: 6px; padding: 4px 7px;
  background: #0b0e13; border-left: 2px solid var(--accent);
  border-radius: 4px; word-break: break-word;
}
.hist-metrics {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.hist-metrics b { color: var(--accent); }
.hist-steps { margin-top: 7px; }
.hist-steps summary {
  cursor: pointer; font-size: 11px; color: var(--muted);
  font-family: var(--mono); padding: 2px 0;
}
.hist-steps summary:hover { color: var(--fg); }
.hist-steps[open] summary { color: var(--fg); margin-bottom: 4px; }
.hist-steps .obs-table { margin-top: 2px; }
@keyframes row-flash {
  0% { background: #1d3b2a; }
  100% { background: transparent; }
}

/* ---- touch / narrow screens (iPad mini portrait+landscape, phones) ---- */
@media (max-width: 1100px) {
  body { height: auto; min-height: 100vh; }

  header { padding: 12px; gap: 12px; }
  .controls { width: 100%; gap: 12px; }
  .controls label { font-size: 13px; }
  .controls select,
  .controls input,
  .controls button {
    font-size: 16px;          /* >=16px stops iOS Safari from auto-zooming */
    padding: 10px 14px;
  }
  .controls input { min-width: 0; flex: 1 1 100%; }
  .controls button { flex: 1 1 auto; }

  .backend-note { font-size: 13px; padding: 8px 12px; }

  /* stack the three panes; put the agent timeline first */
  main {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .pane { overflow: visible; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .pane h2 { font-size: 13px; }
  .timeline-pane { order: 1; }
  .tree-pane { order: 2; }
  .obs-pane { order: 3; }

  /* larger, more legible text + roomier cards */
  .tree { font-size: 15px; line-height: 2; }
  .timeline { gap: 12px; }
  .card { padding: 12px 14px; }
  .card .head { font-size: 14px; }
  .card .obs { font-size: 12.5px; }
  .card .body { font-size: 15px; }
  .card.msg { font-size: 15px; }
  .md-h { font-size: 16px; }
  .md-ic, .md-code { font-size: 13px; }
  .params { font-size: 13px; }
  .match { font-size: 14px; padding: 3px 0; }
  .diff { font-size: 14px; padding: 8px 10px; }

  .totals { font-size: 15px; }
  .obs-table { font-size: 13.5px; }
  .obs-table th, .obs-table td { padding: 5px 7px; }
  .hint { font-size: 14px; }
}