/* * **One agent row, everywhere an agent is listed** (the Founder, 7 October 2026, on his iPhone): Home's Chief card and * Agent Crew, Agents as a list and as a grid, a Workspace's Humans & agents, the agent's own heading. * * line 1 the name, and beside it "Working ···" while the agent works, or "Needs you ›" in red when the agent waits * on the person (never both: an agent waiting on the person is not working) * line 2 the role * line 3 the platform the agent comes from, or nothing * right the connection pill, always, vertically centred: Online, Offline or Invited * * A grid tile says the same in the same order, the pill at the same place on every tile. Markup: terminal-ui.js * agentRowContent, agentLink, connectionPill, agentMark. Linked after terminal-fit.css, so each rule here wins at the * specificity it restates. */ /* ---- The marks' words sit on their own ink, not their line box ---- * A word is trimmed to its cap height and baseline (`text-box`), so a flex line centres what is beside it (the pill's * dot, Working's dots, Needs you's dot and arrow) on the letters themselves. The target is the middle of the letters, * halfway between the x-height's centre and the cap height's centre: SymUI's cap height is .74em and its x-height .55em, * so that middle is .0475em under the cap height's centre, and the marks are moved down by it. Needs you has no dot * (the Founder, 7 October 2026, 22:20): its arrow is centred the same way. The trimmed word * already sits that far low in its pill (measured at 390 and 1280: within .5px), so the pill's padding stays even. */ .mark-word{display:block;min-width:0} @supports (text-box:trim-both cap alphabetic){ .mark-word{text-box:trim-both cap alphabetic} .agent-connection[data-state]::before,.badge.status-badge.agent-connection[data-state]::before, .agent-needs>.icon,.needs-you>.icon,.agent-activity>.work-dots{translate:0 .0475em} .badge.status-badge.agent-connection[data-state]{padding-top:6px;padding-bottom:6px;line-height:1} } /* ---- The pill ---- */ .badge.status-badge.agent-connection[data-state]{gap:5px;padding-inline-start:7px;padding-inline-end:9px;font-size:11px;margin:0;min-height:0;flex:none} /* ---- The mark beside the name: Working ··· or Needs you › (red words and the arrow; no dot, which is a status's) ---- */ .agent-activity{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1;white-space:nowrap} .agent-needs{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1;white-space:nowrap;text-decoration:none;color:var(--red,#bd3551);font-weight:600} .agent-needs>.icon{flex:none;width:12px;height:12px;margin-inline-start:-1px;stroke-width:2.4} a.agent-needs:hover .mark-word,[data-needs-href]:hover .mark-word{text-decoration:underline} a.agent-needs:focus-visible,[data-needs-href]:focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:3px;border-radius:4px} [data-theme=dark] .agent-needs{color:#ff9aaa} /* ---- The row ---- */ .agent-row{display:flex;flex-direction:row;align-items:center;gap:12px;min-width:0;width:100%;min-height:52px;text-align:start} .agent-row>.portrait-box.small{flex:0 0 44px;width:44px;min-width:44px;height:44px;align-self:center} .agent-row-copy{display:flex;flex-direction:column;justify-content:center;gap:0;flex:1 1 auto;min-width:0;position:static} .agent-row-head{display:flex;align-items:center;gap:8px;min-width:0;height:20px} .agent-row-head>.agent-compact-name{flex:0 1 auto;min-width:0;padding:0!important;font-size:14px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .agent-row-head>:is(.agent-activity,.agent-needs){flex:none;position:static;margin:0} .agent-row-role,.agent-row-platform{display:block;min-width:0;font-size:12px;line-height:16px;color:var(--muted,#686577);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .agent-row-end{flex:none;display:flex;align-items:center;gap:6px;margin-inline-start:auto} .agent-row-end>.icon{flex:none;width:14px;height:14px;color:var(--muted,#686577)} /* A row with Needs you: the row's own link is laid over the box, Needs you above it; two links side by side. */ .agent-row-waits{position:relative} .agent-row-waits>.agent-row-open{position:absolute;inset:0;z-index:1;border-radius:inherit} .agent-row-waits>.agent-row-open:focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:2px} .agent-row-waits a.agent-needs{position:relative;z-index:2} /* Working opens its pop-up, never the agent's page under it: above the row's link like Needs you (#571, the crown's box from #584). */ .agent-row-waits .agent-activity.working-trigger{position:relative;z-index:2} .agent-row-waits>.primary-tab{z-index:3} div.list-row.agent-row-waits,div.person-chip.agent-row-waits{cursor:pointer} /* Home's Agent Crew and a Workspace's agents: every row the same box. */ [data-home-crew] .list-row>.agent-row,.agent-compact-row>.agent-row{flex:1 1 auto} .person-chip.agent-compact-row{display:flex;align-items:center;width:100%;min-width:0} /* ---- Agents as a list: the same row in its card ---- */ [data-collection-items=agents][data-view=list]>.agent-card.agent-compact:not(.agent-asking){display:flex;align-items:center;padding:12px} /* ---- Agents as a grid: a square tile, the face and the pill on one line at the top, then the three lines ---- */ [data-collection-items=agents][data-view=grid]>.agent-card:not(.agent-asking){display:block;position:relative;padding:12px} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:48px auto;column-gap:8px;row-gap:10px;align-items:center;align-content:start;height:100%;min-height:0} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row>.portrait-box.small{grid-column:1;grid-row:1;width:48px;min-width:48px;height:48px} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-end{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-end>.icon{display:none} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-copy{grid-column:1/-1;grid-row:2;justify-content:flex-start;flex:none;min-height:0} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-head{flex-wrap:wrap;height:auto;row-gap:2px} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-head>.agent-compact-name{font-size:15px;max-width:100%} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-head>:is(.agent-activity,.agent-needs){height:20px} /* Long state pills need their own row when a grid card cannot fit face + pill. */ [data-collection-items=agents][data-view=grid]>.agent-card:not(.agent-asking){container-type:inline-size} @container (max-width:172px){ [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row:has(.agent-connection:is([data-state=unresponsive],[data-state=disconnected])){grid-template-rows:48px auto auto;height:auto} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row:has(.agent-connection:is([data-state=unresponsive],[data-state=disconnected])) .agent-row-end{grid-column:1/-1;grid-row:2;justify-self:start} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row:has(.agent-connection:is([data-state=unresponsive],[data-state=disconnected])) .agent-row-copy{grid-row:3} } /* ---- The agent's own heading, like WhatsApp's chat header (the Founder, 8 October 2026, from his phone) ---- The face at the left with the Chief's crown on its top corner; beside it the name and Working or Needs you, the role and its pill, the platform (agentHeadLines, the same lines as every agent heading). Chat and Call are one pill at the top right, as WhatsApp's contact header holds them (the Founder, 9 October 2026, 02:50): a rounded pill with a hairline round it, the chat bubble and the phone inside, nothing between them (his 06:37: "I don't want a separator"), each 44px to the finger. */ .page-heading.agent-heading .agent-head-copy{gap:2px} .page-heading.agent-heading .agent-head-copy>:is(.agent-head-role-line,.agent-head-platform){font-size:.875rem} .page-heading.agent-heading .agent-head-end{flex-direction:row;align-items:flex-start;align-self:flex-start;gap:0} .page-heading.agent-heading .agent-calls{display:inline-flex;align-items:stretch;gap:0;margin:0;border:1px solid var(--line,#e4e1ea);border-radius:999px;background:var(--surface,#fff);overflow:hidden;box-shadow:0 1px 2px #24212d12} .page-heading.agent-heading .agent-calls>.agent-call,.page-heading.agent-heading .agent-calls>.agent-call:active{width:44px;height:44px;min-width:44px;min-height:44px;border:0;border-radius:0;background:none;color:var(--purple,#6d28b5)} /* A press or a hover never fills one half of the pill (the Founder, 9 October 2026, 07:16, twice: "no line"; a tapped button keeps :hover on a phone, and half the pill tinted read as a divider). The icon itself answers: a little larger under the pointer, smaller and lighter while pressed; the focus ring goes round the whole pill. */ .page-heading.agent-heading .agent-calls>.agent-call:is(:hover,:active,:focus,:focus-visible){background:none;color:var(--purple,#6d28b5);outline:none} .page-heading.agent-heading .agent-calls>.agent-call .icon{width:22px;height:22px;transition:transform .12s ease-out,opacity .12s ease-out} @media (hover:hover){.page-heading.agent-heading .agent-calls>.agent-call:hover .icon{transform:scale(1.1)}} .page-heading.agent-heading .agent-calls>.agent-call:active .icon{transform:scale(.86);opacity:.6} .page-heading.agent-heading .agent-calls:has(>.agent-call:focus-visible){box-shadow:0 0 0 3px #b987ef} [data-theme=dark] .page-heading.agent-heading .agent-calls{background:var(--surface);border-color:var(--line)} [data-theme=dark] .page-heading.agent-heading .agent-calls>.agent-call,[data-theme=dark] .page-heading.agent-heading .agent-calls>.agent-call:is(:hover,:active,:focus,:focus-visible){background:none;color:var(--ink)} /* The Chief's crown on the face's top corner, a small badge on the frame's edge, never a word under the name. */ .page-heading.agent-heading .portrait-box.large{overflow:visible} .page-heading.agent-heading .portrait-box.large>.primary-star.primary-solid{top:-5px;inset-inline-end:-5px;width:24px;height:24px;padding:3px;border-radius:50%;box-shadow:0 0 0 2px var(--surface,#fff),0 1px 3px #24212d33} @media (max-width:700px){.page-heading.agent-heading .agent-head-copy>:is(.agent-head-role-line,.agent-head-platform){font-size:.8125rem}} /* The same crown on the face in a chat's header, beside the page and under Messages. */ .chat-thread-head .chat-face-agent,.chat-panel-head .chat-panel-face{position:relative;display:inline-flex;flex:none} :is(.chat-thread-head .chat-face-agent,.chat-panel-head .chat-panel-face)>.primary-star.primary-solid{position:absolute;top:-5px;inset-inline-end:-5px;inset-inline-start:auto;width:17px;height:17px;padding:2px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 0 0 1.5px var(--surface,#fff),0 1px 2px #24212d33;z-index:2} /* ---- The Chief's tab: one shape with the frame ---- * A filled tab of the frame's own colour stands on the card's top border, its bottom edge on the border's inner edge, * so tab and border read as one stroke; it starts where the card's top edge is straight, past the rounded corner. */ .chief-frame>.primary-tab{top:-26px;inset-inline-start:14px;height:26px;padding:0 10px;gap:5px;border:2px solid var(--chief-frame);border-bottom:0;border-radius:9px 9px 0 0;background:var(--chief-frame);color:#fff;font-size:12px;line-height:22px;box-shadow:none;z-index:3} .chief-frame>.primary-tab .primary-crown{width:14px;height:14px;color:#fff} [data-theme=dark] .chief-frame>.primary-tab,[data-theme=dark] .chief-frame>.primary-tab .primary-crown{color:#1b1424} .chief-frame.has-primary-tab{margin-top:28px} [data-collection-items=agents][data-view=grid]:has(>.chief-frame.has-primary-tab){padding-top:28px} [data-collection-items=agents]>.agent-card.chief-frame.has-primary-tab{margin-top:0} [data-collection-items=agents][data-view=list]:has(>.chief-frame.has-primary-tab){padding-top:28px} /* Home: the tab a little larger, the word as large as a row's name. */ [data-home-crew] .chief-frame>.primary-tab{top:-30px;inset-inline-start:16px;height:30px;padding:0 12px;gap:6px;font-size:14px;line-height:26px;align-items:center} [data-home-crew] .chief-frame>.primary-tab .primary-crown{width:18px;height:18px} /* A row holding two links says its name in the link colour, as a row that is one link does. */ .agent-row-waits:not(.agent-row-calm) .agent-compact-name{color:var(--purple,#6d28b5)} /* ---- The org chart: a node is a small tile, the face and the pill on its first line, the three lines under them ---- */ .org-world .org-node>a{padding:12px 14px} .org-world .org-node .agent-row{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:36px auto;column-gap:8px;row-gap:6px;align-items:center;min-height:0} .org-world .org-node .agent-row>.portrait-box.small{grid-column:1;grid-row:1;width:36px;min-width:36px;height:36px} .org-world .org-node .agent-row-end{grid-column:2;grid-row:1;justify-self:end;margin:0} .org-world .org-node .agent-row-end>.icon{display:none} .org-world .org-node .agent-row-copy{grid-column:1/-1;grid-row:2} .org-world .org-node .agent-row-head>.agent-compact-name{font-size:14px} /* ---- The card of what waits on an agent's Overview shares the mark's class (needs-you.js overviewNeeds) ---- * It is a card, not a mark: none of the mark's look, so its lines and presses lay out as every Needs you card's do * (the night's sweep gave it the red inline look, and the page scrolled sideways at 390). */ section.agent-needs[data-agent-needs]{display:block;gap:normal;white-space:normal;font-size:inherit;font-weight:inherit;color:inherit;text-decoration:none;translate:none} section.agent-needs[data-agent-needs]::before{content:none;display:none} [data-theme=dark] section.agent-needs[data-agent-needs]{color:inherit} /* Needs you's arrow is its word's red, whatever colour a row gives its icons. */ :is(a,span).agent-needs>svg.icon{color:inherit!important;stroke:currentColor} /* ---- One logic for every agent heading (the Founder, 7 October 2026, 23:12): the name, and beside it Working or Needs you; the role under it; the platform under that; the Online / Offline / Invited pill at the right of the block. Nothing is cut mid-word: a line too long wraps at a word, and on a phone the platform goes first. ---- */ .agent-head-copy{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0} .agent-head-copy>.agent-head-line{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:0;height:auto;min-width:0} .agent-head-line>.agent-head-name{display:inline-flex;align-items:center;gap:4px;min-width:0;margin:0;font-weight:700;line-height:1.3;white-space:normal;overflow:visible;overflow-wrap:anywhere} .agent-head-line>:is(.agent-activity,.agent-needs){flex:none;font-size:12px;line-height:1.3} .agent-head-copy>:is(.agent-head-role-line,.agent-head-platform){display:block;margin:0;font-size:.8125rem;line-height:1.35;color:var(--muted,#686577);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal} .agent-head-copy>.agent-head-role-line{display:flex} .agent-head-role-line>.agent-head-role{display:block;margin:0;font-size:inherit;line-height:inherit;color:inherit;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal} .agent-head-state{flex:none;display:inline-flex;align-items:center} .agent-head-state>.agent-connection{margin:0} /* ---- The role line (the Founder, 8 October 2026: "CEO ● Online", the pill centred on the role's line exactly) ---- terminal-ui.js agentRoleLine: Home's Chief card, an agent's page, the chat's header and the call sheet. The role's words are trimmed to their capitals and baseline (`text-box`) and padded back to their line's height, the same above and below, so the role's box is centred on its letters; the pill's word is trimmed the same way (`.mark-word`), so a flex line centres the pill on the letters themselves, not on a line box whose letters sit high in it (SymUI's ascent is taller than its descent: the pill read 1.6px low at 390 and 2.6px low at 1280). The padding, not the line box, keeps a descender inside an ellipsis's clip. A browser without `text-box` centres the boxes, as before. */ .agent-head-role-line{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;margin:0} .agent-head-role-line>.agent-head-role-word{flex:0 1 auto;min-width:0} .agent-head-role-line>.agent-head-state{flex:none;margin:0} @supports (text-box:trim-both cap alphabetic){ .agent-head-role-line>.agent-head-role-word{text-box:trim-both cap alphabetic;padding-block:calc((1lh - 1cap) / 2)} } /* The chat's header, beside the page and under Messages: the pill before the header's buttons. */ :is(.chat-thread-head,.chat-panel-head) .chat-head-name{display:flex;flex-direction:column;justify-content:center;min-width:min-content;color:inherit;text-decoration:none} :is(.chat-thread-head,.chat-panel-head) .chat-head-name .agent-head-name{font-size:1rem} .chat-panel-head .grow.chat-head-name{flex:1 1 0;min-width:0} @media (max-width:700px){ :is(.chat-thread-head,.chat-panel-head) .agent-head-platform{display:none} /* On a phone the chat beside the page is the whole screen: its block keeps room for the name and Needs you on one line and for the role and its pill on the next, the three dots on the same row at the right (the Founder, 8 October 2026). Under Messages the header stays one row. */ .chat-thread-head{gap:6px;padding-inline-start:12px;padding-inline-end:6px} .chat-thread-head .agent-head-line{column-gap:6px} } .chat-panel-head .chat-panel-tools{margin-inline-start:auto} /* The call sheet's header: the name and its status, the role and its pill; the sheet's button at the right. */ .call-sheet-head .agent-head-copy{flex:1 1 auto} /* The ⓘ right after the state pill (state-info.js; the Founder, 9 October 2026, 06:59: "put like an i next to disconnected… it can show something popping up"): an 18px mark, 44px to the finger, taking no more room on its line than the mark. Its popover: under the ⓘ, at most 300px and always 16px inside the screen (state-info.js place). */ .state-info{display:inline-flex;align-items:center;flex:none;margin-inline-start:4px;line-height:1} .state-info-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:-13px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted,#686577);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .state-info-button .icon{width:18px;height:18px;stroke-width:2} .state-info-button:hover,.state-info-button[aria-expanded=true]{color:var(--ink,#24212d)} .state-info-button:focus-visible{outline:2px solid #b987ef;outline-offset:-11px} [data-theme=dark] .state-info-button{color:var(--muted,#a5a3b3)} [data-theme=dark] .state-info-button:hover,[data-theme=dark] .state-info-button[aria-expanded=true]{color:var(--ink,#f0f1f5)} .state-info-pop{display:none;position:fixed;inset:auto;margin:0;box-sizing:border-box;width:300px;max-width:calc(100vw - 32px);padding:12px 14px;border:1px solid var(--line,#e4e1ea);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#24212d);box-shadow:0 8px 24px #24212d24;font-size:14px;line-height:1.4;font-weight:400;letter-spacing:normal;text-align:start;text-transform:none;white-space:normal;overflow-wrap:break-word;z-index:60} .state-info-pop:popover-open{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .state-info-pop[data-open]{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .state-info-why{display:block} .state-info-pop .state-info-act{min-height:44px;margin:0} [data-theme=dark] .state-info-pop{border-color:var(--line,#353843);background:var(--surface,#1e2028);color:var(--ink,#f0f1f5);box-shadow:0 8px 24px #0008} /* On an agent's page the lines keep to their column, never under Chat and Call: where the role, the pill and the ⓘ do not fit on one line, the pill and the ⓘ go together onto the next. */ .page-heading.agent-heading .agent-head-copy{max-width:100%} .page-heading.agent-heading .agent-head-copy>.agent-head-role-line{flex-wrap:wrap;row-gap:2px} /* The Connection tab's Status row: the pill and its ⓘ side by side, the ⓘ's reach never cut by the row's value box. */ [data-connection-row="status"] .info-value{display:inline-flex;align-items:center;justify-content:flex-end;overflow:visible} /* The on-demand explanation is a sentence, including on a narrow agent tile. */ .agent-row-head:has(>.agent-on-demand){flex-wrap:wrap;height:auto} .agent-row-head>.agent-on-demand,.agent-head-line>.agent-on-demand{flex:0 1 auto;min-width:0;max-width:100%;white-space:normal;line-height:1.35} [data-collection-items=agents][data-view=grid] .agent-card:not(.agent-asking) .agent-row-head>.agent-on-demand{height:auto} /* The Chief's tab is the one marker on the Agents list and a button (15 October 2026): Make another agent Chief. */ button.primary-tab.chief-tab-button{font:inherit;font-weight:650;cursor:pointer;margin:0} button.primary-tab.chief-tab-button::after{content:"";position:absolute;inset:-9px -4px -6px} button.primary-tab.chief-tab-button:hover{filter:brightness(1.08)} button.primary-tab.chief-tab-button:focus-visible{outline:3px solid #b987ef;outline-offset:2px} .chief-choices{display:grid;gap:4px;margin:12px 0 0;padding:0;border:0} .chief-choices legend{padding:0;margin-bottom:6px;font-weight:650} .chief-choices>.chief-choice{display:flex;flex-direction:row;align-items:center;gap:10px;min-height:44px;padding:0 10px;border:1px solid var(--line,#e7e5ee);border-radius:12px;cursor:pointer} .chief-choice input{width:20px;height:20px;margin:0;accent-color:var(--purple,#6d28b5)} .chief-choice>span{font-weight:600} .chief-choice .meta{margin:0 0 0 auto;margin-inline-start:auto;text-align:end} .chief-choices+.form-error:empty{display:none} .chief-choice:has(input:checked){border-color:var(--purple,#6d28b5);background:var(--soft,#f2ecfa)} /* Typing, never Working, while an agent answers a message (the Founder, 16 October 2026, like WhatsApp): "typing…" in the state's place in a chat's header, in the line under the name on an agent row, and in a Feed row's preview line. */ .agent-typing-said{flex:none;color:var(--purple,#6d28b5);font-weight:600;white-space:nowrap} [data-theme=dark] .agent-typing-said{color:#b58cf0} .agent-head-role-line>.agent-typing-said{margin:0} .feed-row .feed-line.feed-typing{color:var(--feed-accent,var(--purple,#6d28b5));font-weight:600}