Yashas
da8ce9147f
"Priya Raghavan and Engage" reads as two colleagues. Every other entry in the trail already answers this — the agent's disc carries a sparkle, its name carries an AI tag, a person's disc carries their initials — and the exchange entry was the one place printing bare names, on the screen whose whole claim is that the work was done autonomously. So the participants are chips rather than a sentence, and so is the label on every message, in the preview and in the thread: Priya Raghavan wears her initials, Engage wears the sparkle and the AI tag, and ops replying by hand wears their initials too — a person answering in the thread must never be dressed as the machine. The agent chip opens its card, as it does everywhere else in the trail; the label inside the preview card stays a span, because the card is already a button. The disc's tint and the bubble's tint are the same token, so a chip dropped into a bubble lost its disc; it is white inside one. `.bub span` narrowed to direct children other than the attribution row, so the chip's own spans are not restyled and CallTranscript's plain labels still work. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
45 lines
2.3 KiB
CSS
45 lines
2.3 KiB
CSS
.who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
|
|
|
|
/* A soft disc in the worker's colour: blue for the AI at large, amber for KYC,
|
|
teal for the Advisor, grey initials for a person. */
|
|
.who__disc {
|
|
position: relative; display: grid; place-items: center; flex: none;
|
|
width: 22px; height: 22px; border-radius: 50%;
|
|
font-size: 11px; font-weight: 700; letter-spacing: .02em; user-select: none;
|
|
background: var(--zk-tint-blue); color: var(--zk-blue);
|
|
}
|
|
/* xs is the label on a chat bubble, where the disc sits beside 12.5px type. */
|
|
.who--xs { gap: 5px; }
|
|
.who--xs .who__disc { width: 16px; height: 16px; font-size: 8.5px; }
|
|
.who--xs .who__name { font-size: var(--fs-3xs); }
|
|
.who--xs .who__tag { font-size: 10px; padding: 0 4px; }
|
|
.who--md .who__disc { width: 36px; height: 36px; font-size: 13px; }
|
|
.who--lg .who__disc { width: 40px; height: 40px; font-size: 14px; }
|
|
|
|
.who__disc--blue, .who__disc--violet, .who__disc--plum { background: var(--zk-tint-blue); color: var(--zk-blue); }
|
|
.who__disc--teal { background: var(--zk-teal-tint); color: var(--zk-teal); }
|
|
.who__disc--amber { background: var(--zk-amber-tint); color: var(--zk-amber); }
|
|
.who__disc--grey { background: var(--zk-line-soft); color: var(--zk-muted); }
|
|
|
|
.who__glyph { width: 52%; height: 52%; }
|
|
.who__init { font-weight: 700; }
|
|
|
|
.who__name { font-size: var(--fs-sm); font-weight: 600; color: var(--zk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.who__tag {
|
|
font-size: 12px; font-weight: 700; letter-spacing: .04em;
|
|
color: var(--zk-blue); background: var(--zk-tint-blue);
|
|
padding: 1px 6px; border-radius: 4px;
|
|
}
|
|
|
|
.who--btn {
|
|
font: inherit; cursor: pointer; padding: 2px 8px 2px 2px;
|
|
border: 1px solid transparent; border-radius: var(--r-pill); background: transparent;
|
|
transition: background var(--t-fast), border-color var(--t-fast);
|
|
}
|
|
.who--btn:hover { background: var(--zk-tint); border-color: var(--zk-line); }
|
|
.who--btn:hover .who__i { opacity: 1; }
|
|
.who--btn:focus-visible { outline: none; box-shadow: var(--ring); }
|
|
.who__i { width: 12px; height: 12px; flex: none; color: var(--zk-grey); opacity: 0; transition: opacity .12s; }
|
|
|
|
.who__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|