/* Dark workspace theme: neutral greys, one purple accent, and semantic colours kept separate from it — agent green, warning amber, error red. */ :root { --bg: #1c1c1c; --sidebar: #171717; --panel: #1f1f1f; --card: #262626; --card-2: #2d2d2d; /* Secondary interaction (hover, pressed, selected) reads light purple. The message composer and a person's own bubbles carry the accent. */ --hover: #2b2637; --hover-strong: #332c45; --border: #2e2e2e; --border-strong: #3a3a3a; /* Interaction borders, previously written as one-off hexes in a dozen rules. */ --border-hover: #4a4a4a; --code-bg: #181818; --violet-hover: #3d3554; --border-focus: #5a5a5a; --violet-border: #554a73; --accent-hover: #6a48f0; --ink: #ededed; --ink-2: #c9c9c9; /* App text grey. Kept separate from the shadcn --muted SURFACE token below, which Tailwind utilities like bg-muted resolve against. */ --text-muted: #8f8f8f; --muted: #2a2a2a; --muted-foreground: #8f8f8f; --faint: #6a6a6a; /* One accent, purple. A solid fill needs to be deeper than the light violet used for text and borders, or white on it is unreadable. */ --accent: #7c5cff; --accent-soft: rgb(124 92 255 / .16); --human: #a898ff; --agent: #4fd1a1; --agent-soft: rgb(79 209 161 / .10); --violet: #a898ff; --violet-soft: rgb(168 152 255 / .12); --amber: #f2b453; --amber-soft: rgb(242 180 83 / .12); --red: #ff7b72; --red-soft: rgb(255 123 114 / .12); /* Chart fills. Deliberately quieter than the accent: a usage bar is something you glance at, not something that should pull the eye across the dialog. Two tints of one hue, so the stack reads as one measure in two parts rather than as two competing colours. */ --chart-1: #7e83a8; --chart-2: #4c5070; --chart-track: rgb(255 255 255 / .06); --radius: 12px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color-scheme: dark; } /* Light theme. Same shapes, same purple, inverted surfaces. The greys are flipped wholesale — a dark panel becomes a white one — but the text is not: white backgrounds need a darker ink than black backgrounds need a light one, and the semantic colours (agent green, amber, red) and the accent all have to come down in lightness or they vibrate on white. `.dark` is on by default, so this applies only once it is taken off. */ :root:not(.dark) { --bg: #ffffff; --sidebar: #f7f7f8; --panel: #ffffff; --card: #f8f8fa; --card-2: #eeeef1; --hover: #f2eefb; --hover-strong: #e7dffa; --border: #e7e7ea; --border-strong: #d8d8de; --border-hover: #bcbcc5; --code-bg: #f6f6f8; --violet-hover: #ece5fd; --border-focus: #a5a5b0; --violet-border: #c7bbf4; --ink: #18181b; --ink-2: #3f3f46; --text-muted: #67676f; --muted: #f1f1f4; --muted-foreground: #67676f; --faint: #8b8b95; /* The filled accent has to carry white text, so it is a step deeper than the dark theme's; the light violet used for text and borders goes the other way, because on white it has to darken to stay legible. */ --accent: #6338e6; --accent-hover: #5730d4; --accent-soft: rgb(99 56 230 / .10); --human: #5730d4; --violet: #5b34dd; --violet-soft: rgb(91 52 221 / .10); --agent: #0f7f63; --agent-soft: rgb(15 127 99 / .10); --amber: #9a6300; --amber-soft: rgb(154 99 0 / .12); --red: #c0392e; --red-soft: rgb(192 57 46 / .10); --chart-1: #9ca2c4; --chart-2: #6f74a0; --chart-track: rgb(17 17 24 / .05); color-scheme: light; } * { box-sizing: border-box; } html, body, #root { height: 100%; } body { margin: 0; font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } body.resizing { cursor: col-resize; user-select: none; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--human); } code, .mono { font-family: var(--mono); font-size: .92em; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .muted { color: var(--text-muted); } .small { font-size: 12.5px; } .error { color: var(--red); margin-top: 16px; } /* ── primitives ───────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--card); cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--ink); font-size: 13px; } .btn:hover:not(:disabled) { background: var(--card-2); } .btn:disabled { opacity: .55; cursor: default; } .btn.on { background: var(--hover-strong); border-color: var(--violet-border); color: var(--violet); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover:not(:disabled) { background: var(--accent-hover); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.ghost:hover:not(:disabled) { background: var(--hover); } .btn.danger { color: var(--red); } .btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; } .btn-count { font-size: 11px; color: var(--text-muted); background: var(--bg); border-radius: var(--r-sm); padding: 0 6px; line-height: 18px; } .badge-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 0 2px var(--card); } .link-btn { border: 0; background: none; padding: 0; color: var(--human); cursor: pointer; font-size: 12px; font-weight: 500; } .link-btn:hover { text-decoration: underline; } .icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); flex: none; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; text-decoration: none; } .icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--ink); } .icon-btn:disabled { opacity: .4; cursor: default; } .icon-btn.on { color: var(--violet); background: var(--violet-soft); } .icon-btn.danger:hover:not(:disabled) { color: var(--red); background: var(--red-soft); } .icon-btn.tiny { width: 24px; height: 24px; border-radius: var(--r-sm); } .select { height: 32px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); padding: 0 10px; } kbd { font: 500 11px var(--font); color: var(--text-muted); background: var(--card-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 5px; line-height: 17px; min-width: 18px; text-align: center; } .kbd-hint { font-size: 11.5px; color: var(--faint); margin-left: auto; padding: 0 8px; white-space: nowrap; } .spinner { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .25; } } .shimmer { animation: pulse 1.4s ease-in-out infinite; } .avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--border-strong); color: var(--ink); font-weight: 600; letter-spacing: .01em; line-height: 1; } .agent-mark { display: inline-grid; place-items: center; flex: none; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); } .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--r-sm); background: var(--card-2); color: var(--text-muted); font-weight: 600; } .role-owner { background: var(--violet-soft); color: var(--violet); } .role-editor { background: var(--accent-soft); color: var(--human); } .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px; border-radius: var(--r-sm); } .tag.warn { background: var(--amber-soft); color: var(--amber); } .stamp { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 8px; } .chip-mini { font-size: 10.5px; padding: 0 6px; border-radius: var(--r-sm); background: var(--card-2); color: var(--text-muted); margin-left: 6px; line-height: 17px; display: inline-block; } .chip-mini.ok { background: var(--agent-soft); color: var(--agent); } .chip-mini.warn { background: var(--amber-soft); color: var(--amber); } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); } .status-dot.connected { background: var(--agent); box-shadow: 0 0 0 3px var(--agent-soft); } .status-dot.error { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .status-dot.unknown { background: var(--amber); } /* switch + segmented */ .switch { width: 34px; height: 20px; border-radius: var(--r-pill); border: 0; padding: 2px; background: var(--border-hover); cursor: pointer; flex: none; display: inline-flex; transition: background .15s; } .switch span { width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; } .switch.on { background: var(--accent); } .switch.on span { transform: translateX(14px); } .switch:disabled { opacity: .5; cursor: default; } .segmented { display: inline-flex; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 2px; gap: 2px; } .segmented button { border: 0; background: transparent; color: var(--text-muted); height: 26px; padding: 0 11px; border-radius: var(--r-md); font-size: 12.5px; cursor: pointer; } .segmented button:hover { color: var(--ink); } .segmented button.on { background: var(--hover-strong); color: var(--violet); box-shadow: 0 1px 2px rgb(0 0 0 / .3); } .segmented.full { display: flex; } .segmented.full button { flex: 1; } /* menu (portal) */ /* Wide enough that a label and its hint sit on one line. Without a minimum, a long hint wrapped and pushed the label out of the row entirely, so the menu showed a description with nothing to describe. */ .menu { position: fixed; z-index: 100; padding: 4px; max-height: 70vh; overflow-y: auto; min-width: 220px; max-width: min(380px, 92vw); } .menu-item { /* Height grows rather than clipping: a row's hint is the thing that explains it, so it wraps instead of being cut off. Short hints still sit on the same line as their label. */ display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 5px 10px; border: 0; background: transparent; border-radius: var(--r-md); color: var(--ink-2); cursor: pointer; font-size: 13px; text-align: left; } .menu-item:hover:not(:disabled) { background: var(--hover); color: var(--ink); } .menu-item svg { color: var(--text-muted); flex: none; } .menu-item.danger, .menu-item.danger svg { color: var(--red); } .menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-spacer { width: 14px; flex: none; } .menu-check { color: var(--violet) !important; } /* Every row in a menu that ticks anything keeps the tick's column, so the ticks line up with each other instead of trailing each label's hint. */ .menu-tick { width: 13px; flex: none; } /* Model and reasoning, side by side: the same decision taken twice — how much to spend on this run — so they open together rather than as two pills a person has to learn to visit in turn. */ .model-pop { position: fixed; z-index: 90; display: grid; grid-template-columns: 1fr 210px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 18px 48px rgb(0 0 0 / .34); overflow: hidden; } .model-pop-col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 8px; } .model-pop-col.reasoning { border-left: 1px solid var(--border); background: var(--panel); overflow: visible; } .model-pop-head { padding: 6px 8px 8px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .model-pop-group + .model-pop-group { margin-top: 6px; } .model-pop-vendor { padding: 5px 8px 4px; font-size: 11px; font-weight: 600; color: var(--ink-2); } .model-pop-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 8px; border: 0; background: none; border-radius: var(--r-md); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); text-align: left; } .model-pop-row:hover { background: var(--hover); } .model-pop-row.on { background: var(--violet-soft); color: var(--violet); } .model-pop-row.tall { height: auto; align-items: flex-start; flex-direction: column; gap: 1px; padding: 8px; } .model-pop-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-pop-meta { flex: none; font-size: 11px; color: var(--faint); white-space: nowrap; } .model-pop-row.on .model-pop-meta { color: var(--violet); opacity: .8; } .model-pop-sub { font-size: 11px; color: var(--text-muted); } .model-pop-row.tall.on .model-pop-sub { color: var(--violet); opacity: .85; } .model-pop-check { flex: none; margin-left: 2px; } .model-pop-row.tall .model-pop-check { position: absolute; right: 10px; } .model-pop-row.tall { position: relative; } .model-pop-note { margin: auto 0 0; padding: 10px 8px 4px; font-size: 11px; line-height: 1.5; color: var(--faint); } .model-pill-sep { color: var(--faint); margin: 0 -2px; } .defaults-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .defaults-state { min-width: 70px; } @media (max-width: 620px) { .model-pop { grid-template-columns: 1fr; } .model-pop-col.reasoning { border-left: 0; border-top: 1px solid var(--border); } } /* The hint stays on one line. A wrapped hint makes one row taller than the rest, and a column of uneven rows reads as broken rather than as informative — so the menu is sized to fit label and hint together, and the label is what gives way if something still doesn't fit. */ .menu-item kbd { background: none; border: 0; color: var(--faint); flex: 0 0 auto; min-width: 0; text-align: right; white-space: nowrap; line-height: 1.35; font-size: 11.5px; } .menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-heading { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 3px; } .menu-heading:empty { padding: 0; margin: 4px 6px; border-top: 1px solid var(--border-strong); } .inline-edit { flex: 1; min-width: 0; height: 26px; border-radius: var(--r-sm); border: 1px solid var(--accent); background: var(--bg); padding: 0 7px; outline: none; font-size: 13px; } /* ── shell ────────────────────────────────── */ .shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100vh; overflow: hidden; } .shell.collapsed { grid-template-columns: minmax(0, 1fr); } .main { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); } .icon-btn.expand { position: absolute; top: 12px; left: 12px; z-index: 5; } .shell.collapsed .topbar { padding-left: 56px; } .shell.collapsed .page { padding-top: 56px; } .sb-backdrop { display: none; } /* ── sidebar ──────────────────────────────── */ .sidebar { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--sidebar); border-right: 1px solid var(--border); padding: 14px 10px 10px; } .sb-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px 10px; } .brand { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .brand-mark { color: var(--accent); } .sb-head-actions { display: flex; gap: 2px; } .sb-search-wrap { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; padding: 0 10px; height: 34px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--text-muted); } .sb-search-wrap:focus-within { border-color: var(--accent); } .sb-search { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; height: 100%; } /* Work / Code: which half of the product you're in. It sits above the nav because it changes what the nav means, rather than being another destination. */ .sb-surface { display: flex; gap: 2px; margin: 0 10px 8px; padding: 2px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); } .sb-surface-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease; } .sb-surface-tab:hover { color: var(--ink-2); } .sb-surface-tab.on { background: var(--hover-strong); color: var(--violet); } .sb-surface-tab svg { flex: none; } .sb-nav { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; } /* every row is a single flex line; titles truncate, never wrap */ .sb-item { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-width: 0; height: 34px; padding: 0 8px 0 10px; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; color: var(--ink-2); text-align: left; font-size: 13.5px; position: relative; user-select: none; } .sb-item:hover { background: var(--hover); color: var(--ink); } .sb-item.active { background: var(--hover-strong); color: var(--ink); } .sb-item.on { background: var(--hover); color: var(--ink); } .sb-item.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--violet); } .sb-item > svg { flex: none; color: var(--text-muted); } .sb-item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-item kbd { background: none; border: 0; color: var(--faint); } .sb-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; } .sb-role { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; flex: none; } .sb-time { font-size: 11px; color: var(--faint); flex: none; font-variant-numeric: tabular-nums; } .sb-meta { font-size: 11px; color: var(--faint); flex: none; } .sb-actions { display: none; align-items: center; gap: 1px; flex: none; margin-right: -4px; } .sb-item:hover .sb-actions, .sb-item:focus-within .sb-actions, .sb-item.menu-open .sb-actions { display: flex; } .sb-item:hover .sb-time, .sb-item.menu-open .sb-time, .sb-item:focus-within .sb-time, .sb-project-row:hover .sb-count, .sb-project-row:focus-within .sb-count { display: none; } /* Touch screens can't hover, so row actions are always shown there. */ @media (hover: none) { .sb-actions { display: flex; } .sb-time, .sb-project-row .sb-count { display: none; } } .sb-session { height: 32px; font-size: 13px; } .sb-session[draggable="true"]:active { cursor: grabbing; } .sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -10px; padding: 0 10px 8px; } .sb-section-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 4px 6px; } /* The heading is the control: the whole label folds the section, and the caret sits where a project's caret sits so the two read as the same gesture. */ .sb-section-toggle { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; border: 0; background: none; padding: 0 4px; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; } .sb-section-toggle:hover .sb-section-title { color: var(--ink-2); } /* The shared heading rule below carries a 10px bottom margin, which in a centre-aligned flex row lifts the label five pixels off the caret. Inside the toggle the label is a row item, not a heading above a block. */ .sb-section-toggle .sb-section-title { margin: 0; line-height: 1; } .sb-section-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; padding-right: 6px; } /* The count sits beside the action, so the two don't fight for the right edge. */ .sb-section-head .sb-section-count { padding-right: 2px; margin-left: auto; } .sb-section-action { display: inline-flex; align-items: center; } /* A request is a person you haven't agreed to yet: same row, quieter, and the two buttons that answer it are always visible rather than on hover. */ .sb-person.sb-request .sb-person-actions, .sb-person.sb-pending .sb-person-actions { position: static; opacity: 1; background: transparent; transform: none; padding-left: 0; margin-left: auto; } .sb-person.sb-request .sb-item-title { color: var(--ink); } .sb-person.sb-pending .sb-item-title { color: var(--text-muted); } .notice-banner { display: flex; align-items: center; gap: 8px; border: 1px solid var(--agent); background: var(--agent-soft); color: var(--ink); border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; margin-bottom: 8px; } .notice-banner .icon-btn { margin-left: auto; } /* Anything that floats above the page — a dropdown, a popover, a modal — is the same material: one surface, one border, one shadow. Only the radius steps up with size, so a dense menu doesn't look like a dialog. */ .menu, .popover, .modal { background: var(--card); border: 1px solid var(--border-strong); box-shadow: 0 16px 48px rgb(0 0 0 / .5); } .menu { border-radius: var(--r-md); } .popover, .modal { border-radius: var(--r-lg); } /* ── design system ─────────────────────────────────────────────────── Surfaces, headings and action rows, defined once. The audit found the same idea written three ways: cards on --panel, --card and --bg; borders on --border and --border-strong; four class names for one button row; modal headings at 19px beside 16.5px. These rules are what the rest of the file now composes from, rather than each component inventing its own surface. */ /* A raised surface. Every card on every page uses this. */ .surface, .card, .agent-card, .conn-card, .catalog-card, .lane-card { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-lg); } /* Headings. One size per role, everywhere. */ .page-head h1 { font-size: 24px; } .modal h2, .confirm-head h2, .lanes-modal h2, .pop-head h2 { font-size: 17px; margin: 0; letter-spacing: -.01em; } /* Every dialog's button row: actions right, destructive last. */ .modal-actions, .confirm-actions, .lane-form-actions, .manual-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* The token modal shares the dialog shell; only its header differs. */ .token-modal { width: min(440px, 100%); } .token-modal-title { display: flex; align-items: center; gap: 11px; } .token-modal-title h2 { margin: 0; } .token-modal-title p { margin: 2px 0 0; } .token-modal input { height: 38px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; padding: 0 11px; } .token-modal input:focus { outline: none; border-color: var(--violet); } /* ── confirm dialog ────────────────────────────────────────────────── One dialog for every irreversible action, replacing window.confirm(). The title names the thing, the body names what is lost, and Cancel holds focus so the destructive button is never one stray Return away. */ .modal.confirm { width: min(420px, 100%); gap: 0; padding: 22px; } .confirm-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-md); background: var(--card-2); color: var(--text-muted); } .modal.confirm.danger .confirm-icon { background: var(--red-soft); color: var(--red); } .confirm-body { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .btn.destructive { background: var(--red); border-color: var(--red); color: #fff; } /* The background has to be restated: `.btn:hover` matches with the same specificity and would otherwise repaint this in the neutral hover fill, which in light mode is white text on white. */ .btn.destructive:hover:not(:disabled) { background: var(--red); border-color: var(--red); filter: brightness(1.08); } /* ── connections catalog ───────────────────────────────────────────── Connecting a service should not begin with finding an endpoint URL, so the directory comes first and the URL field is the fallback. */ .conn-section { margin-top: 26px; } /* One label for every section, on every page and in every panel. This was three near-identical rules, two of them both called .section-title, so whichever loaded last quietly won. */ .section-title, .pp-title, .lanes-title, .sb-section-title, .catalog-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 0 0 10px; } .pp-title, .catalog-label { margin-bottom: 6px; } /* Search and filter: 27 connectors is too many to scan, so the page has to be navigable by name rather than by scrolling. */ .catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .catalog-count { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .catalog-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .catalog-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px; height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg); } .catalog-search:focus-within { border-color: var(--violet); } .catalog-search > svg { color: var(--faint); flex: none; } .catalog-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font: inherit; font-size: 13.5px; } .catalog-search input::placeholder { color: var(--faint); } /* The tool prefix is what you type in an instruction, so it is copyable. */ .prefix-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .prefix-chip:hover { color: var(--violet); border-color: var(--violet-border); } .prefix-chip svg { opacity: .7; } .catalog-group + .catalog-group { margin-top: 18px; } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; } .catalog-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } /* The whole card is the target when a connector is connectable, not a 24px icon in its corner. A card that is already added is not a control. */ .catalog-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; width: 100%; font: inherit; color: inherit; text-align: left; transition: border-color .15s ease, background .15s ease; } button.catalog-card { cursor: pointer; } button.catalog-card:disabled { cursor: default; opacity: .6; } .catalog-cta { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-md); color: var(--text-muted); transition: color .15s ease, background .15s ease; } button.catalog-card:hover:not(:disabled) .catalog-cta { color: var(--violet); background: var(--violet-soft); } .catalog-card:hover { border-color: var(--violet); background: var(--hover); } .catalog-card.added { border-color: var(--agent); } .catalog-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--card-2); color: var(--ink-2); } .catalog-card:hover .catalog-mark { color: var(--violet); } /* Black brand marks (GitHub, Square) are invisible on this ground; flip them. */ .catalog-mark .logo-invert { filter: invert(1) brightness(1.6); } .catalog-main { flex: 1; min-width: 0; } .catalog-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); } .catalog-blurb { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; } .catalog-added { color: var(--agent); flex: none; display: grid; place-items: center; width: 30px; } .manual-form { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; padding: 14px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-lg); } .manual-form input { height: 36px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; padding: 0 10px; } .manual-form input:focus { outline: none; border-color: var(--violet); } .manual-form { margin-top: 0; margin-bottom: 14px; } /* The form sits under the controls row now, so its top margin would double up. */ .catalog-controls .btn { flex: none; height: 34px; } .setup-hint { margin: 0; line-height: 1.5; } /* ── lanes ─────────────────────────────────────────────────────────── Lane control lives in the session header: you set lanes up once, then take a wheel occasionally, so it doesn't earn permanent space above the feed. */ .lanes-pill { margin-left: 4px; } /* Wide enough for two tiles side by side, and it scrolls rather than squeezing when the window is small — the grid below drops to one column first. Qualified with .modal because the base modal width is declared later in this file and would otherwise win: every wider modal here is written this way. */ .modal.lanes-modal { width: min(860px, 100%); gap: 20px; padding: 24px; max-height: min(86vh, 920px); overflow-y: auto; } .lanes-sub { margin: 3px 0 0; max-width: 46ch; } .lanes-empty { margin: 0; font-size: 13px; color: var(--text-muted); } /* One lane, as a card: what it is, who drives it, what makes it run. */ .lane-list { display: flex; flex-direction: column; gap: 8px; } .lane-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; } .lane-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--faint); } .lane-dot.auto { background: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); } .lane-dot.driven { background: var(--agent); box-shadow: 0 0 0 3px var(--agent-soft); } .lane-card-main { flex: 1; min-width: 0; } .lane-card-top { display: flex; align-items: center; gap: 8px; } .lane-card-name { font-size: 14px; font-weight: 600; color: var(--ink); } .lane-state { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-sm); background: var(--agent-soft); color: var(--agent); } .lane-card-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); } .lane-card-meta span { display: inline-flex; align-items: center; gap: 4px; } .lane-card-meta svg { color: var(--faint); flex: none; } /* Presets: most people want a reviewer, a next step, or a second driver. */ .lane-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .lane-preset { flex: 1 1 160px; min-width: 150px; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; padding: 10px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg); color: inherit; font: inherit; transition: border-color .15s ease, background .15s ease; } .lane-preset:hover { border-color: var(--violet); background: var(--hover); } .lane-preset-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); background: var(--card-2); color: var(--ink-2); } .lane-preset-name { font-size: 13px; font-weight: 600; color: var(--ink); } .lane-preset-blurb { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; } .lane-custom { flex: 1 1 100%; justify-content: center; } /* The custom form: every field says what it does, because none of this is obvious. */ .lane-form { display: flex; flex-direction: column; gap: 12px; } .lane-field { display: flex; flex-direction: column; gap: 4px; } .lane-field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); } .lane-field small { font-size: 11.5px; color: var(--faint); } .lane-field input, .lane-field select { height: 36px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; padding: 0 10px; } .lane-field input:focus, .lane-field select:focus { outline: none; border-color: var(--violet); } /* Names the lane a message is going to, when it isn't the main one. */ .composer-lane { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--violet); color: var(--violet); } /* ── catch-up ──────────────────────────────────────────────────────── What happened while you were away. Built from the log, so it is instant and cannot invent anything. What blocks you is separated from general activity. */ .catchup { border: 1px solid var(--border-strong); background: var(--card); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 10px; } .catchup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .catchup-head strong { display: block; font-size: 13.5px; } .catchup-meta { font-size: 11.5px; color: var(--text-muted); } .catchup-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; } .catchup-needs { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--amber); background: var(--amber-soft); border-radius: var(--r-md); } .catchup-needs .catchup-label { color: var(--amber); } .catchup-needs p { margin: 0; font-size: 13px; color: var(--ink); } .catchup-needs p + p { margin-top: 4px; } .catchup-groups { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 12px; } .catchup-group { min-width: 180px; flex: 1 1 200px; } .catchup-group ul { margin: 0; padding-left: 16px; } .catchup-group li { font-size: 13px; color: var(--ink-2); margin-bottom: 2px; } .catchup-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .catchup-status { font-size: 12px; color: var(--text-muted); } /* Briefly marks the event the jump landed on, so the eye finds it. */ .seq-flash { animation: seqflash 1.6s ease-out; border-radius: var(--r-md); } @keyframes seqflash { 0% { background: var(--violet-soft); } 100% { background: transparent; } } /* ── lane colour in the feed ───────────────────────────────────────── A session can run several agents at once. Colour is the fast way to tell whose work a card is; the lane filter is the way to read one thread. */ .lane-filter { margin-left: 8px; } .lane-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .04em; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--lane-color, var(--border-strong)); color: var(--lane-color, var(--text-muted)); background: transparent; } .lane-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* Lane colours, assigned by position. Distinct from the accent and the agent green the UI already uses. */ .lane-c0 { --lane-color: var(--violet); } .lane-c1 { --lane-color: var(--amber); } .lane-c2 { --lane-color: var(--agent); } .lane-c3 { --lane-color: #ff9ecb; } .lane-c4 { --lane-color: #74c0e8; } .lane-c5 { --lane-color: #e8836f; } /* A run block from a non-main lane carries its colour down the left edge. */ .run-lane { border-left: 2px solid var(--lane-color); padding-left: 10px; } /* Invites addressed to this person, pinned above the profile card so the desktop app has somewhere to accept one without a link to paste. */ .sb-inbox { flex: none; padding: 4px 10px 8px; border-top: 1px solid var(--border); } .invite-card { border: 1px solid var(--violet); background: var(--violet-soft); border-radius: var(--r-lg); padding: 12px 14px; margin-top: 6px; } .invite-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invite-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .invite-actions { display: flex; gap: 6px; margin-top: 8px; } .invite-actions .btn { height: 26px; padding: 0 10px; font-size: 12.5px; } /* Five rows then scroll: the People directory grows without bound, and the invites card and profile below it must stay reachable. A person row is 34px. */ .sb-people { max-height: 170px; overflow-y: auto; overscroll-behavior: contain; } .sb-people::-webkit-scrollbar { width: 6px; } .sb-people::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-sm); } .sb-people::-webkit-scrollbar-track { background: transparent; } /* Contacts. The row is a container, not a control, so it says so — but it still highlights on hover, and reveals its actions there instead of crowding them in. */ .sb-person { cursor: default; } .sb-person:hover, .sb-person:focus-within { background: var(--hover); color: var(--ink); } .sb-person .sb-meta { opacity: .85; } /* Actions sit over the meta rather than beside it, so the name keeps its width and nothing shifts on hover. Hidden with opacity, never display:none — display:none drops them out of the tab order, which would put quick-add out of reach entirely. */ .sb-person-actions { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease; background: var(--hover); border-radius: var(--r-md); padding-left: 4px; } .sb-person:hover .sb-person-actions, .sb-person:focus-within .sb-person-actions { opacity: 1; } .sb-person:hover .sb-meta, .sb-person:focus-within .sb-meta { visibility: hidden; } /* A fresh "copied" confirmation outranks the hover swap, so it is actually read. */ .sb-person.copied .sb-meta { visibility: visible; color: var(--violet); opacity: 1; } .sb-person.copied .sb-person-actions { opacity: 0; pointer-events: none; } .sb-person-actions .icon-btn:disabled { opacity: .4; cursor: not-allowed; } .sb-empty { margin: 0; padding: 2px 10px 6px; font-size: 12px; color: var(--faint); line-height: 1.45; } .sb-empty.nested { padding-left: 12px; } .sb-empty-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0; padding: 7px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12.5px; } .sb-empty-btn:hover { color: var(--ink); border-color: var(--border-hover); } .sb-project { border-radius: var(--r-md); } .sb-project.drop, .sb-group.drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgb(124 92 255 / .5); } .sb-project-row { font-weight: 500; } /* A fixed, centred box: the two chevron glyphs fill their viewBox differently, so without one the label shifts sideways every time a section folds. */ .sb-caret { flex: none; display: block; width: 12px; height: 12px; color: var(--faint) !important; margin-right: -2px; } .sb-children { margin-left: 17px; padding-left: 6px; border-left: 1px solid var(--border); } .sb-group { border-radius: var(--r-md); padding-bottom: 2px; } .sb-conn { height: 32px; font-size: 13px; } .sb-foot { position: relative; border-top: 1px solid var(--border); padding-top: 8px; } /* The whole row is the account menu trigger, so it resets like a button. */ .sb-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px 7px 6px; border-radius: var(--r-md); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; } .sb-user:hover, .sb-user.on { background: var(--hover); } .sb-user-caret { flex: none; color: var(--text-muted); transition: transform .15s ease; } .sb-user.on .sb-user-caret { transform: rotate(180deg); } .sb-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .sb-user-name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-user-sub { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; min-width: 0; } .sb-user-sub > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Usage: two pools, never one combined number, because they are not the same kind of scarcity. Quiet by default — it is a status, not a call to action. */ .usage { padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 7px; } .usage-head { display: flex; align-items: center; justify-content: space-between; } .usage-title { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .usage-plan { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--panel); } .usage-plan.p-pro { color: var(--violet); border-color: var(--violet-border); background: var(--violet-soft); } .usage-plan.p-max { color: var(--agent); border-color: var(--agent); background: transparent; } .usage-row { display: flex; flex-direction: column; gap: 3px; } .usage-row.locked { opacity: .65; } .usage-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; } .usage-label { color: var(--ink-2); } .usage-value { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* One element, two layers: the track is the background, the fill is a gradient stop at --fill, so there is no inner div to keep in sync. */ .usage-bar { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--violet) 0 var(--fill, 0%), var(--border) var(--fill, 0%) 100%); } .usage-bar.near { background: linear-gradient(to right, var(--amber) 0 var(--fill), var(--border) var(--fill) 100%); } .usage-bar.out { background: linear-gradient(to right, var(--red) 0 var(--fill), var(--border) var(--fill) 100%); } /* A hint that shows on hover and on focus. The bubble is drawn in a portal at fixed coordinates rather than as an ::after, because inside a scrolling panel an absolutely-positioned one is clipped by its own container. */ .hint { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); cursor: help; vertical-align: middle; } .hint:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; } .hint-bubble { position: fixed; z-index: 200; pointer-events: none; padding: 9px 11px; border-radius: var(--r-md); background: var(--card); color: var(--ink-2); border: 1px solid var(--border-strong); box-shadow: 0 10px 30px rgb(0 0 0 / .3); font-size: 11.5px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; animation: hint-in .12s ease; } .hint-bubble.above { transform: translate(-50%, -100%); } .hint-bubble.below { transform: translate(-50%, 0); } @keyframes hint-in { from { opacity: 0; } to { opacity: 1; } } .settings-sub .hint { margin-left: 6px; } .today-cell-name { display: flex; align-items: center; gap: 6px; } .usage-legend-total { margin-left: auto; color: var(--faint); } .usage-bar.free { background: linear-gradient(to right, var(--chart-1) 0 var(--fill, 0%), var(--chart-track) var(--fill, 0%) 100%); } /* Seven columns, two pixels of weight each: enough to see a shape, quiet enough to sit in a sidebar without asking for attention. */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 2px; } .spark-bar { flex: 1; min-width: 0; border-radius: 2px; background: var(--chart-1); opacity: .55; } .spark-bar.today { opacity: 1; background: var(--chart-2); } .usage-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--faint); } .sb-menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; display: flex; flex-direction: column; gap: 6px; z-index: 10; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .45); } .sb-menu input { height: 32px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); padding: 0 10px; outline: none; } .sb-menu input:focus { border-color: var(--accent); } .sb-menu p { margin: 0; } .sb-menu .btn { align-self: flex-end; } /* ── home ─────────────────────────────────── */ .home { height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: max(10vh, 64px) 24px 48px; } .hero-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border-strong); color: var(--accent); margin-bottom: 20px; } .hero-icon.small { width: 38px; height: 38px; margin-bottom: 12px; } .hero-title { font-size: 32px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 26px; text-align: center; } .project-chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 6px 4px 12px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--border-strong); color: var(--ink-2); font-size: 13px; } .project-chip svg { color: var(--text-muted); } /* The inner box carries the composer's chrome; the card is just a width track. */ .composer-card { width: min(656px, 100%); background: transparent; border: 0; border-radius: var(--r-xl); padding: 0; } .composer-inner { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: 12px 12px 10px 12px; display: flex; flex-direction: column; gap: 8px; } .composer-inner:focus-within { border-color: var(--border-focus); } .composer-inner textarea { border: 0; outline: none; background: transparent; resize: none; padding: 4px 6px; min-height: 48px; max-height: 260px; font-size: 15px; line-height: 1.5; color: var(--ink); } .composer-inner textarea::placeholder { color: var(--faint); } .composer-inner textarea:disabled { cursor: not-allowed; } .title-input { border: 0; border-bottom: 1px solid var(--border); background: transparent; outline: none; padding: 2px 6px 8px; font-size: 15px; font-weight: 600; } .composer-bar { display: flex; align-items: center; gap: 4px; } /* The keyboard hint used to hold this gap open with margin-left:auto. With it gone the voice and send buttons keep the right edge to themselves. */ .composer-bar .voice-btn { margin-left: auto; } .composer-bar .voice-btn ~ .send { margin-left: 4px; } .model-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink); padding: 0 8px; white-space: nowrap; } .send { margin-left: 4px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; background: var(--accent); color: #fff; cursor: pointer; } .send:disabled { background: var(--border-strong); color: var(--faint); cursor: default; } .send:hover:not(:disabled) { background: var(--accent-hover); } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; max-width: 700px; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--ink-2); cursor: pointer; font-size: 13.5px; } .chip:hover { background: var(--hover); color: var(--ink); } .chip svg { color: var(--text-muted); } /* ── pages (connections) ──────────────────── */ .page { height: 100%; overflow-y: auto; padding: 40px 32px 60px; } .page-inner { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .page-head { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; } /* An action in the header sits at the far right, on the heading's baseline. */ .page-head-action { margin-left: auto; } .page-head h1 { margin: 0; letter-spacing: -.01em; } .page-head p { margin: 0; max-width: 620px; } .page-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border-strong); color: var(--accent); flex: none; } .page-note { margin: 4px 2px 0; } .card { padding: 16px; } .card-title { font-weight: 600; margin-bottom: 12px; } .form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; } .form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .form-grid label.wide:last-child { grid-column: 1 / -1; } .form-grid em { font-style: normal; } .form-grid input { height: 36px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); padding: 0 11px; outline: none; font-size: 13.5px; } .form-grid input:focus { border-color: var(--accent); } .form-foot { display: flex; align-items: flex-end; gap: 16px; margin-top: 12px; } .form-foot p { margin: 0; flex: 1; } .error-banner { background: var(--red-soft); border-color: rgb(255 123 114 / .35); color: var(--red); align-items: center; } .empty-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-xl); color: var(--text-muted); } .empty-card p { margin: 4px 0 0; } .conn-list { display: flex; flex-direction: column; gap: 10px; } .conn-card { padding: 12px 14px; } .conn-head { display: flex; align-items: center; gap: 12px; } .conn-id { flex: 1; min-width: 0; } .conn-name { font-weight: 600; } .conn-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conn-status { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 20px; color: var(--ink-2); } .conn-status .err { color: var(--red); } .conn-status .link-btn { margin-left: auto; } .tool-list { list-style: none; margin: 10px 0 0 20px; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .tool-list .mono { color: var(--ink); } /* ── modal / overlay ──────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgb(0 0 0 / .6); padding: 24px; } .modal { width: min(400px, 100%); padding: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .modal p { margin: 0 0 6px; } .modal input { height: 40px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); padding: 0 12px; outline: none; font-size: 15px; } .modal input:focus { border-color: var(--accent); } .modal .btn { height: 40px; justify-content: center; margin-top: 4px; } .modal.shortcuts { width: min(440px, 100%); padding: 20px 22px; } /* ── settings ──────────────────────────────────────────────────────── Sections down the left, one at a time on the right. The frame is a fixed size on every tab. A modal that grows and shrinks as you move between sections makes the whole app feel unsteady, and it is the reason a settings dialog ends up feeling cramped: each tab gets sized to its own shortest content instead of to the room the dialog actually has. */ .settings-modal { width: min(1040px, 94vw); height: min(720px, 88vh); padding: 0; display: grid; grid-template-columns: 236px 1fr; gap: 0; align-items: stretch; overflow: hidden; } .settings-nav { display: flex; flex-direction: column; gap: 3px; padding: 22px 14px; background: var(--panel); border-right: 1px solid var(--border); } .settings-nav-head { padding: 4px 10px 14px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .settings-tab { display: flex; align-items: center; gap: 10px; padding: 9px 11px; width: 100%; border: 0; background: none; border-radius: var(--r-md); font: inherit; font-size: 13.5px; color: var(--ink-2); text-align: left; cursor: pointer; } .settings-tab:hover { background: var(--hover); color: var(--ink); } .settings-tab.on { background: var(--violet-soft); color: var(--violet); font-weight: 500; } .settings-body { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px; border-bottom: 1px solid var(--border); flex: none; } .settings-head h2 { margin: 0; font-size: 17px; } .settings-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px 30px; } .settings-section { display: flex; flex-direction: column; gap: 26px; max-width: 680px; } /* A titled block: the heading, then whatever it introduces, with the gap between them declared once rather than as a margin on the heading that every neighbour then has to work around. */ .settings-block { display: flex; flex-direction: column; gap: 14px; } .settings-sub { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .settings-identity { display: flex; align-items: center; gap: 16px; } .settings-name { font-size: 16px; font-weight: 600; } .settings-field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--ink-2); } .settings-field > p { margin: 0; } .settings-field-row { display: flex; align-items: center; gap: 10px; } .settings-field-row input { flex: 1; min-width: 0; height: 38px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; padding: 0 12px; } .settings-field-row input:focus { outline: none; border-color: var(--violet); } .settings-field-row .btn { flex: none; height: 38px; margin: 0; padding: 0 20px; } /* Facts read as a table: label left, value right, one per row. A three-column grid made every row as tall as the longest value and broke a workspace name across two lines for no reason. */ .settings-facts { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; } .settings-facts .fact { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px; } .settings-facts .fact + .fact { border-top: 1px solid var(--border); } .settings-facts dt { flex: none; font-size: 12px; color: var(--text-muted); } .settings-facts dd { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; text-align: right; min-width: 0; } .settings-facts dd .mono { overflow: hidden; text-overflow: ellipsis; } .settings-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--border); } .settings-note { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; } .settings-note svg { flex: none; margin-top: 2px; } /* The plan you are on, and what today cost, side by side — the two halves of the same question. */ .settings-plan-now { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); } .settings-plan-now .usage { flex: 1; max-width: 300px; padding: 0; gap: 8px; } /* Three cards, one rhythm: name, price, terms, then the list. Every block starts at the same height in all three, so the eye compares prices and features across rather than reading each card top to bottom. */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } .plan-card { display: flex; flex-direction: column; padding: 18px 18px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); } .plan-card.current { border-color: var(--violet); background: var(--violet-soft); } .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; } .plan-name { font-weight: 600; font-size: 14px; letter-spacing: .01em; } .plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; } .plan-amount { font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plan-cadence { font-size: 12.5px; color: var(--text-muted); } .plan-terms { margin-top: 6px; min-height: 18px; } .plan-list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; } .plan-list li { display: flex; align-items: flex-start; gap: 8px; } .plan-list li svg { flex: none; margin-top: 2px; color: var(--agent); } .plan-list li.off { color: var(--faint); } .plan-list li.off svg { color: var(--faint); } .plan-card.current .plan-list { border-top-color: var(--violet-border); } /* Today, for a page with room: the plan and a running clock in the header, then one cell per pool. The sidebar meter says the same thing in 200px; this is what it would say if asked properly. */ .today-panel { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; } .today-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); } .today-title { font-size: 14px; font-weight: 600; } .today-reset { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .today-grid.one { grid-template-columns: 1fr 1fr; } .today-spark { margin-top: auto; padding-top: 6px; } .today-spark .spark { height: 44px; } .today-cell { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; min-width: 0; } .today-cell + .today-cell { border-left: 1px solid var(--border); } .today-cell.locked { opacity: .7; } .today-cell-name { font-size: 12px; color: var(--text-muted); } .today-cell-value { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .today-cell .usage-bar { margin-top: 4px; } .usage-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .usage-head-row .settings-sub { margin: 0; } .usage-head-row .segmented button { font-size: 11.5px; padding: 4px 11px; } .usage-head-row .settings-sub { display: flex; align-items: center; } /* One column per day, stacked by pool. Heights are relative to the busiest day, so the shape of a fortnight is readable without an axis to decode. */ .usage-chart { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding: 14px 16px 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); } .usage-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; } .usage-stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 26px; min-height: 2px; border-radius: 4px; overflow: hidden; background: var(--chart-track); transition: height .18s ease; } .usage-part { display: block; width: 100%; } .usage-part.base { background: var(--chart-1); } .usage-part.frontier { background: var(--chart-2); } .usage-tick { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; } .usage-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: var(--text-muted); } .usage-legend span { display: inline-flex; align-items: center; gap: 6px; } .usage-legend .key { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .usage-legend .key.base { background: var(--chart-1); } .usage-legend .key.frontier { background: var(--chart-2); } .model-list { display: flex; flex-direction: column; gap: 10px; } .model-row { display: flex; gap: 14px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); } .model-row.locked { opacity: .72; } .model-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--panel); color: var(--text-muted); } .model-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .model-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; } .settings-lead { margin: 0; line-height: 1.6; } /* The catalogue: four short lists rather than one long one, and a card small enough that eleven of them still read as a menu. */ .model-vendor + .model-vendor { margin-top: 18px; } .model-vendor-name { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; } .model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; } .model-card { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); } .model-card.locked { opacity: .62; } .model-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .model-card-name { font-size: 13px; font-weight: 600; } .model-card-blurb { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); } .model-card-price { margin-top: auto; padding-top: 6px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .model-vendor .chip-mini { white-space: nowrap; } @media (max-width: 860px) { .settings-modal { grid-template-columns: 1fr; height: min(720px, 92vh); width: min(640px, 94vw); } .settings-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; } .settings-nav-head { display: none; } .settings-tab { white-space: nowrap; } .settings-scroll { padding: 20px; } .settings-head { padding: 16px 20px; } .plan-grid { grid-template-columns: 1fr; } } } .kbd-list { list-style: none; margin: 6px 0 0; padding: 0; } .kbd-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); color: var(--ink-2); } .kbd-list .keys { display: flex; gap: 4px; } .centered { height: 100%; display: grid; place-content: center; text-align: center; } .centered h2 { margin: 0 0 6px; font-weight: 600; } /* ── session: top bar + presence ──────────── */ .session-view { height: 100%; display: flex; flex-direction: column; min-height: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--border); min-height: 56px; } .tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .tb-left h1 { font-size: 16px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 3px 6px; margin-left: -6px; border-radius: var(--r-md); } .tb-left h1.editable { cursor: text; } .tb-left h1.editable:hover { background: var(--hover); } .title-edit { max-width: 480px; height: 32px; font-size: 15px; font-weight: 600; } .tb-right { display: flex; align-items: center; gap: 6px; flex: none; } .tb-divider { width: 1px; height: 22px; background: var(--border-strong); margin: 0 6px; } .status { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); flex: none; font-size: 12px; font-weight: 500; background: var(--card-2); color: var(--text-muted); white-space: nowrap; } .status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status.st-running { background: var(--agent-soft); color: var(--agent); } .status.st-running .dot { animation: pulse 1.2s ease-in-out infinite; } .status.st-paused, .status.st-waiting_for_human { background: var(--amber-soft); color: var(--amber); } .status.st-error { background: var(--red-soft); color: var(--red); } .presence-bar { display: flex; align-items: center; gap: 10px; } .pb-stack { display: flex; align-items: center; padding-left: 6px; } .pb-person { position: relative; margin-left: -6px; border-radius: 50%; } .pb-person .avatar { box-shadow: 0 0 0 2px var(--bg); } .pb-person.has-control { z-index: 2; margin-right: 3px; } .pb-person.has-control .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); } .pb-person.offline .avatar { filter: grayscale(.9); opacity: .4; } .pb-more { margin-left: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--card-2); color: var(--text-muted); box-shadow: 0 0 0 2px var(--bg); } .pb-label { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; } .pb-label.nobody { color: var(--text-muted); } .conn { font-size: 12px; color: var(--text-muted); padding: 0 4px 0 6px; white-space: nowrap; } .conn.live::before { content: "● "; color: var(--agent); } .conn.reconnecting { color: var(--amber); } .pop-anchor { position: relative; } .popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 340px; padding: 12px 14px; } .pop-head, .confirm-head { display: flex; align-items: center; gap: 12px; font-weight: 600; margin-bottom: 6px; } .pop-head { justify-content: space-between; } .confirm-head { gap: 11px; } .pop-note { margin: 10px 0 0; } .invite-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .invite-row .muted { margin-top: 4px; } .settings-pop { width: 360px; } .set-block { padding: 8px 0 12px; display: flex; flex-direction: column; gap: 8px; } .set-block p { margin: 0; } .set-label { font-size: 13px; font-weight: 500; color: var(--ink); } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); } .control-strip { display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .cs-group { display: flex; align-items: center; gap: 8px; } .cs-group.right { margin-left: auto; } .cs-group .muted svg { vertical-align: -2px; margin-right: 4px; } .mode-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); padding: 2px 8px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border); } .mode-chip svg { color: var(--violet); } .banners { display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 0; } .banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--card); } .banner-main { flex: 1; min-width: 0; } .banner p { margin: 4px 0; } .banner ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); } .banner.digest { border-color: rgb(168 152 255 / .35); background: var(--violet-soft); } .banner.question { border-color: rgb(242 180 83 / .3); background: var(--amber-soft); } .banner.question.mine { border-color: var(--amber); } .banner.request { align-items: center; border-color: rgb(124 92 255 / .35); background: var(--accent-soft); } /* ── session: activity (main) + document (side panel) ── */ .sv-body { flex: 1; min-height: 0; display: flex; position: relative; } .activity-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 860px; margin: 0 auto; padding: 12px 24px 4px; } .feed-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .feed { flex: 1; min-height: 0; overflow-y: auto; } .feed-inner { max-width: 860px; margin: 0 auto; padding: 12px 24px 16px; display: flex; flex-direction: column; gap: 12px; } .feed-empty { color: var(--faint); text-align: center; padding: 40px 0; margin: 0; } .jump-pill { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--card-2); color: var(--ink); font-size: 12.5px; cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / .4); } .jump-pill:hover { background: var(--card-2); } .activity-main .suggestions, .activity-main .composer-card.compact { width: calc(100% - 48px); max-width: 812px; margin-left: auto; margin-right: auto; } .doc-panel { position: relative; flex: none; display: flex; flex-direction: column; min-width: 0; max-width: 70vw; border-left: 1px solid var(--border); background: var(--panel); } .resizer { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 3; } .resizer::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; } .resizer:hover::after, body.resizing .resizer::after { background: var(--accent); } .doc-head { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); flex: none; } .doc-title { font-weight: 600; font-size: 13px; color: var(--ink); } .doc-count { font-size: 12px; color: var(--faint); } .doc-actions { margin-left: auto; display: flex; gap: 2px; } .doc-backdrop { display: none; } .outline { display: flex; flex-direction: column; padding: 6px; border-bottom: 1px solid var(--border); max-height: 40%; overflow-y: auto; flex: none; } .outline button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink-2); text-align: left; padding: 6px 10px; border-radius: var(--r-md); cursor: pointer; font-size: 13px; min-width: 0; } .outline button:hover { background: var(--hover); color: var(--ink); } .outline .num { font-size: 11px; color: var(--faint); width: 14px; text-align: right; flex: none; font-variant-numeric: tabular-nums; } .outline .otitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-scroll { flex: 1; overflow-y: auto; padding: 4px 24px 28px; } .doc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 20px; color: var(--text-muted); } .doc-empty svg { color: var(--faint); margin-bottom: 10px; } .doc-empty p { margin: 2px 0; } .doc-section { padding: 10px 0 12px; border-bottom: 1px solid var(--border); position: relative; scroll-margin-top: 8px; } .doc-section:last-child { border-bottom: 0; } .doc-section.fresh::before { content: ""; position: absolute; left: -14px; top: 18px; bottom: 16px; width: 3px; border-radius: var(--r-sm); background: var(--agent); } .doc-section h2 { font-size: 17px; font-weight: 600; margin: 14px 0 8px; letter-spacing: -.01em; } /* Artifacts: one panel, several things, each drawn as what it is. */ .art-title { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin: 16px 0 4px; } .art-tabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; } .art-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 180px; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; } .art-tab:hover { background: var(--hover); color: var(--ink-2); } .art-tab.on { background: var(--card); border-color: var(--border-strong); color: var(--ink); } .art-tab > svg { flex: none; } .art-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .art-tab-count { font-size: 10px; padding: 0 5px; border-radius: 999px; background: var(--muted); color: var(--text-muted); } .art-tab-count.bad { background: var(--red-soft); color: var(--red); } .art-tab.on .art-tab-count { background: var(--violet-soft); color: var(--violet); } /* ── the workbench ─────────────────────────────────────────────────── One panel, four tabs, the same furniture as the artifacts panel. A run's output is one thing seen four ways, not four places to visit. */ .bench-panel { max-width: 70vw; } .bench-tabs { position: sticky; top: 0; background: var(--panel); z-index: 2; } /* A toolbar that belongs to the tab under it, not to the panel. */ .bench-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex: none; } .bench-bar-actions { margin-left: auto; display: inline-flex; gap: 2px; } .bench-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg); color: var(--faint); } .bench-search:focus-within { border-color: var(--violet); } .bench-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: inherit; font-size: 12.5px; } .chip-toggle { flex: none; height: 28px; padding: 0 10px; border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-muted); font: inherit; font-size: 12px; } .chip-toggle:hover:not(:disabled) { color: var(--ink); } .chip-toggle.on { border-color: var(--red); color: var(--red); background: var(--red-soft); } .chip-toggle:disabled { opacity: .45; cursor: default; } .bench-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* What a run produced, offered where it was produced. */ .made-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .made-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--card); font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; } .made-chip:hover { border-color: var(--violet); color: var(--violet); background: var(--violet-soft); } .bench-overview { display: flex; flex-direction: column; gap: 16px; padding: 14px; } .bench-where { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); } .bench-repo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .bench-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bench-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .bench-stat { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); font: inherit; color: inherit; text-align: left; cursor: pointer; } .bench-stat:hover:not(:disabled) { border-color: var(--violet); } .bench-stat:disabled { opacity: .55; cursor: default; } .bench-stat-n { font-size: 22px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; } .bench-stat-l { font-size: 11.5px; color: var(--text-muted); } .bench-stat-sub { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .bench-stat-sub .add { color: var(--agent); } .bench-stat-sub .del, .bench-stat-sub.del { color: var(--red); } .bench-fail { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--red); border-radius: var(--r-lg); background: var(--red-soft); } .bench-fail-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--red); } .bench-fail-out { margin: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--bg); color: var(--ink-2); font: 11px/1.5 var(--mono); max-height: 180px; overflow: auto; white-space: pre-wrap; } /* A slide is a fixed frame, so an overfull slide looks overfull here too — which is the whole point of showing a deck as a deck. */ .doc-scroll.deck { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 14px; } .slide { position: relative; display: flex; align-items: flex-start; aspect-ratio: 16 / 9; min-height: 170px; padding: 22px 24px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--card); overflow: hidden; } .slide.fresh { border-color: var(--agent); } .slide-body { width: 100%; overflow: hidden; } .slide h2 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 10px; } .slide .md { font-size: 14px; line-height: 1.55; color: var(--ink-2); } .slide .md ul { margin: 0; padding-left: 18px; } .slide .md p { margin: 0 0 6px; } .slide-num { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .doc-section.sheet .md table { width: 100%; } .md { color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; } .md p { margin: 0 0 10px; } .md ul, .md ol { margin: 0 0 10px; padding-left: 20px; } .md li { margin: 2px 0; } .md h3, .md h4, .md h5, .md h6 { color: var(--ink); margin: 14px 0 6px; font-size: 14.5px; } .md strong { color: var(--ink); } .md code { font-family: var(--mono); font-size: 12.5px; background: var(--card-2); padding: 1px 5px; border-radius: var(--r-sm); } .md pre { background: var(--code-bg); border: 1px solid var(--border); padding: 12px; border-radius: var(--r-md); overflow-x: auto; } .md pre code { background: none; padding: 0; } .md blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .table-wrap { overflow-x: auto; margin: 0 0 12px; } .md table { border-collapse: collapse; font-size: 13px; } .md th, .md td { border: 1px solid var(--border-strong); padding: 6px 10px; text-align: left; vertical-align: top; } .md th { background: var(--card); color: var(--ink); font-weight: 600; } .md > :last-child { margin-bottom: 0; } /* ── activity feed items ──────────────────── */ .notice { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 12px; color: var(--faint); } .notice svg { flex: none; } .notice-text { min-width: 0; overflow-wrap: anywhere; } .notice.control { color: var(--violet); } .notice.warn { color: var(--amber); } .notice.danger { color: var(--red); } .notice.ok { color: var(--agent); } /* humans: chat bubbles */ .bubble-row { display: flex; align-items: flex-start; gap: 9px; max-width: 88%; } .bubble-row.mine { align-self: flex-end; flex-direction: row-reverse; } .bubble-col { display: flex; flex-direction: column; min-width: 0; } .bubble-row.mine .bubble-col { align-items: flex-end; } .bubble-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin: 0 4px 4px; width: 100%; } .bubble-row.mine .bubble-meta { flex-direction: row-reverse; } .bubble-row.mine .bubble-meta .stamp { margin-left: 0; margin-right: auto; padding: 0 8px 0 0; } .bubble-meta .who { font-weight: 600; color: var(--ink); } .bubble { padding: 9px 13px; border-radius: var(--r-xl); border-top-left-radius: 5px; background: var(--card-2); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; } .bubble-row.mine .bubble { background: var(--accent); color: #fff; border-top-left-radius: 16px; border-top-right-radius: 5px; } .bubble.suggest, .bubble-row.mine .bubble.suggest { background: transparent; color: var(--ink-2); border: 1px dashed var(--border-hover); } .delivery { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--faint); margin: 4px 6px 0; } .delivery.seen { color: var(--agent); } .delivery.queued { color: var(--amber); } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite; } /* agent: narrative note + action cards */ .agent-turn { display: flex; flex-direction: column; gap: 6px; } .agent-turn.interrupted { opacity: .7; } .agent-note { padding: 2px 4px; } .agent-note.streaming { border-left: 2px solid var(--agent); padding-left: 10px; } .an-head { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .an-head .who { font-weight: 600; color: var(--ink); } .an-head .what { color: var(--text-muted); } .agent-note .md { padding-left: 30px; } .thinking { margin: 0 0 6px 30px; } .thinking summary { cursor: pointer; font-size: 12px; color: var(--text-muted); list-style: none; } .thinking summary::-webkit-details-marker { display: none; } .thinking summary::before { content: "▸ "; } .thinking[open] summary::before { content: "▾ "; } .thinking-body { margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--border-strong); color: var(--text-muted); font-size: 12.5px; white-space: pre-wrap; max-height: 220px; overflow-y: auto; } .action-card { margin-left: 30px; background: var(--card); border: 1px solid var(--border-strong); border-left: 3px solid var(--agent); border-radius: var(--r-md); padding: 9px 12px; } .action-card.st-running { border-left-color: var(--accent); } .action-card.st-failed { border-left-color: var(--red); } .action-card.st-interrupted { border-left-color: var(--amber); } .ac-head { display: flex; align-items: center; gap: 10px; } .ac-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-md); flex: none; background: var(--agent-soft); color: var(--agent); } .st-running .ac-icon { background: var(--accent-soft); color: var(--accent); } .st-failed .ac-icon { background: var(--red-soft); color: var(--red); } .st-interrupted .ac-icon { background: var(--amber-soft); color: var(--amber); } .ac-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; } .ac-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; } .ac-detail { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ac-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; } .ac-status.done { color: var(--agent); background: var(--agent-soft); } .ac-status.running { color: var(--accent); background: var(--accent-soft); } .ac-status.failed { color: var(--red); background: var(--red-soft); } .ac-status.interrupted { color: var(--amber); background: var(--amber-soft); } .ac-preview { margin: 7px 0 0 36px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ac-output { margin: 6px 0 0 36px; } .ac-output summary { cursor: pointer; font-size: 12px; color: var(--text-muted); list-style: none; } .ac-output summary::-webkit-details-marker { display: none; } .ac-output summary::before { content: "▸ "; } .ac-output[open] summary::before { content: "▾ "; } .ac-output pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--code-bg); border: 1px solid var(--border); padding: 10px; border-radius: var(--r-md); max-height: 260px; overflow: auto; margin: 6px 0 2px; color: var(--ink-2); } .suggestions { border-top: 1px solid var(--border); padding: 10px 2px; max-height: 30%; overflow-y: auto; } .sub-head { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; } .suggestion { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .suggestion-text { flex: 1; min-width: 0; color: var(--ink-2); font-size: 13px; } .suggest-btn { margin-left: 4px; } .toggle { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12.5px; } .toggle.on { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: 90vw; background: #f2f2f2; color: #111; padding: 9px 16px; border-radius: var(--r-md); font-size: 13px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); } /* ── narrow screens: sidebar and document become overlays ── */ @media (max-width: 1000px) { .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 45; box-shadow: 20px 0 50px rgb(0 0 0 / .5); } .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgb(0 0 0 / .45); } .shell:not(.collapsed) .topbar { padding-left: 20px; } .topbar { flex-wrap: wrap; padding-left: 56px; } .pb-label, .conn, .kbd-hint { display: none; } .doc-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(92vw, 460px) !important; max-width: none; z-index: 30; box-shadow: -20px 0 50px rgb(0 0 0 / .5); } .doc-backdrop { display: block; position: absolute; inset: 0; z-index: 29; background: rgb(0 0 0 / .4); } .resizer { display: none; } .feed-toolbar, .feed-inner { padding-left: 14px; padding-right: 14px; } .activity-main .suggestions, .activity-main .composer-card.compact { width: calc(100% - 20px); } .form-grid { grid-template-columns: 1fr; } .form-foot { flex-direction: column; align-items: stretch; } } /* ── Tailwind's base reset (preflight) adjustments ─────────────────── */ .md ul, .banner ul { list-style: disc; } .md ol { list-style: decimal; } .modal h2, .page-head h1, .pop-head h2 { font-weight: 600; } select { cursor: pointer; } /* ── activity: AI Elements feed ─────────────────────────────────────── */ .composer-dock { width: calc(100% - 48px); max-width: 812px; margin: 0 auto 14px; display: flex; flex-direction: column; gap: 8px; } .composer-caption { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); padding: 0 4px 6px; } .composer.mode-drive .composer-caption { color: var(--ink-2); } .composer.mode-drive .composer-caption svg { color: var(--accent); } .composer.mode-suggest .composer-caption svg { color: var(--violet); } .composer.mode-view { opacity: .75; } /* Composer. The shadcn input-group derives its focus border and ring from --ring, which is the accent; scope a neutral value so focus reads as a quiet lift. */ .prompt [data-slot="input-group"] { --ring: var(--border-focus); background: var(--card); border-color: var(--border-strong); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgb(0 0 0 / .18); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .prompt [data-slot="input-group"]:hover { border-color: var(--border-hover); } .prompt [data-slot="input-group"]:focus-within { border-color: var(--border-focus); background: var(--card-2); box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 20px rgb(0 0 0 / .22); } /* The 3px ring is redundant next to the border lift above. */ .prompt [data-slot="input-group"]:focus-within { --tw-ring-shadow: 0 0 #0000; } .prompt [data-slot="input-group"] :focus-visible { outline: none; } .prompt [data-slot="input-group"] textarea { padding: 9px 14px 2px; min-height: 38px; line-height: 1.45; field-sizing: content; } .prompt [data-slot="input-group-addon"] { padding-inline: 8px; padding-block: 0 6px; gap: 2px; min-height: 0; } .prompt [data-slot="input-group-addon"] button { height: 28px; min-width: 28px; } /* Suggest mode replaces the arrow with a word, so the submit button has to size to its label instead of staying a fixed icon square. */ .prompt button[aria-label="Suggest"] { width: auto; min-width: 0; padding: 0 12px; } .prompt-suggest [data-slot="input-group"] { background: transparent; border-style: dashed; border-color: var(--border-hover); } /* Labelled pill trigger for MenuButton (thinking mode sits beside the mic). */ /* The folder picker as a toolbar button: an icon on its own until something is chosen, then icon plus name, because a silent icon is how a run starts against last week's repository. */ /* .icon-btn is a grid, which stacks an icon above a label. With a name beside the icon this is a row, and the same height as the pills next to it. */ .ws-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; width: auto; height: 28px; padding: 0 8px; max-width: 190px; } .ws-btn.on { color: var(--violet); background: var(--violet-soft); } .ws-btn.active { color: var(--violet); background: var(--hover); } .ws-btn.drag { color: var(--violet); background: var(--violet-soft); outline: 1px dashed var(--violet-border); } .ws-btn-text { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-modal { width: min(520px, 100%); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .menu-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .menu-pill:hover, .menu-pill.on { color: var(--violet); background: var(--hover); border-color: var(--violet-border); } .menu-pill-caret { transition: transform .15s ease; } .menu-pill.on .menu-pill-caret { transform: rotate(180deg); } /* ── agent question (approval card, docked above the composer) ───────── */ .agent-question { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: 14px 16px; box-shadow: 0 6px 22px rgb(0 0 0 / .28); } /* Radio rows: roomy hit area, quiet until chosen. */ .agent-question label { font-size: 13.5px; font-weight: 500; } .agent-question [role="radio"] { height: 22px; width: 22px; } /* AgentQuestion always poses exactly one question, so the back arrow and the progress dots have nowhere to go. Hide both and let submit keep the row. */ .agent-question button[aria-label="Previous question"], .agent-question button[aria-label="Previous question"] + span { display: none; } .agent-question span.tabular-nums { display: none; } /* the "1/1" step counter */ /* Submit is an icon-only circle. Addressed by aria-label, not position: the nav siblings above are hidden, so structural selectors here are brittle. */ .agent-question button[aria-label="Submit response"] { width: 34px; height: 34px; padding: 0; border-radius: var(--r-pill); background: var(--hover-strong); color: var(--violet); } .agent-question button[aria-label="Submit response"]:hover:not(:disabled) { background: var(--violet-hover); } .agent-question input[type="text"], .agent-question input:not([type]) { border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--border-strong); font-size: 13px; } .agent-question input::placeholder { color: var(--faint); } .interrupt-on { color: var(--amber) !important; background: var(--amber-soft) !important; } .voice-listening { color: var(--red) !important; background: var(--red-soft) !important; animation: pulse 1.2s ease-in-out infinite; } .voice-btn.listening { color: var(--red); background: var(--red-soft); animation: pulse 1.2s ease-in-out infinite; } .dock-suggestions { display: flex; flex-direction: column; gap: 6px; } .run { display: flex; flex-direction: column; gap: 10px; } .run-head { display: flex; align-items: center; gap: 8px; font-size: 13px; } .run-head .who { font-weight: 600; color: var(--ink); } .run-status { font-size: 11.5px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--card-2); color: var(--text-muted); } .run-status.live { background: var(--agent-soft); color: var(--agent); } .run-status.err { background: var(--red-soft); color: var(--red); } .run-error { color: var(--red); font-size: 12.5px; } .msg-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); } .msg-meta .who { font-weight: 600; color: var(--ink); } .msg-meta .stamp { margin-left: 4px; } .att-link { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--text-muted); width: 80px; } .att-link:hover .att-name { color: var(--ink); } .att-name { font-size: 11px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-notice { font-size: 12px; color: var(--faint); } .cp-notice.control { color: var(--violet); } .cp-notice.warn { color: var(--amber); } .cp-notice.danger { color: var(--red); } .cp-text { flex: none; max-width: 75%; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-stamp { order: 3; flex: none; padding-left: 8px; } /* ── people & permissions ───────────────────────────────────────────── */ .people-pop { width: 430px; max-height: 76vh; overflow-y: auto; } .pp-section { border-top: 1px solid var(--border); padding: 10px 0 6px; } .pp-section:first-of-type { border-top: 0; } .pp-actions { display: flex; align-items: center; gap: 4px; } .pp-members { display: flex; flex-direction: column; } .pp-member { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .pp-avatar { position: relative; } .pp-avatar.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 0 2px var(--card); } .pp-name { flex: 1; min-width: 0; font-size: 13px; } .small-select { height: 28px; font-size: 12.5px; padding: 0 6px; } .danger-icon:hover { color: var(--red) !important; } .perm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .perm-table th { font-size: 11px; color: var(--faint); font-weight: 500; text-align: center; padding: 4px; } .perm-table td { padding: 8px 4px; border-top: 1px solid var(--border); vertical-align: middle; } .perm-table td:not(:first-child) { text-align: center; width: 70px; } .perm-table td:not(:first-child) svg { display: inline; color: var(--agent); } /* ── agents ─────────────────────────────────────────────────────────── */ .grow { flex: 1; min-width: 0; } .agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .agent-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .agent-card:hover { border-color: var(--violet); background: var(--hover); } .agent-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .agent-card:hover { border-color: var(--border-strong); } .agent-card-head { display: flex; align-items: center; gap: 10px; } .agent-card-id { flex: 1; min-width: 0; } .agent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); font-size: 18px; flex: none; } .agent-avatar.big { width: 56px; height: 56px; font-size: 28px; border-radius: var(--r-xl); } .c-indigo { background: rgb(124 92 255 / .22); } .c-green { background: rgb(79 209 161 / .18); } .c-violet { background: rgb(168 152 255 / .2); } .c-amber { background: rgb(242 180 83 / .2); } .c-pink { background: rgb(236 106 152 / .2); } .c-teal { background: rgb(43 182 196 / .2); } .agent-desc { margin: 0; color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em; } .agent-badges { display: flex; flex-wrap: wrap; gap: 4px; } .agent-badges .chip-mini { margin-left: 0; } .chip-mini.share { background: var(--violet-soft); color: var(--violet); } .agent-card-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; } .template-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .template-row p { margin: 0; width: 100%; } /* Wide rather than tall: who the agent is and what it does on the left, what it can reach on the right. As one column this was a short form that read long. */ .agent-editor { width: min(880px, 100%); max-height: 88vh; overflow-y: auto; padding: 22px 24px; } .ae-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: start; } .ae-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .ae-row { display: flex; gap: 12px; } .ae-row .field { flex: 1; min-width: 0; } /* The instructions box takes the height the right column happens to need. */ .ae-grow { flex: 1; } .ae-grow textarea { min-height: 190px; height: 100%; resize: vertical; } .ae-identity { display: flex; gap: 14px; align-items: center; } /* Skill picker: a scrolling list rather than a wall of chips, because the catalog is long and the useful move is scanning it by group. */ .skill-pick-search { margin-bottom: 6px; } .skill-pick { max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 6px; } .skill-pick-group + .skill-pick-group { margin-top: 8px; } .skill-pick-title { padding: 4px 6px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .skill-pick-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 7px; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; min-width: 0; } .skill-pick-row:hover { background: var(--hover); } .skill-pick-check { flex: none; width: 15px; height: 15px; border: 1px solid var(--border); border-radius: 4px; display: grid; place-items: center; color: #fff; } .skill-pick-row.on .skill-pick-check { background: var(--violet); border-color: var(--violet); } .skill-pick-name { flex: none; font-size: 12.5px; } .skill-pick-blurb { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skill-pick-empty { padding: 8px; } .ae-pickers { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ae-advanced { border-top: 1px solid var(--border); padding-top: 10px; } .ae-advanced summary { font-size: 12.5px; color: var(--text-muted); cursor: pointer; list-style: none; } .ae-advanced summary::-webkit-details-marker { display: none; } .ae-advanced summary::before { content: "+ "; color: var(--faint); } .ae-advanced[open] summary::before { content: "‘2 "; } .ae-advanced summary:hover { color: var(--ink-2); } .ae-advanced .field { margin-top: 10px; } /* Skills reuse the agent editor's two-column shape: same widths, same field rhythm, so the two creation flows don't feel like different products. */ .skill-editor { width: min(880px, 100%); max-height: 88vh; overflow-y: auto; padding: 22px 24px; } .skill-editor .ae-grow textarea { min-height: 150px; } .res-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .res-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 6px 6px 9px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); font-size: 13px; } .res-row > svg { flex: none; color: var(--faint); } .res-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res-add { align-self: flex-start; } /* A section's explainer sits above its cards; without this it reads as a caption glued to the first card. */ .section-note { margin: 2px 0 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; max-width: 72ch; } /* Files queued on the composer, before the session exists to hold them. */ .attach-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; } .attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 6px 3px 8px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: 12px; white-space: nowrap; } .attach-chip > svg { flex: none; color: var(--faint); } .attach-chip > button { flex: none; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; } .attach-chip > button:hover { background: var(--hover); color: var(--ink); } .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; } .attach-more { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; padding: 3px 6px; border-radius: var(--r-sm); cursor: pointer; } .attach-more:hover { background: var(--hover); color: var(--ink); } .attach-note { margin: 8px 0 0; text-align: center; } /* Signing in: the one screen someone sees before they are anybody. */ .modal.signin { width: min(400px, 100%); text-align: center; gap: 12px; } .signin h2 { margin: 0; } .signin > .muted { margin: 0; } .signin-providers { display: flex; flex-direction: column; gap: 8px; } .signin-btn { justify-content: center; height: 40px; text-decoration: none; } .signin-or { position: relative; margin: 4px 0; font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; } .signin-or::before, .signin-or::after { content: ""; position: absolute; top: 50%; width: calc(50% - 22px); height: 1px; background: var(--border); } .signin-or::before { left: 0; } .signin-or::after { right: 0; } .signin-dev { display: flex; flex-direction: column; gap: 8px; } .signin-dev code { font: 11.5px var(--mono); color: var(--ink-2); } @media (max-width: 780px) { .ae-grid { grid-template-columns: 1fr; } } .emoji-row { display: flex; flex-wrap: wrap; gap: 4px; } .emoji { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--ink-2); cursor: pointer; } .emoji.on { border-color: var(--accent); } .swatch-row { display: flex; gap: 6px; } .swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .swatch.on { border-color: var(--ink); } .field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .field em { font-style: normal; } .field input, .field textarea, .people-search { border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); padding: 8px 11px; outline: none; font-size: 13.5px; color: var(--ink); } .field textarea { resize: vertical; line-height: 1.5; } .field input:focus, .field textarea:focus, .people-search:focus { border-color: var(--accent); } .tool-toggles { border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; } .set-row.compact { padding: 10px 0; } .tool-toggles .set-row.compact:first-child { border-top: 0; } .set-row.column { flex-direction: column; align-items: stretch; gap: 8px; } .check-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; padding: 4px 2px; } .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; } .check input { accent-color: var(--accent); } .people-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .agent-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); white-space: nowrap; flex: none; } .agent-select { height: 30px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); font-size: 13px; padding: 0 8px; max-width: 220px; } .agent-select.full { max-width: none; width: 100%; } .composer-bar .agent-select { margin-left: 4px; } /* ── clickable presence avatars ─────────────────────────────────────── */ .pb-anchor { position: relative; margin-left: -6px; } .pb-anchor.has-control { z-index: 2; margin-right: 3px; } .pb-anchor .pb-person { margin: 0; border: 0; padding: 0; background: none; cursor: pointer; display: block; } .pb-anchor .pb-person:hover .avatar { filter: brightness(1.08); } .person-card { left: 50%; right: auto; transform: translateX(-50%); width: 270px; padding: 14px; } .pc-head { display: flex; align-items: center; gap: 12px; } .pc-id { min-width: 0; } .pc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-status { font-size: 12px; color: var(--text-muted); } .pc-status.on { color: var(--agent); } .pc-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; } .pc-facts dt { color: var(--faint); } .pc-facts dd { margin: 0; color: var(--ink-2); } .pc-action { margin-top: 12px; width: 100%; justify-content: center; } /* ── bring-your-own coding agent ─────────────────────────────────────── */ /* The strip above the feed is gone: which agents are attached, and handing one back, both live in the Agents menu now. The dot survives because the machine rows in Connections still use it. */ .engine-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--agent, #3fb67b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent, #3fb67b) 22%, transparent); } .engine-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--card-2); color: var(--ink); flex: none; } .modal.engine-modal { width: min(620px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 24px; max-height: min(86vh, 920px); overflow-y: auto; } /* Tool tiles read like the lane presets, because they are the same decision. */ .engine-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; } .engine-tool { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; row-gap: 1px; padding: 10px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .engine-tool:hover { border-color: var(--violet-border); background: var(--hover); } .engine-tool.on { border-color: var(--accent); background: var(--hover); } .engine-tool-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); background: var(--card-2); color: var(--ink-2); } .engine-tool.on .engine-tool-icon { background: var(--accent-soft); color: var(--ink); } .engine-tool-name { font-weight: 600; font-size: 13px; color: var(--ink); } .engine-tool-state { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; } .engine-tool-state.ok { color: var(--agent); } .engine-model { margin-left: 6px; padding: 0 7px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; } .engine-cmd { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--border); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--ink); max-height: 200px; overflow: auto; user-select: all; } .warn-text { color: var(--amber) !important; } .code-cwd { min-width: 0; flex: 1 1 200px; max-width: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } .term-cmd { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } .diff-card { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .diff-card.empty { color: var(--faint); font-size: 13px; } .diff-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); font-weight: 500; } .diff-file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .diff-path { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diff-status { font-size: 11px; padding: 0 6px; border-radius: var(--r-pill); background: var(--card-2); color: var(--faint); } .diff-add { color: #3fb67b; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; } .diff-del { color: #e5534b; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; } .files-panel { width: 540px; } /* ── choosing where a coding agent works ─────────────────────────────── */ /* Everything the coding agent needs settled — machine, login, code, branch — is one decision, so it reads as one card the width of the box above it, with rows inside rather than a stack of separately bordered strips. */ .code-ws { width: min(656px, 100%); margin-top: 10px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; } .code-ws > * { border-top: 1px solid var(--border); border-radius: 0; } .code-ws > *:first-child { border-top: 0; } /* Rows inside the card don't carry a card's own chrome. */ .code-ws > .machine-line, .code-ws > .auth-line, .code-ws > .ws-summary { background: transparent; border-left: 0; border-right: 0; border-bottom: 0; padding: 9px 12px; } .code-ws > .login-notice { background: transparent; padding: 10px 12px; } .code-ws > p { margin: 0; padding: 9px 12px; } .code-ws-head { font-size: 13px; font-weight: 600; color: var(--ink); } .code-repo { width: 100%; max-width: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } /* the two pills in the composer bar */ .composer-bar .agent-pill { flex: none; } .ws-pill { max-width: 250px; } .ws-pill.drag { border-color: var(--accent); } .ws-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one card: search over your repos, GitHub and sessions to continue */ .ws-card { position: fixed; z-index: 60; display: flex; flex-direction: column; max-height: min(520px, 70vh); border-radius: 14px; border: 1px solid var(--border-strong); background: var(--card); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); overflow: hidden; } .ws-card.drag { border-color: var(--accent); } .ws-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .ws-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font-size: 13.5px; outline: none; } .ws-scroll { flex: 1; overflow-y: auto; padding: 6px; } .ws-section { padding: 2px 0; } .ws-section-label { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } .ws-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); cursor: pointer; text-align: left; min-width: 0; } .ws-row:hover, .ws-row.on { background: var(--card-2); } .ws-row-icon { display: grid; place-items: center; width: 22px; flex: none; color: var(--ink-2); } .ws-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ws-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-path { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ws-empty { margin: 2px 8px 6px; font-size: 12.5px; color: var(--faint); } .ws-note { margin: 4px 8px; font-size: 12.5px; color: var(--ink-2); } .ws-note.error { color: #e5534b; } .ws-gh-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 8px 8px; font-size: 12.5px; color: var(--faint); } .ws-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); } .ws-drop-hint { font-size: 11.5px; color: var(--faint); margin-left: auto; } .ws-crumb { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); min-width: 0; } .ws-crumb .ws-path { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* what happens when you press send, in one line */ .ws-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 12.5px; color: var(--ink-2); } .ws-summary-path { max-width: 280px; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-chip { padding: 1px 8px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); } .ws-branch-set { display: inline-flex; align-items: center; gap: 6px; } .ws-branch-input { width: 190px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card-2); color: var(--ink); font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; } .ws-branch-input:disabled { opacity: .5; } .engine-ws { display: flex; align-items: center; gap: 10px; min-width: 0; } .spinner.tiny { width: 11px; height: 11px; border-width: 1.5px; } /* watching the project run */ .preview-panel { width: 640px; } .preview-body { flex: 1; display: flex; min-height: 0; } .preview-frame { flex: 1; width: 100%; border: 0; background: #fff; } .preview-note { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; } .preview-note p { margin: 0; } .preview-starts { display: flex; gap: 8px; flex-wrap: wrap; } .preview-log { margin: 0; padding: 10px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--border); font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; max-height: 240px; overflow: auto; color: var(--ink-2); } .preview-foot { margin: 0; padding: 7px 12px; border-top: 1px solid var(--border); } /* which agent the box is writing to */ .composer-caption .target-pill { margin-right: 2px; } .auth-line strong { color: var(--ink); } /* Skills: built-in briefs, grouped by the kind of job they do. */ .catalog-group + .catalog-group { margin-top: 18px; } .catalog-group-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } /* ── the Add agent modal ───────────────────────────────────────────── Sections with room to breathe: what's here now, what you can add, and the custom form only when asked for. */ .lanes-section { display: flex; flex-direction: column; gap: 10px; } .lanes-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; } .add-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px; padding: 15px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .add-tile:hover { border-color: var(--violet-border); background: var(--hover); } .add-tile.subtle { background: transparent; } .add-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-md); background: var(--card-2); color: var(--ink-2); } .add-name { font-size: 13px; font-weight: 600; color: var(--ink); } .add-blurb { font-size: 12px; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; } .lanes-modal .lane-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 16px; } .lanes-modal .lane-form .lanes-h, .lanes-modal .lane-form .lane-form-actions { grid-column: 1 / -1; } /* One send button everywhere: the home composer, a message, a suggestion. */ .prompt [data-slot="input-group-addon"] button[type="submit"] { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; } .prompt [data-slot="input-group-addon"] button[type="submit"]:hover:not(:disabled) { background: var(--accent-hover); } .prompt [data-slot="input-group-addon"] button[type="submit"]:disabled { background: var(--border-strong); color: var(--faint); } /* which machine the coding agent runs on */ .machine-line, .auth-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-md); background: var(--card-2); font-size: 12.5px; color: var(--ink-2); } .machine-name strong { color: var(--ink); } .machine-line .link-btn, .auth-line .link-btn { font-size: 12px; } .machine-line .engine-dot { flex: none; } /* the repo this session is working in */ .repo-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 320px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); font-size: 12px; white-space: nowrap; flex: none; } .repo-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .repo-branch { display: inline-flex; align-items: center; gap: 3px; font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--faint); } /* code artifacts and the terminal panel */ .doc-section.code { padding: 0; border: 0; background: none; } .doc-section.code + .doc-section.code { margin-top: 14px; } .term-panel { width: 560px; } .term-scroll { display: flex; flex-direction: column; gap: 8px; } /* Linking a machine: two numbered steps, because that is the whole thing. */ .link-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--card); } .link-lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .link-lead strong { color: var(--ink); } .link-card p { margin: 0; } .link-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } .link-step { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } .link-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; } .link-step-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .link-step-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); } .link-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .link-ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ink-2); } .link-ok strong { color: var(--ink); } .login-notice { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--amber) 10%, var(--card-2)); font-size: 13px; color: var(--ink-2); } .login-notice p { margin: 0; } .login-notice strong { color: var(--ink); } .files-meta { margin: 0 0 4px; font-size: 12px; color: var(--faint); overflow-wrap: anywhere; } /* Nobody to hand to: the pill still says so, but stops looking like a button that would do something. */ .menu-pill.empty, .menu-pill.empty:hover { color: var(--faint); background: transparent; border-color: var(--border-strong); } /* One icon weight for the whole app. The vendored ai-elements components draw with lucide, which strokes at 2; everything else is the house set at 1.8, and side by side in the composer the difference read as two different toolbars. */ svg.lucide { stroke-width: 1.8; }