/* ============================================================
Design tokens — dark theme (default).
The whole app is themed through these variables; the light
theme below re-declares the same names. Component rules should
reference tokens, never raw hexes, wherever possible.
============================================================ */
:root {
--bg: #101014;
--bg-1: #141419;
--bg-2: #17171c;
--bg-3: #232329;
--bg-hover: #2b2b33;
--border: #33333c;
--text: #ececf1;
--text-dim: #b9b9c6;
--text-faint: #94949f;
/* Brand accent (indigo) — used for primary actions, active nav,
focus rings and "in progress" state. */
--accent: #6d6af8;
--accent-2: #a5a3ff;
--accent-soft: rgba(109, 106, 248, 0.16);
--on-accent: #ffffff;
--user-bubble: #2c2c38;
--danger: #ef4444;
--danger-soft: rgba(239, 68, 68, 0.12);
--ok: #34c37e;
--ok-soft: rgba(52, 195, 126, 0.12);
--warn: #e0a458;
--warn-soft: rgba(224, 164, 88, 0.12);
--info: #4f8ff7;
--info-soft: rgba(79, 143, 247, 0.12);
/* The top bar's height. A token because four other things measure themselves against
it — the off-canvas sidebar, its backdrop, and the two right-hand drawers — and a
bar that grows by 4px with three of them left behind is a gap nobody can explain. */
--topbar-h: 52px;
/* Every left rail — Group Chat, Company, Inbox — is this wide, and so is the app
sidebar they each stand in for. They were 280/264/264 and the furniture moved as
you walked between the views. See "THE RAIL STANDARD" at the end of this file. */
--rail-w: 264px;
--radius: 12px;
--radius-sm: 8px;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
color-scheme: dark;
}
/* Light theme — professional workspace look. Activated by
(set from localStorage / OS preference
by an inline script in index.html before first paint). */
:root[data-theme="light"] {
--bg: #f6f6f8;
--bg-1: #fafafc;
--bg-2: #ffffff;
--bg-3: #f0f0f4;
--bg-hover: #e9e9ef;
--border: #e2e2ea;
--text: #1e2026;
--text-dim: #565b66;
--text-faint: #6f7480;
--accent: #5a55ee;
--accent-2: #4640c8;
--accent-soft: rgba(90, 85, 238, 0.10);
--on-accent: #ffffff;
--user-bubble: #e9e9f8;
--danger: #d92d20;
--danger-soft: rgba(217, 45, 32, 0.08);
--ok: #17915b;
--ok-soft: rgba(23, 145, 91, 0.10);
--warn: #b45309;
--warn-soft: rgba(180, 83, 9, 0.10);
--info: #2563eb;
--info-soft: rgba(37, 99, 235, 0.08);
--shadow-1: 0 1px 2px rgba(16, 18, 28, 0.06);
--shadow-2: 0 8px 28px rgba(16, 18, 28, 0.14);
color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.55;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
/* The shell is a COLUMN now: one bar across the top, everything else beneath it. The
brand and the online switch used to sit inside the sidebar, which Company, Group Chat
and the Inbox all hide — so each of those rails carried a duplicate, and the app's
identity moved around as you navigated. */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#app-body { flex: 1; min-height: 0; display: flex; }
/* ---- Top bar ---- */
#topbar {
flex-shrink: 0; height: var(--topbar-h); display: flex; align-items: center; gap: 10px;
padding: 0 14px; background: var(--bg-2); border-bottom: 1px solid var(--border);
/* Above ordinary page content, BELOW every overlay — the settings modal (50), the
task drawer (60) and the off-canvas sidebar (70) must all cover it, or a dialog
opens with the app frame drawn on top of its own backdrop. */
position: relative; z-index: 40;
}
#topbar .brand { padding: 0; }
/* Right edge, on its own — it is the only control up here and it changes how the whole
workspace behaves, so it should not be crowded by anything. */
#topbar .reach-switch {
margin: 0 0 0 auto; width: auto; gap: 10px; padding: 6px 12px; border-radius: 999px;
}
/* ---- Sidebar ---- */
#sidebar {
width: var(--rail-w);
flex-shrink: 0;
background: var(--bg-2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 14px;
gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 6px 6px 2px; }
.brand-logo { font-size: 24px; display: inline-flex; align-items: center; flex-shrink: 0; }
/* Quorai mascot mark — sizes to its container's font-size (1em) so it drops
into the brand, empty-state and auth lockups without per-place tuning. */
.qmark { width: 1em; height: 1em; display: inline-block; vertical-align: middle; overflow: visible; }
/* Wordmark: "Quor" in text colour, "ai" in the mascot's cyan (matches the eyes). */
.wordmark { letter-spacing: -0.01em; }
.wm-ai { color: var(--text-dim); }
.brand-text { display: flex; align-items: center; }
.brand-text strong { font-size: 18px; font-weight: 700; line-height: 1; }
.brand-text small { color: var(--text-faint); font-size: 11px; }
.btn-new {
background: var(--accent);
color: var(--on-accent);
border: none;
border-radius: var(--radius);
padding: 11px;
font-size: 14px;
font-weight: 600;
transition: background .15s;
}
.btn-new:hover { background: var(--accent-2); }
.conversations { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.conv-item {
display: flex; align-items: center; gap: 8px;
padding: 9px 10px;
border-radius: 9px;
color: var(--text-dim);
font-size: 13.5px;
cursor: pointer;
white-space: nowrap;
}
.conv-item:hover { background: var(--bg-hover); color: var(--text); }
.conv-item.active { background: var(--accent-soft); color: var(--text); }
/* The conversation you're currently in — pinned to the top of Recents and marked
with an accent rail so you can jump back to it (chat, discussion, inbox chat)
from any view, even before it has a title. Deliberately NOT a dot: a dot reads
as "this one is running", which is a different question with its own marker
below. Where-you-are is a rail plus weight; still-working is a spinner. */
.conv-item.current { color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
/* The row is a title with an optional second line under it ("2m · 1 queued"), so
the text column is its own flex child — the title alone can no longer be `flex: 1`
or it would stretch vertically inside that column instead of horizontally. */
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.conv-title { overflow: hidden; text-overflow: ellipsis; }
.conv-meta { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.conv-item.working .conv-meta { color: var(--accent-2); }
.conv-del {
opacity: 0; border: none; background: transparent; color: var(--text-faint);
font-size: 14px; padding: 2px 4px; border-radius: 6px;
}
.conv-item:hover .conv-del { opacity: 1; }
.conv-del:hover { color: var(--danger); background: rgba(240,96,106,.12); }
/* A thread that's still working while you read another one. It LEADS the row (the
eye lands there first, and it's the one question the list gets asked) and it is a
spinner, not a dot — nothing else in Recents rotates, so "which one is running"
is answered without comparing two similar dots. It must survive hover: pointing
at a row to check it is exactly when the answer used to disappear. */
.conv-item.working .conv-title { color: var(--text); }
.conv-working {
flex: none; width: 11px; height: 11px; border-radius: 50%;
box-sizing: border-box;
border: 2px solid var(--accent-soft);
border-top-color: var(--accent);
animation: conv-spin .8s linear infinite;
}
@keyframes conv-spin { to { transform: rotate(360deg); } }
/* A reply that landed while you were somewhere else. It trails the row and it is
GREEN — the third thing this list has to say, and the only one that means "this
is finished, go and read it". Indigo is spoken for twice over (the rail you're
on, the spinner still going), so a third indigo mark would be the original bug
again. Bold reads as unread the way every mail client has taught. */
.conv-item.unread .conv-title { color: var(--text); font-weight: 600; }
.conv-unread {
flex: none; width: 7px; height: 7px; border-radius: 50%;
background: var(--ok);
}
/* Nothing here reorders the list. A row that must be seen — the one you're in, one
still working, one holding an unread reply — is let THROUGH the "See more" fold
in its own position instead, so a click never moves the thing you clicked. */
/* One message pane per open thread; only the active one is shown. Panes keep their
own DOM so a background reply streams on and switching back is instant. */
.msg-pane { display: block; }
.msg-pane.hidden { display: none; }
/* "Still working on the server" placeholder shown when a reopened conversation ends
on a dangling user turn (e.g. a discussion the browser was refreshed away from,
still completing server-side). Replaced by the real reply when the poll picks it up. */
.pending-reply { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13.5px; }
.pending-dots { display: inline-flex; gap: 3px; }
.pending-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .35; animation: pending-blink 1.2s infinite ease-in-out; }
.pending-dots i:nth-child(2) { animation-delay: .2s; }
.pending-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pending-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.btn-settings {
background: var(--bg-3);
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
font-size: 13.5px;
}
.btn-settings:hover { background: var(--bg-hover); color: var(--text); }
/* ---- Main ---- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chat-header {
height: 52px; flex-shrink: 0;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 22px;
}
.model-badge {
font-size: 12.5px; color: var(--text-dim);
background: var(--bg-2); border: 1px solid var(--border);
padding: 5px 12px; border-radius: 20px;
}
.model-badge .dot { color: var(--ok); }
/* ---- Messages ---- */
.messages { flex: 1; overflow-y: auto; padding: 26px 0; }
.msg-row { max-width: 780px; margin: 0 auto; padding: 6px 22px; display: flex; gap: 14px; }
.msg-row.user { flex-direction: row-reverse; }
.avatar {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.avatar.user { background: var(--user-bubble); }
.avatar.assistant { background: var(--bg-3); }
.avatar.peer { background: rgba(255,255,255,0.07); }
/* Quorai mascot as the assistant avatar — clipped to the rounded-square tile so
the mark stays centered inside it (no overflow spill). */
/* Match the group-chat icon: accent mark, centered with breathing room in the tile. */
.avatar-bot { width: 62%; height: 62%; overflow: hidden; display: block; color: var(--accent); }
.msg-body { flex: 1; min-width: 0; padding-top: 2px; display: flex; flex-direction: column; align-items: flex-start; }
.msg-row.user .msg-body { align-items: flex-end; }
/* AI avatar sits on the left, so reserve the same width on the right (avatar 30 +
gap 14) so assistant content lines up with the user bubble's right edge. */
.msg-row.assistant .msg-body { padding-right: 44px; }
.msg-role { font-size: 12px; color: var(--text-faint); margin-bottom: 3px; font-weight: 600; }
.src-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px; font-weight: 600; line-height: 1;
padding: 2px 6px; border-radius: 999px; margin-left: 6px;
border: 1px solid var(--border); vertical-align: middle; cursor: help;
}
.src-badge.peer { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.src-badge.local { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.msg-content {
word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: 14px; padding: 9px 14px;
}
.msg-row.user .msg-content { background: var(--user-bubble); border-color: transparent; }
.msg-content.msg-skip { color: var(--text-faint); font-style: italic; background: transparent; border-style: dashed; }
.msg-row.peer .msg-content { background: var(--bg-3); border-color: var(--border); }
/* Every CARD under an answer is one width — the column's.
`.msg-body` is a flex column with `align-items: flex-start`, so a block child
shrinks to its own content unless it says otherwise. Only the Workbench said so:
the downloads card stopped at 520px and the send-approval at 560px, so one answer
that made a file and then asked to send it drew three boxes with three different
right edges, each starting from the same left one. This is the ONE place that
decides it — a card added later joins the list rather than picking its own width.
Chips, badges and attachments are inline-flex and are deliberately not here: they
size to their content because that is what a chip IS. */
.msg-body > .wb-box,
.msg-body > .files-card,
.msg-body > .send-approve,
.msg-body > .proc-box,
.msg-body > .msg-error { align-self: stretch; width: 100%; box-sizing: border-box; }
/* An approval can also land straight in the pane (a card rebuilt outside a turn has no
row to sit in), and an approved action that produced a file drops its downloads card
in beside it. There they are ordinary blocks — full pane width — so they take the
message column's own measurements instead, like .discussion-learn does. */
.msg-pane > .send-approve, #messages > .send-approve,
.msg-pane > .files-card, #messages > .files-card { max-width: 780px; margin: 10px auto; }
.discussion-sep {
max-width: 780px; margin: 12px auto 4px; padding: 0 22px;
display: flex; align-items: center; gap: 10px;
font-size: 12px; color: var(--text-faint); font-weight: 600;
}
.discussion-sep::before, .discussion-sep::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}
.dl-vote { max-width: 780px; margin: 2px auto; padding: 0 22px; font-size: 12px; color: var(--text-faint); }
.dl-vote.yes { color: var(--ok); }
.dl-vote.no { color: var(--warn); }
.discussion-learn {
max-width: 780px; margin: 8px auto; padding: 10px 16px; border-radius: 12px;
border: 1px solid var(--border); font-size: 13px; line-height: 1.5;
}
.discussion-learn.ok { background: var(--ok-soft); border-color: transparent; }
.discussion-learn.no { background: var(--warn-soft); border-color: transparent; }
.dl-head { font-weight: 600; }
.dl-facts { margin: 6px 0 0; padding-left: 20px; }
.dl-facts li { margin: 4px 0; }
.dl-fact-text { vertical-align: middle; }
.dl-promote {
margin-left: 8px; vertical-align: middle; font-size: 11px; line-height: 1.6;
padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border);
background: var(--bg-2); color: var(--text-faint); cursor: pointer; white-space: nowrap;
}
.dl-promote:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }
.dl-promote.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.dl-promote:disabled { cursor: default; }
.dl-open-head { margin-top: 10px; color: var(--warn); }
.dl-open li { margin: 6px 0; }
.dl-open-why { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.peer-process {
background: var(--bg-3); border: 1px solid var(--border); border-left: 3px solid var(--ok);
border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; max-width: 100%;
max-height: 260px; overflow-y: auto;
}
.peer-process-title {
font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
color: var(--text-faint); font-weight: 700; margin-bottom: 5px;
}
.proc-step { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 2px 0; }
.proc-step.tool code { color: var(--accent-2); font-family: var(--mono); font-size: 11.5px; }
/* Collapsible "thinking" box (click header to expand) */
.proc-box { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-3); margin-bottom: 6px; max-width: 100%; overflow: hidden; }
.proc-box.live { border-color: rgba(84,201,138,.5); }
.proc-head {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
background: none; border: none; color: var(--text-dim); padding: 8px 12px; font-size: 12.5px; font-weight: 600;
}
.proc-head:hover { background: var(--bg-hover); }
.proc-caret { transition: transform .15s; font-size: 10px; color: var(--text-faint); }
.proc-box:not(.collapsed) .proc-caret { transform: rotate(90deg); }
.proc-name { flex: 1; }
.proc-status { font-size: 11px; color: var(--text-faint); font-weight: 500; }
.proc-live { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.proc-box.live .proc-live { background: var(--ok); box-shadow: 0 0 7px var(--ok); animation: cn-pulse 1.1s ease-in-out infinite; }
.proc-body { max-height: 300px; overflow-y: auto; padding: 4px 12px 10px; border-top: 1px solid var(--border); }
.proc-box.collapsed .proc-body { display: none; }
.consult-thinking {
max-width: 780px; margin: 0 auto; padding: 4px 22px 8px;
display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13.5px;
}
.dot-pulse {
width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
animation: cn-pulse 1s ease-in-out infinite;
}
@keyframes cn-pulse { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
/* Live "the model is composing a tool call" heartbeat (writing code…). */
.tool-progress {
display: flex; align-items: center; gap: 8px;
margin: 6px 0 2px; font-size: 13px; color: var(--text-dim);
}
.tool-progress .tp-label { opacity: .9; }
.msg-content p { margin: 0 0 10px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content ul, .msg-content ol { margin: 4px 0 10px; padding-left: 22px; }
.msg-content li { margin: 3px 0; }
.msg-content h1, .msg-content h2, .msg-content h3 { margin: 14px 0 8px; line-height: 1.3; }
.msg-content h1 { font-size: 1.35em; }
.msg-content h2 { font-size: 1.2em; }
.msg-content h3 { font-size: 1.08em; }
.msg-content a { color: var(--accent-2); }
.msg-content code {
font-family: var(--mono); font-size: .88em;
background: var(--bg-3); padding: 2px 5px; border-radius: 5px;
}
.msg-content pre {
background: #0b0c10; border: 1px solid var(--border);
border-radius: 10px; padding: 13px 15px; overflow-x: auto; margin: 8px 0 12px;
}
.msg-content pre code { background: none; padding: 0; font-size: .86em; line-height: 1.5; }
.msg-content blockquote {
border-left: 3px solid var(--accent); margin: 8px 0; padding: 2px 14px; color: var(--text-dim);
}
.cursor::after { content: "▋"; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* tool call chips */
.tool-chip {
display: inline-flex; align-items: center; gap: 7px;
background: var(--bg-3); border: 1px solid var(--border);
border-radius: 9px; padding: 7px 11px; margin: 6px 0; font-size: 12.5px;
color: var(--text-dim); cursor: pointer; max-width: 100%;
}
.tool-chip:hover { background: var(--bg-hover); }
.tool-chip .tool-icon { font-size: 14px; }
.tool-chip code { font-family: var(--mono); color: var(--accent-2); }
.tool-detail {
font-family: var(--mono); font-size: 12px; color: var(--text-dim);
background: #0b0c10; border: 1px solid var(--border); border-radius: 8px;
padding: 8px 11px; margin: 2px 0 8px; white-space: pre-wrap; word-break: break-word;
}
.msg-error {
background: rgba(240,96,106,.1); border: 1px solid rgba(240,96,106,.35);
color: #ffb3b8; border-radius: 9px; padding: 10px 13px; font-size: 13.5px; margin-top: 4px;
}
/* empty state */
.empty-state { max-width: 560px; margin: 8vh auto 0; text-align: center; padding: 0 22px; }
.empty-logo { font-size: 52px; margin-bottom: 6px; }
.empty-state h1 { font-size: 26px; margin: 0 0 10px; }
.empty-state p { color: var(--text-dim); }
.suggestions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 22px; }
.chip-suggest {
background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
border-radius: 20px; padding: 9px 15px; font-size: 13px;
}
.chip-suggest:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }
.link-btn { background: none; border: none; color: var(--accent-2); text-decoration: underline; font-size: inherit; padding: 0; }
/* ---- Composer ---- */
#composer { flex-shrink: 0; padding: 12px 22px 16px; border-top: 1px solid var(--border); }
.composer-inner {
max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 18px; padding: 10px 12px 10px 14px;
}
.composer-inner:focus-within { border-color: var(--accent); }
#input {
width: 100%; resize: none; border: none; background: none; color: var(--text);
font-family: inherit; font-size: 15px; line-height: 1.5; max-height: 200px; outline: none; padding: 4px 0 2px;
}
/* @mention autocomplete — pops above the composer box */
.composer-inner { position: relative; }
.mention-menu {
position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 8px;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow-2); padding: 4px; max-height: 240px; overflow-y: auto; z-index: 40;
}
.mention-menu.hidden { display: none; }
.mention-item {
display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
cursor: pointer; font-size: 13.5px; color: var(--text);
}
.mention-item.active, .mention-item:hover { background: var(--bg-hover); }
/* Same vocabulary as .cn-presence on the Members page: fill = a person is there,
colour = whether we know. Keeping the surfaces in step matters more than the
1px size difference — see the block above .cn-presence for why. */
.mention-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.mention-dot.active { background: var(--ok); }
.mention-dot.idle { background: var(--warn); }
.mention-dot.away { background: transparent; border: 1.5px solid var(--ok); }
.mention-dot.online { background: transparent; border: 1.5px solid var(--ok); }
.mention-dot.unknown { background: transparent; border: 1.5px dashed var(--text-faint); opacity: .8; }
.mention-dot.offline { background: var(--text-faint); }
.mention-dot.local { background: var(--accent); }
.mention-name { font-weight: 600; }
.mention-hint { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.composer-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.composer-controls-right { display: flex; align-items: center; gap: 8px; }
#attach-btn {
width: 32px; height: 32px; padding: 0; border-radius: 50%; flex-shrink: 0;
font-size: 15px; line-height: 1; justify-content: center;
}
#attach-btn svg { width: 16px; height: 16px; display: block; }
#composer.drag .composer-inner { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* File-attachment chips — pending row in the composer + chips on a sent message. */
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.attach-chip {
display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px;
padding: 3px 10px; font-size: 12.5px; color: var(--text-dim);
}
.attach-chip .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .attach-ico { flex-shrink: 0; }
.attach-x {
border: none; background: none; color: var(--text-faint); cursor: pointer;
font-size: 12px; padding: 0 0 0 2px; line-height: 1;
}
.attach-x:hover { color: var(--danger); }
.attach-eye {
border: none; background: none; color: var(--text-faint); cursor: pointer;
font-size: 12px; padding: 0 0 0 2px; line-height: 1;
}
.attach-eye:hover { color: var(--accent); }
.btn-send, .btn-stop {
width: 32px; height: 32px; border-radius: 50%; border: none; flex-shrink: 0;
font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-send { background: var(--accent); color: var(--on-accent); }
.btn-send:hover { background: var(--accent-2); }
.btn-send:disabled { background: var(--bg-3); color: var(--text-faint); cursor: default; }
.btn-stop { background: var(--bg-3); color: var(--text); border: 1px solid var(--border); }
.btn-stop:hover { background: var(--bg-hover); }
.composer-hint { text-align: center; color: var(--text-faint); font-size: 11.5px; margin-top: 8px; }
/* ---- composer controls (mode + model dropdowns) ---- */
.composer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
.composer-drop { position: relative; }
.drop-btn {
display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2);
border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.drop-btn:hover { border-color: var(--accent); color: var(--text); }
.drop-btn .caret { font-size: 10px; opacity: .7; }
.drop-menu {
position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 240px; max-height: 320px; overflow-y: auto;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 50;
}
.drop-menu.right { left: auto; right: 0; }
.drop-item {
display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
background: none; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--text);
}
.drop-item b { font-size: 13px; font-weight: 600; }
.drop-item span { font-size: 11.5px; color: var(--text-faint); }
.drop-item:hover { background: var(--bg-hover); }
.drop-item.active { background: var(--accent-soft); }
.drop-item.active b { color: var(--accent-2); }
.drop-manage { border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 8px 8px; color: var(--text-dim); font-size: 12.5px; flex-direction: row; }
.drop-empty { padding: 12px; font-size: 12.5px; color: var(--text-faint); text-align: center; }
/* Scope reminder under the model picker: the choice pins THIS chat, not the node. */
.drop-note { padding: 6px 10px 2px; font-size: 11px; color: var(--text-faint); }
/* ---- Settings modal ---- */
.overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.55);
display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; }
.icon-btn { background: none; border: none; color: var(--text-dim); font-size: 17px; }
.icon-btn:hover { color: var(--text); }
.modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.field em { font-style: normal; color: var(--text-faint); font-weight: 400; }
.field input[type=text], .field input[type=password], .field input:not([type=range]), .field select, .field textarea {
background: var(--bg); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; width: 100%; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.model-row { display: flex; gap: 8px; }
.model-row input { flex: 1; }
/* QuorAI tier picker — stands in for the model-id input on managed nodes. */
.model-row .tier-select { flex: 1; min-width: 0; }
.btn-mini {
background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 0 14px; font-size: 13px; white-space: nowrap;
}
.btn-mini:hover { background: var(--bg-hover); }
.hint { color: var(--text-faint); font-size: 12px; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--danger); }
/* The image-model field carries an inline Test button — proving a model can see is
the only way to tell a working one from one that ignores images and answers anyway. */
.vision-row { display: flex; gap: 8px; align-items: center; }
.vision-row input, .vision-row select { flex: 1; min-width: 0; }
.vision-row + input { margin-top: 8px; }
#vision-key-row { margin-top: 8px; }
.key-set { color: var(--ok); }
.key-unset { color: var(--text-faint); }
.privacy-note { font-size: 12px; color: var(--text-faint); background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin: 0; }
.privacy-note code { font-family: var(--mono); color: var(--text-dim); }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
/* ---- appDialog(): the in-app replacement for confirm()/prompt() ---- */
.dialog-modal { max-width: 460px; }
.dialog-body { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.dialog-body strong { color: var(--text); font-weight: 600; }
/* What is actually about to happen — the thing a browser confirm() cannot show. */
.dialog-target { margin-top: 10px; background: var(--bg); border: 1px solid var(--border);
border-radius: 9px; padding: 9px 11px; font-family: var(--mono); font-size: 11.5px;
color: var(--text-dim); word-break: break-all; }
.dialog-hint { font-size: 11.5px; color: var(--text-faint); }
.dialog-foot { gap: 8px; }
/* `appDialog({danger:true})` has always set this class; nothing ever styled it, so a
"Delete" and an "OK" looked identical. Every irreversible action passes it. */
#dialog-ok.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
#dialog-ok.danger:hover { filter: brightness(1.08); }
/* The permissions an extension asks for come through as a list. */
.dialog-body ul { margin: 8px 0 0; padding-left: 20px; }
.dialog-body li { margin: 3px 0; }
#dialog-input { resize: vertical; min-height: 66px; }
/* A destructive/outward confirm is visually distinct from an ordinary OK. */
.btn-primary.danger { background: var(--danger, #e03131); }
.btn-primary.danger:hover { background: color-mix(in srgb, var(--danger, #e03131) 85%, #000); }
.btn-primary { background: var(--accent); color: var(--on-accent); border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 600; }
.btn-primary:hover { background: var(--accent-2); }
/* ---- Marketplace ---- */
.modal-lg { max-width: 760px; }
.modal-sub { color: var(--text-faint); font-size: 12px; display: block; margin-top: 3px; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
/* Tools tab — first-class tool catalog grouped by connector / core compute */
#tools-grid { display: flex; flex-direction: column; gap: 12px; }
/* Heartbeat view — the system's rhythm (scheduled skills + proactive beat) */
.hb-section { margin-bottom: 24px; }
.hb-section-title { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.hb-list { display: flex; flex-direction: column; }
.hb-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--border); }
.hb-list .hb-row:first-child, .hb-section > .hb-row { border-top: none; }
.hb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hb-row-name { font-weight: 600; font-size: 14px; }
.hb-row-sub { font-size: 12px; color: var(--text-dim); }
.hb-row-sub.on { color: var(--accent); }
/* Heartbeat is a GRID OF CARDS, reusing the `market-card` surface the Marketplace and
Skills grids already use. It was the only list in the app that read like a settings
table, which is what made the page feel like a different product. `hb-card` changes
nothing but the click affordance: a Heartbeat card is not a link — its controls are,
so it must not take the pointer cursor or the hover-accent border a tile gets. */
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.market-card.hb-card { cursor: default; }
.market-card.hb-card:hover { border-color: var(--border); box-shadow: var(--shadow-1); }
.hb-card-id { min-width: 0; } /* let a long skill name ellipsize, not stretch the card */
.hb-card .market-card-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* The controls sit on one line and stay put as the card grows. */
.hb-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.hb-card-actions .hb-select { flex: 1; min-width: 120px; }
/* Cadence reads as the card's status line — accented only when it is actually armed. */
.hb-when { font-size: 11.5px; color: var(--text-faint); }
.hb-when.on { color: var(--accent); }
/* Ownership: who a skill is FOR, and who answers for it. Described, not enforced —
see docs/SHARED_SKILLS_PLAN.md. */
.hb-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0 0 10px; max-width: 62ch; }
.hb-chip { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-2); }
.hb-chip.scope-company { border-color: var(--accent); color: var(--accent); }
.hb-chip.scope-team { border-color: var(--accent-2); color: var(--accent-2); }
.hb-owner { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }
.hb-owner.you { color: var(--accent); }
/* Shared with nobody answerable is the state worth noticing, not a neutral fact. */
.hb-owner.none { color: var(--warn); }
.hb-toggle { border: 1px solid var(--border); background: var(--bg-3); color: var(--text-dim); border-radius: 999px; padding: 3px 13px; font-size: 12px; font-weight: 600; cursor: pointer; }
.hb-toggle.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.hb-select { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 5px 8px; font-size: 13px; }
/* Heartbeat borrows Company → Skills' card language wholesale (`skl-*`), so the only
rules here are the ones that page has no equivalent for: a full-width field, a run's
report panel, and the card that owns the open panel. */
.hb-section .skl-field.wide { flex: 1 1 100%; }
.hb-textarea { font-family: inherit; line-height: 1.45; resize: vertical; min-height: 46px; }
/* The panel spans the whole grid row rather than living inside its 330px card, because a
report is long-form reading. Its card is marked `expanded` so the two read as one
block instead of a card and an unrelated slab under it. */
.skl-card.expanded { border-color: var(--accent); border-left-color: var(--accent); }
.hb-panel { grid-column: 1 / -1; border: 1px solid var(--accent); border-radius: 12px;
background: var(--bg-2); padding: 14px 16px; margin-top: -4px; }
/* Run now and On/Off are actions, not settings — they sit on the fields' baseline
rather than above one, and keep their own width instead of stretching to a column. */
.skl-card-controls > .btn-mini,
.skl-card-controls > .hb-toggle { align-self: flex-end; flex: 0 0 auto; }
.hb-panel-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
.hb-panel-n { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.hb-panel-head .btn-mini { margin-left: auto; }
/* History beside the report — the same shape a skill page uses, so a person who has read
one report knows how to read them all. It stacks on a narrow screen. */
.hb-panel-body { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px; }
.hb-runs { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.hb-report { max-height: 420px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; }
.hb-report > :first-child { margin-top: 0; }
@media (max-width: 780px) { .hb-panel-body { grid-template-columns: 1fr; } }
/* Lean schedule popover (from Heartbeat) */
.sched-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.sched-modal { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 430px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.sched-modal-head { display: flex; align-items: center; }
.sched-modal-head h2 { margin: 0; font-size: 16px; }
.sched-modal-x { margin-left: auto; background: none; border: none; color: var(--text-faint); font-size: 22px; line-height: 1; cursor: pointer; }
.sched-modal-x:hover { color: var(--text); }
.sched-modal-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sched-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* Collapsible "About this skill" — keeps a long description out of the header */
.skill-about { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
.skill-about summary { cursor: pointer; padding: 10px 0; font-size: 13px; font-weight: 600; color: var(--text-dim); list-style: none; }
.skill-about summary::-webkit-details-marker { display: none; }
.skill-about summary::before { content: "▸ "; }
.skill-about[open] summary::before { content: "▾ "; }
.skill-about p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--text-dim); white-space: pre-wrap; }
/* Access governance matrix (admin-only) — per-user plugin + skill grants */
#org-panel-access .access-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.access-switch { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.access-matrix { display: flex; flex-direction: column; gap: 14px; }
.access-member { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-2); }
.access-member.is-admin { opacity: 0.75; }
.access-member-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.access-role { font-size: 12px; color: var(--text-dim); text-transform: capitalize; }
.access-member-head .access-save { margin-left: auto; }
.access-group { margin-top: 12px; }
.access-group-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.access-all { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.access-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.access-chip { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none; }
.access-chip:hover { background: var(--bg-hover); }
.access-chip.core { opacity: 0.7; cursor: default; }
.access-core { font-size: 10px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
/* Home: AI output (Router) cards — one card per type, listing its items as rows */
.home-router-toggle { grid-column: 1 / -1; padding: 9px 14px; border: 1px dashed var(--border); border-radius: 10px; }
.home-router-toggle .access-switch { font-weight: 500; font-size: 13px; color: var(--text-dim); }
.home-card-count { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--bg-3); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.home-cardlist { display: flex; flex-direction: column; }
.home-cardrow { display: flex; align-items: flex-start; gap: 8px; padding: 10px 2px; border-top: 1px solid var(--border); }
.home-cardlist .home-cardrow:first-child { border-top: none; }
.home-cardrow.clickable { cursor: pointer; border-radius: 8px; }
.home-cardrow.clickable:hover { background: var(--bg-hover); }
.home-cardrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-cardrow-title { font-weight: 600; font-size: 14px; }
.home-cardrow-preview { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.home-cardrow-x { background: none; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.home-cardrow-x:hover { color: var(--text); }
.tool-group { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.tool-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.tool-group-name { font-weight: 700; font-size: 14px; }
.tool-group-count { margin-left: auto; font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.tool-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; }
.tool-badge.core { background: var(--accent-soft); color: var(--accent-2); }
.tool-badge.on { background: var(--ok-soft); color: var(--ok); }
.tool-badge.off { background: var(--bg-3); color: var(--text-faint); }
.tool-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--border); }
.tool-row:first-child { border-top: none; }
.tool-row-main { flex: 1; min-width: 0; }
.tool-name { font-family: var(--mono); font-size: 12.5px; color: var(--accent-2); background: none; border: none; padding: 0; }
.tool-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.tool-needs { flex-shrink: 0; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.tool-needs.core { color: var(--ok); }
.market-controls { display: flex; gap: 10px; margin-bottom: 14px; max-width: 660px; }
.market-search { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; outline: none; }
.market-search:focus { border-color: var(--accent); }
.market-cat { background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; outline: none; }
.market-cat:focus { border-color: var(--accent); }
.market-card {
background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
padding: 15px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .15s;
}
.market-card:hover { border-color: var(--accent); }
.market-card-top { display: flex; gap: 12px; align-items: flex-start; }
.market-card-icon {
font-size: 24px; width: 44px; height: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--bg-3); border-radius: 11px;
}
.market-card-name { font-weight: 600; font-size: 15px; }
.market-card-cat { font-size: 11.5px; color: var(--text-faint); }
.market-card-sum { font-size: 13px; color: var(--text-dim); flex: 1; }
.ext-bundle { font-size: 11.5px; color: var(--text-faint); margin: -2px 0 2px; }
.ext-price { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ext-price.free { color: #6fce8f; }
.market-card-foot { display: flex; align-items: center; justify-content: space-between; }
/* Role editor: what the ticked SKILLS already connect to. Read-only — ticking these
below would save a derived id as explicit and the two would drift. */
.cn-role-derived:not(:empty) {
margin: -4px 0 10px; padding: 8px 10px; border-radius: var(--radius);
background: var(--bg-2); border: 1px solid var(--border);
}
.cn-role-derived p { margin: 0; }
/* Addon policy: what allowing these skills ALSO permits. Approval without disclosure
is not consent, so this sits next to the list being edited, not in a doc. */
.pol-implied {
margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px;
line-height: 1.55; background: var(--bg-2); border: 1px solid var(--border);
}
.pol-imp-head { color: var(--text); margin-bottom: 6px; }
.pol-imp-row { color: var(--text-dim); padding: 2px 0; }
.pol-imp-row code { font-size: 11.5px; color: var(--text-faint); }
.pol-imp-foot { margin-top: 8px; color: var(--text-faint); font-size: 11.5px; }
/* Connections page: what depends on this connection. The reason the page exists — a
connector that has stopped working otherwise says nothing about what stopped with it. */
.conn-usedby { font-size: 12.5px; color: var(--text-dim); flex: 1; line-height: 1.5; }
.conn-usedby.muted { color: var(--text-faint); }
.conn-advanced { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.conn-advanced > summary {
cursor: pointer; font-size: 13px; color: var(--text-dim); user-select: none; padding: 4px 0;
}
.conn-advanced > summary:hover { color: var(--text); }
.conn-advanced .hint { margin: 6px 0 12px; }
.cap-status {
font-size: 11.5px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-faint);
}
.cap-status.linked { color: var(--ok); border-color: rgba(84,201,138,.4); background: rgba(84,201,138,.1); }
/* Connected, but the member's role doesn't include it — the AI gets no tools for it. */
.cap-status.blocked {
color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.cap-role-warn {
margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px;
line-height: 1.55; color: var(--text);
background: color-mix(in srgb, var(--warn) 10%, var(--bg-2));
border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--border));
}
.cap-status.installed { color: var(--accent-2); border-color: rgba(154,140,255,.4); background: var(--accent-soft); }
.cap-status.disabled { color: #e0a458; border-color: rgba(224,164,88,.4); background: rgba(224,164,88,.1); }
.cap-status.warn { color: #e0a458; border-color: rgba(224,164,88,.4); background: rgba(224,164,88,.1); }
.market-card-action { font-size: 12.5px; color: var(--accent-2); font-weight: 600; cursor: pointer; }
.market-card-action:hover { text-decoration: underline; }
/* Roles tab: admin staffing (AI teammate / person) */
.role-seats { font-size: 12px; color: var(--text-faint); margin: 0 0 12px; }
.role-skills { font-size: 11.5px; color: var(--text-faint); min-height: 1em; }
.role-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.role-actions .btn-primary { padding: 7px 14px; font-size: 12.5px; }
.role-actions .btn-mini { padding: 6px 12px; font-size: 12.5px; height: auto; line-height: 1.9; }
.role-actions .recruit-btn { margin-left: auto; }
.role-note { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.role-note.err { color: var(--danger); }
.role-spin {
width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
border: 2px solid var(--border); border-top-color: var(--accent);
animation: role-spin .7s linear infinite;
}
@keyframes role-spin { to { transform: rotate(360deg); } }
.role-person-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.role-person-form .cn-input { margin: 0; }
.role-person-form .cn-label { margin-top: 2px; }
.role-result { margin-top: 4px; }
/* capability detail modal */
.cap-head { display: flex; gap: 14px; align-items: center; }
.cap-head-icon { display: flex; flex-shrink: 0; }
.cap-head-tile { --ico-sz: 52px; }
/* ---- the detail-page head, shared by #view-capability and #view-skill ----
A page, not a dialog: back, then the thing at full size, what it can do, and — for a
connection, only once it is installed — where you set it up. Both pages use it so that
arriving from either list lands on the same shape. */
.lib-back {
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
padding: 6px 12px 6px 8px; border: 1px solid var(--border); border-radius: 999px;
background: var(--bg-2); color: var(--text-dim); font: inherit; font-size: 13px;
}
.lib-back:hover { background: var(--bg-hover); color: var(--text); }
.lib-back svg { width: 15px; height: 15px; }
/* Top-aligned, not centred: the description runs to three lines on some skills, and a
centred tile then floats halfway down the paragraph instead of sitting by the name. */
.cap-page-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; }
.cap-page-head .cap-head-icon { margin-top: 2px; }
.cap-page-head .cap-head-act { align-self: center; }
.cap-head-main { min-width: 0; }
.cap-head-main h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.cap-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }
.cap-head-act { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cap-state { display: inline-flex; align-items: center; }
/* The skill page's one control while the skill is not yours yet. */
.skill-head-act { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.skill-head-act .btn-primary { padding: 9px 22px; font-size: 14px; border-radius: 999px; }
.cap-head-act .btn-primary { padding: 9px 22px; font-size: 14px; border-radius: 999px; }
#view-capability .cap-desc { max-width: 70ch; margin: 0 0 22px; }
#view-capability .cap-section { margin-bottom: 22px; }
/* The setup box is the one part that is a FORM, so it gets a surface of its own. */
.cap-setup {
padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px;
background: var(--bg-1);
}
.cap-setup-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-page-foot {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border);
}
.cap-page-foot .btn-ghost-danger { margin-left: auto; }
#view-capability .privacy-note { margin: 14px 0 0; }
.cap-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.65; margin: 0; }
.cap-section { display: flex; flex-direction: column; gap: 8px; }
.cap-section-title { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.cap-perms { display: flex; flex-wrap: wrap; gap: 7px; }
.cap-perm { font-size: 12px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; color: var(--text-dim); }
.cap-perm::before { content: "🔑 "; }
/* What the plugin gives the AI — one standard row per tool, ruled like a list rather
than run together as prose. Built by capToolRows(); the connector's tools and the
Agent Organization's both come through here. */
.cap-tools { display: flex; flex-direction: column; }
.cap-tool {
display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px;
padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.cap-tool:last-child { border-bottom: 0; }
.cap-tool-ico {
width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
color: var(--text-faint);
background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px;
}
.cap-tool-ico .ico { width: 15px; height: 15px; }
.cap-tool-main { min-width: 0; }
.cap-tool-name {
font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-tool-desc {
margin-top: 1px; font-size: 12px; color: var(--text-faint);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cap-field > label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.cap-field .cap-help { font-size: 11.5px; color: var(--text-faint); }
.cap-field-check { flex-direction: row; align-items: center; gap: 8px; }
.cap-field input.set::placeholder { color: var(--ok); }
.cap-test { font-size: 13px; border-radius: 8px; padding: 9px 12px; }
.cap-test.ok { background: rgba(84,201,138,.1); border: 1px solid rgba(84,201,138,.4); color: #9be9bd; }
.cap-test.err { background: rgba(240,96,106,.1); border: 1px solid rgba(240,96,106,.35); color: #ffb3b8; }
.cap-help.warn { color: #ffb088; }
/* "this connector runs on another one's connection" — sits above the empty boxes, so
they read as inherited rather than as unfinished setup. */
.cap-inherit {
font-size: 13px; line-height: 1.5; border-radius: 8px; padding: 9px 12px;
background: rgba(84,201,138,.08); border: 1px solid rgba(84,201,138,.32);
color: var(--text-2, inherit);
}
.cap-inherit strong { color: var(--ok); }
/* oauth device-code flow */
.cap-oauth { display: flex; flex-direction: column; gap: 10px; }
.cap-oauth-status { font-size: 13.5px; padding: 9px 12px; border-radius: 9px; }
.cap-oauth-status.ok { background: rgba(84,201,138,.1); border: 1px solid rgba(84,201,138,.4); color: #9be9bd; }
.cap-oauth-flow { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.cap-oauth-flow p { margin: 0; font-size: 13.5px; }
.cap-oauth-flow a { color: var(--accent-2); }
.oauth-code { font-family: var(--mono); font-size: 19px; letter-spacing: 2px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--accent-2); display: inline-block; }
.oauth-spin { color: var(--text-faint); }
.cap-oauth-row { display: flex; gap: 10px; align-items: center; }
/* Curated MCP directory (one-click server gallery) */
.mcp-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.mcp-dir-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.mcp-dir-head { display: flex; align-items: center; gap: 7px; }
.mcp-dir-icon { font-size: 16px; }
.mcp-dir-head code { font-family: var(--mono); color: var(--accent-2); font-size: 13px; }
.mcp-dir-summary { flex: 1; }
.mcp-dir-actions { display: flex; align-items: center; }
.mcp-dir-form { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.cap-advanced { margin-top: 6px; }
.cap-advanced > summary { cursor: pointer; font-size: 12.5px; color: var(--text-dim); padding: 4px 0; }
.wa-qr { width: 240px; height: 240px; align-self: center; background: #fff; border-radius: 12px; padding: 10px; }
.cap-foot { justify-content: space-between; align-items: center; }
.cap-foot-right { display: flex; align-items: center; gap: 10px; }
.enable-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.enable-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.btn-ghost-danger { background: none; border: 1px solid rgba(240,96,106,.4); color: var(--danger); border-radius: 10px; padding: 9px 14px; font-size: 13px; }
.btn-ghost-danger:hover { background: rgba(240,96,106,.12); }
/* toast */
#toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
padding: 11px 18px; border-radius: 10px; font-size: 13.5px; z-index: 100;
opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#toast.err { border-color: var(--danger); color: #ffb3b8; }
/* ===== App shell: ChatGPT-style sidebar + views ===== */
.side-nav { display: flex; flex-direction: column; gap: 1px; }
.side-item {
display: flex; align-items: center; gap: 12px;
width: 100%; text-align: left; background: none; border: none; cursor: pointer;
color: var(--text); font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 8px;
}
.side-item:hover { background: var(--bg-hover); }
.side-item.active { background: var(--bg-3); }
/* Monochrome icons: grayscale removes emoji colour; SVGs inherit currentColor. */
.side-item .si-ico {
width: 20px; height: 18px; flex-shrink: 0; filter: grayscale(1);
display: inline-flex; align-items: center; justify-content: center; font-size: 15px; opacity: .82;
}
.side-item .si-ico svg { width: 17px; height: 17px; display: block; }
.side-item:hover .si-ico, .side-item.active .si-ico { opacity: 1; }
/* Group Chat participants panel */
.gc-people { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.gc-person { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); background: var(--bg-3); border-radius: 8px; padding: 3px 9px; }
.gc-tag { font-size: 9px; font-weight: 700; background: var(--accent-soft); color: var(--accent-2); border-radius: 5px; padding: 0 5px; text-transform: uppercase; }
.side-item-dim { color: var(--text-faint); font-size: 13px; }
.side-item-kbd {
margin-left: auto; font-size: 10.5px; color: var(--text-faint); font-weight: 600;
background: var(--bg-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.nav-badge {
margin-left: auto; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center; line-height: 15px;
}
.side-section { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.side-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 6px 10px 3px; font-weight: 600; }
.side-section-title.recents-title { display: flex; align-items: center; justify-content: space-between; padding-right: 6px; }
.recents-search-btn { background: none; border: none; color: var(--text-faint); cursor: pointer;
padding: 3px; border-radius: 5px; display: inline-flex; align-items: center; }
.recents-search-btn:hover { color: var(--text); background: var(--bg-hover); }
.recents-search-btn svg { width: 14px; height: 14px; }
/* ---- Group Chat view ---- */
.gc-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; height: calc(100vh - 210px); min-height: 380px; }
.gc-list { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding-right: 2px; }
.gc-item { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--text); font: inherit; }
.gc-item:hover { border-color: var(--accent); }
.gc-item.active { border-color: var(--accent); background: var(--accent-soft); }
.gc-item-ava { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-3); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.gc-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.gc-item-top { display: flex; align-items: center; gap: 6px; }
.gc-item-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-item-sub { font-size: 11.5px; color: var(--text-faint); }
.gc-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.gc-newbtn { width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.gc-newbtn:hover { border-color: var(--accent); background: var(--bg-3); }
.gc-sec { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 10px 4px 2px; }
.gc-pick { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin-bottom: 6px; }
.gc-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer; }
.gc-pick-row:hover { background: var(--bg-hover); }
.gc-pick-row > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.gc-pick-row .cn-ppl-avatar { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
/* Group chat is now its own view — the composer no longer has a mode dropdown. */
#mode-drop { display: none; }
/* Group-chat private AI copilot: suggestions + auto-send toggle + assist tag */
.gc-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.gc-cop-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.gc-cop-toggle input { accent-color: var(--accent); }
.gc-suggest { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 0; }
.gc-suggest:empty { display: none; }
.gc-sug { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.gc-sug-reply { border-color: var(--accent); background: var(--accent-soft); }
.gc-sug-h { font-size: 12px; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gc-sug-conf { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 6px; padding: 1px 6px; background: var(--bg-3); color: var(--text-faint); }
.gc-sug-conf.high { background: rgba(31,157,85,.18); color: var(--ok, #1f9d55); }
.gc-sug-private { font-size: 10px; font-weight: 600; color: var(--text-faint); background: var(--bg-3); border-radius: 6px; padding: 1px 6px; }
.gc-sug-text { width: 100%; resize: vertical; min-height: 54px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.5; }
.gc-sug-body { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.gc-sug-act { display: flex; gap: 8px; margin-top: 8px; }
.cn-assist-badge { font-size: 11px; opacity: .9; }
/* ===== Group Chat — full-bleed 3-column WhatsApp hub (rail | chat | Your AI) ===== */
.gc-hub { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr) 460px; background: var(--bg); position: relative; }
.gc-rail { border-right: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; }
.gc-rail-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; border-bottom: 1px solid var(--border); }
.gc-rail-head .cn-icon-btn svg { width: 18px; height: 18px; }
.gc-rail-title { font-weight: 700; font-size: 15px; flex: 1; }
/* Search the rail. Notifications and sound used to sit here as a permanent row; they
are in the head's ⋯ menu now (gcOpenRailMenu), and this is what a chat rail actually
needs above its list. */
.gc-rail-search { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.gc-rail-search .lib-search-ico { left: 24px; }
.gc-rail-search .lib-search { height: 34px; font-size: 13px; background: var(--bg); }
/* The in-app popup: the channel that always works — no permission, no OS, no service
worker. Bottom-right, one card per room, click to open it. */
.gc-notices { position: fixed; right: 18px; bottom: 18px; z-index: 4000;
display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.gc-notice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
padding: 11px 12px; border-radius: 12px; border: 1px solid var(--accent);
background: var(--bg-2); box-shadow: var(--shadow-2, 0 8px 28px rgba(0,0,0,.35));
animation: gc-notice-in .22s ease-out; }
.gc-notice:hover { background: var(--bg-hover); }
.gc-notice-ico { font-size: 15px; line-height: 1.3; flex: 0 0 auto; }
.gc-notice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-notice-top { font-size: 12px; color: var(--text-dim); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.gc-notice-top b { color: var(--text); }
.gc-notice-tx { font-size: 12.5px; color: var(--text); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gc-notice-x { flex: 0 0 auto; border: none; background: none; color: var(--text-faint);
cursor: pointer; font-size: 12px; padding: 0 2px; }
.gc-notice-x:hover { color: var(--text); }
@keyframes gc-notice-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gc-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
/* middle: the chat */
.gc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.gc-main-head { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--bg-2); }
.gc-main-head:hover { background: var(--bg-3); }
.gc-head-ava { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-3); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.gc-head-text { flex: 1; min-width: 0; }
.gc-head-name { font-weight: 700; font-size: 15px; }
.gc-head-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Each participant carries its own presence dot. The comma is drawn by CSS so the
dot never ends up on the wrong side of it. */
.gc-head-mem { display: inline-flex; align-items: center; gap: 4px; }
.gc-head-mem + .gc-head-mem::before { content: ", "; margin-right: 4px; color: var(--text-faint); }
.gc-head-mem .cn-presence { width: 7px; height: 7px; }
.gc-head-chev { color: var(--text-faint); font-size: 22px; flex-shrink: 0; }
.gc-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.gc-composer { display: flex; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); align-items: center; }
.gc-composer .cn-input { margin: 0; flex: 1; border-radius: 22px; padding: 11px 16px; }
.gc-comp-btn { flex-shrink: 0; width: 38px; height: 38px; border: none; background: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.gc-comp-btn svg { width: 20px; height: 20px; }
.gc-comp-btn:hover { background: var(--bg-hover); color: var(--text); }
/* emoji picker */
.gc-emoji-panel { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 14px; max-height: 180px; overflow-y: auto; border-top: 1px solid var(--border); background: var(--bg-2); }
.gc-emoji { border: none; background: none; font-size: 20px; line-height: 1; padding: 5px; border-radius: 8px; cursor: pointer; }
.gc-emoji:hover { background: var(--bg-hover); }
/* attachment preview before sending */
.gc-att-preview { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--bg-2); }
.gc-att-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.gc-att-preview .gc-att-ico { font-size: 24px; flex-shrink: 0; }
.gc-att-pname { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-att-x { flex-shrink: 0; border: none; background: var(--bg-3); color: var(--text-dim); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; }
.gc-att-x:hover { color: var(--text); }
/* attachment inside a message bubble */
.gc-att-imgwrap { display: block; margin: 2px 0 4px; }
.gc-att-img { max-width: min(280px, 100%); max-height: 340px; width: auto; height: auto; border-radius: 12px; display: block; }
.gc-att-file { display: flex; align-items: center; gap: 9px; margin: 2px 0 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); text-decoration: none; color: var(--text); max-width: 280px; }
.gc-att-file:hover { border-color: var(--accent); }
.gc-att-file .gc-att-ico { font-size: 20px; flex-shrink: 0; }
.gc-att-file .gc-att-meta { display: flex; flex-direction: column; min-width: 0; }
.gc-att-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-att-sub { font-size: 11px; color: var(--text-faint); }
/* "Editing message" bar above the composer (shown while editing your own message) */
.gc-editbar { display: flex; align-items: center; gap: 9px; padding: 9px 18px; border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); font-size: 12.5px; }
.gc-editbar-i { color: var(--accent); font-size: 13px; }
.gc-editbar-t { flex: 1; font-weight: 600; color: var(--text); }
.gc-editbar-x { border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 7px; border-radius: 7px; }
.gc-editbar-x:hover { background: var(--bg-hover); color: var(--text); }
.gc-composer .btn-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 15px; cursor: pointer; }
.gc-composer .btn-send:hover { filter: brightness(1.08); }
.gc-empty-main { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px; padding: 40px; text-align: center; }
/* right: Your AI panel — modern copilot chat */
.gc-ai { border-left: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-2), var(--bg)); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; min-height: 0; padding: 16px 14px 14px; }
.gc-ai-center { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 0; max-height: 100%; }
/* The Inbox panel's head, exactly: a small mark, the name, and the line that says what
it is doing. It was a centred hero — eyebrow, 104px mark, caption — which spent the
top third of the column saying "Your AI" to someone already looking at Your AI, and
made the two panels read as two different features. */
.gc-ai-head {
display: flex; flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0;
padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.gc-ai-id { min-width: 0; }
.gc-ai-head .gc-ai-logo { width: 38px; height: 38px; }
.gc-ai-head .gc-ai-logo svg { width: 30px; height: 30px; }
/* The big mark still exists — in the empty body, which is the one place there is room
for it and the one time it is the thing to look at. */
.gc-ai-body .ibx-ai-empty .gc-ai-logo { width: 132px; height: 132px; }
.gc-ai-body .ibx-ai-empty .gc-ai-logo svg { width: 96px; height: 96px; }
.gc-ai-tip { font-size: 11.5px; color: var(--text-faint); text-align: center; max-width: 240px; margin: 10px auto 0; line-height: 1.5; }
.gc-ai-tip b { color: var(--accent-2); font-weight: 700; }
.gc-ai-hero { padding: 18px 16px 8px; display: flex; flex-direction: column; align-items: center; }
.gc-ai-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-bottom: 6px; }
.gc-ai-logo { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.gc-ai-logo::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); filter: blur(12px); animation: gc-glow 4.5s ease-in-out infinite; }
.gc-ai-logo.thinking::before { animation-duration: 1.6s; }
.gc-ai-logo svg { position: relative; width: 76px; height: 76px; display: block; color: var(--accent); }
/* new-chat hero: the spinning logo, larger, no wordmark */
.empty-hero-logo { width: 150px; height: 150px; margin: 0 auto; }
.empty-hero-logo svg { width: 108px; height: 108px; }
.gc-ai-status { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-top: 10px; min-height: 16px; }
.gc-ai-feed { width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 2px 0; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
/* ===== AI threads panel (server-side jobs as status cards) ================== */
.gc-ai-body { width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 2px 6px; }
.gc-th-empty { color: var(--text-faint); font-size: 12.5px; line-height: 1.5; text-align: center; padding: 24px 10px; }
.gc-th-loading { display: flex; justify-content: center; padding: 26px 0; }
.gc-th-list { display: flex; flex-direction: column; gap: 8px; }
.gc-th-card { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--border);
background: var(--bg-2); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.gc-th-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.gc-th-card.waiting { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
/* the card body opens the thread; the mini buttons beside it stop / dismiss it */
.gc-th-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: none; background: none;
padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.gc-th-mini { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: var(--bg-3); color: var(--text-faint); border-radius: 7px;
font-size: 10px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s; }
.gc-th-mini:hover { color: var(--danger, #e03131); border-color: var(--danger, #e03131); }
.gc-th-mini.stop:hover { color: var(--text); border-color: var(--accent); }
.gc-th-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-th-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); color: var(--text-dim); white-space: nowrap; }
.gc-th-badge.thinking { background: var(--accent-soft); color: var(--accent-2); }
.gc-th-badge.waiting { background: rgba(224,168,0,.18); color: #e0a800; }
.gc-th-badge.complete { background: rgba(31,157,85,.18); color: var(--ok, #1f9d55); }
.gc-th-badge.error { background: rgba(224,49,49,.16); color: var(--danger, #e03131); }
.gc-th-badge.stopped { background: var(--bg-3); color: var(--text-faint); }
.gc-th-badge.sent { background: rgba(31,157,85,.14); color: var(--ok, #1f9d55); }
/* thread detail */
.gc-th-detail { display: flex; flex-direction: column; gap: 10px; }
.gc-th-dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gc-th-back { border: none; background: none; color: var(--accent-2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 2px; }
.gc-th-back:hover { text-decoration: underline; }
.gc-th-dtitle { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; }
.gc-th-steps { display: flex; flex-direction: column; gap: 5px; }
.gc-th-step { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); }
.gc-th-result.msg-content { background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.gc-th-working { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: 12.5px; font-weight: 600; }
.gc-th-err { color: var(--danger, #e03131); font-size: 12.5px; }
.gc-th-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.gc-th-actions .gcx-choice, .gc-th-actions .gcx-a-send, .gc-th-actions .gcx-a-copy, .gc-th-actions .gcx-a-dismiss,
.gc-th-actions .gcx-a-stop {
border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 9px; padding: 8px 11px;
font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.gc-th-actions .gcx-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.gc-th-actions .gcx-a-stop:hover { border-color: var(--danger, #e03131); color: var(--danger, #e03131); }
.gc-th-actions .gcx-a-send.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gc-th-actions .gcx-a-send.primary:hover { filter: brightness(1.08); }
/* "Other" — type a custom instruction */
.gc-th-other-wrap { margin-top: 2px; }
.gcx-a-other { width: 100%; border: 1px dashed var(--border); background: transparent; color: var(--text-dim);
border-radius: 9px; padding: 8px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.gcx-a-other:hover { border-style: solid; border-color: var(--accent); color: var(--text); }
.gc-th-other { display: flex; gap: 6px; }
.gc-th-other-input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px;
padding: 8px 11px; color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.gc-th-other-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gc-th-other-go { flex-shrink: 0; border: none; background: var(--accent); color: #fff; border-radius: 9px;
padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.gc-th-other-go:hover { filter: brightness(1.08); }
/* footer: quick-action chips + a pinned "Ask your AI" input */
/* Matches .ibx-ai-act: the things you can do, under what it has to say, divided by one
line. Left-aligned like the rest of the panel — centred chips read as a landing page. */
.gc-ai-foot { flex-shrink: 0; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--border); }
.gc-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; margin-bottom: 9px; }
.gc-chip { border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.gc-chip:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.gc-ai-ask { display: flex; align-items: center; gap: 8px; }
.gc-ai-askinput { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 9px 14px; color: var(--text); font: inherit; font-size: 13px; outline: none; transition: border-color .12s, box-shadow .12s; }
.gc-ai-askinput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gc-ai-asksend { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gc-ai-asksend:hover { filter: brightness(1.08); }
/* generated-file download card inside an AI feed item */
.gcx-file { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); text-decoration: none; color: var(--text); transition: border-color .12s, background .12s; }
.gcx-file:hover { border-color: var(--accent); background: var(--accent-soft); }
.gcx-file-ico { font-size: 18px; flex-shrink: 0; }
.gcx-file-meta { display: flex; flex-direction: column; min-width: 0; }
.gcx-file-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcx-file-sub { font-size: 11px; color: var(--text-faint); }
/* footer is tap-only (no typing) */
.gc-ai-foot-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gc-ai-foot-label { font-size: 10.5px; color: var(--text-faint); }
.gc-ai-depth { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); cursor: pointer; user-select: none; }
.gc-ai-depth input { accent-color: var(--accent); cursor: pointer; }
/* AI clarification rendered as tap-choices */
.gcx-choices { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.gcx-choices-h { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.gcx-choice { text-align: left; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.gcx-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
/* proactive "suggested reply" draft card */
.gcx-conf.go { background: var(--accent-soft); color: var(--accent-2); }
.gcx-draft .gcx-body { border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); }
.gcx-a-send.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gcx-a-send.primary:hover { filter: brightness(1.08); }
/* small "or:" select-only menu of other things the AI can do */
.gcx-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.gcx-more-lbl { font-size: 11px; color: var(--text-faint); }
.gcx-m { border: 1px dashed var(--border); background: transparent; color: var(--text-dim); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; }
.gcx-m:hover { border-style: solid; border-color: var(--accent); color: var(--text); }
/* proactive wizard: a few tap-choices the AI detected */
.gcx-wizard .gcx-body { border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); }
.gcx-wz-list { display: flex; flex-direction: column; gap: 6px; margin: 7px 0 3px; }
.gcx-wz { text-align: left; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.gcx-wz:hover { border-color: var(--accent); background: var(--accent-soft); }
/* live workbench streamed into the panel: give it room, keep the answer plain */
.gcx-run .gcx-body { max-width: none; flex: 1; min-width: 0; }
.gcx-run .msg-content { background: transparent; border: none; padding: 2px 0; border-radius: 0; font-size: 13px; }
.gcx-run .tool-chip { font-size: 11.5px; }
.gcx-run .files-card, .gcx-run .tool-chip { margin-top: 8px; }
.gc-ai-foot { border-top: 1px solid var(--border); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; background: var(--bg-2); }
.gc-ai-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.gc-chip:hover { border-color: var(--accent); color: var(--text); }
.gc-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.gc-switch input { display: none; }
.gc-switch-tr { width: 30px; height: 17px; border-radius: 999px; background: var(--bg-3); position: relative; transition: background .15s; flex-shrink: 0; }
.gc-switch-tr::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.gc-switch input:checked + .gc-switch-tr { background: var(--accent); }
.gc-switch input:checked + .gc-switch-tr::after { transform: translateX(13px); }
.gc-ai-hint { font-size: 11.5px; color: var(--text-faint); text-align: center; line-height: 1.5; }
.gc-ai-hint b { color: var(--accent-2); font-weight: 700; }
.gc-ai-ask { display: flex; gap: 8px; align-items: center; }
.gc-ai-askin { flex: 1; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13px; outline: none; }
.gc-ai-askin:focus { border-color: var(--accent); }
.gc-ai-asksend { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; font-size: 13px; }
/* feed bubbles (personal-chat style) */
.gcx { display: flex; gap: 8px; max-width: 100%; }
.gcx-me { justify-content: flex-end; }
.gcx-ava { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-3); display: grid; place-items: center; align-self: flex-end; }
.gcx-ava svg { width: 16px; height: 16px; color: var(--accent); }
.gcx-body { border-radius: 15px; padding: 9px 12px; font-size: 13px; line-height: 1.5; max-width: 84%; }
.gcx-ai .gcx-body { background: var(--bg-3); color: var(--text); border-bottom-left-radius: 5px; }
.gcx-me .gcx-body { background: var(--accent-soft); color: var(--text); border-bottom-right-radius: 5px; }
.gcx-h { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.gcx-text { white-space: pre-wrap; }
.gcx-act { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gcx-act button { border: 1px solid var(--border); background: var(--bg-2); color: var(--text); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.gcx-act button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gcx .gc-sug-text { width: 100%; min-height: 46px; resize: vertical; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; color: var(--text); font: inherit; font-size: 13px; margin-top: 2px; }
.gcx-conf { font-size: 9.5px; font-weight: 700; text-transform: uppercase; background: var(--bg-2); color: var(--text-faint); border-radius: 5px; padding: 1px 5px; }
.gcx-conf.high { background: rgba(31,157,85,.2); color: var(--ok, #1f9d55); }
.gcx-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.gcx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: gc-td 1.2s ease-in-out infinite; }
.gcx-dots i:nth-child(2){animation-delay:.2s}.gcx-dots i:nth-child(3){animation-delay:.4s}
@keyframes gc-td { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }
/* composer @ / search drawer */
.gc-main { position: relative; }
.gc-drawer { position: absolute; left: 18px; right: 18px; bottom: 72px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.42); max-height: 260px; overflow-y: auto; z-index: 30; padding: 6px; }
.gc-drawer.hidden { display: none; }
.gc-drawer-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 7px 9px 4px; }
.gc-drawer-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 8px 10px; color: var(--text); font: inherit; cursor: pointer; }
.gc-drawer-item:hover, .gc-drawer-item.active { background: var(--bg-hover); }
.gc-di-cmd { font-weight: 700; color: var(--accent-2); }
.gc-di-desc { font-size: 12px; color: var(--text-faint); }
.gc-mention { color: var(--accent-2); font-weight: 600; }
/* message options button + read-receipt ticks (WhatsApp-style: all inside the bubble) */
.cn-smsg { position: relative; }
.gc-msg-btn { position: absolute; top: 0; right: 0; width: 38px; height: 26px; border: none; border-top-right-radius: 14px;
background: linear-gradient(270deg, var(--bg-3) 58%, transparent); color: var(--text-dim); cursor: pointer;
opacity: 0; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: flex-end;
padding: 0 7px 0 0; transition: opacity .12s; z-index: 2; }
.cn-smsg.mine .gc-msg-btn { background: linear-gradient(270deg, var(--user-bubble) 58%, transparent); }
.cn-smsg-body:hover .gc-msg-btn, .gc-msg-btn:focus-visible { opacity: 1; }
.gc-msg-btn:hover { color: var(--text); }
.gc-ticks { font-size: 11px; color: var(--text-faint); letter-spacing: -2px; }
.gc-ticks.seen { color: #53bdeb; }
.gc-msg-menu { position: fixed; z-index: 200; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.45); padding: 5px; min-width: 168px; }
.gc-msg-menu button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 11px; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.gc-msg-menu button:hover { background: var(--bg-hover); }
.gc-mm-i { width: 18px; text-align: center; color: var(--text-dim); font-size: 14px; flex-shrink: 0; }
/* alive logo — exact motion from the Claude Design export: centre pulses, inner ring
spins CW, outer ring spins CCW, the between-ring dots breathe. */
.gc-ai-logo .core, .gc-ai-logo .r1, .gc-ai-logo .r2, .gc-ai-logo .r3 { transform-origin: 60px 60px; transform-box: view-box; }
.gc-ai-logo .core { animation: qPulse 3.4s ease-in-out infinite; }
.gc-ai-logo .r1 { animation: qSpin 26s linear infinite; }
.gc-ai-logo .r2 { animation: qSpinRev 38s linear infinite; }
.gc-ai-logo .r3 { animation: qBreathe 4.2s ease-in-out infinite; }
.gc-ai-logo.thinking .core { animation-duration: 1.4s; }
.gc-ai-logo.thinking .r1 { animation-duration: 8s; }
.gc-ai-logo.thinking .r2 { animation-duration: 12s; }
.gc-ai-logo.thinking .r3 { animation-duration: 1.8s; }
@keyframes qSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes qSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes qPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes qBreathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } }
@keyframes gc-glow { 0%,100% { opacity: .3; transform: scale(.9); } 50% { opacity: .65; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .gc-ai-logo .core, .gc-ai-logo .r1, .gc-ai-logo .r2, .gc-ai-logo .r3 { animation: none !important; } }
/* group info slide-over */
.gc-info-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; display: flex; justify-content: flex-end; }
.gc-info-overlay.hidden { display: none; }
.gc-info-panel { width: 360px; max-width: 92vw; height: 100%; background: var(--bg-2); border-left: 1px solid var(--border); overflow-y: auto; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.gc-info-sub { font-size: 12.5px; color: var(--text-faint); }
.gc-info-members { display: flex; flex-direction: column; gap: 2px; }
.gc-info-mrow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; font-size: 14px; }
.gc-info-mrow .cn-ppl-avatar { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
.gc-info-mrow > span:first-of-type { display: inline-flex; align-items: center; gap: 6px; }
/* Push the state text to the right edge, same reading order as a Members card. */
.gc-info-mstate { margin-left: auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 1040px) { .gc-hub { grid-template-columns: 260px minmax(0, 1fr); } .gc-ai { display: none; } }
.gc-view { min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.skill-nav { display: flex; flex-direction: column; gap: 2px; max-height: 30vh; overflow-y: auto; }
.skill-nav:empty { display: none; }
.skill-nav .side-item.active { background: var(--accent-soft); }
.side-recents { flex: 1; min-height: 0; }
.side-recents .conversations { max-height: none; }
.conv-empty { color: var(--text-faint); font-size: 12.5px; padding: 8px 10px; }
.recents-search {
background: var(--bg); border: 1px solid var(--border); color: var(--text);
border-radius: 8px; padding: 7px 10px; font-size: 13px; margin: 2px 0 4px; outline: none;
}
.recents-search:focus { border-color: var(--accent); }
.account {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
background: none; border: none; border-top: 1px solid var(--border);
padding: 12px 8px 4px; margin-top: 4px; color: var(--text); border-radius: 0;
}
.account:hover { background: var(--bg-hover); border-radius: 9px; }
.avatar-mini {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, #f0606a, #d64550); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.account-text { display: flex; flex-direction: column; line-height: 1.25; }
.account-text strong { font-size: 13.5px; }
.account-text small { font-size: 11px; color: var(--text-faint); }
/* views */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.view.hidden { display: none; }
/* full-page header/body (marketplace + skill pages) */
.page-head { padding: 26px 30px 0; border-bottom: 1px solid var(--border); }
.page-head h1 { margin: 0 0 4px; font-size: 24px; }
.page-head > p { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; max-width: 680px; }
.page-head-row { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }
.page-head-icon { font-size: 30px; width: 56px; height: 56px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; background: var(--bg-3); border-radius: 14px; }
.page-head-row h1 { margin: 0; }
.page-head-row p { margin: 4px 0 0; color: var(--text-dim); font-size: 13.5px; max-width: 620px; }
.page-body { flex: 1; overflow-y: auto; padding: 22px 30px 40px; }
.market-tabs { display: flex; gap: 6px; }
.market-tab {
background: none; border: none; color: var(--text-dim); font-size: 14px; font-weight: 600;
padding: 9px 14px; border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.market-tab:hover { color: var(--text); }
.market-tab.active { color: var(--text); border-bottom-color: var(--accent); }
/* skill page */
/* The setup checklist — what this skill still needs, and a button that connects it
here. It sits ABOVE the Run bar on the Summary tab (it used to be a row of chips on
Settings, which is not the tab you land on). */
.skill-requires { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.skill-requires .setup-head {
font-size: 13px; line-height: 1.5; color: var(--text);
padding: 10px 12px; border-radius: var(--radius);
background: color-mix(in srgb, var(--warn) 10%, var(--bg-2));
border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--border));
}
.skill-requires .setup-ok { font-size: 12.5px; color: var(--text-faint); }
.setup-row {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2);
}
.setup-row.has-note { align-items: flex-start; }
.setup-row .setup-ico { --ico-sz: 28px; font-size: 16px; flex-shrink: 0; }
.setup-row .setup-main { display: flex; flex-direction: column; gap: 2px; }
.setup-row .setup-name { font-weight: 600; font-size: 13.5px; }
/* What the SKILL says it needs from this connection (frontmatter `setup:`). */
.setup-row .setup-note { font-size: 12px; color: var(--text-dim); line-height: 1.45; max-width: 42ch; }
.setup-row .setup-why { flex: 1; font-size: 12px; color: var(--text-faint); text-align: right; }
/* Not fixable from here — the member's role withholds it, so there is no button. */
.setup-row .setup-why-blocked { font-size: 12px; color: var(--warn); }
/* Run, while the skill cannot work. Cosmetic — the server refuses it too. */
#skill-run.is-blocked { opacity: .5; cursor: not-allowed; }
/* The Settings tab is one form column, and everything in it shares its edge — the params
were 620 wide and the schedule card beside them 820, which is most of why this page
read as a pile of boxes rather than a page. */
#skill-panel-settings { max-width: 720px; }
.skill-params { display: flex; flex-direction: column; gap: 14px; }
.skill-param { display: flex; flex-direction: column; gap: 5px; }
.skill-param label { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.skill-param input, .skill-param textarea, .skill-param select {
background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; width: 100%;
}
.skill-param input:focus, .skill-param textarea:focus, .skill-param select:focus { border-color: var(--accent); }
.skill-param .cap-help { font-size: 11.5px; color: var(--text-faint); }
/* checkbox + multiselect params */
.skill-param .skp-check, .skill-param .skp-chk { flex-direction: row; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); cursor: pointer; }
.skill-param input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.skp-multi { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 0; }
.skp-multi .skp-chk { font-size: 13px; }
.skill-actions { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.btn-ghost { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 10px; padding: 9px 14px; font-size: 13px; cursor: pointer; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
/* schedule card */
.skill-schedule { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 18px 0; background: var(--bg-2); }
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sched-title { font-weight: 600; font-size: 14px; }
.sched-status { font-size: 12px; color: var(--text-faint); }
.sched-status.on { color: #6fce8f; }
.sched-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sched-input { background: var(--bg-1, var(--bg-2)); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.sched-input:focus { border-color: var(--accent); }
.sched-hint { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 0; }
/* skill page tabs (Summary / Settings) */
/* The same pill tabs as Files, Memory, Skills and Heartbeat — a fourth tab style on the
page you land on from any of them is how the app stopped looking like one product. */
.skill-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-bottom: 18px; }
.skill-tab {
display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
border: 0; border-radius: 999px; background: none; color: var(--text-dim);
font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
transition: background .12s, color .12s;
}
.skill-tab:hover { background: var(--bg-2); color: var(--text); }
.skill-tab.active { background: var(--bg-3); color: var(--text); }
:root[data-theme="light"] .skill-tab.active { background: var(--bg-hover); }
.skill-summary-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.skill-summary-meta { font-size: 12px; color: var(--text-faint); }
/* Findings: the run's structured half, as a list you work through. Statuses here
survive the next run, so it is a working set and not a report. */
.skill-rows { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
background: var(--bg-2); }
.rows-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rows-title { font-size: 14px; font-weight: 700; }
.rows-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.rowfilter { border: 1px solid var(--border); background: transparent; color: var(--text-dim);
border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.rowfilter:hover { color: var(--text); }
.rowfilter.active { background: var(--bg-3); color: var(--text); border-color: var(--accent); }
.rowfilter-n { opacity: .65; margin-left: 3px; }
.rows-scroll { overflow-x: auto; }
.rows-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rows-table th { text-align: left; font-weight: 600; color: var(--text-faint); font-size: 11px;
text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border); }
.rows-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border-soft, var(--border));
vertical-align: top; }
.rows-table tr.row-done td, .rows-table tr.row-dismissed td, .rows-table tr.row-resolved td { opacity: .55; }
.rows-table .row-actions { white-space: nowrap; text-align: right; }
.rows-table .row-actions .btn-mini { margin-left: 6px; }
.row-status { font-size: 11px; color: var(--text-faint); }
.row-note { font-size: 11px; color: var(--text-faint); margin-top: 3px; font-style: italic; }
.rows-foot { margin-top: 10px; font-size: 11.5px; }
.skill-result {
border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; min-height: 120px;
background: var(--bg-2);
}
.skill-result .msg-content { word-wrap: break-word; }
.skill-result .hint { color: var(--text-faint); }
/* digest: clean, readable rendering of the final result */
.digest { line-height: 1.62; font-size: 14.5px; color: var(--text); }
.digest h1, .digest h2 { font-size: 18px; margin: 20px 0 8px; font-weight: 700; letter-spacing: -.01em; }
.digest h1:first-child, .digest h2:first-child { margin-top: 2px; }
.digest h3 { font-size: 15px; margin: 16px 0 6px; font-weight: 700; }
.digest p { margin: 9px 0; }
.digest ul, .digest ol { margin: 8px 0; padding-left: 20px; }
.digest li { margin: 5px 0; }
.digest li::marker { color: var(--text-faint); }
.digest a { color: var(--accent); text-decoration: none; }
.digest a:hover { text-decoration: underline; }
.digest strong { color: var(--text); font-weight: 700; }
.digest hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.digest img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.run-error { display: flex; flex-direction: column; gap: 8px; }
.run-error-title { font-weight: 700; color: #ffb088; font-size: 15px; }
.run-error-msg { color: var(--text-dim); font-size: 13.5px; white-space: pre-wrap;
background: rgba(255,160,90,.08); border: 1px solid rgba(255,160,90,.25); border-radius: 8px; padding: 10px 12px; }
/* ---- Summary: runs down the left, the run you picked on the right ----
Every box on this tab used to set its own width (620 / 820 / 980 / none), so a page
with four of them had four right-hand edges and read as broken. Width comes from the
column now; nothing here declares its own. */
.skill-split {
display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
gap: 20px; align-items: start;
}
/* No history yet (a skill that has never run) — the column track would otherwise stay,
indenting the report by 210px against nothing. */
.skill-split:has(> .skill-runs.hidden) { grid-template-columns: minmax(0, 1fr); }
.skill-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* The list follows you down a long report rather than scrolling away above it. */
.skill-runs {
position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px;
max-height: calc(100vh - 220px); overflow-y: auto;
}
@media (max-width: 900px) {
.skill-split { grid-template-columns: 1fr; }
/* Stacked, the history goes UNDER the report — it is the older thing. */
.skill-runs { order: 2; position: static; max-height: 320px; }
}
.skill-runs .runs-title {
position: sticky; top: 0; z-index: 1; background: var(--bg);
padding: 2px 12px 8px; margin: 0;
font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-faint); font-weight: 700;
}
.run-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px 12px; color: var(--text-dim); font-size: 13px; }
.run-row:hover { background: var(--bg-2); }
.run-row.active { background: var(--bg-2); border-color: var(--border); color: var(--text); }
.run-when { font-weight: 600; }
.run-mark { color: var(--text-faint); font-size: 12px; }
.run-mark.error { color: #ffb088; }
.run-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
/* marketplace cards: install/open buttons */
.market-card .market-card-foot .btn-mini, .market-card .market-card-foot .btn-primary { padding: 6px 14px; font-size: 12.5px; }
.market-card-actions { display: flex; gap: 8px; align-items: center; }
/* ===== Task Manager ===== */
.tasks-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tasks-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.tasks-toolbar { display: flex; align-items: center; gap: 10px; padding: 4px 0 16px; flex-wrap: wrap; }
.seg-group { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg { background: none; border: none; color: var(--text-dim); font-size: 13px; padding: 7px 13px; }
.seg.active { background: var(--accent-soft); color: var(--text); }
.tasks-select, .tasks-filter-input {
background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 7px 11px; font-size: 13px; font-family: inherit; outline: none;
}
.tasks-filter-input { flex: 1; min-width: 140px; max-width: 320px; }
.tasks-select:focus, .tasks-filter-input:focus { border-color: var(--accent); }
.tasks-count { color: var(--text-faint); font-size: 12.5px; margin-left: auto; }
.tasks-empty { color: var(--text-faint); text-align: center; padding: 50px 20px; }
/* board */
.tasks-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.task-col { flex: 1; min-width: 250px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.task-col-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 4px 6px 10px; }
.task-col-head .dotmark { width: 9px; height: 9px; border-radius: 50%; }
.task-col-head .col-count { margin-left: auto; color: var(--text-faint); font-weight: 500; }
.task-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
.task-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; }
.task-card:hover { border-color: var(--bg-hover); }
.task-card-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.task-meta .tm { display: inline-flex; align-items: center; gap: 4px; }
.task-meta .tm-due { color: #e0a458; }
.tm-overdue { color: var(--danger); font-weight: 600; }
.home-overdue { color: var(--danger); font-weight: 600; }
.task-detail { font-size: 12.5px; color: var(--text-dim); margin: 4px 0 8px; }
/* AI suggested-reply modal */
.reply-task { background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.reply-task-title { font-weight: 600; font-size: 13.5px; }
.reply-task-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.reply-text { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px;
padding: 11px 13px; font-size: 14px; font-family: inherit; line-height: 1.5; outline: none; resize: vertical; width: 100%; }
.reply-text:focus { border-color: var(--accent); }
.reply-steer { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px;
padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none; width: 100%; }
.reply-steer:focus { border-color: var(--accent); }
.task-card-foot { display: flex; align-items: center; gap: 8px; }
.task-status-sel { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 4px 7px; font-size: 12px; font-family: inherit; }
.task-link { font-size: 12px; color: var(--accent-2); text-decoration: none; }
.task-link:hover { text-decoration: underline; }
.task-card-actions { margin-left: auto; display: flex; gap: 4px; }
.task-ico-btn { background: none; border: none; color: var(--text-faint); font-size: 13px; padding: 3px 5px; border-radius: 6px; }
.task-ico-btn:hover { background: var(--bg-hover); color: var(--text); }
/* status pills / dots */
.st-todo { color: var(--text-dim); } .bg-todo { background: #6b7280; }
.st-in_progress { color: var(--accent-2); } .bg-in_progress { background: var(--accent); }
.st-ready { color: #7bb5ff; } .bg-ready { background: #4f8ff7; }
.st-blocked { color: #f0a060; } .bg-blocked { background: #e0a458; }
.st-done { color: var(--ok); } .bg-done { background: var(--ok); }
/* AI follow-up outcome on a task card */
.task-res { border-radius: 8px; padding: 8px 10px; margin: 2px 0 8px; font-size: 12.5px; border: 1px solid var(--border); }
.task-res.draft { background: rgba(79, 143, 247, 0.10); border-color: rgba(79, 143, 247, 0.35); }
.task-res.done { background: rgba(80, 200, 120, 0.08); border-color: rgba(80, 200, 120, 0.28); }
.task-res.blocked { background: rgba(224, 164, 88, 0.08); border-color: rgba(224, 164, 88, 0.28); }
.task-res-head { font-weight: 600; display: block; }
.task-res-body { color: var(--text-dim); margin-top: 4px; white-space: pre-wrap; line-height: 1.45; }
.task-res-btn { margin-top: 8px; }
/* Auto follow-up modal */
.fu-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin: 12px 0; cursor: pointer; }
.fu-toggle input { width: 16px; height: 16px; }
.fu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fu-status { font-size: 12px; color: var(--text-faint); margin-right: auto; }
.fu-tz-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; }
.field-sub { color: var(--text-faint); font-weight: 400; font-size: 11.5px; font-style: normal; }
.tz-device-btn { display: inline-block; margin-top: 7px; font-size: 12px; text-align: left; }
/* saved-view tabs — each one is a row in `views`, not a hardcoded screen */
.tasks-views { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 0 0; }
.tasks-view-tab {
background: none; border: 1px solid transparent; color: var(--text-dim);
font-size: 13px; font-weight: 500; padding: 6px 13px; border-radius: 9px;
}
.tasks-view-tab:hover { background: var(--bg-2); color: var(--text); }
.tasks-view-tab.active { background: var(--accent-soft); border-color: var(--border); color: var(--text); }
/* project rail + board area */
.tasks-workspace { display: flex; gap: 16px; align-items: flex-start; }
.tasks-main { flex: 1; min-width: 0; }
.tasks-rail { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-faint); padding: 4px 8px 8px; }
.rail-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
background: none; border: none; color: var(--text-dim); font-size: 13px;
padding: 7px 9px; border-radius: 8px; }
.rail-item:hover { background: var(--bg-2); color: var(--text); }
.rail-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.rail-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-count { color: var(--text-faint); font-size: 11.5px; font-weight: 500; }
.rail-muted .rail-label { font-style: italic; }
.rail-new { background: none; border: none; color: var(--text-faint); font-size: 12.5px;
text-align: left; padding: 8px 9px; border-radius: 8px; margin-top: 4px; }
.rail-new:hover { background: var(--bg-2); color: var(--text); }
.rail-trash { display: flex; align-items: center; gap: 8px; padding: 6px 9px;
font-size: 12.5px; color: var(--text-dim); }
/* Command palette (Ctrl+K) */
#palette-overlay { align-items: flex-start; }
.palette {
width: 620px; max-width: 92vw; margin-top: 12vh;
background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .38); overflow: hidden;
display: flex; flex-direction: column;
}
.palette-input {
background: none; border: none; border-bottom: 1px solid var(--border);
color: var(--text); font-size: 15px; font-family: inherit;
padding: 15px 18px; outline: none; width: 100%;
}
.palette-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palette-row {
display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
background: none; border: none; color: var(--text); padding: 9px 12px;
border-radius: 9px; font-size: 13.5px;
}
.palette-row:hover, .palette-row.active { background: var(--accent-soft); }
.palette-ico { flex-shrink: 0; color: var(--text-faint); font-size: 13px; }
.palette-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { font-size: 11.5px; color: var(--text-faint);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-tag { font-size: 11px; color: var(--text-faint); flex-shrink: 0; font-family: var(--mono); }
.palette-empty { color: var(--text-faint); font-size: 12.5px; padding: 18px 14px; text-align: center; }
.palette-foot {
border-top: 1px solid var(--border); padding: 8px 14px;
font-size: 11px; color: var(--text-faint); display: flex; gap: 6px; align-items: center;
}
.palette-foot kbd {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px;
padding: 1px 5px; font-family: var(--mono); font-size: 10.5px;
}
.tm-label { background: var(--accent-soft); border-radius: 6px; padding: 1px 7px; font-size: 11px; }
.tm-shared { color: var(--accent-2); font-weight: 600; }
@media (max-width: 860px) {
.tasks-workspace { flex-direction: column; }
.tasks-rail { width: 100%; flex-direction: row; flex-wrap: wrap; }
.rail-head { display: none; }
.rail-item { width: auto; }
}
/* a subtask card sits under its parent, in the same column */
.task-card-sub { margin-left: 14px; border-left: 2px solid var(--accent-soft); }
.task-parent-hint { font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
.task-card-title { cursor: pointer; }
.task-meta .tm-proj { background: var(--bg-2); border: 1px solid var(--border);
border-radius: 6px; padding: 1px 6px; font-size: 11px; }
/* The task number the drawer, the Inbox and the AI all refer to ("#217"). It was only
ever on the panel, so a card the AI named by number was unfindable on the board. */
.task-num { color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums;
font-size: .88em; margin-right: 6px; }
/* A description is Markdown; the card shows a stripped, capped preview of it, so keep
it to two lines rather than letting one long paragraph own the card. */
.task-detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
.tt-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
/* Reveal: a row opened from a link is scrolled to and flashed, so the drawer and the
board agree about which task is being talked about. */
@keyframes task-flash-ring {
0% { box-shadow: 0 0 0 0 var(--accent); }
35% { box-shadow: 0 0 0 3px var(--accent); }
100% { box-shadow: 0 0 0 0 rgba(124, 140, 255, 0); }
}
.task-card.task-flash { animation: task-flash-ring 2.4s ease-out; border-color: var(--accent); }
tr.task-flash td { background: var(--accent-soft); }
tr.task-flash { animation: task-flash-ring 2.4s ease-out; }
/* Pinned = the running view does not select this row; it is on the page because a link
asked for it. Dashed, so it never reads as a view that quietly stopped filtering. */
.task-card-pinned { border-style: dashed; }
tr.tt-pinned td { border-top: 1px dashed var(--accent-soft); }
.task-meta .tm-pinned { color: var(--accent-2); }
/* ---- task detail drawer: the thread, history and structure of one task */
.task-drawer {
position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: 440px; max-width: 92vw; z-index: 60;
background: var(--bg); border-left: 1px solid var(--border);
display: flex; flex-direction: column; box-shadow: -18px 0 40px rgba(0, 0, 0, .28);
}
.task-drawer.hidden { display: none; }
.task-drawer-head { display: flex; align-items: flex-start; gap: 10px;
padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.task-drawer-title { flex: 1; min-width: 0; }
.task-drawer-title h2 { font-size: 16px; line-height: 1.35; margin: 2px 0 0; }
.td-id { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.task-drawer-head-actions { display: flex; gap: 2px; flex-shrink: 0; }
.task-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.td-props { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.td-prop { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-faint); }
.td-prop select {
background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; outline: none;
}
.td-prop select:focus { border-color: var(--accent); }
.td-value { color: var(--text); font-size: 12.5px; padding: 6px 0; }
/* The description is rendered Markdown now, so it must not also collapse its own
whitespace (pre-wrap would double every gap the margins already provide). */
.td-details { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.td-details > *:first-child { margin-top: 0; }
.td-details > *:last-child { margin-bottom: 0; }
.td-details p { margin: 0 0 9px; }
.td-details ul, .td-details ol { margin: 0 0 9px; padding-left: 20px; }
.td-details li { margin: 3px 0; }
.td-details strong { color: var(--text); font-weight: 600; }
.td-details code {
font-family: var(--mono); font-size: 12px; background: var(--bg-2);
border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.td-details pre {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
padding: 9px 11px; overflow-x: auto; margin: 0 0 9px;
}
.td-details pre code { background: none; border: none; padding: 0; }
.td-details a { color: var(--accent-2); }
.td-details h1, .td-details h2, .td-details h3, .td-details h4 {
font-size: 12.5px; font-weight: 600; color: var(--text); margin: 12px 0 5px;
text-transform: uppercase; letter-spacing: .04em;
}
.td-details blockquote {
margin: 0 0 9px; padding-left: 10px; border-left: 2px solid var(--border);
color: var(--text-faint);
}
.td-details table.md-table { font-size: 12px; border-collapse: collapse; margin-bottom: 9px; }
.td-details table.md-table th, .td-details table.md-table td {
border: 1px solid var(--border); padding: 4px 8px; text-align: left;
}
.td-section { margin-bottom: 18px; }
.td-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.td-section-head h3 { font-size: 11.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-faint); margin: 0; }
.td-empty { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }
.td-links { display: flex; flex-direction: column; gap: 5px; }
.td-link { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.td-link .dotmark { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.td-link-title { flex: 1; text-align: left; background: none; border: none; color: var(--text);
font-size: 12.5px; padding: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-link-title:hover { color: var(--accent-2); text-decoration: underline; }
.td-link-who { color: var(--text-faint); font-size: 11.5px; flex-shrink: 0; }
.td-file-ico { flex-shrink: 0; font-size: 12px; }
a.td-link-title { text-decoration: none; }
/* A whole Inbox row is the target, so it needs the affordance a bare link has. */
.td-dupe-note { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: -2px 0 6px; }
.td-dupe-row { cursor: pointer; padding: 5px 6px; margin: 0 -6px; border-radius: 7px; }
.td-dupe-row:hover { background: var(--bg-hover); }
.td-dupe-row:hover .td-link-title { color: var(--accent-2); }
.td-inbox-row { cursor: pointer; padding: 5px 6px; margin: 0 -6px; border-radius: 7px; }
.td-inbox-row:hover { background: var(--bg-hover); }
.td-inbox-row:hover .td-link-title { color: var(--accent-2); }
.td-inbox-row.td-done .td-link-title { color: var(--text-dim); }
.td-inbox-row.td-done .td-file-ico { opacity: .5; }
/* Where the task came from — one quiet line under the description, not a field row. */
.td-source { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin: -6px 0 16px; }
.td-source-k { color: var(--text-faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; }
.td-source-v { color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.td-source-v { color: var(--accent-2); text-decoration: none; }
a.td-source-v:hover { text-decoration: underline; }
.td-tabs { margin-bottom: 4px; }
.td-thread { display: flex; flex-direction: column; gap: 10px; }
.td-msg { background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.td-msg-ai { border-color: var(--accent-soft); }
.td-msg-head { display: flex; align-items: center; gap: 6px; font-size: 12px;
font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.td-msg-time { margin-left: auto; font-weight: 400; color: var(--text-faint); font-size: 11px; }
/* Markdown now, so the renderer owns the line breaks — pre-wrap on top of
tags
would double every blank line. */
.td-msg-body { font-size: 13px; line-height: 1.55; }
.td-msg-body > *:first-child { margin-top: 0; }
.td-msg-body > *:last-child { margin-bottom: 0; }
.td-msg-body p { margin: 0 0 8px; }
.td-msg-body ul, .td-msg-body ol { margin: 0 0 8px; padding-left: 20px; }
.td-msg-body li { margin: 3px 0; }
.td-msg-body strong { color: var(--text); font-weight: 600; }
.td-msg-body a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.td-msg-body a:hover { text-decoration: underline; }
.td-history { display: flex; flex-direction: column; gap: 2px; }
.td-event { display: flex; align-items: baseline; gap: 8px; font-size: 12px;
color: var(--text-dim); padding: 5px 0; border-bottom: 1px solid var(--border); }
.td-event:last-child { border-bottom: none; }
.td-event-what { flex: 1; }
.td-event-who { color: var(--text-faint); font-size: 11.5px; }
.td-event-time { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.task-drawer-foot { display: flex; gap: 8px; align-items: flex-end;
padding: 12px 16px; border-top: 1px solid var(--border); }
.task-drawer-foot.hidden { display: none; }
.task-drawer-foot textarea {
flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit;
line-height: 1.45; outline: none; resize: none;
}
.task-drawer-foot textarea:focus { border-color: var(--accent); }
/* table */
.tasks-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
table.tasks-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tasks-table th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.tasks-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.tasks-table tr:last-child td { border-bottom: none; }
table.tasks-table tr:hover td { background: var(--bg-2); }
.tt-title { font-weight: 600; cursor: pointer; }
.tt-title:hover { color: var(--accent-2); }
.tt-sub { color: var(--text-faint); font-size: 11.5px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
/* markdown tables in chat */
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.md-table th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.md-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.md-table tr:last-child td { border-bottom: none; }
.md-table tr:hover td { background: var(--bg-2); }
/* ===== Router Pool ===== */
.router-pool-entry { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-2); border-radius: 8px; margin-bottom: 6px; }
.router-pool-entry .priority { font-weight: 600; color: var(--accent); min-width: 20px; }
.router-pool-entry .provider { font-size: 12px; color: var(--text-faint); }
.router-pool-entry .model { flex: 1; font-weight: 500; }
.router-pool-entry .tags { font-size: 11px; color: var(--text-faint); }
.router-pool-entry .controls { display: flex; gap: 4px; }
.router-pool-entry button { background: transparent; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.router-pool-entry button:hover { background: var(--bg-3); }
.router-controls { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
/* ===== Model Badge ===== */
.model-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); background: var(--bg-2); padding: 2px 8px; border-radius: 10px; margin-bottom: 6px; }
.model-badge::before { content: "🤖"; }
/* ===== Auth / onboarding ===== */
.auth-overlay {
position: fixed; inset: 0; z-index: 200; background: var(--bg);
display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
}
.auth-card {
width: 100%; max-width: 420px; background: var(--bg-2); border: 1px solid var(--border);
border-radius: 18px; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px;
}
.auth-brand { display: flex; align-items: center; gap: 11px; }
.auth-brand .brand-logo { font-size: 30px; }
.auth-brand strong { font-size: 16px; display: block; }
.auth-brand small { color: var(--text-faint); font-size: 12px; }
.auth-pane { display: flex; flex-direction: column; gap: 13px; }
.auth-pane h2 { margin: 4px 0 0; font-size: 19px; }
.wiz-step { display: flex; flex-direction: column; gap: 13px; }
.auth-card .field > span { font-size: 12.5px; }
.auth-card input, .auth-card select, .auth-card textarea {
background: var(--bg); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 11px 12px; font-size: 14px; font-family: inherit; width: 100%; outline: none;
}
.auth-card input:focus, .auth-card select:focus, .auth-card textarea:focus { border-color: var(--accent); }
.auth-btn { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }
.auth-error { background: rgba(240,96,106,.1); border: 1px solid rgba(240,96,106,.35); color: #ffb3b8; border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.auth-switch { text-align: center; color: var(--text-dim); font-size: 13px; margin: 4px 0 0; }
.wiz-nav { display: flex; gap: 10px; align-items: center; }
.wiz-nav .btn-mini { padding: 11px 16px; }
.wiz-nav .auth-btn { flex: 1; margin-top: 0; }
.auth-dots { display: flex; gap: 6px; justify-content: center; }
.auth-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-hover); }
.auth-dots .dot.on { background: var(--accent); }
/* reachability toggle (sidebar, above the account row) */
.reach-switch {
display: flex; justify-content: space-between; width: calc(100% - 8px);
margin: 4px 4px 12px; padding: 10px 12px;
border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2);
transition: border-color .2s ease, background .2s ease;
}
.reach-switch:hover { background: var(--bg-hover); }
.reach-switch .sw-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
/* ON = online (green) */
.reach-switch.on { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .4); }
.reach-switch.on .sw-label { color: #4ade80; }
/* starting / error = amber (overrides the checked-green track) */
.reach-switch.warn { border-color: rgba(245, 158, 11, .35); }
.reach-switch.warn input:checked + .track { background: #f59e0b; }
.reach-switch.warn .sw-label { color: #fbbf24; }
/* account row + logout */
.account-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border);
flex-shrink: 0; margin: 0 -14px -14px; padding: 8px 14px 14px; background: var(--bg-2); }
.account-row .account { flex: 1; border-top: none; margin-top: 0; padding-top: 6px; }
.logout-btn { background: none; border: 1px solid var(--border); color: var(--text-faint); border-radius: 9px; padding: 8px 11px; font-size: 15px; flex-shrink: 0; }
.logout-btn:hover { color: var(--danger); border-color: rgba(240,96,106,.4); background: rgba(240,96,106,.1); }
/* Persistent rail chrome (Company / Group Chat / Inbox): the user profile pinned at the
bottom. The TOP half used to hold a copy of the brand and the online switch, because
these views hide the app sidebar; the top bar now spans every view, so it renders
nothing and takes no room — `:empty` rather than a deletion, because the hook is
still the right place for something that belongs beside a rail's own list. */
.rail-chrome-top:empty { display: none; }
.rail-chrome-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 12px 12px 10px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-shrink: 0; }
.rail-chrome-top .brand-logo { font-size: 22px; display: inline-flex; align-items: center; }
.rail-chrome-top .wordmark { font-size: 15px; }
.rail-chrome-top .rail-reach { margin-left: auto; }
.rail-foot.account-row { position: sticky; bottom: 0; z-index: 3; margin: 0; border-top: 1px solid var(--border);
background: var(--bg-2); padding: 8px 12px 12px; flex-shrink: 0; }
.cn-rail .rail-chrome-top { margin: -18px -14px 4px; }
.cn-rail .rail-foot.account-row { margin: 4px -14px -18px; }
/* recents "see more / show less" toggle */
.conv-more { width: 100%; text-align: left; background: none; border: none; color: var(--accent-2);
font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 7px 10px; border-radius: 8px; }
.conv-more:hover { background: var(--bg-hover); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }
/* ---- Agent Organization (P2P v2) ---- */
.org-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 880px) { .org-grid { grid-template-columns: 1fr; } }
.org-chart { display: flex; flex-direction: column; gap: 6px; }
.org-node { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 11px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.org-node-name { font-weight: 600; }
.org-node-lvl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: rgba(122,108,255,.12); padding: 2px 7px; border-radius: 20px; }
.org-node-dom { font-size: 12px; color: var(--text-faint); }
.org-consult-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.org-consult-form label { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.org-consult-form select, .org-consult-form textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 11px; font: inherit; }
.org-consult-form textarea { resize: vertical; }
.org-consult-actions { display: flex; gap: 8px; margin-top: 8px; }
.org-consult-head { font-size: 13px; color: var(--text-faint); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
.org-consult-head b { color: var(--text); }
.org-peers { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
.peers-self { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.peers-self-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.peers-label { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; }
.peer-token { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); word-break: break-all; }
.peers-token-wrap { flex: 1; min-width: 180px; }
.peer-token-input { width: 100%; margin-top: 4px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font: 12px ui-monospace, monospace; }
.peers-self-actions { display: flex; gap: 6px; }
.peers-hint { font-size: 12px; color: var(--text-faint); margin-top: 8px; }
.peers-hint code { color: var(--text); }
.peers-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.peers-add input { flex: 1; min-width: 130px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 11px; font: inherit; }
.peers-list { display: flex; flex-direction: column; gap: 6px; }
.peer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.peer-row .peer-name { font-weight: 600; }
.peer-row .peer-url { font-size: 12px; color: var(--text-faint); flex: 1; }
.peer-state { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.peer-state.on { color: #46c98b; }
.peers-discovered { margin-bottom: 12px; }
.peers-disc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.peer-row.found { border-style: dashed; }
.peer-row.found .btn-mini { flex-shrink: 0; }
/* Agent Organization onboarding + members */
.org-onboarding { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.org-choice-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.org-choice-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.org-choice-card h2 { margin: 0 0 8px; font-size: 18px; }
.org-choice-card p { margin: 0 0 18px; color: var(--text-faint); font-size: 13px; }
.org-choice-form { display: flex; flex-direction: column; gap: 6px; }
.org-choice-form label { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.org-choice-form input { width: 100%; background: var(--bg-1); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 11px; font: inherit; }
.org-choice-form button { margin-top: 10px; }
.org-members { display: flex; flex-direction: column; gap: 8px; }
.org-member-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.org-member-name { font-weight: 600; }
.org-member-role { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; }
.org-member-role.owner { color: var(--on-accent); background: var(--accent); }
.org-member-role.admin { color: var(--accent); background: rgba(122,108,255,.12); }
.org-member-role.member { color: var(--text-faint); background: rgba(128,128,128,.12); }
.org-member-extra { font-size: 12px; color: var(--text-faint); margin-left: auto; }
/* Simplified Agent Organization: profile + network + skills */
.org-profile { margin-bottom: 10px; }
.org-profile-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; max-width: 520px; }
.org-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.org-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; flex-shrink: 0; }
.org-avatar-mini { width: 38px; height: 38px; border-radius: 50%; background: rgba(122,108,255,.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.org-profile-name { font-size: 17px; font-weight: 600; }
.org-profile-meta { font-size: 13px; color: var(--text-faint); }
.org-network { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.org-network-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.org-network-card.remote { border-left: 3px solid var(--accent); }
.org-network-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.org-network-name { font-weight: 600; }
.org-network-meta { font-size: 12px; color: var(--text-faint); }
.org-skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.org-skill { font-size: 12px; background: rgba(122,108,255,.12); color: var(--accent); padding: 4px 10px; border-radius: 20px; }
.org-skill.none { background: rgba(128,128,128,.1); color: var(--text-faint); }
/* Agent Organization tabs */
.org-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.org-tab { background: transparent; border: none; color: var(--text-faint); padding: 10px 16px; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.org-tab:hover { color: var(--text); }
.org-tab.active { color: var(--text); border-bottom-color: var(--accent); }
/* Agent Organization messages */
.org-messages-layout { display: flex; gap: 14px; height: 520px; max-height: 70vh; }
.org-message-peers { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.org-message-peer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.org-message-peer:hover { background: var(--bg-hover); }
.org-message-peer.active { border-color: var(--accent); background: var(--accent-soft); }
.org-message-peer .peer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.org-message-peer.enabled .peer-dot { background: var(--ok); }
.org-message-peer-name { font-weight: 600; font-size: 13px; }
.org-message-peer-url { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.org-message-thread { flex: 1; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.org-message-header { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.org-message-header small { display: block; color: var(--text-faint); font-weight: 400; font-size: 12px; margin-top: 2px; }
.org-message-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.org-message-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px; }
.org-message-bubble { max-width: 78%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.org-message-bubble.sent { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
.org-message-bubble.received { align-self: flex-start; background: var(--bg-3); border-bottom-left-radius: 4px; }
.org-message-bubble .msg-time { display: block; font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.org-message-bubble.delivery-fail { opacity: .7; border: 1px solid var(--danger); }
.org-message-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.org-message-input input { flex: 1; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 11px; font: inherit; }
.org-message-input button { flex-shrink: 0; }
/* Admin-controlled org settings */
.org-settings { display: flex; flex-direction: column; gap: 22px; }
.org-settings-section { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.org-settings-section .side-section-title { margin: 0 0 10px; }
.invite-create { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.invite-create select,
.invite-create input { background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; }
.invite-create input { width: 90px; }
.invite-create button { flex-shrink: 0; }
.invites-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.invites-table th { text-align: left; color: var(--text-faint); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.invites-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.invites-table code { font-size: 12px; background: var(--bg-3); padding: 3px 6px; border-radius: 5px; }
.org-members-list { display: flex; flex-direction: column; gap: 8px; }
.org-member-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; }
.org-member-row select { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font: inherit; }
.btn-danger { background: var(--danger); color: #fff; border: none; }
.btn-danger:hover { filter: brightness(1.1); }
/* ---- Agent Swarm (Kimi-style agent boxes) ---- */
.swarm-head { margin-bottom: 14px; }
.org-swarm { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.swarm-card {
background: linear-gradient(145deg, var(--bg-2), #1a1c24);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform .12s, box-shadow .12s, border-color .12s;
position: relative;
overflow: hidden;
}
.swarm-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.swarm-card.remote { border-left: 3px solid var(--accent); }
.swarm-card .swarm-glow {
position: absolute; top: -30px; right: -30px; width: 80px; height: 80px;
border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
pointer-events: none;
}
.swarm-head-row { display: flex; align-items: center; gap: 12px; }
.swarm-avatar {
width: 44px; height: 44px; border-radius: 12px;
background: var(--accent-soft); color: var(--accent);
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.swarm-title { font-weight: 600; font-size: 15px; }
.swarm-peer { font-size: 11px; color: var(--text-faint); }
.swarm-type {
align-self: flex-start; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
color: var(--accent); background: rgba(122,108,255,.12); padding: 3px 8px; border-radius: 20px;
}
.swarm-skills { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; }
.swarm-skill { font-size: 11px; background: var(--bg-3); color: var(--text-dim); padding: 3px 8px; border-radius: 20px; }
.swarm-actions { display: flex; gap: 6px; margin-top: auto; }
.swarm-actions button { flex: 1; font-size: 12px; padding: 7px 0; border-radius: 8px; }
/* ---- A2A Feed (observed external consultations) ---- */
.org-feed { display: flex; flex-direction: column; gap: 10px; }
.feed-empty { color: var(--text-faint); padding: 30px; text-align: center; }
.feed-item {
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; cursor: pointer; transition: border-color .12s;
}
.feed-item:hover { border-color: var(--accent); }
.feed-item.incoming { border-left: 3px solid var(--ok); }
.feed-item.outgoing { border-left: 3px solid var(--accent); }
.feed-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.feed-icon { font-size: 18px; flex-shrink: 0; }
.feed-main { flex: 1; min-width: 0; }
.feed-task { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-meta { font-size: 12px; color: var(--text-faint); }
.feed-time { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.feed-transcript {
background: #0b0c10; border-top: 1px solid var(--border);
padding: 14px; font-size: 13px; line-height: 1.55;
max-height: 360px; overflow-y: auto; white-space: pre-wrap;
}
/* ---- Connections sidebar section ---- */
.connection-row {
display: flex;
align-items: center;
gap: 4px;
padding: 7px 8px;
border-radius: 9px;
color: var(--text);
font-size: 13.5px;
transition: background .15s;
}
.connection-row:hover { background: var(--bg-hover); }
.connection-row.online .connection-dot { background: var(--ok); }
.connection-info {
flex: 1;
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
cursor: pointer;
}
.connection-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-faint);
flex-shrink: 0;
}
.connection-meta { flex: 1; min-width: 0; }
.connection-name {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.connection-url {
font-size: 11px;
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.connection-badge {
background: var(--danger);
color: #fff;
font-size: 10px;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
flex-shrink: 0;
}
.connection-disconnect {
opacity: 0;
background: none;
border: none;
color: var(--text-faint);
font-size: 13px;
padding: 3px 6px;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
}
.connection-row:hover .connection-disconnect { opacity: 1; }
.connection-disconnect:hover { color: var(--danger); background: rgba(240,96,106,.12); }
.connection-empty {
color: var(--text-faint);
font-size: 12px;
padding: 8px 10px;
}
/* ---- Memory view ----
Library layout (see "LIBRARY SHELL" further down, shared with Files): the type
chips are the tabs, groups are sections of one table, and a memory is a ROW —
text, type, when. The categories are unchanged; only the furniture is. */
.mem-count { font-size: 13px; color: var(--text-faint); white-space: nowrap; }
.mem-expand { flex-shrink: 0; }
/* Column template for a memory row. `.mem-acts` is a fixed slot so the columns do
not jump sideways when the hover actions appear. */
/* The icon track and the tile are ONE number — a track narrower than the tile is how
the tile ends up sitting in the text's column. */
.mem-list.lib-table { --lib-cols: 26px minmax(0, 1fr) 168px 96px 64px; }
.mem-groups-hint { font-size: 12px; color: var(--text-faint); padding: 0 0 8px; }
/* collapsible groups — flat sections, not cards */
.mem-group { border-bottom: 1px solid var(--border); }
.mem-group:last-child { border-bottom: 0; }
.mem-group-head {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
background: none; border: none; color: var(--text-dim); font-size: 12.5px; font-weight: 600;
padding: 12px 10px; cursor: pointer; border-radius: 10px;
}
.mem-group-head:hover { background: var(--bg-2); color: var(--text); }
.mem-caret { color: var(--text-faint); font-size: 15px; transition: transform .15s ease; flex-shrink: 0; }
.mem-group.open .mem-caret { transform: rotate(90deg); }
.mem-group-ico { font-size: 14px; flex-shrink: 0; display: inline-flex; align-items: center; }
.mem-group-ico .ico { width: 15px; height: 15px; }
.mem-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-group-count {
flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.mem-group-body { display: none; flex-direction: column; padding: 0 0 6px; }
.mem-group.open .mem-group-body { display: flex; }
.mem-item {
display: grid; grid-template-columns: var(--lib-cols); align-items: center; gap: 12px;
padding: 9px 10px; border-radius: 10px; border-bottom: 1px solid var(--border);
transition: background .12s;
}
.mem-item:last-child { border-bottom: 0; }
.mem-item:hover { background: var(--bg-2); }
/* Editing turns the row back into a block: a textarea, two selects and two buttons do
not belong in a 1fr table cell. */
.mem-item:has(.mem-edit-input) { display: block; background: var(--bg-2); }
.mem-icon { --ico-sz: 26px; font-size: 15px; }
.mem-icon:not(.ico-tile) { display: inline-flex; align-items: center; justify-content: center; }
.mem-body { min-width: 0; }
.mem-text { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.mem-cell {
font-size: 12px; color: var(--text-faint); min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mem-when { font-variant-numeric: tabular-nums; }
/* The stacked meta line only exists on narrow screens, where the columns fold away. */
.mem-meta { display: none; font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }
.mem-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.mem-score { font-size: 11px; color: var(--accent-2); font-weight: 700; flex-shrink: 0; }
.mem-del, .mem-edit { flex-shrink: 0; opacity: 0; }
.mem-item:hover .mem-del, .mem-item:hover .mem-edit { opacity: 1; }
.mem-item:focus-within .mem-del, .mem-item:focus-within .mem-edit { opacity: 1; }
.mem-src { text-transform: none; opacity: .85; }
.mem-status { text-transform: capitalize; color: var(--warn); }
/* Coarse pointers never hover, so actions that fade in are actions they cannot reach. */
@media (hover: none) {
.mem-del, .mem-edit { opacity: .55; }
}
/* Narrow: drop the columns and let the row carry its own meta line. */
@media (max-width: 760px) {
.mem-list.lib-table { --lib-cols: 24px minmax(0, 1fr) 64px; }
.mem-item > .mem-cell, .lib-thead > .mem-cell { display: none; }
.mem-meta { display: block; }
}
/* The skill a memory was learned in — the one piece of provenance worth reading at a
glance, so it gets the accent rather than the muted treatment `.mem-src` has. */
.mem-skill { text-transform: none; color: var(--accent); font-weight: 600; }
/* Type + skill pickers, shared by the edit row and the "+ Remember" form. */
.mem-edit-class { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.mem-edit-class select {
background: var(--bg-2); color: var(--fg); border: 1px solid var(--border);
border-radius: 6px; padding: 4px 8px; font-size: 13px; max-width: 100%;
}
.mem-add {
background: var(--bg-1); border: 1px solid var(--border);
border-radius: 10px; padding: 12px; margin-bottom: 10px;
}
.mem-add .mem-edit-input { width: 100%; }
.mem-edit-input { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; resize: vertical;
background: var(--bg-1); color: var(--text); border: 1px solid var(--accent); border-radius: 8px; }
.mem-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
/* ============================================================================
AI OS Community Network — P2P community hub
========================================================================= */
.cn-hub {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: var(--rail-w) minmax(0, 1fr) 320px;
background: var(--bg);
}
.cn-hub:has(#cn-detail.hidden) { grid-template-columns: var(--rail-w) minmax(0, 1fr) 0; }
.cn-empty { color: var(--text-faint); font-size: 13px; padding: 16px; line-height: 1.6; }
.cn-label { display: block; font-size: 12px; color: var(--text-faint); margin: 12px 0 5px; }
.cn-input {
width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text); font-size: 14px; margin-bottom: 4px;
font-family: inherit; box-sizing: border-box;
}
.cn-input:focus { outline: none; border-color: var(--accent); }
.cn-input.cn-mono { font-family: var(--mono); font-size: 12.5px; }
.cn-icon-btn {
background: none; border: 1px solid transparent; color: var(--text-dim);
width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.cn-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
/* ---- left rail ---- */
.cn-rail {
border-right: 1px solid var(--border); background: var(--bg-2);
display: flex; flex-direction: column; padding: 18px 14px; gap: 14px; overflow-y: auto;
}
.cn-rail-head { display: flex; align-items: center; gap: 10px; }
/* "‹ Company" nav box at the top of the rail (mirrors group chat's "‹ Chats") */
.cn-rail-nav-head { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cn-rail-nav-title { font-weight: 700; font-size: 15px; color: var(--text); }
.cn-logo {
font-size: 20px; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-3); border: 1px solid var(--border);
}
.cn-rail-title { font-weight: 700; font-size: 14.5px; }
.cn-rail-sub { font-size: 11.5px; color: var(--text-faint); }
.cn-identity-card { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; }
.cn-id-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.cn-id-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.cn-id-row { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; }
.cn-id-row code { background: var(--bg); padding: 1px 5px; border-radius: 5px; font-size: 11px; }
.cn-rail-section {
display: flex; align-items: center; justify-content: space-between;
font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700;
padding: 0 2px;
}
.cn-rail-list { display: flex; flex-direction: column; gap: 4px; }
.cn-rail-item {
display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 9px;
background: none; border: 1px solid transparent; cursor: pointer; text-align: left; width: 100%; color: var(--text);
}
.cn-rail-item:hover { background: var(--bg-hover); }
.cn-rail-item.active { background: var(--accent-soft); border-color: var(--accent); }
.cn-rail-item-avatar {
width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--bg-3);
display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-2);
}
.cn-rail-item-text { display: flex; flex-direction: column; min-width: 0; }
.cn-rail-item-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-rail-item-meta { font-size: 11px; color: var(--text-faint); }
.cn-rail-actions { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 10px; }
.cn-btn-block {
width: 100%; padding: 9px; border-radius: 9px; border: 1px solid var(--accent);
background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13px; cursor: pointer;
}
.cn-btn-block:hover { background: var(--accent-2); }
.cn-btn-block.ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.cn-btn-block.ghost:hover { background: var(--bg-hover); color: var(--text); }
.cn-btn-block.danger { background: transparent; color: var(--danger); border-color: rgba(239,68,68,.45); }
.cn-btn-block.danger:hover { background: rgba(239,68,68,.12); }
/* ==== Company redesign: full-bleed space + sidebar nav + admin + org chart ==== */
/* The Company view REPLACES the app sidebar with its own rail (a ← Back returns). */
body.cn-fullbleed #sidebar { display: none; }
body.cn-fullbleed .sidebar-toggle { display: none; }
.cn-back-btn {
display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
background: none; border: none; color: var(--text-dim); font-size: 12.5px; font-weight: 600;
padding: 4px 8px 4px 4px; margin: -2px 0 2px; border-radius: 8px; cursor: pointer;
}
.cn-back-btn:hover { background: var(--bg-hover); color: var(--text); }
.cn-back-arrow { font-size: 15px; line-height: 1; }
.cn-rail-head-text { flex: 1; min-width: 0; }
.cn-rail-refresh { flex: 0 0 auto; margin-left: auto; }
/* Primary + admin navigation in the rail */
.cn-nav { display: flex; flex-direction: column; gap: 2px; }
.cn-nav-item {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
background: none; border: none; border-radius: 9px; padding: 8px 10px; cursor: pointer;
color: var(--text-dim); font-size: 13.5px; font-weight: 500;
}
.cn-nav-item:hover { background: var(--bg-hover); color: var(--text); }
.cn-nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.cn-nav-ico { width: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); }
.cn-nav-item.active .cn-nav-ico { color: var(--text); }
.cn-nav-badge {
margin-left: auto; background: var(--bg-3); color: var(--text-dim); border-radius: 999px;
min-width: 18px; height: 18px; padding: 0 6px; font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.cn-nav-item.active .cn-nav-badge { background: var(--accent); color: var(--on-accent); }
.cn-nav-subaction {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600;
text-align: left; padding: 7px 10px; cursor: pointer; border-radius: 9px;
}
.cn-nav-subaction .cn-nav-ico { color: var(--accent); }
.cn-nav-subaction:hover { background: var(--bg-hover); }
/* Teams-you're-in sub-list nested under the Teams nav item */
.cn-nav-teams { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 1px 0; }
.cn-nav-team {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
background: none; border: none; border-radius: 8px; padding: 6px 10px 6px 34px; cursor: pointer;
color: var(--text-faint); font-size: 12.5px;
}
.cn-nav-team:hover { background: var(--bg-hover); color: var(--text); }
.cn-nav-team.active { color: var(--text); background: var(--bg-3); }
.cn-nav-team-ico { flex: 0 0 auto; font-size: 12px; }
.cn-nav-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-nav-admin { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border); }
.cn-nav-section-title {
font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-faint); padding: 4px 10px 2px;
}
/* Admin sub-page header (one focused screen per admin nav item) */
.cn-admin-pagehead { margin: 2px 2px 14px; }
.cn-admin-pagehead h2 { margin: 0; font-size: 18px; }
.cn-admin-pagehead p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; max-width: 620px; line-height: 1.5; }
/* ---- Overview: the org hierarchy ---- */
.cn-overview { display: flex; flex-direction: column; gap: 18px; max-width: 960px; }
.cn-org-legend {
display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px;
color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--border);
border-radius: 12px; padding: 10px 14px;
}
.cn-org-leg { display: inline-flex; align-items: center; gap: 6px; }
.cn-org-legend .ico, .cn-org-tier-h .ico, .cn-org-team-h .ico {
width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint);
}
.cn-org-tier { display: flex; flex-direction: column; gap: 9px; }
.cn-org-tier-h {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--text-dim);
}
.cn-org-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cn-org-team .cn-org-row { grid-template-columns: 1fr; }
.cn-org-card { cursor: default; }
.cn-org-card:hover { border-color: var(--border); background: var(--bg-2); }
.cn-org-card.active:hover { border-color: var(--accent); background: var(--accent-soft); }
.cn-org-node {
display: inline-flex; align-items: center; gap: 8px; background: var(--bg-2);
border: 1px solid var(--border); border-radius: 11px; padding: 8px 12px; min-width: 0;
}
.cn-org-node.you { border-color: var(--accent); background: var(--accent-soft); }
.cn-org-kind { font-size: 15px; flex: 0 0 auto; }
.cn-org-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.cn-org-job { color: var(--text-faint); font-size: 12px; border-left: 1px solid var(--border); padding-left: 8px; }
.cn-org-teams { display: flex; flex-wrap: wrap; gap: 12px; }
.cn-org-team { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; min-width: 240px; }
.cn-org-team-h { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; margin-bottom: 9px; }
.cn-org-team .cn-org-node { background: var(--bg); }
/* ---- People & roles: Odoo-style directory → detail → org chart ---- */
.cn-people-wrap { display: flex; flex-direction: column; }
.cn-people-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cn-people-head > div { min-width: 0; }
.cn-people-addbtn { flex: 0 0 auto; white-space: nowrap; }
.cn-ppl-addcol { max-width: 520px; }
.cn-ppl-addcol .cn-ppl-addsubmit { margin-top: 14px; }
/* Empty seat slots (People & roles) */
.cn-ppl-slot { border-style: dashed; align-items: center; }
.cn-ppl-slot:hover { border-color: var(--accent); background: var(--bg-hover); }
.cn-ppl-slot-plus {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; display: inline-flex;
align-items: center; justify-content: center; font-size: 22px; color: var(--text-dim);
border: 1px dashed var(--border);
}
/* Person / AI segmented toggle on the add form */
.cn-seg { display: inline-flex; gap: 4px; background: var(--bg-3); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.cn-seg-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; padding: 7px 14px; border-radius: 8px; cursor: pointer; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.cn-seg-btn .ico { width: 15px; height: 15px; flex-shrink: 0; }
.cn-seg-btn.active { background: var(--bg-2); color: var(--text); }
.cn-ppl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cn-ppl-card {
display: flex; gap: 12px; text-align: left; background: var(--bg); border: 1px solid var(--border);
border-radius: 12px; padding: 12px 14px; cursor: pointer; align-items: flex-start; width: 100%;
}
.cn-ppl-card:hover { border-color: var(--accent); background: var(--bg-hover); }
.cn-ppl-avatar {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; display: inline-flex;
align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
color: #fff; background: hsl(var(--ava-h, 260), 48%, 48%);
}
.cn-ppl-avatar.lg { width: 56px; height: 56px; font-size: 22px; border-radius: 12px; }
.cn-ppl-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-ppl-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cn-ppl-job { color: var(--text-dim); font-size: 12.5px; }
.cn-ppl-meta { color: var(--text-faint); font-size: 12px; }
.cn-ppl-card .cn-role-chips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.cn-ppl-back {
background: none; border: none; color: var(--text-dim); font-size: 13px; font-weight: 600;
cursor: pointer; padding: 4px 6px; border-radius: 8px; margin-bottom: 10px;
}
.cn-ppl-back:hover { background: var(--bg-hover); color: var(--text); }
.cn-ppl-detail { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); overflow: hidden; }
.cn-ppl-dhead { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.cn-ppl-dhead-text { flex: 1; min-width: 0; }
.cn-ppl-dname { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-ppl-djob { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.cn-ppl-dbody { display: grid; grid-template-columns: 1fr 328px; gap: 0; }
.cn-ppl-dcol { padding: 18px 20px; min-width: 0; }
.cn-ppl-dcol + .cn-ppl-dcol { border-left: 1px solid var(--border); }
.cn-ppl-org { background: var(--bg-2); }
.cn-ppl-field { margin-bottom: 18px; }
.cn-ppl-field .cn-role-opts { margin-top: 6px; }
/* Multi-role picker: a person may hold several job roles, one marked primary. */
.cn-jobrole-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.cn-jobrole-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.cn-jobrole-row:hover { background: var(--bg-3); }
.cn-jobrole-row.pending { opacity: .75; font-style: italic; }
.cn-jobrole-name { flex: 1; min-width: 0; } /* icon + gap: see .cn-role-optname below */
.cn-jobrole-primary { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); cursor: pointer; }
/* Company-authored job roles (Admin → Job roles). */
.cn-corole-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cn-corole-row:last-child { border-bottom: 0; }
.cn-corole-main { flex: 1; min-width: 0; }
.cn-corole-name { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.cn-corole-name .ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); }
.cn-corole-sub { font-size: 12px; color: var(--text-faint); }
.cn-corole-grid { display: grid; grid-template-columns: 2fr 70px 1.4fr; gap: 10px; }
.cn-role-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cn-role-form .cn-label { display: block; margin-top: 12px; }
.cn-role-persona { min-height: 96px; font-family: inherit; resize: vertical; }
.cn-role-opt small { display: block; color: var(--text-faint); font-size: 11px; }
@media (max-width: 640px) { .cn-corole-grid { grid-template-columns: 1fr; } }
/* "What their AI can use" — the resolved effect of the selected role + grants. */
.cn-ppl-effective { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cn-eff-row { display: flex; gap: 8px; align-items: baseline; margin: 6px 0; }
.cn-eff-row > div { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cn-eff-label { flex: 0 0 74px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.cn-org-chart-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.cn-org-chain { display: flex; flex-direction: column; gap: 6px; }
.cn-org-line {
display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px;
margin-left: calc(var(--d, 0) * 20px); border: 1px solid transparent;
}
.cn-org-line.clickable { cursor: pointer; }
.cn-org-line.clickable:hover { background: var(--bg-hover); }
.cn-org-line.self { background: var(--accent-soft); border-color: var(--accent); }
.cn-org-line .cn-ppl-avatar { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.cn-org-line-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cn-org-line-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-org-line-job { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-org-count {
flex: 0 0 auto; background: var(--bg-3); color: var(--text-dim); border-radius: 999px;
min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 820px) {
.cn-ppl-dbody { grid-template-columns: 1fr; }
.cn-ppl-dcol + .cn-ppl-dcol { border-left: none; border-top: 1px solid var(--border); }
}
/* Members & Teams reuse the People card look */
#cn-members-grid { display: block; } /* inner .cn-ppl-grid drives the layout */
.cn-ppl-card.active { border-color: var(--accent); background: var(--accent-soft); }
.cn-member-tile:not([data-node]) { cursor: default; }
.cn-member-tile:not([data-node]):hover { border-color: var(--border); background: var(--bg); }
.cn-ppl-name .cn-presence { margin-right: 3px; }
.cn-relay-tag { font-size: 10px; opacity: .6; }
.cn-member-tile .cn-recruit-remove { margin-left: 8px; }
/* Team cards */
.cn-team-tile { align-items: center; }
.cn-team-ava {
--ico-sz: 40px;
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; display: inline-flex;
align-items: center; justify-content: center; font-size: 20px;
}
.cn-team-ava:not(.ico-tile) { background: var(--bg-3); }
.cn-team-arrow { margin-left: auto; align-self: center; color: var(--text-faint); font-size: 20px; }
.cn-team-ava-stack { display: flex; margin-top: 5px; }
.cn-team-ava-stack .cn-ppl-avatar { width: 24px; height: 24px; font-size: 11px; border-radius: 6px; margin-left: -6px; border: 2px solid var(--bg-2); }
.cn-team-ava-stack .cn-ppl-avatar:first-child { margin-left: 0; }
/* Team detail: members as user cards (no role/scope) */
.team-members-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 14px; }
.team-member-card { align-items: center; }
/* The lead is the one member with a consequence attached, so the card says so. */
.team-member-card.is-lead { border-color: var(--accent); }
.team-lead-chip {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 1px 6px; border-radius: 999px; color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.team-role-sel {
font-size: 12px; padding: 2px 6px; border-radius: 8px; max-width: 140px;
background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim);
}
.team-role-sel:hover { color: var(--text); border-color: var(--accent); }
.team-member-card .chip-x {
margin-left: auto; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
border: none; background: none; color: var(--text-faint); font-size: 15px; line-height: 1;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.team-member-card .chip-x:hover { background: rgba(239,68,68,.14); color: var(--danger); }
/* Dashed "add member" tile that matches the member cards */
.team-add-tile {
position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px;
color: var(--text-dim); font-size: 13.5px; font-weight: 600; background: transparent;
}
.team-add-tile:hover { border-color: var(--accent); color: var(--text); background: var(--bg-hover); }
.team-add-plus {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; display: inline-flex;
align-items: center; justify-content: center; font-size: 20px; border: 1px dashed var(--border);
}
.team-add-tile .team-add-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* The page header shows the active section name (Overview/Members/Teams);
renderCN toggles .hidden for admin panes, which carry their own title. */
.cn-main-head h1 { font-size: 18px; }
/* People detail: role input + unified save row + field hint */
.cn-ppl-saverow { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.cn-field-hint { color: var(--text-faint); font-size: 12px; margin: 2px 0 8px; }
/* Monochrome badges. The desaturating filter that used to sit on .cn-team-ava,
.cn-org-tier-h, .cn-org-legend, .cn-type-chip and .cn-you-badge is GONE: it existed to
stop full-colour emoji shouting on a grey page, and there are no emoji left in them —
drained of colour, the outline glyphs that replaced them lost the one thing carrying
their meaning (rose person / violet AI). Anything still holding an emoji keeps the
filter through the rule below, so nothing got louder. */
#view-community-network .cn-role-badge { background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--border); }
/* The one emoji left on these pages is the one an ADMIN typed for their own role. It
keeps the desaturation, because the reason for it — a full-colour picture shouting on
a grey page — is exactly what a hand-picked 🎯 or 💰 would do. */
#view-community-network .cn-emoji { filter: grayscale(1); }
/* Sidebar icons: outline SVG (no fill) */
.cn-nav-ico svg, .cn-nav-team-ico svg { width: 17px; height: 17px; display: block; }
.cn-nav-section-title svg { width: 14px; height: 14px; }
.cn-logo svg { width: 22px; height: 22px; }
.cn-icon-btn svg, .cn-back-arrow svg { width: 15px; height: 15px; display: block; }
.cn-btn-block svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.cn-nav-section-title { display: flex; align-items: center; gap: 7px; }
/* ---- Modern toggle switch ---- */
.aios-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.aios-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.aios-switch .track {
position: relative; flex: 0 0 auto; width: 38px; height: 22px; box-sizing: border-box;
background: #3c3c3c; border-radius: 999px;
transition: background .22s ease;
}
.aios-switch .track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
background: #f4f4f5; border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
transition: transform .24s cubic-bezier(.34, 1.35, .5, 1);
}
.aios-switch input:checked + .track { background: #22c55e; }
.aios-switch input:checked + .track::after { transform: translateX(16px); }
.aios-switch input:focus-visible + .track { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.aios-switch input:disabled + .track { opacity: .55; cursor: default; }
.aios-switch .sw-label { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .1px; }
/* ---- Settings pane ---- */
.cn-settings-pane { display: flex; flex-direction: column; gap: 16px; }
/* ---- Company usage dashboard (admin, company-wide) ---- */
.cn-usage-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 14px; }
.cn-usage-seg { display: inline-flex; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 2px; gap: 2px; }
.cn-usage-seg button { appearance: none; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.cn-usage-seg button:hover { color: var(--text); }
.cn-usage-seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.cn-usage-export { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-decoration: none; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; }
.cn-usage-export:hover { color: var(--text); border-color: var(--accent); }
.cn-usage-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 10px; border-bottom: 1px solid var(--border); }
.cn-usage-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 10px; margin-bottom: -1px; cursor: pointer; }
.cn-usage-tab:hover { color: var(--text); }
.cn-usage-tab.on { color: var(--accent-2); border-bottom-color: var(--accent); }
.cn-usage-list { display: flex; flex-direction: column; }
.cn-usage-lrow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border); }
.cn-usage-lrow:first-child { border-top: none; }
.cn-usage-lmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cn-usage-lname { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; word-break: break-word; }
.cn-usage-lmeta { font-size: 11.5px; opacity: .55; font-variant-numeric: tabular-nums; }
.cn-usage-lnum { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; min-width: 104px; }
.cn-usage-lnum b { font-weight: 700; }
.cn-usage-lnum span { font-size: 11.5px; opacity: .55; }
.cn-usage-chip { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); background: var(--bg-3); border-radius: 6px; padding: 1px 6px; }
.cn-usage-chip.cheap { color: var(--accent-2); background: var(--accent-soft); }
.cn-usage-chip.bad { color: var(--danger); background: var(--danger-soft); }
.cn-usage-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 4px 0 2px; }
.cn-usage-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.cn-usage-stat-n { font-size: 1.7em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cn-usage-stat-l { opacity: .6; font-size: .78em; margin-top: 2px; }
.cn-usage-subhead { font-size: .76em; text-transform: uppercase; letter-spacing: .06em; opacity: .55; font-weight: 700; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.cn-usage-count { background: var(--bg-3); color: var(--text-dim); border-radius: 9px; padding: 1px 7px; font-size: 11px; letter-spacing: 0; }
.cn-usage-members { display: flex; flex-direction: column; gap: 0; }
.cn-usage-mrow { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border); }
.cn-usage-mrow:first-child { border-top: none; }
.cn-usage-mrow .cn-ppl-avatar { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; flex: 0 0 auto; }
.cn-usage-mmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cn-usage-mname { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cn-usage-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--accent-soft); color: var(--accent-2); border-radius: 6px; padding: 1px 6px; }
.cn-usage-pending { font-size: 10.5px; font-weight: 600; color: var(--text-faint); background: var(--bg-3); border-radius: 6px; padding: 1px 7px; }
.cn-usage-bar { height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.cn-usage-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); min-width: 2px; }
.cn-usage-mnum { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.cn-usage-mnum b { font-weight: 700; }
.cn-usage-mturns { font-size: 11px; opacity: .55; }
.cn-usage-note { font-size: 12px; color: var(--text-faint); margin: 10px 0 0; }
.cn-usage-days { display: flex; flex-direction: column; gap: 0; }
.cn-usage-drow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--border); font-size: 13px; font-variant-numeric: tabular-nums; }
.cn-usage-drow:first-child { border-top: none; }
.cn-usage-drow > span:first-child { opacity: .8; }
.cn-usage-dcache { opacity: .6; min-width: 90px; text-align: right; }
.cn-usage-empty { opacity: .7; font-size: 13.5px; }
.cn-settings-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.cn-settings-card.danger { border-color: rgba(239,68,68,.3); }
/* Company → Skills — cards grouped by AUDIENCE.
The groups are the model this page sets (who each skill is for), so they are the
structure rather than a column: a card sits under Company / Team / Role /
Individual and MOVES the moment its scope saves. Failure stays loud inside the
group and gets its own filter, because five skills failing every morning with
nobody told is why this page exists at all. */
/* The same two controls the library pages use — a search pill and a compact select.
These are shared by Company → Skills and by Heartbeat's find bar, so they were the
last place in the app still wearing the old square-input look. */
.skl-toolbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.skl-filter {
flex: 1 1 220px; min-width: 0; max-width: 300px; height: 36px; padding: 0 14px;
font: inherit; font-size: 13px; color: var(--text);
background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; outline: none;
}
.skl-filter::placeholder { color: var(--text-faint); }
.skl-filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.skl-alert { font-size: 12px; font-weight: 600; color: var(--danger); cursor: pointer;
background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; }
.skl-alert:hover { border-color: var(--danger); }
.skl-alert.on { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: var(--danger); }
.skl-allok { font-size: 12px; color: var(--text-faint); }
.skl-warn { font-size: 12px; color: var(--warn, #d98324); }
/* "Group by" — the same control on the three pages that list skills (Skills,
Heartbeat, Company → Skills), so the way you re-cut a list is one thing to learn.
Sized off .market-cat, which is the picker it sits beside on the Skills page. */
.skl-groupby { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
border-radius: 999px; height: 36px; padding: 0 12px; font: inherit; font-size: 13px; }
.skl-groupby:hover { color: var(--text); }
.skl-groupby:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Heartbeat's find controls ride the right-hand end of the unread bar, so the count
stays the first thing read on the page. */
.skl-find { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.skl-find .skl-filter { flex: 0 1 240px; }
.skl-group { margin-top: 18px; }
.skl-group-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
padding: 0 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.skl-group-t { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.skl-group-n { font-size: 11px; color: var(--text-faint);
background: var(--bg-3); border-radius: 999px; padding: 1px 7px; }
.skl-group-bad { font-size: 11px; font-weight: 600; color: var(--danger); }
.skl-group-hint { font-size: 11.5px; color: var(--text-faint); }
/* auto-fill, so the cards reflow instead of stretching to one per row on a wide screen */
.skl-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.skl-card {
display: flex; flex-direction: column; gap: 8px; min-width: 0;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
padding: 13px 14px; border-left: 3px solid transparent;
}
.skl-card:hover { border-color: var(--text-faint); }
.skl-card.failing { border-left-color: var(--danger); background: rgba(239,68,68,.06); }
.skl-card.scheduled { border-left-color: var(--ok); }
.skl-card.off { opacity: .72; }
.skl-card.off:hover { opacity: 1; }
.skl-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
/* The app's icon tile, at list size — the same glyph and hue this skill wears in the
catalog, on Heartbeat and on its own page. */
.skl-card-icon { --ico-sz: 26px; font-size: 15px; line-height: 1; }
.skl-card-state { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.skl-needs { color: var(--text-faint); font-size: 11px; }
.skl-card-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
/* Wrap rather than shrink: three squeezed pickers turned a role name into
"Product Data M". Two per line, the third drops under them. */
.skl-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 132px; min-width: 124px; }
.skl-field > span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-faint); }
/* State reads at a glance: a dot for the verdict, the detail under it, quietly. */
.skl-state { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.skl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex: none; }
.skl-state.ok { color: var(--ok); }
.skl-state.ok .skl-dot { background: var(--ok); }
.skl-state.bad { color: var(--danger); font-weight: 600; }
.skl-state.bad .skl-dot { background: var(--danger); }
.skl-state.off { color: var(--text-faint); }
.skl-state.off .skl-dot { background: transparent; border: 1px solid var(--text-faint); }
.skl-why { color: var(--text-faint); font-size: 11px; padding-left: 12px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skl-chip {
font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px;
border-radius: 999px; color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Findings waiting on somebody reads as work, not as a feature label. */
.skl-chip.rows { color: var(--warn, #d98324);
background: color-mix(in srgb, var(--warn, #d98324) 16%, transparent); }
/* What the skill is ABOUT is context, not status — it must not compete with the two
chips that mean something is waiting. Shown only when the category is not already
the heading above the card. */
.skl-chip.cat { color: var(--text-faint); background: var(--bg-3);
text-transform: none; letter-spacing: 0; font-size: 10.5px; }
/* The name is a link into the skill; it must not look like a button. */
.skl-open { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
font-size: 13.5px; color: inherit; cursor: pointer; text-align: left; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skl-open:hover { text-decoration: underline; }
.skl-scope, .skl-ref, .skl-owner {
width: 100%; font-size: 12px; padding: 4px 8px; border-radius: 8px;
background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
}
@media (max-width: 560px) {
.skl-cards { grid-template-columns: 1fr; }
.skl-card-controls { flex-direction: column; }
}
.cn-settings-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cn-settings-card.danger .cn-settings-h { color: var(--danger); }
.cn-settings-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; }
/* AI capabilities & limits card — label ↔ control rows */
.cn-ops-grid { display: flex; flex-direction: column; gap: 13px; margin: 6px 0 12px; }
.cn-ops-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cn-ops-row > span { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; }
.cn-ops-row > span small { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
.cn-ops-row .cn-input { flex: none; max-width: 240px; }
.cn-ops-row .cn-ops-num { max-width: 130px; }
@media (max-width: 560px) {
.cn-ops-row { flex-direction: column; align-items: stretch; gap: 6px; }
.cn-ops-row .cn-input, .cn-ops-row .cn-ops-num { max-width: none; }
}
/* "Which AI does which job" — one card per function, grouped by the part of the
product a person recognises rather than by tier or by the module that implements it.
Deliberately the same shape as Company → Skills (.skl-group-h / .skl-cards): both
pages ask "here are N things, which ones do you want to change", and inventing a
second card language for the same question is how a settings page stops feeling
like one product.
Each card carries what that function actually COST, because "should this run on the
cheaper model" is unanswerable without knowing whether it runs twice a week or four
hundred times. */
.cn-policy-group { margin-top: 18px; }
.cn-policy-group-head { display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap; padding: 0 2px 8px; border-bottom: 1px solid var(--border); }
.cn-policy-group-head b { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.cn-policy-group-count { font-size: 11px; color: var(--text-faint);
background: var(--bg-3); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* Save — and the set-the-whole-group controls — sit in the group header, next to the
group's own summary. The single button at the foot of the card is several screens from
the switch you just flipped, and "put every background job on the cheaper model" is one
decision rather than nine identical clicks. */
.cn-policy-group-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-policy-group-save { padding: 3px 12px; font-size: 12px; line-height: 1.6; }
/* Deliberately NOT styled like the per-card segmented control: these are actions that
move nine switches, not a display of what the group currently is. That is what the
tally beside them is for. */
.cn-policy-bulk { display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
overflow: hidden; }
.cn-policy-bulk button { background: none; border: 0; color: var(--text-dim);
font-size: 11.5px; padding: 4px 10px; cursor: pointer; font-family: inherit;
white-space: nowrap; transition: background .12s, color .12s; }
.cn-policy-bulk button + button { border-left: 1px solid var(--border); }
.cn-policy-bulk button:hover { background: var(--bg-3); color: var(--text); }
.cn-policy-bulk-effort { width: auto; margin-bottom: 0; padding: 4px 8px; font-size: 11.5px; }
.cn-policy-group > small { display: block; color: var(--text-faint); font-size: 11.5px;
margin: 6px 2px 0; }
/* auto-fill so the cards reflow instead of stretching to one per row on a wide screen */
.cn-policy-grid { display: grid; gap: 12px; margin: 12px 0 4px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cn-policy-card {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
padding: 13px 14px; border-left: 3px solid transparent;
}
.cn-policy-card:hover { border-color: var(--text-faint); }
/* A card that is NOT on its default. Among 31 of them a deliberate choice is invisible
otherwise — you would have to know every default by heart to spot one. The left edge
carries state here exactly as it does on a skill card. */
.cn-policy-card.moved { border-left-color: var(--accent); }
.cn-policy-card-head { display: flex; align-items: center; gap: 2px; }
.cn-policy-card-head b { font-size: 13px; line-height: 1.3; }
/* Always in the DOM, shown only while the card is off its default — the dot has to be
able to appear and disappear as switches move, without re-rendering the whole card
(which would throw away every other unsaved change on the page). */
.cn-policy-moved { color: var(--accent); font-style: normal; margin-left: 6px;
font-size: 15px; line-height: 0; display: none; }
.cn-policy-card.moved .cn-policy-moved { display: inline; }
.cn-policy-card > small { color: var(--text-faint); font-size: 11.5px; line-height: 1.4; }
.cn-policy-usage { display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.cn-policy-usage b { color: var(--text); font-size: 12px; }
.cn-policy-usage.quiet { color: var(--text-faint); font-style: italic; }
.cn-policy-card .cn-usage-bar { margin: 0; }
/* `margin-top: auto` bottom-aligns the controls: a card with no spend has no bar, so
without it the switches sit at a different height from the card beside them and the
row reads as ragged rather than as a set of comparable choices. */
.cn-policy-controls { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.cn-policy-controls .cn-input { flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; }
/* Segmented tier control. Radios, not a