:root {
  --bg: #0c0d0f;
  --panel: #131519;
  --panel-soft: #191c21;
  --border: rgba(255, 255, 255, .08);
  --text: #f3f0e9;
  --muted: #9c9da1;
  --accent: #c49a67;
  --accent-soft: rgba(196, 154, 103, .14);
  --ok: #74b78b;
  --warn: #d9b25f;
  --fail: #d4736a;
  --info: #7fa6d6;
  --idle: #6d7078;
  --r-l: 20px;
  --r-m: 14px;
  --r-s: 9px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(circle at 12% 0%, rgba(196, 154, 103, .08), transparent 35%), var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--sans);
}
button, input, select, textarea { font: inherit; color: inherit; }
h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
h2 { font-size: 19px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: rgba(12, 13, 15, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-portrait { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent); }
.brand-name { font-family: var(--serif); font-size: 22px; letter-spacing: .12em; color: var(--accent); }
.brand-sub { font-size: 12px; color: var(--muted); }
.tabs { display: flex; gap: 4px; margin-left: 16px; flex: 1; overflow-x: auto; }
.tab {
  background: none; border: 0; padding: 8px 14px; border-radius: 999px;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
a.tab { text-decoration: none; font-size: inherit; }
.tab:hover { color: var(--text); background: var(--panel-soft); }
.tab.active { color: var(--text); background: var(--accent-soft); }
.badge {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--accent); color: #1a1408; font-size: 12px; font-weight: 600;
}
.system-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); flex: none; }
.dot.ok, .dot.available, .dot.completed { background: var(--ok); }
.dot.warn, .dot.degraded, .dot.paused, .dot.proposed { background: var(--warn); }
.dot.fail, .dot.down, .dot.failed { background: var(--fail); }
.dot.busy, .dot.running { background: var(--info); box-shadow: 0 0 0 4px rgba(127, 166, 214, .18); }

main { padding: 20px 24px 40px; max-width: 1500px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 18px; margin-bottom: 18px;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

.btn {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: 7px 14px; cursor: pointer;
}
.btn:hover { border-color: rgba(255, 255, 255, .2); }
.btn.primary { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--fail); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

/* office layout */
.office-grid { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; align-items: start; }
.office-grid > *, .board > *, .stats > *, .staff-grid > * { min-width: 0; }
.chat-panel {
  position: sticky; top: 84px; display: flex; flex-direction: column;
  height: calc(100vh - 110px); min-height: 420px; margin-bottom: 0;
}
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.msg { max-width: 92%; padding: 10px 13px; border-radius: var(--r-m); white-space: pre-wrap; word-wrap: break-word; }
.msg.MASTER { align-self: flex-end; background: #252a31; border-bottom-right-radius: 4px; }
.msg.CLAIR { align-self: flex-start; background: var(--panel-soft); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg .meta { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.msg .task-link { display: inline-block; margin-top: 6px; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 13px; }
.msg.typing { color: var(--muted); font-style: italic; }
.chat-empty { color: var(--muted); text-align: center; margin: auto; padding: 20px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chips button {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; color: var(--muted); cursor: pointer;
}
.chips button:hover { color: var(--text); border-color: var(--accent); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea {
  flex: 1; resize: none; background: var(--panel-soft); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 10px 12px;
}
.chat-form textarea:focus, input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-m); padding: 12px 14px; }
.stat .v { font-family: var(--serif); font-size: 28px; }
.stat .k { font-size: 12px; color: var(--muted); }

.approvals { display: flex; flex-direction: column; gap: 8px; }
.approval {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--panel-soft); border-radius: var(--r-m); border-left: 3px solid var(--warn);
}
.approval .body { flex: 1; min-width: 0; cursor: pointer; }
.approval .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.approval .actions { display: flex; gap: 6px; flex: none; }

/* staff cards */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.card {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.card.paused { opacity: .7; }
.card-top { display: flex; gap: 10px; align-items: center; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--serif); font-size: 15px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(196, 154, 103, .3);
}
.card .name { font-weight: 600; }
.card .role { font-size: 13px; color: var(--muted); }
.card .spec { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.status-line { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.current { font-size: 13px; color: var(--info); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counts { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.card-actions { display: flex; gap: 6px; margin-top: auto; }

/* tasks board */
.tasks-toolbar { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.filter select { max-width: 340px; }
select, input, textarea {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-s); padding: 7px 10px;
}
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.column { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l); padding: 12px; min-height: 120px; }
.column h3 { font-size: 16px; display: flex; justify-content: space-between; margin: 2px 4px 10px; }
.column h3 .n { color: var(--muted); font-family: var(--sans); font-size: 13px; }
.tcard {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.tcard:hover { border-color: rgba(196, 154, 103, .45); }
.tcard .t { font-weight: 500; margin-bottom: 4px; word-break: break-word; }
.tcard .m { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.prio { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); }
.prio.high { color: var(--warn); border-color: rgba(217, 178, 95, .4); }
.prio.critical { color: var(--fail); border-color: rgba(212, 115, 106, .5); }
.prio.low { color: var(--idle); }
.st { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.empty { color: var(--muted); font-size: 13px; padding: 8px 4px; }

/* diagnostics */
.diag-group { margin-bottom: 18px; }
.diag-group h3 { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.diag-row {
  display: grid; grid-template-columns: 18px minmax(160px, 1fr) 2fr 80px; gap: 10px; align-items: center;
  padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.diag-row .detail { color: var(--muted); font-size: 13px; word-break: break-word; }
.diag-row .lat { text-align: right; color: var(--muted); font-size: 12px; }
.overall { display: flex; gap: 10px; align-items: center; font-size: 17px; margin: 6px 0 18px; }

/* audit */
.table-wrap { overflow-x: auto; }
table.audit { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit th, .audit td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.audit th { color: var(--muted); font-weight: 500; }
.audit td.details { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; word-break: break-word; }
.audit .link { color: var(--accent); cursor: pointer; }

/* dialogs */
dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.dialog-body label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.dialog-body label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.dialog-body input, .dialog-body textarea, .dialog-body select { color: var(--text); font-size: 15px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.form-error { color: var(--fail); font-size: 13px; min-height: 1em; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; }
.kv .k { color: var(--muted); }
.box { background: var(--panel-soft); border-radius: var(--r-m); padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.box.err { border-left: 3px solid var(--fail); }
.timeline { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.timeline li { padding: 5px 0 5px 16px; border-left: 2px solid var(--border); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline .when { color: var(--muted); }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 10px 16px; transition: transform .25s; z-index: 50; max-width: calc(100vw - 32px);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--fail); color: #f1c3be; }

@media (max-width: 1100px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .tabs { order: 3; margin-left: 0; flex-basis: 100%; }
  main { padding: 16px; }
  .office-grid { grid-template-columns: 1fr; }
  .chat-panel { position: static; height: 62vh; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat .v { font-size: 22px; }
  .staff-grid { grid-template-columns: 1fr; }
  .approval { flex-wrap: wrap; }
  .approval .body { flex-basis: 100%; }
  .board { grid-template-columns: 1fr; }
  .diag-row { grid-template-columns: 18px 1fr; }
  .diag-row .detail, .diag-row .lat { grid-column: 2; text-align: left; }
  .row { grid-template-columns: 1fr; }
}

/* core banner, registry */
.core-banner {
  margin: 12px 24px 0; padding: 10px 14px; border-radius: var(--r-m);
  border: 1px solid rgba(212, 115, 106, .5); background: rgba(212, 115, 106, .1); color: #f1c3be; font-size: 14px;
}
.registry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.reg { background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-m); padding: 14px; min-width: 0; }
.reg h3 { font-size: 16px; display: flex; justify-content: space-between; margin-bottom: 10px; }
.reg h3 .n { color: var(--muted); font-family: var(--sans); font-size: 13px; }
.reg-item { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; word-break: break-word; }
.reg-item .sub { color: var(--muted); font-size: 12px; }
.reg form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.reg form input, .reg form select { flex: 1 1 140px; min-width: 0; font-size: 14px; padding: 6px 9px; }
.auth-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.auth-box input { width: 230px; max-width: 100%; font-size: 13px; padding: 5px 8px; }
.auth-ok { color: var(--ok); }
code { font-family: ui-monospace, monospace; font-size: 12px; background: var(--panel-soft); padding: 1px 5px; border-radius: 5px; }
.spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--info); border-right-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .registry-grid { grid-template-columns: 1fr; }
  .core-banner { margin: 10px 16px 0; }
}

/* login */
body.locked .topbar, body.locked main, body.locked .core-banner { visibility: hidden; }
.login-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.login-screen[hidden] { display: none; }
.login-card {
  width: min(380px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.login-portrait { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent); margin-bottom: 6px; }
#login-form { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 14px; }
#login-form[hidden] { display: none; }
#login-form input { width: 100%; font-size: 16px; padding: 10px 12px; }
.login-setup { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: left; line-height: 1.6; }
.login-setup code { display: block; margin: 8px 0; padding: 8px; white-space: pre-wrap; word-break: break-all; }
.mode-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px;
  background: rgba(217, 178, 95, .16); color: var(--warn); border: 1px solid rgba(217, 178, 95, .4); white-space: nowrap;
}
.mode-badge[hidden] { display: none; }
.elapsed { color: var(--info); font-variant-numeric: tabular-nums; }

/* employee profile */
.card-top[data-emp] { cursor: pointer; }
.card-top[data-emp]:hover .name { color: var(--accent); }
.avatar.big { width: 56px; height: 56px; font-size: 20px; }
.hist { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-s); margin-bottom: 6px; cursor: pointer; }
.hist:hover { border-color: rgba(196, 154, 103, .45); }
.hist-top { display: flex; justify-content: space-between; gap: 8px; }
.hist .t { margin: 3px 0; }
.hist .preview { white-space: pre-wrap; }

/* agents (Claude Code / Codex) */
.badge.info { background: var(--info); color: #0b1420; }
.dot.queued, .dot.approved { background: var(--accent); }
.dot.cancelled, .dot.rejected { background: var(--idle); }
.bad { color: var(--fail); }
.link { color: var(--accent); cursor: pointer; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.agent-strip { display: flex; flex-direction: column; gap: 8px; }
.agent-mini { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--panel-soft); border-radius: var(--r-m); }
.agent-mini .name { font-weight: 600; }
.agent-mini .current { flex: 1 1 200px; min-width: 0; }
.agents-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.agent-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-bottom: 0; border-top: 3px solid var(--idle); }
.agent-card.idle { border-top-color: var(--ok); }
.agent-card.busy { border-top-color: var(--info); }
.agent-card.unavailable { border-top-color: var(--fail); }
.agent-dyn { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.agent-head { display: flex; align-items: center; gap: 12px; }
.agent-title { flex: 1; min-width: 0; }
.agent-title .name { font-family: var(--serif); font-size: 19px; }
.agent-card .kv { grid-template-columns: 110px minmax(0, 1fr); }
.agent-card .kv code { word-break: break-all; }
.state-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
.state-pill.busy { color: var(--info); border-color: rgba(127, 166, 214, .4); }
.state-pill.idle { color: var(--ok); border-color: rgba(116, 183, 139, .4); }
.state-pill.unavailable { color: var(--fail); border-color: rgba(212, 115, 106, .4); }
.agent-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: rgba(127, 166, 214, .08); border-radius: var(--r-s); }
.agent-current .current { flex: 1 1 200px; min-width: 0; }
.queue { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
.queue li { padding: 2px 0; }
.queue li .btn { margin-left: 6px; padding: 0 7px; }
.agent-form { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.agent-form textarea { resize: vertical; min-height: 64px; }
.agent-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-form-row .btn { margin-left: auto; }
.agents-work { display: grid; grid-template-columns: minmax(300px, 2fr) 3fr; gap: 18px; margin-top: 18px; align-items: start; }
.agents-work > * { min-width: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select { font-size: 13px; padding: 5px 8px; }
.job-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; }
.job { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel-soft); cursor: pointer; }
.job:hover { border-color: rgba(196, 154, 103, .45); }
.job.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.job-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.job .t { margin: 4px 0; word-break: break-word; }
.job-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.log-panel { display: flex; flex-direction: column; gap: 10px; }
.log-panel .panel-head { margin-bottom: 0; }
.log-state { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.log-title { word-break: break-word; }
.log-controls { display: flex; gap: 14px; flex-wrap: wrap; }
.log {
  background: #08090b; border: 1px solid var(--border); border-radius: var(--r-m); padding: 10px 12px;
  height: 520px; overflow-y: auto; font: 12.5px/1.5 ui-monospace, monospace;
}
.ll { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 1px 0; }
.ll .ts { color: var(--idle); }
.ll .tx { white-space: pre-wrap; word-break: break-word; }
.ll.s-system .tx { color: var(--accent); }
.ll.s-stderr .tx { color: #c9a27a; }
.ll.k-tool .tx { color: var(--info); }
.ll.k-tool-result .tx { color: var(--muted); }
.ll.k-reasoning .tx { color: var(--muted); font-style: italic; }
.ll.k-error .tx { color: var(--fail); }
.log.hide-reasoning .k-reasoning, .log.hide-stderr .s-stderr { display: none; }
.tcard.agent-job { border-left: 3px solid var(--info); }
/* development */
.dev-grid { display: grid; grid-template-columns: minmax(320px, 2fr) 3fr; gap: 18px; align-items: start; }
.dev-grid > * { min-width: 0; }
.dev-compose, .dev-task-panel { display: flex; flex-direction: column; gap: 12px; }
.dev-compose .panel-head, .dev-task-panel .panel-head { margin-bottom: 0; }
.dev-compose p { margin: 0; }
#dev-form { display: flex; flex-direction: column; gap: 10px; }
#dev-text { resize: vertical; min-height: 120px; width: 100%; }
.dev-agent-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--muted); }
.pick input:checked + span { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.pick input:focus-visible + span { outline: 1px solid var(--accent); }
.dev-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dev-form-row .btn { margin-left: auto; }
.dev-preview { word-break: break-word; }
.dev-preview code { word-break: break-all; }
.dev-agents { display: flex; flex-direction: column; gap: 8px; }
.dev-agent-error { flex-basis: 100%; }
.dev-reply { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--panel-soft); border: 1px solid var(--accent-soft); border-radius: var(--r-m); font-size: 14px; word-break: break-word; }
.dev-reply img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent); flex: none; }
.dev-task-title { font-family: var(--serif); font-size: 18px; word-break: break-word; margin-bottom: 8px; }
.dev-task-panel .kv { grid-template-columns: 110px minmax(0, 1fr); }
.dev-task-panel .kv code { word-break: break-all; }
.dev-task-panel details { margin-top: 8px; }
.dev-task-panel summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.dev-task-panel details .box { margin-top: 6px; }
#dev-outcome { display: flex; flex-direction: column; gap: 10px; }
#dev-outcome:empty { display: none; }
.dev-log-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.log.dev-log { height: 340px; }
.dev-history tbody tr[data-dev] { cursor: pointer; }
.dev-history tbody tr[data-dev]:hover td { background: var(--panel-soft); }
.dev-history tr.selected td { background: var(--accent-soft); }
.dev-history .sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.filters input { font-size: 13px; padding: 5px 8px; }

@media (max-width: 1100px) {
  .agents-work, .dev-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .dev-task-panel .kv { grid-template-columns: 1fr; }
  .log.dev-log { height: 50vh; }
  .agents-grid { grid-template-columns: 1fr; }
  .agent-card .kv { grid-template-columns: 1fr; }
  .log { height: 60vh; }
  .ll { grid-template-columns: 1fr; gap: 0; }
}

/* people (CLAIR People & Communications cards) */
.avatar.photo { object-fit: cover; padding: 0; background: var(--panel); }
.people-search { width: min(440px, 100%); margin: 4px 0 14px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.people-grid > * { min-width: 0; }
.person {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-m);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
}
.person:hover { border-color: var(--accent); }
.person.gone { opacity: .6; }
.person img, .person .no-photo { width: 100%; height: 260px; object-fit: cover; display: block; background: var(--panel); }
.person .no-photo { display: grid; place-items: center; font-family: var(--serif); font-size: 42px; color: var(--accent); }
.person .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.person .code { font-size: 11px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.person .name { font-family: var(--serif); font-size: 20px; }
.person .role { font-size: 13px; color: var(--muted); }
#people-warnings { margin-top: 12px; }
.person-photo { display: block; width: min(100%, 420px); max-height: 46vh; object-fit: contain; margin: 0 auto 12px;
  border-radius: var(--r-m); border: 1px solid var(--accent-soft); background: var(--panel); }
#person-dialog .kv { grid-template-columns: 170px minmax(0, 1fr); }
@media (max-width: 600px) {
  #person-dialog .kv { grid-template-columns: 1fr; }
  .person img, .person .no-photo { height: 320px; }
}