:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #ebecf0;
  --surface-3: #dfe1e6;
  --text: #172b4d;
  --muted: #5e6c84;
  --border: #dfe1e6;
  --accent: #0c66e4;
  --accent-text: #ffffff;
  --danger: #c9372c;
  --high: #c9372c;
  --medium: #a27a00;
  --low: #1f845a;
  --preparing: #a5adba;
  --pending: #8590a2;
  --progress: #0c66e4;
  --blocked: #d9730d;
  --done: #22a06b;
  --shadow: 0 1px 2px rgba(9, 30, 66, 0.2);
  --radius: 8px;
  --tint: 7%;
  --chat-bg: #e2e8f0;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1d2125;
    --surface: #22272b;
    --surface-2: #161a1d;
    --surface-3: #2c333a;
    --text: #dee4ea;
    --muted: #9fadbc;
    --border: #38414a;
    --accent: #579dff;
    --accent-text: #1d2125;
    --danger: #f87168;
    --high: #f87168;
    --medium: #e2b203;
    --low: #4bce97;
    --preparing: #6b7682;
    --pending: #8c9bab;
    --progress: #579dff;
    --blocked: #f5a04a;
    --done: #4bce97;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tint: 12%;
    --chat-bg: #111820;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { height: 100dvh; overflow: hidden; }
body {
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { filter: brightness(0.96); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
button.icon { border: none; background: transparent; font-size: 16px; padding: 4px 8px; }
code { font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.spacer { flex: 1; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand h1 { font-size: 18px; margin: 0; }
.logo { color: var(--accent); font-size: 20px; }
.live { font-size: 10px; color: var(--pending); }
.live.on { color: var(--done); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.board-filters, .board-filters[hidden] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; }
#filtersBtn { display: none; }
.theme-field.block { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.theme-field select { width: min(220px, 55%); }
.icon-btn { padding: 6px 10px; font-size: 15px; line-height: 1; }
.me { color: var(--muted); display: flex; align-items: center; gap: 4px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg button { border: none; border-radius: 0; background: var(--surface); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.seg.types button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.seg.types button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.seg.types button.active .tcount { color: inherit; opacity: 0.85; }
.seg.types button.active::after { content: "✓"; font-size: 11px; }
.filter-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 20px;
  background: color-mix(in srgb, var(--medium) 16%, var(--surface)); border-bottom: 1px solid var(--border); font-size: 13px;
}
.filter-notice[hidden] { display: none; }
.filter-notice b { font-weight: 600; }
.filter-notice button { padding: 3px 10px; font-size: 12px; }
.notify-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 20px;
  background: color-mix(in srgb, var(--blocked) 16%, var(--surface)); border-bottom: 1px solid var(--border); font-size: 13px;
}
.notify-offer[hidden] { display: none; }
.notify-offer button { padding: 3px 10px; font-size: 12px; }
.notify-field { margin-top: 10px; }
#notifyHint { margin: 4px 0 0; }
.seg.types .tcount { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ticon { width: 14px; height: 14px; flex: 0 0 auto; display: inline-block; vertical-align: -2px; }
.card .ticon { width: 15px; height: 15px; }
.tlabel { font-size: 11px; color: var(--muted); }

/* ---------- Project filter (top bar) ---------- */
.proj-filter { position: relative; }
.proj-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; }
.proj-btn .dots { display: inline-flex; }
.proj-btn .dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px var(--surface); }
.proj-btn .dots .dot + .dot { margin-left: -3px; }
.proj-btn .pl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-btn .caret { color: var(--muted); font-size: 11px; }
.proj-btn.filtered { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.popover {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 340px; max-width: min(460px, calc(100vw - 32px));
  max-height: 70vh; overflow-y: auto; padding: 6px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(9, 30, 66, 0.25);
}
.popover[hidden] { display: none; }
.prow {
  --pc: var(--pending);
  width: 100%; display: grid; grid-template-columns: 18px 12px minmax(0, 1fr) 90px; grid-template-rows: auto auto; gap: 2px 8px; align-items: center;
  text-align: left; border: none; border-radius: 6px; background: transparent; padding: 6px 8px;
}
.prow:hover { background: var(--surface-2); filter: none; }
.prow .check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border); grid-row: 1 / 3; }
.prow.on .check { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface); }
.prow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.prow.all .dot { background: conic-gradient(#3b82f6 0 25%, #f97316 0 50%, #a855f7 0 75%, #14b8a6 0); }
.prow .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .bar { grid-column: 4; grid-row: 1; }
.prow .nums { grid-column: 3 / 5; grid-row: 2; }
.pop-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); margin-top: 4px; padding: 8px 4px 2px; }
.pop-foot button { white-space: nowrap; }
.nums { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.bar span { display: block; height: 100%; }
.bar .b-preparing { background: var(--preparing); }
.bar .b-pending { background: var(--pending); }
.bar .b-in_progress { background: var(--progress); }
.bar .b-blocked { background: var(--blocked); }
.bar .b-done { background: var(--done); }

/* ---------- Board ---------- */
.workspace { flex: 1; min-height: 0; display: flex; }
.board { flex: 1; min-width: 0; min-height: 0; padding: 16px 20px; overflow: auto; }

/* merged view: 3 columns */
.board.merged { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(240px, 1fr)); gap: 16px; }
.column {
  background: var(--surface-2); border-radius: var(--radius); padding: 10px;
  display: flex; flex-direction: column; min-height: 200px; min-width: 0;
}
.col-head { margin: 4px 6px 10px; }
.col-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.col-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
[data-status="preparing"] { --sc: var(--preparing); }
[data-status="pending"] { --sc: var(--pending); }
[data-status="in_progress"] { --sc: var(--progress); }
[data-status="blocked"] { --sc: var(--blocked); }
[data-status="done"] { --sc: var(--done); }
.count { background: var(--surface); border-radius: 10px; padding: 0 8px; font-weight: 600; color: var(--text); }
.col-head .bar { margin-top: 8px; height: 4px; }
.cards { flex: 1 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; border-radius: 6px; min-height: 40px; }
.board.merged .column { min-height: 0; }
.board.merged .cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.empty { color: var(--muted); text-align: center; padding: 14px 0; font-size: 13px; }

/* swimlane view */
.board.lanes { display: flex; flex-direction: column; gap: 14px; }
.lane-head-row, .lane-cells { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(240px, 1fr)); gap: 12px; }
.board.lanes > .lane, .board.lanes > .lane-head-row { flex-shrink: 0; min-width: calc(var(--cols, 5) * 252px - 12px); }
.lane-head-row { position: sticky; top: -16px; z-index: 2; background: var(--bg); padding: 4px 0; }
.lane-head-row .col-title { padding: 0 10px; }
.lane {
  --pc: var(--pending);
  border-radius: var(--radius); background: color-mix(in srgb, var(--pc) var(--tint), var(--surface-2));
  border-left: 5px solid var(--pc); padding: 10px 12px 12px;
}
.lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.lane-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.lane-head h3 { margin: 0; font-size: 15px; }
.lane-head .desc { color: var(--muted); font-size: 12px; }
.lane-head .bar { width: 140px; }
.lane-cell { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: 6px; padding: 6px; min-width: 0; }
.lane-cell .cell-label { display: none; }

/* ---------- Cards ---------- */
.card {
  --pc: var(--pending);
  background: color-mix(in srgb, var(--pc) var(--tint), var(--surface));
  border-radius: 6px; padding: 9px 12px 10px; box-shadow: var(--shadow);
  cursor: pointer; border-left: 4px solid var(--pc);
}
.card:hover { outline: 1px solid var(--pc); }
.card.dragging { opacity: 0.4; }
.card .title { font-weight: 500; margin: 3px 0 8px; word-break: break-word; }
.card .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.task-id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ptag {
  background: color-mix(in srgb, var(--pc) 20%, transparent); color: var(--text);
  border-radius: 4px; padding: 0 6px; font-weight: 600; max-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prio { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }
.prio.high { color: var(--high); } .prio.medium { color: var(--medium); } .prio.low { color: var(--low); }
.assignee::before { content: "@"; }

/* ---------- Dialogs ---------- */
dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
}
dialog::backdrop { background: rgba(9, 30, 66, 0.5); }
#taskForm, .pdlg { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.dlg-head { display: flex; align-items: center; gap: 8px; }
.dlg-head h2 { margin: 0; font-size: 18px; }
.dlg-head input { flex: 1; font-size: 18px; font-weight: 600; border-color: transparent; background: transparent; }
.dlg-head input:hover { border-color: var(--border); }
.dlg-head h2 { flex: 1; }

/* New task: Prompt (free text) vs Detailed (all fields) */
.mode-switch { align-self: flex-start; }
.mode-switch button { padding: 6px 14px; }
#taskForm.prompt-mode [data-detailed], #taskForm.prompt-mode .model-hint { display: none !important; }
#taskForm:not(.prompt-mode) [data-prompt] { display: none; }
#taskForm.prompt-mode .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#taskForm.prompt-mode #fDescription { min-height: 220px; }
#taskForm.editing .mode-switch { display: none; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fields label[hidden] { display: none; }
.fields label, label.block, .desc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.fields input, .fields select, label.block textarea, .desc-field textarea { color: var(--text); font-weight: 400; font-size: 14px; }
textarea { resize: vertical; width: 100%; }
.desc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.desc-tools { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.desc-tools select { width: auto; font-size: 12px; padding: 2px 6px; color: var(--text); font-weight: 400; }
.voice-btn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); }
.voice-btn .mic { display: block; }
.voice-btn.listening {
  background: #c9372c; border-color: #c9372c; color: #fff;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
.voice-btn.listening:hover { filter: none; }
@keyframes voice-pulse { 50% { filter: brightness(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .voice-btn.listening { animation: none; }
}
.voice-status { font-weight: 500; }
.voice-status.error { color: var(--danger); }
.meta { font-size: 12px; color: var(--muted); }
.dlg-actions { display: flex; gap: 8px; align-items: center; }

.activity { border-top: 1px solid var(--border); padding-top: 12px; }
.activity h3 { margin: 0 0 6px; font-size: 14px; }
.toggle { font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.toggle input { margin: 0; }

/* testing requirements */
.tests-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 0; }
.tests-row .review-hint { flex-basis: 100%; }
.tests-row legend { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 4px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* task images */
.images-row { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.images-row legend { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 4px; }
.image-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.image-actions .hint { margin: 0; font-weight: 400; }
.image-list { display: flex; flex-wrap: wrap; gap: 8px; }
.image-list:empty { display: none; }
.image-thumb {
  position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg); flex: 0 0 auto;
}
.image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-thumb a { display: block; width: 100%; height: 100%; }
.image-thumb .rm {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  border-radius: 999px; border: none; background: rgba(9, 30, 66, 0.72); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.image-thumb .rm:hover { background: #c9372c; }
.image-thumb .iname {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px;
  font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(9,30,66,.75));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.image-error { margin: 0; font-size: 12px; color: #c9372c; font-weight: 500; }
.card-images { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.card-images a {
  display: block; width: 72px; height: 72px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
}
.card-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbadge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface);
}
.tbadge.e2e { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.tbadge.img { background: #dfe1e6; color: #44546f; }

/* expandable cards */
.card-desc {
  white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; color: var(--text);
  margin: -2px 0 10px; padding: 8px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border);
  cursor: text; user-select: text;
}
.card-extra { cursor: default; margin-bottom: 10px; }
.card-extra .activity { padding-top: 8px; }
.card-extra .card-desc { margin: 0 0 10px; }
.card { cursor: pointer; }
.card .expand {
  border: 1px solid var(--border); background: var(--surface); border-radius: 4px;
  padding: 0 6px; font-size: 11px; line-height: 16px; color: var(--muted);
}
.card .expand:hover { color: var(--text); border-color: var(--pc); }
#expandAll.active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); }
#hideDoneBtn.active { background: color-mix(in srgb, var(--done) 16%, var(--surface)); border-color: var(--done); }
.col-hide {
  margin-left: auto; border: none; background: transparent; color: var(--muted);
  padding: 0 4px; font-size: 12px; line-height: 1;
}
.col-hide:hover { color: var(--text); filter: none; }

/* model / settings */
.mbadge { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.mbadge.light { color: var(--medium); }
.model-hint { margin: -4px 0 0; color: var(--medium); }
h3.sub { margin: 4px 0 0; font-size: 14px; }
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 2px 4px; }
.settings-table td { padding: 3px 4px; }
.settings-table input[type="text"], .settings-table select { width: 100%; }
.settings-table td.c { text-align: center; width: 48px; }
.settings-table td.x { width: 36px; }

/* how to use */
#helpDialog { overflow: hidden; }
#helpDialog .pdlg { max-height: calc(100dvh - 48px); overflow: hidden; }
#helpDialog .help-steps { overflow: auto; min-height: 0; }
.help-steps ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 14px; }
.help-steps li { padding-left: 2px; }
.help-steps ul { margin: 6px 0 0; padding-left: 1.15em; font-weight: 400; }

/* connect dialog */
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#cPrompt { font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--surface-2); white-space: pre; overflow: auto; }
#cCopy.copied { background: var(--done); border-color: var(--done); }

/* projects dialog */
input[type="color"] { width: 38px; height: 34px; padding: 2px; cursor: pointer; flex: 0 0 auto; }
.new-project { display: flex; gap: 8px; flex-wrap: wrap; }
.new-project #npName { flex: 1 1 160px; }
.new-project #npDesc { flex: 2 1 200px; }
.project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.project-list li {
  --pc: var(--pending);
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 2fr) auto auto; gap: 8px; align-items: center;
  padding: 8px; border-radius: 8px; border-left: 4px solid var(--pc);
  background: color-mix(in srgb, var(--pc) var(--tint), var(--surface-2));
}
.project-list .nums { white-space: nowrap; }
.hint { font-size: 12px; color: var(--muted); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .topbar { padding-left: 16px; padding-right: 16px; }
  .board { padding: 12px; overflow: auto; flex: 1; }
  .board.merged { grid-template-columns: repeat(var(--cols, 5), minmax(min(82vw, 320px), 1fr)); gap: 12px; scroll-snap-type: x proximity; }
  .board.merged .column { scroll-snap-align: start; }
  .lane-head-row { display: grid; }
  .lane-cells { grid-template-columns: repeat(var(--cols, 5), minmax(min(82vw, 320px), 1fr)); gap: 12px; }
  .board.lanes > .lane, .board.lanes > .lane-head-row { min-width: calc(var(--cols, 5) * (min(82vw, 320px) + 12px) - 12px); }
  .lane-head-row { grid-template-columns: repeat(var(--cols, 5), minmax(min(82vw, 320px), 1fr)); }
  .lane-cell .cell-label { display: flex; margin: 2px 4px 6px; }
  .fields, .fields.three { grid-template-columns: 1fr 1fr; }
  .seg.types .tname { display: none; }
  .project-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .project-list li .pdel { grid-row: 1; grid-column: 3; }
  .project-list li .pdesc { grid-column: 1 / -1; }
  .project-list li .nums { grid-column: 1 / -1; }
}

/* reorder drop indicator (pending column) */
.card.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.card.drop-after { box-shadow: 0 3px 0 0 var(--accent); }

/* ---------- Live agent status ---------- */
:root { --ok: var(--done); --warn: var(--medium); --bad: var(--danger); --idle: var(--pending); }
.led { --c: var(--idle); flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
.live.working .led, .ls.working .led, .st.working .led { --c: var(--ok); animation: led-pulse 1.4s ease-out infinite; }
.live.quiet .led, .ls.quiet .led, .st.quiet .led { --c: var(--warn); animation: led-blink 1.6s ease-in-out infinite; }
.live.blocked .led, .ls.blocked .led, .st.blocked .led { --c: #e8710a; animation: led-blink 1.1s ease-in-out infinite; }
.live.stopped .led, .ls.stopped .led, .st.stopped .led { --c: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
.live.paused .led, .ls.paused .led, .st.paused .led { --c: var(--idle); border-radius: 2px; }
.live.idle .led, .st.idle .led { --c: var(--ok); opacity: 0.55; }
.live.offline .led, .live.none .led, .st.offline .led { --c: var(--idle); }
.st { display: inline-flex; flex: 0 0 auto; }
@keyframes led-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes led-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .led { animation: none !important; } }

.muted { color: var(--muted); }

/* in-progress column header summary */
.live-summary { display: inline-flex; gap: 8px; margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; }
.ls { display: inline-flex; align-items: center; gap: 4px; }
.ls .led { width: 8px; height: 8px; }

/* live strip on in-progress cards */
.card .live { display: grid; gap: 3px; margin: 0 0 8px; padding: 7px 9px; border-radius: 6px; font-size: 12px; color: var(--text);
  background: color-mix(in srgb, var(--c2, var(--idle)) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c2, var(--idle)) 35%, var(--border)); cursor: default; }
.card .live.working { --c2: var(--ok); } .card .live.quiet { --c2: var(--warn); } .card .live.blocked { --c2: #e8710a; } .card .live.stopped { --c2: var(--bad); } .card .live.paused { --c2: var(--idle); }
.live-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.live-label { font-weight: 700; }
.live.stopped .live-label { color: var(--bad); }
.live-who { margin-left: auto; color: var(--muted); font-weight: 500; }
.live-act { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 18px; }
.live-act::before { content: "▸ "; color: var(--muted); }
.live-meta, .live-hint { color: var(--muted); padding-left: 18px; font-variant-numeric: tabular-nums; }
.live-actions { padding-left: 18px; margin-top: 2px; }
.live-actions button { padding: 2px 8px; font-size: 11px; }

/* ---------- Updates (read-only log written by the agents) ---------- */
.updates-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.updates-head h3 { margin: 0; font-size: 14px; }
ol.updates { list-style: none; margin: 8px 0; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto;
  border-left: 2px solid var(--border); cursor: auto; }
ol.updates.hide-events li.event { display: none; }
.upd-head { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--muted); }
.upd-head b { color: var(--text); font-weight: 600; }
.upd-text { white-space: pre-wrap; word-break: break-word; user-select: text; cursor: text; }
.updates li.event { font-size: 11px; color: var(--muted); }
.updates li.blocked .upd-text { border-left: 3px solid #e8710a; padding-left: 8px; margin-left: -11px; background: color-mix(in srgb, #e8710a 10%, transparent); }
.updates li.blocked .upd-text::first-line { font-weight: 700; }
.updates li.empty { font-size: 12px; color: var(--muted); }

/* ---------- Sessions panel: live agent sessions, a column next to the board ---------- */
.sessions-btn { display: inline-flex; align-items: center; gap: 6px; }
.sessions-btn[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.badge { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 9px; background: var(--surface-3); color: var(--text); font-variant-numeric: tabular-nums; }
.badge[hidden] { display: none; }
.badge.alert { background: #e8710a; color: #fff; }
.sessions-panel {
  --pw: clamp(420px, var(--panel-w, 44vw), 70vw);
  position: relative; flex: 0 0 var(--pw); width: var(--pw); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border);
}
.sessions-panel[hidden] { display: none; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing-row { cursor: row-resize; user-select: none; }
.sp-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.sp-resize:hover, body.resizing .sp-resize { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sp-split { display: none; }
.sessions-panel.chatting .sp-split {
  display: block; position: relative; z-index: 4; flex: 0 0 8px; height: 8px; margin: -4px 0;
  cursor: row-resize; touch-action: none;
}
.sessions-panel.chatting .sp-split::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 3px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--border);
}
.sp-split:hover, body.resizing-row .sp-split { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sp-split:hover::after, body.resizing-row .sp-split::after { background: var(--accent); }
.sp-split:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-head { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.sp-head h2 { margin: 0; font-size: 15px; }
.sp-head button { padding: 4px 10px; }
.sp-head .count[hidden] { display: none; }
#chatBack { display: none; }
.session-menu summary { padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; list-style: none; white-space: nowrap; }
.session-menu summary::-webkit-details-marker { display: none; }
.session-menu summary::after { content: " ▾"; color: var(--muted); }
.session-menu[open] summary { border-color: var(--accent); background: var(--surface-2); }
.session-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.session-popover { position: absolute; top: calc(100% + 6px); right: 12px; left: 12px; z-index: 10; max-height: min(65dvh, 520px); padding: 12px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px #0003; }
.usage-strip { display: flex; flex-direction: column; gap: 14px; }
.usage-machine { min-width: 0; }

/* PCs and their loop controls */
.machine-strip { display: flex; flex-direction: column; gap: 12px; }
.machine-strip:empty { display: none; }
.mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.mrow.off { opacity: 0.75; }
.m-agents, .m-running { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.usages { flex: 1 1 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.us-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.urow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.urow > b { min-width: 7em; }
.uw { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); }
.uw.empty { color: var(--muted); background: transparent; padding-left: 0; }
.uw-label { font-weight: 600; color: var(--muted); font-size: 11px; }
.uw-bar { display: inline-block; width: 48px; height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.uw-bar i { display: block; height: 100%; background: var(--progress); }
.uw.mid .uw-bar i { background: var(--pending); }
.uw.high .uw-bar i { background: var(--blocked); }
.uw-pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.uw-reset { color: var(--muted); font-size: 11px; }
.uw.credits { background: transparent; padding-left: 0; }
.uw-use { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.uw-use input { margin: 0; accent-color: var(--accent); }
.loop-workspaces { display: grid; gap: 8px; width: 100%; min-width: 0; }
.loop-card { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); overflow-wrap: anywhere; }
.loop-status { font-size: 12px; overflow-wrap: anywhere; }
.loop-detail { display: block; color: var(--muted); margin-top: 3px; }
.loop-status .linkish { margin: 3px 8px 0 0; white-space: normal; text-align: left; }
.loop-summary, .loop-help { margin: 0; font-size: 12px; color: var(--muted); }
.loop-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.loop-actions button, [data-loop-toggle] { min-height: 32px; white-space: normal; }
.loop-error { color: var(--danger); margin: 3px 0 0; font-size: 12px; overflow-wrap: anywhere; }
[data-loop-control]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onboard { font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.onboard p { margin: 0; }
.cmd-box { display: flex; align-items: stretch; gap: 6px; margin: 4px 0; }
.cmd-box code { flex: 1; min-width: 0; padding: 6px 8px; font-size: 11.5px; word-break: break-all; white-space: pre-wrap; user-select: all; border: 1px solid var(--border); }
.cmd-box button { padding: 4px 10px; font-size: 12px; }

/* session list */
.session-list { flex: 1 1 auto; min-height: 60px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.sessions-panel.chatting .session-list { flex: 0 0 var(--list-h, 168px); min-height: 72px; border-bottom: 1px solid var(--border); }
.sessions-panel.chatting .session-list .srow { padding: 5px 8px; }
.sessions-panel.chatting .session-list .s-act { display: none; }
.srow {
  width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px 8px; align-items: center;
  text-align: left; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent;
}
.srow:hover { background: var(--surface-2); filter: none; }
.srow.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.srow.ended { opacity: 0.75; }
.srow .s-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .s-state { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.srow .s-state.blocked { color: #e8710a; }
.srow .s-state.working { color: var(--ok); }
.srow .s-state.stopped { color: var(--bad); }
.srow .s-state.quiet { color: var(--warn); }
.srow .s-meta { grid-column: 2; font-size: 11px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.srow .s-when { grid-column: 3; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.srow .s-act { grid-column: 2 / 4; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tag { color: var(--ok); margin-right: 4px; }
.session-list .empty { padding: 10px 6px; }
.linkish { border: none; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.ended-group summary { font-size: 12px; color: var(--muted); padding: 6px 8px; cursor: pointer; }
button.mini { padding: 2px 8px; font-size: 11px; }

/* chat */
.chat { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--chat-bg); }
.chat[hidden] { display: none; }
.chat-head { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--chat-bg) 75%, var(--surface)); }
.chat-title { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatSub { font-size: 11px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.ctx { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; max-width: 280px; }
.ctx[hidden] { display: none; }
.ctx-label { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctx-bar { flex: 1 1 72px; height: 6px; min-width: 72px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.ctx-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ctx.high .ctx-fill { background: var(--medium); }
.ctx.high .ctx-label { color: var(--medium); }
.ctx.full .ctx-fill { background: var(--danger); }
.ctx.full .ctx-label { color: var(--danger); }
.chat-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-tools button { padding: 3px 9px; font-size: 12px; }
.chat-tools select { padding: 3px 6px; font-size: 12px; max-width: 160px; }
.chat-tools [hidden] { display: none; }
.chat-tools button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; filter: none; }
.chat-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-close { margin: 0; padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-wrap: anywhere; }
.chat-close[hidden] { display: none; }
.chat-close.warn { color: var(--medium); }
.chat-close.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chat-notice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.chat-notice[hidden] { display: none; }
.chat-notice.error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.cn-body { flex: 1; min-width: 0; }
.transcript { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.transcript .empty { margin: auto; }
.msg { display: flex; flex-direction: column; max-width: 92%; }
.msg .who { font-size: 11px; color: var(--muted); margin: 0 4px 2px; }
.msg .bubble { padding: 10px 14px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; user-select: text; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.user .bubble { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.msg.agent { align-self: flex-start; }
.msg.agent .bubble { background: var(--surface); box-shadow: var(--shadow); }
.msg.agent .bubble.md { white-space: normal; }
.msg.agent.sub { margin-left: 18px; opacity: 0.85; font-size: 13px; }
.msg.streaming .bubble::after { content: "\258D"; animation: led-blink 1s steps(2) infinite; color: var(--muted); }
.msg.board { align-self: stretch; max-width: 100%; font-size: 12px; }
.msg.board summary { cursor: pointer; color: var(--muted); padding: 2px 4px; }
.msg.board .bubble { margin-top: 4px; background: var(--surface-2); font-size: 12px; max-height: 320px; overflow-y: auto; }
.md p { margin: 0 0 6px; }
.md p:last-child { margin-bottom: 0; }
.md p.h { font-weight: 700; }
.md ul { margin: 0 0 6px; padding-left: 20px; }
.md code { font-size: 12px; }
pre.code { margin: 0 0 6px; padding: 8px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); overflow-x: auto; font-size: 12px; white-space: pre; }
.tool { align-self: stretch; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tool.sub { margin-left: 18px; }
.tool summary { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; list-style: none; }
.tool summary::-webkit-details-marker { display: none; }
.t-ico { width: 16px; text-align: center; flex: 0 0 auto; }
.t-sum { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; }
.t-st { flex: 0 0 auto; color: var(--muted); font-weight: 700; }
.t-st.ok { color: var(--ok); }
.t-st.err { color: var(--bad); }
.tool pre, .ap-input pre { margin: 0; padding: 6px 8px; max-height: 260px; overflow: auto; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--border); background: var(--surface-2); }
.tool .t-out { background: var(--surface); }
.approval { align-self: stretch; border: 1px solid var(--border); border-left: 4px solid var(--idle); border-radius: 8px; padding: 8px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.approval.open { border-color: #e8710a; border-left-color: #e8710a; background: color-mix(in srgb, #e8710a 9%, var(--surface)); }
.ap-head { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ap-ico { color: #e8710a; }
.ap-sum { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; word-break: break-all; }
.ap-reason { font-size: 12px; color: var(--muted); }
.ap-input summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-actions .ap-msg { flex: 1 1 100%; font-size: 12px; padding: 4px 8px; }
.ap-actions [data-decide="deny"] { margin-left: auto; }
.ap-actions button { padding: 4px 10px; font-size: 12px; }
.ap-done { font-size: 12px; font-weight: 600; }
.ap-done.allow { color: var(--ok); }
.ap-done.deny { color: var(--bad); }
.turn-end { align-self: center; font-size: 11px; color: var(--muted); padding: 2px 10px; border-radius: 10px; background: var(--surface-2); text-align: center; max-width: 100%; }
.turn-end.err { color: var(--bad); }
.err-text { white-space: pre-wrap; text-align: left; margin-top: 2px; }
.sys { align-self: stretch; font-size: 12px; color: var(--muted); padding: 2px 6px; border-left: 2px solid var(--border); white-space: pre-wrap; }
.sys.warn { color: var(--medium); border-left-color: var(--medium); }
.sys.error { color: var(--danger); border-left-color: var(--danger); }
.plan { align-self: stretch; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.plan .completed { color: var(--muted); text-decoration: line-through; }
.composer { display: flex; flex-direction: column; flex-shrink: 0; gap: 8px; align-items: stretch; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--chat-bg) 75%, var(--surface)); }
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer-row textarea { flex: 1; resize: none; padding: 10px 12px; min-height: 64px; max-height: 160px; }
.composer-row > button { align-self: stretch; }
.composer-input { position: relative; flex: 1; display: flex; min-width: 0; }
.composer-input textarea { width: 100%; }
.composer.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.composer-tools > .mini { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); }
.chat-images { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-images[hidden] { display: none; }
.chat-images .image-thumb { width: 64px; height: 64px; }
/* the / menu: above the message, like the agents' own terminals */
.slash-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; font-size: 12px; }
.slash-menu[hidden] { display: none; }
.slash-item { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; align-items: baseline; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.slash-item.active, .slash-item:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.slash-item .sl-name { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.slash-item .sl-hint { grid-column: 2; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.slash-item .sl-tag { grid-column: 3; justify-self: end; font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.slash-item .sl-desc { grid-column: 1 / -1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-empty { padding: 6px 8px; color: var(--muted); }
.cmd-help { margin: 4px 0 8px; padding-left: 18px; max-height: 220px; overflow-y: auto; }
.cmd-help code { font-weight: 600; }
.msg-images { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-images a { display: block; width: 120px; height: 90px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.msg-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-images:last-child { margin-bottom: 0; }
.composer-tools select { width: auto; font-size: 12px; padding: 2px 6px; }
.composer-tools .voice-status { flex: 1 1 160px; margin: 0; }

/* card button: run a pending task in an agent session */
.card .expand.run { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.card .expand.ended-chat { font-size: 12px; line-height: 16px; padding: 0 4px; }

/* dialogs: new session, machines */
dialog.wide { width: min(1040px, calc(100vw - 32px)); }
.start-with { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 0; }
.start-with legend { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 4px; }
.start-with select { max-width: 100%; min-width: 0; flex: 1; }
.start-with .check { flex-wrap: wrap; }
.start-with textarea[hidden] { display: none; }
.form-msg { color: var(--danger); min-height: 1em; }
.me-field input { margin-top: 4px; font-size: 14px; color: var(--text); font-weight: 400; max-width: 280px; }
.lang-field select { max-width: 280px; width: 100%; }
.machine-list { display: flex; flex-direction: column; gap: 12px; }
.mcard { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mcard.off { opacity: 0.8; }
.mc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.wake-note { margin: 0; }
.wake-note.wake-err { color: var(--danger); }
.mc-name { font-weight: 700; font-size: 15px; border-color: transparent; background: transparent; padding: 2px 6px; max-width: 220px; }
.mc-name:hover { border-color: var(--border); }
.mc-agents { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.ag.ok { color: var(--ok); }
.ag.no { color: var(--muted); opacity: 0.7; }
.ag.meh { color: var(--medium); }
.ag small { color: var(--muted); }
.ws-scroll { overflow-x: auto; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ws-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 2px 4px; white-space: nowrap; }
.ws-table td { padding: 3px 4px; vertical-align: middle; }
.ws-table td .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); margin-right: 6px; }
.ws-table td.path { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); direction: rtl; text-align: left; }
.ws-table td.c { text-align: center; }
.ws-table select, .ws-table input[type="number"] { font-size: 12px; padding: 3px 4px; }
.ws-table input[type="number"] { width: 52px; }
.ws-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ok); }
.ws-err td { color: var(--danger); font-size: 11px; }
.ws-loop-info td { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.fb-list { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fb-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb-row select { flex: 0 1 180px; min-width: 0; }
.fb-n { color: var(--muted); width: 18px; text-align: right; }
.fb-out { color: var(--medium); font-size: 11px; }
.ws-add { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-add input[name="project"] { flex: 1 1 140px; }
.ws-add input[name="path"] { flex: 3 1 240px; }

/* narrow screens: the sessions panel becomes a drawer over the board */
@media (max-width: 1000px) {
  .sessions-panel { position: fixed; inset: 0 0 0 auto; z-index: 30; width: min(100vw, 640px); height: 100dvh; flex-basis: auto; box-shadow: -8px 0 28px rgba(9, 30, 66, 0.25); }
  .sp-resize { display: none; }
  .sessions-panel.chatting .session-list,
  .sessions-panel.chatting .sp-split { display: none; }
  .sessions-panel.chatting #chatBack { display: inline-block; }
  .sessions-panel:not(.chatting) .chat { display: none; }
}
@media (max-width: 760px) {
  .topbar { gap: 8px; padding: 10px 12px; flex-shrink: 0; }
  .controls { gap: 6px; }
  .controls > .proj-filter { flex: 1; min-width: 0; }
  .controls > .proj-filter .proj-btn { max-width: none; width: 100%; }
  .controls > #search { order: 1; flex: 1 1 calc(100% - 90px); width: auto; }
  #filtersBtn { display: block; order: 1; }
  .board-filters { order: 2; flex: 1 1 100%; padding: 8px 0 0; border-top: 1px solid var(--border); }
  .board-filters[hidden] { display: none; }
  #newProjectBtn { display: none; }
  .board-filters #newProjectBtn { display: block; }
  .controls > button, .controls > .proj-filter button { min-height: 38px; }
  .sessions-panel { width: 100%; border-left: 0; }
  .sp-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: max(10px, env(safe-area-inset-top)) 10px 10px; }
  .sp-head h2 { grid-column: 1 / 3; grid-row: 1; }
  .sp-head .count { grid-column: 3; grid-row: 1; justify-self: start; }
  .sp-head .spacer { display: none; }
  #closePanel { grid-column: 4; grid-row: 1; justify-self: end; }
  #usageMenu { grid-column: 1; grid-row: 2; }
  #loopMenu { grid-column: 2; grid-row: 2; }
  #machinesBtn { grid-column: 3; grid-row: 2; }
  #newSessionBtn { grid-column: 4; grid-row: 2; }
  .session-menu summary { padding: 4px; white-space: normal; text-align: center; }
  .sp-head button, .session-menu summary { min-height: 38px; display: flex; align-items: center; justify-content: center; }
  .chat-head { padding: 10px 12px; }
  .chat-title { flex-basis: calc(100% - 80px); }
  .chat-tools { width: 100%; }
  .chat-tools button, .chat-tools select { min-height: 36px; }
  .transcript { padding: 14px 12px; gap: 12px; }
  .composer { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .composer-tools button, .composer-tools select { min-height: 36px; }
  .composer-tools select { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  dialog, dialog.wide { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  #taskForm, .pdlg { padding: 14px 12px; }
  .settings-table { display: block; max-width: 100%; overflow-x: auto; }
  .proj-btn { max-width: 180px; }
  .popover { position: fixed; left: 16px; right: 16px; top: 64px; min-width: 0; max-width: none; }
  .msg { max-width: 100%; }
  .ws-scroll { overflow-x: visible; }
  .ws-table, .ws-table tbody, .ws-table tr, .ws-table td { display: block; width: 100%; }
  .ws-table thead { display: none; }
  .ws-table tr[data-m] { padding-top: 10px; }
  .ws-table td[data-label] { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: center; }
  .ws-table td[data-label]::before { content: attr(data-label); color: var(--muted); }
  .ws-table td.path { max-width: none; white-space: normal; overflow-wrap: anywhere; direction: ltr; }
  .ws-table select { width: 100%; min-width: 0; min-height: 32px; }
  .ws-table td .dot { display: none; }
}

/* top bar: one row on desktop — less important labels give way first */
#search { width: 170px; }
@media (max-width: 1760px) { .seg.types .tname { display: none; } }
@media (max-width: 1560px) { .brand h1 { display: none; } }
@media (max-width: 760px) { .brand h1 { display: block; } .controls { flex-basis: 100%; } .controls .spacer { display: none; } #search { flex: 1 1 140px; width: auto; } }