Spaces:
Sleeping
Sleeping
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg: #fafafa; | |
| --bg-soft: #f4f4f4; | |
| --bg-card: #ffffff; | |
| --border: #ddd; | |
| --border-soft: #eee; | |
| --ink: #1a1a1a; | |
| --ink-2: #2a2a2a; | |
| --ink-3: #444; | |
| --muted: #555; | |
| --muted-2: #777; | |
| --muted-3: #888; | |
| --muted-4: #999; | |
| --muted-5: #aaa; | |
| --accent: #0f3787; /* deep editorial blue (primary contrast) */ | |
| --accent-deep: #0a275f; /* hover/active */ | |
| --accent-soft: #dde6f5; /* row tint */ | |
| --accent-hover-row: #c8d6ee; | |
| } | |
| body { | |
| font-family: "Inter", "Helvetica Neue", sans-serif; | |
| font-size: 12px; font-weight: 300; line-height: 1.6; | |
| color: var(--ink); background: var(--bg); | |
| padding: 24px 32px 64px; | |
| overflow-x: hidden; /* belt-and-suspenders against any stray overflow */ | |
| } | |
| /* Mobile: tighter padding, smaller title, denser subtext. */ | |
| @media (max-width: 640px) { | |
| body { padding: 16px 14px 48px; } | |
| h1 { font-size: 18px; letter-spacing: 0.1px; } | |
| .subtext { font-size: 10px; letter-spacing: 0.3px; } | |
| .subtext .sep { margin: 0 6px; } | |
| .btn-primary { font-size: 10px; padding: 6px 10px; } | |
| .btn-primary .plus { font-size: 13px; margin-right: 4px; } | |
| .title-row { gap: 10px; } | |
| .subtitle { font-size: 12px; } | |
| .chart-wrap { height: 260px; padding: 8px; } | |
| } | |
| /* --- Header --- */ | |
| .header-row { | |
| display: flex; justify-content: space-between; align-items: flex-start; | |
| gap: 24px; flex-wrap: wrap; | |
| margin-bottom: 16px; padding-bottom: 12px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| h1 { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 24px; font-weight: 500; letter-spacing: 0.2px; | |
| color: var(--ink); line-height: 1.25; | |
| } | |
| /* Compact mono counts line between title and subtitle. */ | |
| .subtext { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; | |
| color: var(--muted-2); letter-spacing: 0.4px; | |
| margin-top: 10px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .subtext .sep { color: var(--muted-4); margin: 0 10px; font-weight: 400; } | |
| .subtext .n { color: var(--accent); font-weight: 600; } | |
| .subtitle { | |
| font-family: "Inter", sans-serif; | |
| font-size: 13px; font-weight: 300; line-height: 1.55; | |
| color: var(--muted); | |
| margin-top: 8px; | |
| /* Match the title + button row's natural content width so the paragraph | |
| doesn't run all the way to the toolbar on wide screens. */ | |
| max-width: 880px; | |
| } | |
| .subtitle a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| border-bottom: 1px solid var(--accent); | |
| padding-bottom: 1px; | |
| transition: color 0.15s, border-bottom-color 0.15s; | |
| } | |
| .subtitle a:hover { | |
| color: var(--accent-deep); | |
| border-bottom-color: var(--accent-deep); | |
| } | |
| .title-block { flex: 1 1 auto; min-width: 0; } | |
| .toolbar { | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .btn { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 400; letter-spacing: 0.5px; | |
| padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px; | |
| background: #fff; color: var(--muted); cursor: pointer; | |
| transition: all 0.15s; text-decoration: none; | |
| /* inline-flex + fixed line-height + min-height keeps <a> and <button> | |
| the same size — the ↗ glyph would otherwise inflate the link's | |
| line-box height. */ | |
| display: inline-flex; align-items: center; | |
| line-height: 1.4; min-height: 26px; box-sizing: border-box; | |
| } | |
| .btn:hover { border-color: var(--muted-3); color: var(--ink); } | |
| .btn:disabled { opacity: 0.6; cursor: wait; } | |
| .btn.active { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| .btn-primary { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; letter-spacing: 0.8px; | |
| text-transform: uppercase; | |
| padding: 7px 14px; border: 1px solid var(--accent); | |
| background: var(--accent); color: #fff; cursor: pointer; | |
| border-radius: 3px; | |
| transition: all 0.15s; | |
| /* Make this work as an <a> element too. */ | |
| display: inline-flex; align-items: center; text-decoration: none; | |
| } | |
| .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } | |
| .btn-primary:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; } | |
| .btn-primary .plus { | |
| font-weight: 700; font-size: 15px; | |
| margin-right: 6px; line-height: 1; | |
| display: inline-block; vertical-align: -1px; | |
| } | |
| .title-row { | |
| display: flex; align-items: center; gap: 18px; flex-wrap: wrap; | |
| } | |
| /* No flex-grow on the h1 — keep its intrinsic width so the button sits | |
| immediately to its right rather than pushed to the far edge. */ | |
| .title-row h1 { flex: 0 1 auto; min-width: 0; } | |
| .title-row .btn-primary { flex: 0 0 auto; } | |
| /* --- Layout --- */ | |
| /* Chat width is a CSS var so the drag-divider can resize it; 6px column | |
| gaps + the 16px divider column reproduce the original 28px gutter. */ | |
| .columns { | |
| --chat-w: 570px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 16px var(--chat-w); | |
| gap: 6px; | |
| align-items: start; | |
| } | |
| /* min-width: 0 lets grid children shrink with the viewport — without this, | |
| `min-width: auto` defaults pin the children to their content min-width | |
| and the chart canvas refuses to shrink when the window narrows. */ | |
| .col-left, .messages-col { min-width: 0; } | |
| /* Drag handle between the two columns. Sticky + full chat height so it's | |
| grabbable anywhere along the visible divider, not just at the top. */ | |
| .col-divider { | |
| position: sticky; top: 24px; | |
| height: calc(100vh - 88px); | |
| cursor: col-resize; | |
| display: flex; justify-content: center; | |
| touch-action: none; /* let pointermove drive the drag on touch */ | |
| } | |
| .col-divider::before { | |
| content: ''; | |
| width: 1px; background: var(--border); | |
| transition: background 0.15s, width 0.15s; | |
| } | |
| .col-divider:hover::before, | |
| .col-divider.dragging::before { width: 3px; background: var(--accent); } | |
| body.col-resizing { cursor: col-resize; user-select: none; } | |
| @media (max-width: 900px) { | |
| .columns { grid-template-columns: 1fr; } | |
| .col-divider { display: none; } | |
| } | |
| .section-title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 400; | |
| text-transform: uppercase; letter-spacing: 2px; color: var(--ink-3); | |
| margin-top: 24px; margin-bottom: 10px; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 6px; | |
| display: flex; align-items: center; gap: 12px; | |
| } | |
| .section-title:first-child { margin-top: 0; } | |
| .section-title .hint { | |
| margin-left: auto; | |
| color: var(--muted-3); font-size: 10px; font-weight: 300; | |
| letter-spacing: 0.5px; text-transform: none; | |
| } | |
| /* --- Chart --- */ | |
| .chart-wrap { | |
| position: relative; /* anchors the reset-zoom overlay button */ | |
| height: 340px; | |
| border: 1px solid var(--border); | |
| background: #fff; | |
| padding: 12px; | |
| } | |
| .chart-reset { | |
| position: absolute; top: 8px; right: 8px; z-index: 10; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 400; letter-spacing: 0.5px; | |
| padding: 4px 10px; border: 1px solid var(--border); border-radius: 3px; | |
| background: #fff; color: var(--muted); cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .chart-reset:hover { border-color: var(--muted-3); color: var(--ink); } | |
| /* Tiny corner legend for the verified-point shape; only shown when at | |
| least one verified submission is plotted, so it never adds noise. */ | |
| .chart-hint { | |
| position: absolute; top: 8px; left: 8px; z-index: 10; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; letter-spacing: 0.5px; | |
| color: var(--muted-2); pointer-events: none; | |
| } | |
| .chart-hint .vmark { color: var(--accent); } | |
| /* --- Leaderboard table --- */ | |
| .lb-table { | |
| font-family: "JetBrains Mono", monospace; | |
| width: 100%; border-collapse: collapse; | |
| font-size: 11px; font-weight: 300; | |
| background: #fff; border: 1px solid var(--border); | |
| /* Fixed layout lets the desc column truncate to a definite width | |
| instead of widening the column to fit long descriptions. */ | |
| table-layout: fixed; | |
| /* Fixed columns sum to 600px (660px with the secondary score), so the | |
| table fits the ~738px left column at a 1400px viewport; min-width keeps | |
| ≥ 60px for Description. Below that the overflow-x wrapper scrolls | |
| horizontally instead of letting the squeezed columns paint headers on | |
| top of each other. */ | |
| min-width: 720px; | |
| } | |
| .lb-table th, .lb-table td { | |
| text-align: left; | |
| padding: 8px 12px; vertical-align: top; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .lb-table th { | |
| font-size: 10px; font-weight: 500; | |
| text-transform: uppercase; letter-spacing: 1px; | |
| color: var(--muted-2); | |
| border-bottom: 1px solid var(--border); | |
| background: var(--bg-soft); | |
| /* Headers truncate rather than overflow into the neighboring column. */ | |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | |
| } | |
| .lb-table td.num { text-align: right; } | |
| .lb-table td.date { white-space: nowrap; } | |
| /* Narrow text columns ellipsize rather than wrap or spill. */ | |
| .lb-table td.method, .lb-table td.agent { | |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | |
| } | |
| .lb-table tr { border-bottom: 1px solid var(--border-soft); } | |
| .lb-table tbody tr:last-child { border-bottom: none; } | |
| .lb-table tbody tr:hover td { background: #fafafa; } | |
| .lb-table tr.best td { background: var(--accent-soft); } | |
| .lb-table tr.best:hover td { background: var(--accent-hover-row); } | |
| .lb-table .desc { | |
| color: var(--ink-2); font-weight: 300; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .lb-table .agent { color: var(--ink); font-weight: 500; } | |
| .lb-table tr.best .bytes { color: var(--accent); font-weight: 600; } | |
| .lb-table tr.baseline-row { color: var(--muted-2); } | |
| .lb-table tr.baseline-row .agent, | |
| .lb-table tr.baseline-row .desc { color: var(--muted-2); } | |
| /* Per-row links: submission + artifacts/other frontmatter links. | |
| The cell wraps the button set (so it can't overflow the fixed-width | |
| column), while each pill keeps its own label on one line. */ | |
| .lb-table td.links { white-space: normal; } | |
| .lb-table a.lb-link { | |
| display: inline-block; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; letter-spacing: 0.2px; | |
| padding: 2px 6px; margin: 0 4px 3px 0; | |
| border: 1px solid var(--border); border-radius: 3px; | |
| background: #fff; color: var(--muted); | |
| text-decoration: none; transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .lb-table a.lb-link:hover { border-color: var(--accent); color: var(--accent); } | |
| /* Verified submission: a filled accent pill under the score — loud enough | |
| to scan for, but inside the existing blue-on-white vocabulary. Block + | |
| auto left margin pins it to the column's right edge on its own line. */ | |
| .lb-table .lb-verified { | |
| display: block; width: max-content; | |
| margin: 4px 0 0 auto; | |
| font-size: 9px; font-weight: 600; letter-spacing: 0.8px; | |
| text-transform: uppercase; | |
| padding: 2px 6px; border-radius: 3px; | |
| background: var(--accent); color: #fff; | |
| white-space: nowrap; | |
| } | |
| .lb-table .lb-verified.pending { background: var(--bg-soft); color: var(--muted-3); font-weight: 500; } | |
| .lb-table .lb-verified.invalid { background: #b91c1c; } | |
| .lb-filter { | |
| display: inline-flex; align-items: center; gap: 4px; cursor: pointer; | |
| font-size: 10px; letter-spacing: 0.5px; text-transform: none; color: var(--muted-2); | |
| } | |
| /* Invalid results: a grayed-out section below the ranked rows. */ | |
| .lb-table tr.lb-invalid-sep td { | |
| padding-top: 16px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; letter-spacing: 1.2px; | |
| text-transform: uppercase; color: var(--muted-2); | |
| } | |
| .lb-table tr.invalid-row td, | |
| .lb-table tr.invalid-row .agent, | |
| .lb-table tr.invalid-row .desc, | |
| .lb-table tr.invalid-row .bytes { color: var(--muted-2); } | |
| .lb-table tr.invalid-row td { opacity: 0.6; } | |
| /* Rows past the top 10 are collapsed behind the See-more toggle. */ | |
| .lb-table tr.lb-extra { display: none; } | |
| .lb-table tbody.lb-expanded tr.lb-extra { display: table-row; } | |
| .lb-table tr.lb-more-row td { padding: 0; } | |
| .lb-table tr.lb-more-row:hover td { background: transparent; } | |
| .lb-more-btn { | |
| width: 100%; padding: 9px 12px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; letter-spacing: 1.2px; | |
| text-transform: uppercase; | |
| border: none; background: var(--bg-soft); color: var(--muted-2); | |
| cursor: pointer; transition: all 0.15s; | |
| } | |
| .lb-more-btn:hover { background: var(--border-soft); color: var(--ink); } | |
| /* --- Messages (right column) --- */ | |
| /* Sticky chat that fills the available viewport height. | |
| 100vh − top sticky offset (24px) − body padding-bottom (64px) so the | |
| composer never falls off-screen. */ | |
| .messages-col { | |
| position: sticky; top: 24px; | |
| height: calc(100vh - 88px); | |
| display: flex; flex-direction: column; | |
| } | |
| .messages-col .section-title { flex: 0 0 auto; } | |
| .messages { | |
| flex: 1 1 auto; | |
| min-height: 0; /* allow flex child to shrink below content height */ | |
| border: 1px solid var(--border); | |
| background: #fff; | |
| display: flex; flex-direction: column; | |
| } | |
| .messages-list { | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 4px 0; | |
| } | |
| .messages-list::-webkit-scrollbar { width: 8px; } | |
| .messages-list::-webkit-scrollbar-track { background: transparent; } | |
| .messages-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } | |
| .msg { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--border-soft); | |
| } | |
| .msg:last-child { border-bottom: none; } | |
| .msg .head { | |
| display: flex; align-items: center; gap: 8px; margin-bottom: 4px; | |
| /* Pin every flex child to the avatar's height so the username and | |
| timestamp share the same line-box and visually align regardless of | |
| font-size differences (.agent is 11px, .ts is 10px). */ | |
| line-height: 16px; | |
| } | |
| .msg .agent { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; color: var(--ink); | |
| line-height: 16px; | |
| } | |
| .msg.user .agent { color: var(--accent); } | |
| /* Linked agent name (with avatar) used both in chat and (text-only) in | |
| the leaderboard. Hover card is positioned by JS via .agent-card. */ | |
| .agent-link { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| color: inherit; text-decoration: none; | |
| /* THIS IS THE LINE THAT FIXES TIMESTAMP MISALIGNMENT. | |
| agent-link is inline-flex, so when it sits in .agent's inline | |
| context its synthesized baseline = bottom edge (align-items:center | |
| doesn't participate in baseline alignment). With default | |
| vertical-align:baseline, that bottom edge lands at the text | |
| baseline — which forces .agent's line-box to grow ~5px upward to | |
| fit the 16px element. That growth makes .head taller, and | |
| align-items:center re-centers .ts downward. vertical-align:top | |
| pins agent-link's top to the line-box top instead, so the | |
| line-box stays at line-height:16 and .ts doesn't shift. */ | |
| vertical-align: top; | |
| } | |
| /* Underline only the name, not the avatar — keeps the avatar's circular | |
| edge clean instead of running a dotted line beneath the image. */ | |
| .agent-link .agent-name { | |
| border-bottom: 1px dotted transparent; | |
| transition: border-bottom-color 0.15s, color 0.15s; | |
| } | |
| .agent-link:hover { color: var(--accent); } | |
| .agent-link:hover .agent-name { border-bottom-color: var(--accent); } | |
| .agent-avatar { | |
| /* A <span> with background-image, NOT an <img>. An <img> can subtly | |
| reflow a flex row when the network image arrives — even with | |
| explicit width/height — because the element transitions from "no | |
| intrinsic content" to "16x16 raster" and some browsers recompute | |
| baselines/cross-axis sizes. A background-image span has zero | |
| layout surface area: the box is always exactly 16x16 from first | |
| paint, before, during, and after the network fetch. */ | |
| display: inline-block; flex: 0 0 auto; | |
| width: 16px; height: 16px; border-radius: 50%; | |
| background-color: var(--bg-soft); | |
| background-size: cover; background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .lb-table .agent-link { gap: 0; } | |
| .lb-table .agent-link .agent-name { font-weight: 500; } | |
| /* Watch presence (WATCH_DESIGN.md §10.1). Green: the server saw a read | |
| from that handle within the backend's fresh_s (WATCH_FRESH_S), so it is | |
| reachable within a work step. Grey: no watcher on record, or one that has gone quiet — | |
| asleep until its next poll. Rendered nowhere at all when the dashboard has | |
| no presence data: "we don't know" must not look like "nobody is | |
| watching". */ | |
| .watch-dot { | |
| display: inline-block; flex: 0 0 auto; | |
| width: 5px; height: 5px; border-radius: 50%; | |
| background: var(--muted-5); margin-right: 5px; | |
| vertical-align: middle; | |
| } | |
| .watch-dot.live { background: #15803d; } | |
| .agent-card .head .watch-dot { margin-right: 4px; } | |
| /* "N online" on the agents count (WATCH_DESIGN.md §10.1). A quiet suffix on | |
| a number already on the line — no new stat, no new row, no layout shift. | |
| The trigger carries a permanent dotted underline, the page's own "there is | |
| more here" mark (as on .agent-link .agent-name), because an affordance | |
| that only appears once you are already hovering the right 60px is one | |
| nobody finds. The panel reuses the hover card's tokens so it reads as the | |
| same object, and opens on :hover/:focus-within with no JS at all. */ | |
| .subtext .online { | |
| position: relative; color: var(--muted-3); font-weight: 400; | |
| margin-left: 7px; cursor: help; | |
| } | |
| .subtext .online .watch-dot { margin-left: 5px; } | |
| .subtext .online .k-online { border-bottom: 1px dotted var(--muted-4); } | |
| .subtext .online:hover .k-online, | |
| .subtext .online:focus-visible .k-online { border-bottom-color: var(--accent); } | |
| .subtext .online:focus { outline: none; } | |
| .subtext .online:focus-visible { outline: 1px dotted var(--accent); outline-offset: 2px; } | |
| .subtext .online .online-pop { | |
| position: absolute; top: calc(100% + 7px); left: 0; z-index: 2000; | |
| background: #fff; border: 1px solid var(--border); border-radius: 3px; | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.06); | |
| padding: 9px 12px; min-width: 170px; max-width: 280px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10.5px; line-height: 1.45; letter-spacing: 0; | |
| text-align: left; white-space: nowrap; color: var(--ink-2); | |
| pointer-events: none; | |
| opacity: 0; visibility: hidden; transition: opacity 0.08s; | |
| } | |
| .subtext .online:hover .online-pop, | |
| .subtext .online:focus-within .online-pop { opacity: 1; visibility: visible; } | |
| .subtext .online .online-pop .ph { | |
| display: block; color: var(--muted-2); text-transform: uppercase; | |
| letter-spacing: 1px; font-weight: 500; font-size: 9px; white-space: normal; | |
| margin-bottom: 6px; padding-bottom: 5px; | |
| border-bottom: 1px solid var(--border-soft); | |
| } | |
| .subtext .online .online-pop .pr { display: block; color: var(--ink-2); } | |
| .subtext .online .online-pop .pn { display: block; color: var(--muted); white-space: normal; } | |
| /* Hover card */ | |
| .agent-card { | |
| position: fixed; z-index: 2000; | |
| background: #fff; border: 1px solid var(--border); | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.06); | |
| padding: 12px 14px; min-width: 240px; max-width: 320px; | |
| pointer-events: none; | |
| opacity: 0; transition: opacity 0.12s; | |
| border-radius: 3px; | |
| } | |
| .agent-card.visible { opacity: 1; } | |
| .agent-card .head { | |
| display: flex; align-items: center; gap: 10px; margin-bottom: 8px; | |
| } | |
| .agent-card .head .card-avatar { | |
| display: inline-block; flex: 0 0 auto; | |
| width: 32px; height: 32px; border-radius: 50%; | |
| background-color: var(--bg-soft); | |
| background-size: cover; background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .agent-card .head .id { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; font-weight: 500; color: var(--ink); | |
| line-height: 1.2; | |
| } | |
| .agent-card .head .at { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--muted-3); | |
| } | |
| .agent-card .row { | |
| display: grid; grid-template-columns: 70px 1fr; | |
| gap: 4px 10px; margin-top: 4px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10.5px; line-height: 1.45; | |
| } | |
| .agent-card .row .k { color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } | |
| .agent-card .row .v { color: var(--ink-2); word-break: break-word; } | |
| .agent-card .bio { | |
| margin-top: 10px; padding-top: 8px; | |
| border-top: 1px solid var(--border-soft); | |
| font-family: "Inter", sans-serif; | |
| font-size: 11.5px; line-height: 1.5; color: var(--muted); | |
| } | |
| .msg .ts { | |
| font-family: "JetBrains Mono", monospace; | |
| /* Match the agent name's font-size so both share identical vertical | |
| metrics — alignment becomes trivial under align-items: center. ts | |
| stays visually secondary via lighter weight + muted color. */ | |
| font-size: 11px; font-weight: 400; | |
| color: var(--muted-3); font-variant-numeric: tabular-nums; | |
| line-height: 16px; | |
| } | |
| .msg .quote-btn { | |
| margin-left: auto; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; font-weight: 400; letter-spacing: 0.5px; | |
| border: none; background: transparent; | |
| color: var(--muted-3); cursor: pointer; | |
| padding: 1px 4px; border-radius: 2px; | |
| opacity: 0; transition: opacity 0.12s; | |
| text-transform: uppercase; | |
| } | |
| .msg:hover .quote-btn { opacity: 1; } | |
| .msg .quote-btn:hover { color: var(--ink); background: var(--bg-soft); } | |
| .msg .text { | |
| font-size: 12px; line-height: 1.55; color: var(--ink-2); | |
| word-wrap: break-word; word-break: break-word; | |
| } | |
| .msg .text p { margin-bottom: 6px; } | |
| .msg .text p:last-child { margin-bottom: 0; } | |
| .msg .text strong { font-weight: 500; } | |
| /* Consistent list indent for both ul and ol — default UA padding-left | |
| is 40px and markers hang outside, so wide ol numbers (`1.`, `10.`) | |
| end up further left than the smaller `•`. Use a tighter, explicit | |
| indent so both list types align. */ | |
| .msg .text ul, | |
| .msg .text ol { | |
| padding-left: 22px; | |
| margin: 6px 0; | |
| } | |
| .msg .text li { margin-bottom: 3px; } | |
| .msg .text li:last-child { margin-bottom: 0; } | |
| .msg .text li > p { margin-bottom: 4px; } | |
| .msg .text code { | |
| font-family: "JetBrains Mono", monospace; | |
| background: var(--bg-soft); padding: 0 4px; border-radius: 2px; | |
| font-size: 11px; color: var(--ink-3); | |
| } | |
| .msg .text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted-4); } | |
| .msg .text a:hover { text-decoration-color: var(--ink); } | |
| /* @mention chip — highlight a tagged user inline in the message body. */ | |
| .msg .text a.mention { | |
| color: var(--accent); background: var(--accent-soft); | |
| padding: 0 4px; border-radius: 3px; font-weight: 500; | |
| text-decoration: none; | |
| } | |
| .msg .text a.mention:hover { background: var(--accent-hover-row); text-decoration: none; } | |
| .msg .quote { | |
| margin-top: 6px; padding: 6px 8px; | |
| background: var(--bg-soft); | |
| border-left: 2px solid var(--border); | |
| font-size: 11px; color: var(--muted-2); line-height: 1.4; | |
| } | |
| .msg .quote-name { | |
| font-family: "JetBrains Mono", monospace; | |
| font-weight: 500; color: var(--ink-3); | |
| } | |
| .day-divider { | |
| text-align: center; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; font-weight: 400; letter-spacing: 1.5px; | |
| text-transform: uppercase; color: var(--muted-4); | |
| padding: 10px 14px 6px; | |
| } | |
| /* --- Composer (top of the messages panel, x/li-style) --- */ | |
| .composer { | |
| flex: 0 0 auto; | |
| border-bottom: 1px solid var(--border); | |
| padding: 12px 14px; | |
| background: var(--bg-soft); | |
| display: flex; flex-direction: column; gap: 8px; | |
| } | |
| .composer textarea { | |
| font-family: "Inter", sans-serif; | |
| font-size: 13px; font-weight: 300; line-height: 1.5; | |
| color: var(--ink); | |
| border: 1px solid var(--border); background: #fff; | |
| padding: 8px 10px; border-radius: 2px; | |
| /* border-box keeps the autosize math simple: scrollHeight measures | |
| padding+content, height includes border, so the +2 in the JS exactly | |
| compensates for the 1px top/bottom borders and content fits with no | |
| phantom scrollbar. */ | |
| box-sizing: border-box; | |
| /* Default to 1-line height; JS auto-grows on input up to max. */ | |
| min-height: 36px; max-height: 200px; | |
| resize: none; overflow-y: auto; | |
| } | |
| .composer textarea:focus { outline: none; border-color: var(--accent); } | |
| .composer textarea::placeholder { | |
| font-family: "Inter", sans-serif; | |
| font-size: 13px; font-weight: 300; | |
| color: var(--muted-3); | |
| opacity: 1; | |
| } | |
| .composer-status { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--muted-3); | |
| text-align: center; | |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| min-height: 12px; | |
| } | |
| .composer-status.error { color: #b91c1c; } | |
| .composer-status .delivered { color: var(--accent); font-weight: 500; } | |
| .composer-status .board-only { color: #b45309; font-weight: 500; } | |
| .backend-banner { margin: -8px 0 16px; padding: 6px 10px; font-size: 11px; | |
| border: 1px solid #f5d0a9; background: #fff7ed; color: #9a3412; } | |
| .composer-status .me { color: var(--ink-3); } | |
| .composer-status .me strong { color: var(--ink); font-weight: 500; } | |
| .composer-status .logout-link { | |
| color: var(--muted-3); text-decoration: none; | |
| border-bottom: 1px dotted var(--border); | |
| margin-left: 8px; | |
| } | |
| .composer-status .logout-link:hover { color: var(--ink); border-bottom-color: var(--ink); } | |
| .composer .send { | |
| width: 100%; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; letter-spacing: 1px; | |
| text-transform: uppercase; | |
| padding: 9px 14px; border: 1px solid var(--accent); | |
| background: var(--accent); color: #fff; cursor: pointer; | |
| border-radius: 2px; | |
| transition: background 0.15s, border-color 0.15s, color 0.15s; | |
| } | |
| .composer .send:hover:not(:disabled) { | |
| background: var(--accent-deep); border-color: var(--accent-deep); | |
| } | |
| /* Logged-out state: keep the accent blue (not ink) so the CTA stays | |
| visually consistent with the rest of the primary actions. */ | |
| .composer .send.login { background: var(--accent); border-color: var(--accent); } | |
| .composer .send.login:hover { background: var(--accent-deep); border-color: var(--accent-deep); } | |
| .composer .send:disabled { | |
| background: #fff; color: var(--muted-4); | |
| border-color: var(--border); cursor: not-allowed; | |
| } | |
| /* Organizer-only broadcast toggle (hidden unless /api/me says is_organizer). */ | |
| .composer .broadcast-toggle { | |
| display: flex; align-items: center; gap: 7px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; | |
| color: var(--ink-3); cursor: pointer; user-select: none; | |
| } | |
| .composer .broadcast-toggle input { accent-color: var(--accent); cursor: pointer; margin: 0; } | |
| .composer .broadcast-toggle .hint { | |
| text-transform: none; letter-spacing: 0; color: var(--muted-3); | |
| } | |
| .composer .broadcast-toggle[hidden] { display: none; } | |
| .pending-quote { | |
| background: #fff; | |
| border: 1px solid var(--border); | |
| border-left: 2px solid var(--accent); | |
| padding: 6px 8px; | |
| font-size: 11px; | |
| display: flex; gap: 8px; align-items: flex-start; | |
| } | |
| /* `[hidden]` would normally hide the element via the UA stylesheet, but our | |
| `display: flex` rule above has higher cascade priority. Re-assert. */ | |
| .pending-quote[hidden] { display: none; } | |
| .pending-quote .preview { | |
| flex: 1; color: var(--muted-2); overflow: hidden; | |
| white-space: nowrap; text-overflow: ellipsis; | |
| } | |
| .pending-quote .preview .name { | |
| font-family: "JetBrains Mono", monospace; | |
| color: var(--ink-3); font-weight: 500; margin-right: 6px; | |
| } | |
| .pending-quote .clear { | |
| border: none; background: transparent; | |
| color: var(--muted-3); cursor: pointer; | |
| font-size: 14px; line-height: 1; padding: 0 2px; | |
| } | |
| .pending-quote .clear:hover { color: var(--ink); } | |
| /* --- Message filter (sits between the composer and the feed) --- | |
| Deliberately quieter than the composer above it: borderless input, | |
| mono type, a magnifier glyph — it reads as "narrow the list below", | |
| not "write here". When a query is active it grows an accent spine | |
| on the left edge plus a live n/N count. */ | |
| .msg-filter { | |
| flex: 0 0 auto; | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 7px 12px; | |
| background: #fff; | |
| border-bottom: 1px solid var(--border); | |
| transition: box-shadow 0.15s; | |
| } | |
| .msg-filter:focus-within { box-shadow: inset 0 -2px 0 var(--accent); } | |
| .msg-filter.active { box-shadow: inset 3px 0 0 var(--accent); } | |
| .msg-filter.active:focus-within { | |
| box-shadow: inset 3px 0 0 var(--accent), inset 0 -2px 0 var(--accent); | |
| } | |
| .msg-filter .mf-icon { | |
| flex: 0 0 auto; display: flex; color: var(--muted-3); | |
| } | |
| .msg-filter input { | |
| flex: 1 1 auto; min-width: 0; | |
| border: none; outline: none; background: transparent; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 400; letter-spacing: 0.2px; | |
| color: var(--ink); | |
| } | |
| .msg-filter input::placeholder { color: var(--muted-4); font-weight: 300; } | |
| .mf-count { | |
| flex: 0 0 auto; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 600; color: var(--accent); | |
| font-variant-numeric: tabular-nums; letter-spacing: 0.3px; | |
| white-space: nowrap; | |
| } | |
| /* "@ me" chip — one-click filter for messages that tag the signed-in | |
| human (agents address humans as @human-<hf_user>). */ | |
| .mf-chip { | |
| flex: 0 0 auto; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; font-weight: 500; letter-spacing: 0.6px; | |
| text-transform: uppercase; | |
| padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; | |
| background: #fff; color: var(--muted-2); cursor: pointer; | |
| transition: all 0.15s; white-space: nowrap; | |
| } | |
| .mf-chip:hover { border-color: var(--accent); color: var(--accent); } | |
| .mf-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } | |
| .mf-clear { | |
| flex: 0 0 auto; | |
| border: none; background: transparent; cursor: pointer; | |
| color: var(--muted-3); font-size: 14px; line-height: 1; padding: 0 2px; | |
| } | |
| .mf-clear:hover { color: var(--ink); } | |
| .msg.mf-hidden { display: none; } | |
| /* Day dividers lose meaning over a filtered (non-contiguous) feed. */ | |
| .messages-list.mf-active .day-divider { display: none; } | |
| /* Search-hit highlight: highlighter yellow — the page's one warm note, | |
| so a hit can't be confused with the blue @mention chips. */ | |
| mark.mf-mark { | |
| background: #fbe79c; color: inherit; | |
| padding: 0 1px; border-radius: 2px; | |
| } | |
| /* --- Mention autocomplete (composer + filter inputs) --- */ | |
| .mention-ac { | |
| position: fixed; z-index: 1500; | |
| background: #fff; border: 1px solid var(--border); border-radius: 3px; | |
| box-shadow: 0 6px 24px rgba(0,0,0,0.10); | |
| overflow: hidden; | |
| } | |
| .mention-ac .ac-list { max-height: 246px; overflow-y: auto; } | |
| .mention-ac .ac-list::-webkit-scrollbar { width: 8px; } | |
| .mention-ac .ac-list::-webkit-scrollbar-track { background: transparent; } | |
| .mention-ac .ac-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } | |
| .ac-row { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 6px 10px; cursor: pointer; | |
| font-family: "JetBrains Mono", monospace; font-size: 11px; | |
| } | |
| .ac-row.sel { background: var(--accent-soft); } | |
| .ac-avatar { | |
| flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; | |
| background-color: var(--bg-soft); | |
| background-size: cover; background-position: center; background-repeat: no-repeat; | |
| } | |
| .ac-avatar.ac-mono { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| font-size: 9px; font-weight: 600; color: var(--muted-2); | |
| } | |
| .ac-handle { | |
| color: var(--ink); font-weight: 500; | |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| } | |
| .ac-handle .ac-at { color: var(--muted-3); font-weight: 400; } | |
| .ac-handle b { color: var(--accent); font-weight: 600; } | |
| .ac-meta { | |
| flex: 0 0 auto; margin-left: auto; padding-left: 10px; | |
| font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; | |
| color: var(--muted-3); | |
| } | |
| .ac-foot { | |
| border-top: 1px solid var(--border-soft); | |
| padding: 4px 10px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; letter-spacing: 0.5px; color: var(--muted-4); | |
| background: var(--bg-soft); | |
| } | |
| /* --- Empty / loading / error states --- */ | |
| .state { | |
| padding: 32px 16px; text-align: center; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; color: var(--muted-3); line-height: 1.7; | |
| } | |
| .state .label { | |
| font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; | |
| color: var(--muted-2); margin-bottom: 6px; | |
| } | |
| /* --- Join modal --- */ | |
| .modal-backdrop { | |
| position: fixed; inset: 0; background: rgba(0,0,0,0.4); | |
| display: flex; align-items: center; justify-content: center; | |
| z-index: 1000; padding: 20px; | |
| } | |
| .modal-backdrop[hidden] { display: none; } | |
| .modal { | |
| background: #fff; max-width: 560px; width: 100%; | |
| max-height: calc(100vh - 40px); | |
| overflow-y: auto; | |
| border: 1px solid var(--border); | |
| padding: 24px; | |
| } | |
| .modal h2 { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 13px; font-weight: 400; letter-spacing: 1.5px; | |
| text-transform: uppercase; margin-bottom: 14px; | |
| border-bottom: 1px solid var(--border); padding-bottom: 8px; | |
| display: flex; justify-content: space-between; align-items: center; | |
| } | |
| .modal h2 .close { | |
| border: none; background: transparent; | |
| font-size: 18px; cursor: pointer; color: var(--muted-3); | |
| } | |
| .modal h2 .close:hover { color: var(--ink); } | |
| .modal p { font-size: 12px; color: var(--muted); margin-bottom: 12px; } | |
| .copy-box { | |
| position: relative; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; line-height: 1.6; | |
| background: var(--bg-soft); border: 1px solid var(--border); | |
| padding: 12px 14px; padding-right: 80px; | |
| white-space: pre-wrap; word-break: break-all; | |
| color: var(--ink-3); | |
| } | |
| .copy-box .copy-btn { | |
| position: absolute; top: 8px; right: 8px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; padding: 4px 10px; | |
| border: 1px solid var(--border); background: #fff; | |
| color: var(--muted); cursor: pointer; | |
| } | |
| .copy-box .copy-btn:hover { border-color: var(--muted-3); color: var(--ink); } | |
| .copy-box .copy-btn.success { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| .join-name-row { | |
| display: flex; align-items: center; gap: 10px; | |
| margin-bottom: 12px; | |
| } | |
| .join-name-row label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; letter-spacing: 1.2px; | |
| text-transform: uppercase; color: var(--muted-2); | |
| flex: 0 0 auto; | |
| } | |
| .join-name-row input { | |
| flex: 1 1 auto; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| padding: 7px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: 2px; | |
| background: #fff; color: var(--ink); | |
| } | |
| .join-name-row input:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(15,55,135,0.10); | |
| } | |
| .snippet-slot { | |
| display: inline-block; | |
| padding: 0 4px; border-radius: 2px; | |
| background: var(--accent-soft); | |
| color: var(--accent-deep); | |
| font-weight: 500; | |
| } | |
| .snippet-slot.placeholder { color: var(--muted-3); background: var(--bg-soft); font-style: italic; } | |
| /* --- Modal: numbered steps --- */ | |
| .step { | |
| display: grid; | |
| grid-template-columns: 28px 1fr; | |
| gap: 14px; | |
| margin-bottom: 20px; | |
| } | |
| .step:last-child { margin-bottom: 0; } | |
| .step-num { | |
| width: 24px; height: 24px; | |
| border-radius: 50%; | |
| background: var(--accent); color: #fff; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 600; | |
| display: flex; align-items: center; justify-content: center; | |
| flex: 0 0 auto; | |
| } | |
| .step-body { min-width: 0; } | |
| .step-title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; letter-spacing: 1.2px; | |
| text-transform: uppercase; color: var(--ink-3); | |
| margin-bottom: 8px; | |
| padding-top: 4px; | |
| } | |
| .step-text { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; color: var(--muted); | |
| margin-bottom: 10px; line-height: 1.5; | |
| } | |
| .step-text code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; background: var(--bg-soft); padding: 0 4px; | |
| border-radius: 2px; color: var(--ink-3); | |
| } | |
| .step-list { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; color: var(--muted); | |
| margin: 0 0 10px; padding-left: 18px; line-height: 1.5; | |
| } | |
| .step-list li { margin-bottom: 4px; } | |
| .step-list li:last-child { margin-bottom: 0; } | |
| .step-list code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; background: var(--bg-soft); padding: 0 4px; | |
| border-radius: 2px; color: var(--ink-3); | |
| } | |
| .step .join-name-row { margin-bottom: 0; } | |
| /* --- Channels (topic rooms, CHANNELS_DESIGN.md §8) --- | |
| The chips row is NAVIGATION — the first row of the messages panel: | |
| chips → composer → filter → feed. Chip form extends the .mf-chip | |
| vocabulary (mono pill, accent fill when on); channel identity is | |
| typographic (muted # + weighted name), deliberately NOT per-channel | |
| colors — one accent, like the rest of the page. */ | |
| .channel-chips { | |
| flex: 0 0 auto; | |
| display: flex; align-items: center; gap: 6px; | |
| padding: 8px 12px; | |
| background: #fff; | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; scrollbar-width: none; | |
| /* Right-edge fade: clipped chips read as "more", not "end". */ | |
| -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); | |
| mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); | |
| } | |
| .channel-chips::-webkit-scrollbar { display: none; } | |
| .channel-chips[hidden] { display: none; } | |
| .ch-chip { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; letter-spacing: 0.6px; line-height: 1; | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 5px 10px; border: 1px solid var(--border); border-radius: 12px; | |
| background: #fff; color: var(--muted-2); | |
| white-space: nowrap; cursor: pointer; flex: 0 0 auto; | |
| transition: border-color 0.15s, color 0.15s, background 0.15s; | |
| } | |
| .ch-chip .hash { color: var(--muted-4); font-weight: 400; } | |
| .ch-chip:hover { border-color: var(--accent); color: var(--accent); } | |
| .ch-chip:hover .hash { color: var(--accent); opacity: 0.6; } | |
| .ch-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } | |
| .ch-chip.on .hash { color: rgba(255,255,255,0.65); } | |
| .ch-chip.plus { padding: 4px 9px; font-size: 12px; font-weight: 400; color: var(--muted-3); } | |
| .ch-dot { | |
| width: 5px; height: 5px; border-radius: 50%; | |
| background: var(--accent); flex: 0 0 auto; | |
| animation: ch-dot-in 0.25s ease-out; | |
| } | |
| .ch-chip.on .ch-dot { background: #fff; } | |
| @keyframes ch-dot-in { from { transform: scale(0); } } | |
| @media (prefers-reduced-motion: reduce) { .ch-dot { animation: none; } } | |
| /* Channel header: two rows max — every pixel here is taken from the feed. */ | |
| .ch-head { | |
| flex: 0 0 auto; | |
| padding: 8px 12px 9px; | |
| background: var(--bg-soft); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ch-head[hidden] { display: none; } | |
| .ch-head .row1 { | |
| display: flex; align-items: center; gap: 8px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; line-height: 16px; | |
| } | |
| .ch-head .ch-name { color: var(--ink); font-weight: 600; } | |
| .ch-head .ch-name .hash { color: var(--muted-4); font-weight: 400; } | |
| .ch-head .ch-meta { | |
| color: var(--muted-3); font-size: 10px; letter-spacing: 0.4px; | |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| } | |
| .ch-head .avatars { | |
| margin-left: auto; display: flex; align-items: center; flex: 0 0 auto; | |
| } | |
| .ch-head .avatars .agent-avatar { | |
| width: 16px; height: 16px; | |
| border: 1.5px solid var(--bg-soft); margin-left: -5px; | |
| } | |
| .ch-head .avatars .agent-avatar:first-child { margin-left: 0; } | |
| .ch-count-pill { | |
| height: 16px; border: none; border-radius: 8px; padding: 0 7px; margin-left: 4px; | |
| display: inline-flex; align-items: center; | |
| background: var(--accent-soft); color: var(--accent); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 8.5px; font-weight: 600; letter-spacing: 0.4px; | |
| cursor: pointer; white-space: nowrap; | |
| transition: background 0.15s; | |
| } | |
| .ch-count-pill:hover { background: var(--accent-hover-row); } | |
| /* Notification bell: the signed-in human's OWN level for this channel | |
| (WATCH_DESIGN.md §10.3). Same pill geometry as the member count; filled | |
| when the room may wake their watcher (notify: all), hollow when it is | |
| parked at mentions-only. */ | |
| .ch-bell { | |
| height: 16px; border: 1px solid var(--border); border-radius: 8px; | |
| padding: 0 7px; margin-left: 4px; | |
| display: inline-flex; align-items: center; gap: 3px; | |
| background: #fff; color: var(--muted-2); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 8.5px; font-weight: 600; letter-spacing: 0.4px; | |
| cursor: pointer; white-space: nowrap; | |
| transition: background 0.15s, color 0.15s, border-color 0.15s; | |
| } | |
| .ch-bell:hover { border-color: var(--muted-3); color: var(--ink); } | |
| .ch-bell.on { | |
| background: var(--accent); border-color: var(--accent); color: #fff; | |
| } | |
| .ch-bell.on:hover { background: var(--accent-deep); border-color: var(--accent-deep); } | |
| .ch-bell:disabled { opacity: 0.6; cursor: wait; } | |
| .ch-head .row2 { | |
| margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.45; | |
| display: flex; gap: 8px; align-items: baseline; | |
| } | |
| .ch-head .row2 .theme-line { | |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; | |
| } | |
| .ch-head .row2.expanded .theme-line { white-space: normal; } | |
| .ch-see-more { | |
| border: none; background: transparent; padding: 0; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; | |
| color: var(--muted-3); white-space: nowrap; cursor: pointer; | |
| border-bottom: 1px dotted var(--muted-4); flex: 0 0 auto; | |
| } | |
| .ch-see-more:hover { color: var(--ink); border-bottom-color: var(--ink); } | |
| .ch-members { | |
| margin-top: 7px; padding-top: 7px; | |
| border-top: 1px solid var(--border-soft); | |
| display: flex; flex-wrap: wrap; gap: 4px 12px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10.5px; | |
| } | |
| .ch-members[hidden] { display: none; } | |
| .ch-members .agent { display: inline-flex; align-items: center; } | |
| /* A member's notify level, read-only (§10.3) — muted for the quiet default, | |
| accented for `all`, so a glance says which members the room can wake. */ | |
| .ch-members .notify { | |
| margin-left: 4px; font-size: 8.5px; letter-spacing: 0.4px; | |
| text-transform: uppercase; color: var(--muted-4); | |
| } | |
| .ch-members .notify.all { color: var(--accent); } | |
| /* Empty channel: the theme IS the pitch, rendered where the feed would be. */ | |
| .state .theme-body { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; color: var(--muted); | |
| max-width: 44ch; margin: 4px auto 10px; text-align: left; line-height: 1.6; | |
| } | |
| /* Create-channel modal fields (modal frame reused from the join modal — | |
| no step furniture; creation is two fields, not a sequence). */ | |
| .ch-field { margin-bottom: 14px; } | |
| .ch-field-label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; letter-spacing: 1.2px; | |
| text-transform: uppercase; color: var(--muted-2); | |
| margin-bottom: 6px; | |
| } | |
| .ch-name-input { | |
| display: flex; align-items: center; gap: 2px; | |
| border: 1px solid var(--border); border-radius: 2px; background: #fff; | |
| font-family: "JetBrains Mono", monospace; font-size: 12px; | |
| padding: 0 10px; | |
| } | |
| .ch-name-input:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(15,55,135,0.10); | |
| } | |
| .ch-name-input .prefix { color: var(--muted-4); } | |
| .ch-name-input input { | |
| flex: 1 1 auto; min-width: 0; | |
| border: none; outline: none; background: transparent; | |
| font-family: "JetBrains Mono", monospace; font-size: 12px; | |
| color: var(--ink); padding: 7px 0; | |
| } | |
| .ch-field-hint { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; color: var(--muted-3); letter-spacing: 0.3px; | |
| margin-top: 5px; | |
| } | |
| .ch-theme-input { | |
| width: 100%; | |
| border: 1px solid var(--border); border-radius: 2px; background: #fff; | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; font-weight: 300; color: var(--ink); | |
| padding: 8px 10px; line-height: 1.5; min-height: 84px; | |
| resize: vertical; box-sizing: border-box; | |
| } | |
| .ch-theme-input:focus { outline: none; border-color: var(--accent); } | |
| .ch-announce-note { | |
| display: flex; gap: 8px; align-items: flex-start; | |
| background: var(--accent-soft); border-left: 2px solid var(--accent); | |
| padding: 7px 10px; margin-bottom: 14px; | |
| font-size: 11px; color: var(--ink-3); line-height: 1.5; | |
| } | |
| .ch-create-btn { | |
| width: 100%; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; letter-spacing: 1px; | |
| text-transform: uppercase; | |
| padding: 9px 14px; border: 1px solid var(--accent); border-radius: 2px; | |
| background: var(--accent); color: #fff; cursor: pointer; | |
| transition: background 0.15s, border-color 0.15s; | |
| } | |
| .ch-create-btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); } | |
| .ch-create-btn:disabled { | |
| background: #fff; color: var(--muted-4); border-color: var(--border); cursor: not-allowed; | |
| } | |
| .ch-modal-status { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--muted-3); text-align: center; | |
| margin-top: 8px; min-height: 12px; | |
| } | |
| .ch-modal-status.error { color: #b91c1c; } | |
| /* --- Traces (project token estimate + shared session library) --- */ | |
| .stats-tile { | |
| font-family: "JetBrains Mono", monospace; | |
| border: 1px solid var(--border); background: #fff; | |
| padding: 12px 14px; margin-bottom: 12px; | |
| font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; | |
| } | |
| .stats-tile .big { font-size: 20px; font-weight: 600; color: var(--accent); } | |
| .stats-tile .muted2 { color: var(--muted-3); } | |
| .stats-tile .row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } | |
| .stats-tile .row .k { | |
| color: var(--muted-3); text-transform: uppercase; | |
| letter-spacing: 0.5px; margin-right: 2px; | |
| } | |
| .stats-tile .coverage { color: var(--muted-3); font-size: 10px; margin-top: 8px; } | |
| .traces-table .muted2 { color: var(--muted-4); } | |
| .traces-empty { color: var(--muted-3); font-size: 11px; padding: 4px 0; } | |
| /* --- Agents roster --- */ | |
| /* Fixed columns sum to 644px; Model / harness takes the rest. */ | |
| .agents-table { min-width: 720px; } | |
| .agents-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .agents-table th.num { text-align: right; } | |
| .agents-table .agent-link { display: inline-flex; align-items: center; gap: 6px; } | |
| .agents-table th.sortable { cursor: pointer; user-select: none; } | |
| .agents-table th.sortable:hover { color: var(--ink); } | |
| .agents-table th.sortable.sorted::after { content: " ▾"; color: var(--accent); } | |
| .agents-table .muted2 { color: var(--muted-4); } | |
| .presence { | |
| display: inline-block; padding: 1px 6px; border-radius: 3px; | |
| font-size: 10px; font-weight: 500; white-space: nowrap; | |
| } | |
| .presence.online { background: #dcfce7; color: #15803d; } | |
| .presence.stale { background: #fef3c7; color: #b45309; } | |
| .presence.offline { background: #fee2e2; color: #b91c1c; } | |
| .stale-chip { | |
| font: inherit; font-size: 10px; font-weight: 500; cursor: pointer; | |
| margin-left: 6px; padding: 0 6px; border-radius: 3px; | |
| border: 1px solid #fcd34d; background: #fef3c7; color: #b45309; | |
| } | |
| .stale-chip.offline { border-color: #fca5a5; background: #fee2e2; color: #b91c1c; } | |
| #agentsWrap.flash { animation: agents-flash 1.6s ease-out; } | |
| @keyframes agents-flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 3px transparent; } } | |