/* Deal Desk: a working tool. Left: deals by Tracker stage. Right: one chat per deal, with live job progress. */
:root {
  --bg: #f4f6f5; --panel: #ffffff; --ink: #1b2320; --muted: #5d6964; --rule: #d9dfdc; --hover: #eef2f0;
  --accent: #295f8f; --accent-ink: #ffffff; --accent-soft: #e4edf5;
  --you: #e9f1ec; --you-rule: #cfe0d6; --warn: #8a5a0f; --warn-soft: #f7ecd8; --bad: #a3322a; --good: #2d6b46;
  --ag-manager: #295f8f; --ag-analyst: #2d6b46; --ag-checker: #7a3f8f; --ag-admin: #8a5a0f; --ag-operations: #1f6f73;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121715; --panel: #1a201e; --ink: #e4e9e6; --muted: #9aa5a0; --rule: #2c3431; --hover: #222a27;
    --accent: #7db2e0; --accent-ink: #0e1a24; --accent-soft: #1d2a35; --you: #1d2a23; --you-rule: #2c4035;
    --warn: #e2b46a; --warn-soft: #2c2517; --bad: #f08a80; --good: #7fcf9e;
    --ag-manager: #7db2e0; --ag-analyst: #7fcf9e; --ag-checker: #c9a2dc; --ag-admin: #e2b46a; --ag-operations: #74c7cb; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); }
h1 { font-size: 1.3rem; line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--bad); min-height: 1em; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.spacer { flex: 1; }
[hidden] { display: none !important; }
button, .button { font: 600 0.92rem/1 var(--font); background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 7px;
  padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { opacity: 0.55; cursor: default; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
button.small { padding: 6px 10px; font-size: 0.82rem; }
button.wide { width: 100%; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* sign-in */
body.signin { display: grid; place-items: center; padding: 16px; }
.signin-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 28px; max-width: 26rem; display: grid; gap: 14px; }
body[data-mode="dev"] .only-google, body[data-mode="google"] .only-dev { display: none; }
.only-dev { display: grid; gap: 8px; }

/* frame */
.topbar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.topbar form { margin: 0; }
.brand { font-size: 1rem; white-space: nowrap; }
.topbar button { white-space: nowrap; }
.layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100% - 52px); }
#sidebar { border-right: 1px solid var(--rule); overflow-y: auto; padding: 14px; display: grid; align-content: start; gap: 14px; background: var(--panel); }
#main { display: grid; grid-template-rows: 1fr auto; min-width: 0; min-height: 0; }
.only-narrow { display: none; }

/* deal list */
.stage { display: grid; gap: 4px; }
.stage h2 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 2px; font-weight: 600; }
.deal { text-align: left; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 8px 10px;
  display: grid; gap: 2px; font-weight: 400; width: 100%; }
.deal:hover { background: var(--hover); }
.deal[aria-current="true"] { background: var(--accent-soft); border-color: var(--rule); }
.deal .name { font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.deal .code { font: 500 0.8rem var(--mono); color: var(--muted); }
.deal .next { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--accent-soft); color: var(--accent); }
.pill.quiet { background: var(--hover); color: var(--muted); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
.pill.good { background: transparent; color: var(--good); border: 1px solid var(--good); }

/* thread */
#thread { overflow-y: auto; padding: 20px clamp(16px, 4vw, 40px); display: grid; align-content: start; gap: 16px; min-width: 0; }
.drive-note { margin: 12px clamp(16px, 4vw, 40px) 0; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.drive-note .button { text-decoration: none; padding: 8px 12px; }
.drive-note .button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
#main:has(> .drive-note:not([hidden])) { grid-template-rows: auto 1fr auto; }
.empty { padding: 48px clamp(16px, 4vw, 40px); display: grid; gap: 10px; max-width: 46rem; align-content: start; }
.thread-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.files { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; font-size: 0.88rem; }
.files a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.files a:hover { text-decoration: underline; }
.files .row { display: flex; gap: 10px; justify-content: space-between; }
.messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.msg { max-width: 46rem; display: grid; gap: 6px; min-width: 0; }
.msg .who { font-size: 0.78rem; color: var(--muted); }
.msg .body { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; overflow-wrap: anywhere; }
.msg.user { justify-self: end; }
.msg.user .body { background: var(--you); border-color: var(--you-rule); white-space: pre-wrap; }
.msg.bot .body { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.attach { font-size: 0.82rem; color: var(--muted); }
.body h3, .body h4 { font-size: 1rem; margin: 10px 0 4px; }
.body p + p, .body ul, .body ol, .body table { margin-top: 8px; }
.body ul, .body ol { padding-left: 1.2rem; margin-bottom: 0; }
.body code { font: 0.86em var(--mono); background: var(--hover); padding: 1px 4px; border-radius: 4px; }
.body .tablewrap { overflow-x: auto; }
.body table { border-collapse: collapse; font-size: 0.88rem; }
.body th, .body td { border-bottom: 1px solid var(--rule); padding: 5px 8px; text-align: left; vertical-align: top; }
.body td { font-variant-numeric: tabular-nums; }

/* live progress: who is working, the current agent's plan, and the activity feed */
.progress { max-width: 46rem; background: var(--panel); border: 1px dashed var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.progress .status { display: flex; gap: 10px; align-items: center; font-weight: 600; flex-wrap: wrap; }
.progress .elapsed { font-weight: 400; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.86rem; }
.crew li { display: grid; grid-template-columns: 5.6rem auto minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.crew .pill { justify-self: start; }
.crew .now { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.plan details { font-size: 0.85rem; border-left: 2px solid var(--rule); padding-left: 10px; }
.plan summary { cursor: pointer; color: var(--muted); }
.plan ol { margin: 4px 0 0; padding-left: 1.2rem; display: grid; gap: 2px; }
.plan li.completed { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }
.plan li.in_progress { font-weight: 600; }
.activity { display: grid; gap: 6px; min-width: 0; }
.feedbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border-radius: 0; padding: 5px 10px; font-size: 0.78rem; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.feed { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 5px; font-size: 0.86rem; max-height: 24rem; overflow-y: auto;
  border-top: 1px solid var(--rule); overscroll-behavior: contain; }
.feed li { display: grid; grid-template-columns: 3.2rem 5.6rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.feed .t { font: 0.76rem var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed .x { min-width: 0; overflow-wrap: anywhere; }
.feed .x p + p { margin-top: 6px; }
.feed li.step .x { color: var(--muted); }
.feed li.milestone .x { font-weight: 600; }
.feed li.problem .x { color: var(--warn); }
.feed.key li.step { display: none; }
.feed .why { color: var(--muted); font-weight: 400; }
.a { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ag-manager); }
.who-analyst .a { color: var(--ag-analyst); }
.who-checker .a { color: var(--ag-checker); }
.who-admin .a { color: var(--ag-admin); }
.who-operations .a { color: var(--ag-operations); }
details.more { display: inline; }
details.more summary { display: inline; cursor: pointer; color: var(--accent); font-weight: 400; font-size: 0.82rem; }
details.more[open] { display: block; margin-top: 4px; }
details.more .report { max-height: 18rem; overflow-y: auto; border-left: 2px solid var(--rule); padding: 2px 0 2px 10px; font-weight: 400; color: var(--ink); }
.report ul, .report ol, .feed details ul, .feed details ol { padding-left: 1.2rem; margin: 4px 0 0; }
button.linkish { background: none; color: var(--accent); padding: 0; font-weight: 500; font-size: 0.8rem; justify-self: start; }
button.linkish:hover { text-decoration: underline; }
.msg .activity { background: var(--panel); border: 1px dashed var(--rule); border-radius: 10px; padding: 10px 12px; }
@media (max-width: 560px) {
  .feed li { grid-template-columns: 2.9rem minmax(0, 1fr); }
  .feed li .a { grid-column: 2; grid-row: 1; }
  .feed li .x { grid-column: 2; }
  .crew li { grid-template-columns: 5rem minmax(0, 1fr); }
  .crew .now { grid-column: 1 / -1; }
  .feed { max-height: 60vh; }
}
@media (max-width: 480px) {   /* phone: room for the Deals / Management switch */
  .brand, #busy { display: none !important; }
  .topbar { gap: 8px; }
  .modes .mode { padding: 7px 9px; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* composer */
.composer { border-top: 1px solid var(--rule); background: var(--panel); padding: 12px clamp(16px, 4vw, 40px); display: grid; gap: 8px; }
.composer textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; resize: vertical; width: 100%; }
.composer-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.composer input[type="text"] { font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 6px 8px; min-width: 0; }
.file-pick { font-size: 0.88rem; color: var(--ink); cursor: pointer; border: 1px solid var(--rule); border-radius: 7px; padding: 6px 10px; }
.file-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.files details summary { cursor: pointer; color: var(--muted); }
.files h3 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 8px 0 2px; }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  #sidebar { position: fixed; inset: 52px 0 0 0; z-index: 5; display: none; }
  body.show-deals #sidebar { display: grid; }
  .only-narrow { display: inline-block; }
  #me { display: none; }
  .composer textarea { min-height: 3.2rem; }
}

/* Clip a listing */
.clip-page { min-height: 100vh; }
.clip { max-width: 40rem; margin: 0 auto; padding: 32px 16px; display: grid; gap: 12px; }
.clip h1 { margin: 0; }
.clip h2 { font-size: 1rem; margin: 12px 0 0; }
.clip form { display: grid; gap: 8px; }
.clip select, .clip textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 7px; padding: 8px; width: 100%; box-sizing: border-box; }
.clip-source { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); min-width: 0; }
.clip-source a { overflow-wrap: anywhere; color: var(--accent); }
.clip .button { text-decoration: none; display: inline-block; }
.bookmarklet { cursor: grab; }
.clip-link { margin-top: 8px; }
.clip .button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }

/* Tracker card */
.head-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tracker { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; display: grid; gap: 12px; min-width: 0; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 10px 16px; }
.tgrid div { display: grid; gap: 2px; min-width: 0; }
.tgrid .k { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tgrid .v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tlinks { margin: 0; } .tlinks a { color: var(--accent); }
.tblock h3, .tblock summary { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; font-weight: 600; cursor: default; }
.tblock summary { cursor: pointer; }
.tblock p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.deal.listing .name { font-weight: 500; }

/* Deals / Management switch */
.modes { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.modes .mode { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 7px 12px; font-size: 0.85rem; }
.modes .mode[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
body.manage #new-deal { display: none; }
body.manage .deal[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.focus-chip { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 0.82rem; }
.focus-chip button { padding: 2px 8px; border: 0; }

/* Choose the deals folder */
.drive-note .choose { display: grid; gap: 8px; width: 100%; }
.drive-note .choose p { margin: 0; }
.folder-list { display: grid; gap: 8px; }
.folder-card { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; }
.folder-card > div { display: grid; gap: 2px; min-width: 0; }
.folder-link { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.folder-link label { width: 100%; }
.folder-link input { flex: 1 1 18rem; min-width: 0; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 7px; padding: 7px 9px; }