, so the open state, keyboard toggle and screen
reader semantics come for free — same idiom as the Thinking block below.
Nesting the groups INSIDE .chats-list is what keeps the collapsed-rail hide
rule above and the read-only kebab rule at the end of this block working. */
.chat-group + .chat-group {
margin-top: 6px; /* +4px from the list's own gap */
}
.chat-group-header {
position: sticky;
top: 0;
/* .chat-history-item is positioned (it anchors the kebab) and comes after the
summary in DOM order, so without a stacking bump the rows scroll OVER the
pinned header instead of under it. */
z-index: 1;
background: var(--surface); /* matches .sidebar, so rows can't show through */
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
/* Deliberately square: while pinned, rounded corners would leave four
transparent notches for the row underneath to show through. */
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
user-select: none;
list-style: none;
}
.chat-group-header::-webkit-details-marker {
display: none;
}
.chat-group-header::before {
/* U+25B8, not U+25B6: the latter is in the Unicode emoji set, so where the
text font lacks it the fallback is a color emoji that ignores `color` and
`font-size`. Matches the caret on .tg-raw-popover-row.
The `/ ""` is alt text — without it the glyph is prepended to the group's
accessible name ("▶ Today"). The plain declaration first is the fallback
for browsers that don't parse the alt-text syntax and would otherwise drop
the whole rule, leaving no caret at all. */
content: "\25B8";
content: "\25B8" / "";
font-size: 10px;
color: var(--text-dim);
transition: transform 0.15s;
}
.chat-group[open] > .chat-group-header::before {
transform: rotate(90deg);
}
.chat-group-header:hover {
background: var(--surface-hover);
}
.chat-group-header:focus-visible {
outline: 2px solid var(--text);
}
/* Labels are short ("Wednesday", "Earlier this month") — this is a safety net
for a narrowed sidebar rather than an everyday case. */
.chat-group-label {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-group-items {
display: flex;
flex-direction: column;
gap: 4px;
}
.chat-history-item {
position: relative; /* anchor for the absolute kebab */
display: flex;
align-items: center;
font-size: 13px;
color: var(--text-muted);
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.chat-history-item-title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
/* Fade the last ~28px to transparent instead of a hard "..." cut. */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.chat-history-item:hover {
background: var(--surface-hover);
}
/* Active row: subtle gradient highlight, distinct from the flat hover. */
.chat-history-item.active {
background: linear-gradient(90deg, var(--accent-soft) 0%, var(--surface-hover) 65%);
color: var(--text);
font-weight: 500;
}
/* Hover-revealed 3-dots kebab. */
.chat-history-item-menu {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 6px;
background: var(--surface-hover); /* small chip so it reads over faded text */
color: var(--text-muted);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, background 0.12s;
}
.chat-history-item:hover .chat-history-item-menu,
.chat-history-item.menu-open .chat-history-item-menu,
.chat-history-item-menu:focus-visible {
opacity: 1;
}
.chat-history-item-menu:hover {
background: var(--border);
color: var(--text);
}
/* Hide the kebab entirely in a read-only "View as user" session. */
.chats-list.readonly .chat-history-item-menu {
display: none;
}
/* ── User profile ── */
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
border-top: 1px solid var(--border);
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.sidebar.collapsed .sidebar-user {
justify-content: center;
gap: 0;
padding: 12px 8px;
}
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-menu-chevron {
display: none;
}
.sidebar-user:hover,
.sidebar-user[aria-expanded="true"] {
background: var(--surface-hover);
}
.sidebar-user:focus-visible {
outline: 2px solid var(--text);
outline-offset: -2px;
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
/* Initials are always white on a vivid avatar color (set inline by JS), in
both themes — intentionally not a theme token. */
color: #fff;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
user-select: none;
}
.user-name {
font-size: 14px;
color: var(--text-secondary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu-chevron {
color: var(--text-dim);
transition: transform 0.15s;
flex-shrink: 0;
}
.sidebar-user[aria-expanded="true"] .user-menu-chevron {
transform: rotate(180deg);
}
/* ── User account popover menu ── */
.user-menu {
position: fixed;
z-index: 1000;
background: var(--surface);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 6px;
width: 224px;
box-sizing: border-box;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 10px 24px rgba(0, 0, 0, 0.18),
0 24px 56px rgba(0, 0, 0, 0.10);
transform-origin: bottom left;
animation: user-menu-pop 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes user-menu-pop {
from {
opacity: 0;
transform: translateY(6px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.user-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
border: none;
background: none;
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
border-radius: 6px;
color: var(--text-secondary);
}
.user-menu-item:hover {
background: var(--surface-hover);
}
.user-menu-item svg {
color: var(--text-muted);
flex-shrink: 0;
}
/* Release footer — informational, not a menuitem. Selectable so an operator
can copy the build string into a bug report. */
.user-menu-version {
padding: 8px 12px 4px;
margin-top: 4px;
border-top: 1px solid var(--border);
font-size: 11px;
line-height: 1.4;
color: var(--text-muted);
user-select: text;
overflow-wrap: anywhere;
}
/* ── Recents flyout (collapsed rail) ── */
.recents-flyout {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
width: 260px;
max-height: min(70vh, 460px);
box-sizing: border-box;
padding: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 10px 24px rgba(0, 0, 0, 0.18),
0 24px 56px rgba(0, 0, 0, 0.1);
transform-origin: top left;
animation: user-menu-pop 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.recents-flyout-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
padding: 4px 8px 8px;
}
/* Also carries .chats-list (flex column + gap + the read-only kebab-hide rule);
min-height:0 lets this flex child scroll within the panel's max-height. */
.recents-flyout-list {
overflow-y: auto;
min-height: 0;
}
.recents-flyout-empty {
font-size: 13px;
color: var(--text-muted);
padding: 6px 8px 8px;
}
.recents-flyout [role="menuitem"]:focus-visible {
outline: 2px solid var(--text);
outline-offset: -2px;
}
/* ── Main area ── */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.top-bar {
display: none;
}
.upgrade-btn {
background: #f97066;
color: var(--btn-fg);
border: none;
padding: 8px 24px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: opacity 0.15s;
}
.upgrade-btn:hover {
opacity: 0.9;
}
/* ── Content area (welcome + chat + input) ── */
.content-area {
flex: 1;
display: flex;
flex-direction: column;
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 0 24px 24px;
min-height: 0;
position: relative;
}
/* ── Welcome screen ── */
.welcome {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.welcome-line {
font-size: 20px;
color: var(--text-dim);
font-weight: 300;
letter-spacing: 0.01em;
}
.welcome.hidden {
display: none;
}
/* ── Chat messages ── */
.chat-messages {
flex: 1;
overflow-y: auto;
scrollbar-width: none;
display: none;
flex-direction: column;
gap: 12px;
padding: 20px 0;
}
.chat-messages::-webkit-scrollbar {
display: none;
}
.chat-messages.active {
display: flex;
}
.message {
max-width: 80%;
padding: 12px 16px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
}
.message.user {
align-self: flex-end;
background: var(--msg-user-bg);
color: var(--msg-user-fg);
border-bottom-right-radius: 4px;
}
.message.system {
align-self: stretch;
max-width: 100%;
background: none;
color: var(--msg-assistant-fg);
box-shadow: none;
border-radius: 0;
padding: 4px 0;
}
.message .meta {
display: block;
font-size: 11px;
margin-top: 6px;
opacity: 0.6;
}
.message.system .status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
background: var(--ok-soft-bg);
color: var(--ok);
margin-top: 6px;
}
.message.error {
align-self: flex-start;
background: var(--danger-soft-bg);
color: var(--danger);
border-bottom-left-radius: 4px;
}
.message.muted {
align-self: flex-start;
background: transparent;
color: var(--text-muted);
font-style: italic;
font-size: 13px;
padding: 6px 16px;
box-shadow: none;
}
/* ── Rendered markdown inside messages ── */
.message.system h1,
.message.system h2,
.message.system h3,
.message.system h4,
.message.system h5,
.message.system h6 {
margin: 12px 0 4px;
line-height: 1.3;
font-weight: 600;
}
.message.system h1 { font-size: 18px; }
.message.system h2 { font-size: 16px; }
.message.system h3 { font-size: 15px; }
.message.system h4 { font-size: 14px; }
.message.system h5 { font-size: 13px; }
.message.system h6 { font-size: 13px; color: var(--text-muted); }
.message.system p {
margin: 4px 0;
}
.message.system ol,
.message.system ul {
margin: 6px 0 6px 20px;
padding: 0;
}
.message.system li {
margin: 3px 0;
}
.message.system li > ul,
.message.system li > ol {
margin: 2px 0 2px 16px;
}
.message.system strong {
font-weight: 600;
}
.message.system em {
font-style: italic;
color: var(--text-muted);
}
.message.system del {
text-decoration: line-through;
opacity: 0.6;
}
.message.system a {
color: var(--link);
text-decoration: none;
}
.message.system a:hover {
text-decoration: underline;
}
.message.system code {
font-family: "SF Mono", "Fira Code", "Consolas", monospace;
font-size: 0.88em;
background: var(--surface-2);
padding: 2px 5px;
border-radius: 4px;
}
/* Chat fenced blocks: SHORT unnamed fences render inline in a .code-inline
panel (below); long or filename'd fences render as the .code-card chip.
These pre rules are the shared theme-aware face for the inline panel and any
stray . */
.message.system pre {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
margin: 8px 0;
overflow-x: auto;
font-size: 13px;
line-height: 1.5;
}
.message.system pre code {
background: none;
padding: 0;
border-radius: 0;
color: inherit;
font-size: inherit;
}
/* Short fenced snippets (under the limits in markdown.js) render inline in
this wrapper. The Copy affordance reveals on hover / keyboard focus and
overlays the top-right corner of the block. */
.code-inline {
position: relative;
margin: 8px 0;
}
.code-inline pre { margin: 0; } /* the wrapper owns the outer margin */
.code-inline-copy {
position: absolute;
top: 6px;
right: 6px;
padding: 3px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text-muted);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease;
}
.code-inline:hover .code-inline-copy,
.code-inline:focus-within .code-inline-copy,
.code-inline-copy:focus-visible { opacity: 1; }
.code-inline-copy:hover { background: var(--surface-hover); color: var(--text); }
.code-inline-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-inline-copy.copied { color: var(--ok); opacity: 1; }
/* Touch / no-hover devices can't reveal on hover — keep the button visible. */
@media (hover: none), (pointer: coarse) {
.code-inline-copy { opacity: 1; }
}
/* The code card carries its raw source in a hidden read via textContent;
belt-and-suspenders over the [hidden] attribute so no author rule can reveal it. */
.code-card-src { display: none; }
/* Compact chip a fenced code / file-contents block renders as: it opens the
file-viewer drawer instead of dumping the whole block into the chat. */
.code-card {
display: flex;
align-items: stretch;
max-width: 100%;
margin: 8px 0;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
overflow: hidden;
}
.code-card-open {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
padding: 10px 12px;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
color: var(--text);
font: inherit;
}
.code-card-open:hover { background: var(--surface-hover); }
.code-card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.code-card-icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.code-card-info { display: flex; flex-direction: column; min-width: 0; }
.code-card-name {
font-family: "SF Mono", Menlo, monospace;
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.code-card-sub { font-size: 11.5px; color: var(--text-muted); }
.code-card-cta {
flex: 0 0 auto;
margin-left: auto;
padding-left: 8px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
.code-card-copy {
flex: 0 0 auto;
border: none;
border-left: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
padding: 0 12px;
}
.code-card-copy:hover { background: var(--surface-hover); color: var(--text); }
.code-card-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.code-card-copy.copied { color: var(--ok); }
/* Streaming placeholder (fence still arriving). */
.code-card-loading {
align-items: center;
gap: 8px;
padding: 10px 12px;
color: var(--text-muted);
font-size: 12.5px;
}
.code-card-spinner {
flex: 0 0 auto;
width: 12px;
height: 12px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: code-card-spin 0.7s linear infinite;
}
@keyframes code-card-spin { to { transform: rotate(360deg); } }
.message.system blockquote {
border-left: 3px solid var(--border);
margin: 8px 0;
padding: 4px 12px;
color: var(--text-muted);
}
.message.system blockquote p {
margin: 2px 0;
}
.message.system hr {
border: none;
border-top: 1px solid var(--border);
margin: 12px 0;
}
.message.system table {
border-collapse: collapse;
margin: 0;
font-size: 13px;
width: 100%;
}
.message.system th,
.message.system td {
border: 1px solid var(--border);
padding: 6px 10px;
text-align: left;
}
.message.system th {
background: var(--surface-2);
font-weight: 600;
}
.message.system img {
max-width: 100%;
border-radius: 8px;
margin: 4px 0;
}
.table-scroll {
overflow-x: auto;
max-width: 100%;
margin: 8px 0;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.table-scroll::-webkit-scrollbar {
height: 8px;
}
.table-scroll::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
/* ── Summary card ── */
.summary-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 14px;
margin-top: 10px;
}
.summary-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.summary-card li {
padding: 3px 0;
font-size: 13px;
color: var(--text-secondary);
}
.summary-card li::before {
content: "\2022";
color: var(--text-dim);
font-weight: bold;
margin-right: 8px;
}
/* ── Reply options footer ── */
.reply-options {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: 12px;
}
.reply-label {
font-weight: 600;
color: var(--text-muted);
}
.reply-hint {
color: var(--text-muted);
}
.reply-sep {
color: var(--text-dim);
}
/* ── Response body ── */
.response-body {
line-height: 1.6;
}
.message.status {
align-self: flex-start;
background: var(--surface);
color: var(--text-muted);
font-size: 13px;
border-bottom-left-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
gap: 8px;
}
.dot-pulse {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-dim);
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* ── In-flight step trail ──
Replaces the single status bubble during a turn: finished steps stay as
dimmed ✓ rows, the live one pulses. Removed at MESSAGE_COMPLETE, where the
receipt-backed .tool-outcome-chip set becomes the verified record. */
.step-trail {
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
max-width: 80%;
padding: 2px 0 6px;
}
.step-trail-row {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.step-icon {
flex: none;
width: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.step-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The live row is the only one that reads as ongoing: full-strength text plus
the trailing ellipsis. Completed rows keep the present-participle verb but
lose the "…", so "✓ Reading monitor.md" never implies a verified outcome. */
.step-trail-row.current .step-label::after {
content: "…";
}
.step-trail-row.current {
color: var(--text-secondary);
}
.step-trail-row.done {
opacity: 0.65;
}
.step-trail-row.done .step-icon {
color: var(--ok);
}
.step-trail-row.failed .step-icon {
color: var(--danger);
}
.step-trail-row.failed .step-label {
color: var(--danger);
}
.step-elapsed {
flex: none;
margin-left: auto;
padding-left: 8px;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--text-dim);
}
/* In-place progress detail on the live row ("~12 KB drafted"). Sits between
the label and the elapsed counter; empty on most rows. */
.step-detail {
flex: none;
padding-left: 8px;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--text-dim);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.step-trail-row .dot-pulse {
animation: none;
opacity: 0.75;
}
}
/* ── Scroll-to-bottom button ── */
/* On-demand "view trace" button — fixed at the app's top-right corner.
z-index sits below the trace drawer (210) so the open drawer covers it. */
.trace-open-btn {
position: fixed;
top: 12px;
right: 16px;
z-index: 60;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-muted);
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.trace-open-btn:hover {
background: var(--surface-hover);
color: var(--text-secondary);
border-color: var(--border);
}
.trace-open-btn.hidden {
display: none;
}
/* Drop below the read-only "View as user" banner (PR#15, fixed top:0 height:36px)
when it's active — the app-container gets margin-top:36px, but this fixed
button needs its own offset or the banner (z-index 1500) covers it. */
body.masquerading .trace-open-btn {
top: 48px;
}
.scroll-bottom-btn {
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%) scale(0.8);
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 10;
}
.scroll-bottom-btn.visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) scale(1);
}
.scroll-bottom-btn:hover {
background: var(--surface-hover);
color: var(--text-secondary);
border-color: var(--border);
}
/* ── Input area ── */
.input-area {
flex-shrink: 0;
}
.input-bar {
display: flex;
align-items: flex-end;
gap: 12px;
background: var(--input-bg);
border-radius: 28px;
padding: 6px 8px 6px 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* The bar is align-items: flex-end, so every child's BOTTOM edge is the shared
datum. Left bare, this span is only as tall as its ~23px line box and the "+"
lands ~10px below the text; matching .send-btn's 36px height puts both
controls on the same line. */
.plus-icon {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
font-size: 20px;
line-height: 1;
color: var(--text-dim);
cursor: pointer;
user-select: none;
flex-shrink: 0;
}
.input-bar textarea {
flex: 1;
border: none;
outline: none;
font-family: inherit; /* textareas do NOT inherit the page font by default */
font-size: 15px;
line-height: 1.5;
background: transparent;
color: var(--input-fg);
padding: 10px 0;
resize: none;
overflow-y: hidden; /* JS flips to auto once content exceeds max-height */
max-height: 200px; /* ~8 lines, then internal scroll (single source of the cap) */
display: block;
}
.input-bar textarea::placeholder {
color: var(--placeholder);
}
.send-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s, background 0.15s;
}
.send-btn:hover {
background: var(--surface-hover);
color: var(--text-secondary);
}
/* ── Suggestion chips ── */
.suggestions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 16px 0 4px;
}
.suggestions.hidden {
display: none;
}
.chip {
padding: 10px 18px;
border: 1px solid var(--border);
border-radius: 20px;
background: var(--surface);
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.chip:hover {
border-color: var(--border);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.suggested-responses {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0 4px;
}
/* Deterministic per-turn tool outcome chips (status, non-interactive). */
.tool-outcomes {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 2px 0 6px;
}
.tool-outcome-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
font-size: 12px;
color: var(--text-secondary);
cursor: default;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tool-outcome-chip.fail {
color: #b3261e;
border-color: rgba(179, 38, 30, 0.35);
background: rgba(179, 38, 30, 0.06);
}
/* Provenance stamp for a turn the engine recorded as running no tool. It is a
FACT, not a fault — deliberately quieter than .fail (no red, dashed border)
so it reads as a record rather than an accusation, while still making the
negative case visible. Absence of chips used to be ambiguous between "no
tools ran" and "this surface doesn't report tools", which is the context a
fabricated file body relied on. */
.tool-outcome-chip.none {
border-style: dashed;
color: var(--text-tertiary, var(--text-secondary));
opacity: 0.85;
}
/* Server-signed durable effect decision controls. Tokens remain in JS
closures; only the non-sensitive operation id is attached to the DOM. */
.effect-decision-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.effect-decision-label {
flex: 1 1 220px;
min-width: 0;
color: var(--text-secondary);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.effect-decision-button {
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 12px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.effect-decision-button.approve {
color: var(--ok);
border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
}
.effect-decision-button.reject,
.effect-decision-error {
color: var(--danger);
}
.effect-decision-button:disabled {
cursor: wait;
opacity: 0.55;
}
.effect-decision-error {
flex: 1 0 100%;
font-size: 12px;
}
/* Legacy (pre-receipt-era) history presentation: soft "historical" badge on
benign rows, explicit reveal affordance + tinted bubble for withheld ones. */
.tool-outcome-chip.warn {
color: var(--warn-soft-fg);
border-color: var(--warn-soft-border);
background: var(--warn-soft-bg);
}
.legacy-reveal-btn {
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px 10px;
background: var(--surface);
color: var(--text-secondary);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.legacy-reveal-btn:disabled {
cursor: wait;
opacity: 0.55;
}
.legacy-reveal-btn.failed {
color: var(--danger);
}
.message.system.legacy-revealed {
background: var(--warn-soft-bg);
border: 1px solid var(--warn-soft-border);
}
/* ── Responsive ── */
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
/* ── Settings dialog ── */
.settings-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.settings-dialog {
background: var(--surface);
border-radius: 14px;
padding: 28px 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
min-width: 340px;
max-width: 420px;
width: 100%;
}
.settings-title {
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 20px;
}
.settings-field {
margin-bottom: 16px;
}
.settings-field.hidden {
display: none;
}
.settings-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
}
.settings-field select,
.settings-field input,
.settings-field textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 14px;
outline: none;
background: var(--input-bg);
color: var(--input-fg);
transition: border-color 0.15s;
}
.settings-field select:focus,
.settings-field input:focus,
.settings-field textarea:focus {
border-color: var(--text);
}
.settings-extra-body {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.45;
resize: vertical;
min-height: 64px;
}
.settings-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 24px;
}
.settings-btn-cancel,
.settings-btn-save {
padding: 8px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: 1px solid var(--border);
transition: background 0.15s, border-color 0.15s;
}
.settings-btn-cancel {
background: var(--surface);
color: var(--text-secondary);
}
.settings-btn-cancel:hover {
background: var(--surface-hover);
}
.settings-btn-save {
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-bg);
}
.settings-btn-save:hover {
opacity: 0.9;
}
.settings-separator {
border-top: 1px solid var(--border);
margin: 20px 0 16px;
}
.settings-section-title {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 12px;
}
.settings-error-line {
color: var(--danger-2);
font-size: 12px;
margin: 8px 0 0;
min-height: 14px;
}
/* Tabbed settings dialog: left sidebar of domain tabs + right content pane. */
.settings-dialog.settings-tabbed {
max-width: 820px;
width: 92vw;
padding: 0;
display: flex;
flex-direction: column;
max-height: 85vh;
}
.settings-dialog.settings-tabbed .settings-title {
padding: 22px 28px 16px;
margin: 0;
border-bottom: 1px solid var(--border);
}
.settings-split {
display: flex;
flex: 1;
min-height: 420px;
overflow: hidden;
}
.settings-tabs {
flex: 0 0 180px;
border-right: 1px solid var(--border);
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
background: var(--surface-2);
}
.settings-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: none;
background: transparent;
border-radius: 8px;
font-size: 14px;
color: var(--text-secondary);
text-align: left;
cursor: pointer;
font-family: inherit;
}
.settings-tab:hover {
background: var(--surface-hover);
}
.settings-tab.active {
background: var(--btn-bg);
color: var(--btn-fg);
font-weight: 600;
}
.settings-tab-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-tab-dirty {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--link);
flex-shrink: 0;
}
.settings-tab.active .settings-tab-dirty {
background: var(--btn-fg);
}
.settings-tab-dirty.hidden {
display: none;
}
.settings-panels {
flex: 1;
overflow-y: auto;
padding: 20px 28px;
min-width: 0;
}
.settings-panel.hidden {
display: none;
}
.settings-panel-loading,
.settings-panel-error {
color: var(--text-muted);
font-size: 13px;
padding: 12px 0;
}
.settings-panel-error {
color: var(--danger-2);
margin-bottom: 10px;
}
/* Strip the first separator inside each panel body so the panel doesn't open
with a visible rule-line above the first agent section. */
.settings-panel-body > .settings-separator:first-child {
border-top: none;
margin-top: 0;
}
.settings-dialog.settings-tabbed .settings-error-line {
padding: 0 28px;
margin: 0;
}
.settings-dialog.settings-tabbed .settings-actions {
padding: 12px 28px 20px;
margin: 0;
border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
.settings-dialog.settings-tabbed {
max-height: 92vh;
}
.settings-split {
flex-direction: column;
min-height: 0;
}
.settings-tabs {
flex: 0 0 auto;
flex-direction: row;
border-right: none;
border-bottom: 1px solid var(--border);
overflow-x: auto;
overflow-y: hidden;
padding: 8px;
}
.settings-tab {
flex: 0 0 auto;
}
}
/* Base URLs tab — preset/user URL list and add form */
.settings-tabs-divider {
height: 1px;
background: var(--border);
margin: 6px 0;
}
.base-url-row {
display: flex;
gap: 8px;
align-items: center;
padding: 6px 0;
font-size: 13px;
}
.base-url-row .url {
color: var(--text-muted);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.base-url-row button.remove {
padding: 4px 10px;
font-size: 12px;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
}
.base-url-row button.remove:hover {
background: var(--surface-hover);
}
.base-url-add-form {
display: flex;
gap: 6px;
margin-top: 10px;
align-items: center;
/* Label + URL + optional API key + button — allow wrapping on narrow dialogs. */
flex-wrap: wrap;
}
.base-url-add-form input {
flex: 1;
min-width: 140px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
}
/* Per-row API-key controls (badge + Set/Replace/Clear) */
.base-url-row .viewas-uid {
flex: 0 0 auto;
}
.base-url-row .base-url-key-btn {
flex: 0 0 auto;
padding: 4px 10px;
font-size: 12px;
}
.base-url-key-modal-text {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
margin: 4px 0 10px;
}
.base-url-empty {
color: var(--text-muted);
font-size: 12px;
padding: 6px 0;
}
.base-url-notice {
background: var(--warn-soft-bg);
border: 1px solid var(--warn-soft-border);
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
color: var(--warn-soft-fg);
margin-bottom: 14px;
line-height: 1.5;
}
.base-url-error {
color: var(--danger-2);
font-size: 12px;
margin-top: 6px;
}
.model-load-notice.info {
color: var(--text-dim);
}
.model-limits-hint {
color: var(--text-muted);
font-size: 12px;
margin-top: 6px;
line-height: 1.5;
}
.base-url-key-warning {
color: var(--warn-soft-fg);
font-size: 12px;
}
option.base-url-custom {
font-style: italic;
color: var(--text-dim);
}
.automations-error,
.schedule-runs-error {
color: var(--danger-2);
font-size: 13px;
}
.schedule-runs-loading {
color: var(--text-dim);
}
.schedule-run-time {
color: var(--text-muted);
}
.schedule-run-dur {
color: var(--text-dim);
}
/* ── Thinking block ── */
.thinking-block {
align-self: stretch;
max-width: 100%;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-2);
font-size: 13px;
color: var(--text-muted);
}
.thinking-summary {
padding: 8px 14px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
list-style: none;
}
.thinking-summary::-webkit-details-marker {
display: none;
}
.thinking-summary::before {
content: "\25B6";
font-size: 9px;
color: var(--text-dim);
transition: transform 0.15s;
}
.thinking-block[open] > .thinking-summary::before {
transform: rotate(90deg);
}
.thinking-label {
font-weight: 500;
color: var(--text-muted);
}
.thinking-body {
padding: 0 14px 10px;
line-height: 1.5;
border-top: 1px solid var(--border);
}
.thinking-body p {
margin: 4px 0;
}
/* Streaming cursor */
.message.streaming::after {
content: "\25AE";
animation: blink 0.7s step-end infinite;
margin-left: 1px;
color: var(--link);
}
@keyframes blink {
50% { opacity: 0; }
}
/* Write-claim hold: the reply is paused in place while the engine validates a
receipt-shaped claim. Higher specificity (3 classes) overrides the blinking
caret above (2), so we never imply "more text imminent" while the stream is
actually held. The partial text stays; this reads as a deliberate pause. */
.message.streaming.verifying::after {
content: "checking claimed changes\2026"; /* checking claimed changes… */
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
border-radius: 10px;
background: var(--surface);
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
vertical-align: baseline;
animation: verify-pulse 1.4s ease-in-out infinite;
}
@keyframes verify-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ── Automations view ── */
.automations-view {
display: none;
flex: 1;
flex-direction: column;
max-width: 960px;
width: 100%;
margin: 0 auto;
padding: 32px 24px 24px;
min-height: 0;
overflow-y: auto;
}
.automations-view.active {
display: flex;
}
.content-area.hidden {
display: none;
}
.automations-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.automations-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 4px;
color: var(--text);
}
.automations-subtitle {
margin: 0;
font-size: 13px;
color: var(--text-muted);
}
.automations-new-btn {
background: var(--btn-bg);
color: var(--btn-fg);
border: none;
padding: 9px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s;
}
.automations-new-btn:hover {
opacity: 0.85;
}
.automations-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.automations-empty {
font-size: 14px;
color: var(--text-dim);
margin-top: 12px;
display: none;
}
.automations-empty.visible {
display: block;
}
.schedule-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.schedule-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.schedule-workflow {
font-size: 14px;
font-weight: 600;
color: var(--text);
word-break: break-all;
}
.schedule-desc {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.schedule-status {
font-size: 11px;
padding: 3px 8px;
border-radius: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.schedule-status.enabled {
background: var(--ok-soft-bg);
color: var(--ok);
}
.schedule-status.disabled {
background: var(--surface-2);
color: var(--text-muted);
}
.schedule-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: var(--text-muted);
}
.schedule-meta strong {
color: var(--text-secondary);
font-weight: 500;
}
.schedule-meta code {
background: var(--surface-2);
padding: 1px 6px;
border-radius: 4px;
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
}
.schedule-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
flex-wrap: wrap;
}
.schedule-actions button {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
padding: 5px 10px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.schedule-actions button:hover {
background: var(--surface-hover);
color: var(--text);
}
.schedule-actions button.danger {
color: var(--danger-2);
border-color: var(--danger-soft-border);
}
.schedule-actions button.danger:hover {
background: var(--danger-soft-bg);
}
.schedule-actions button.primary {
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-bg);
}
.schedule-actions button.primary:hover {
background: var(--btn-bg-hover);
}
.schedule-runs {
display: none;
flex-direction: column;
gap: 4px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid var(--border-soft);
font-size: 12px;
color: var(--text-muted);
}
.schedule-runs.visible {
display: flex;
}
.schedule-run {
display: flex;
flex-direction: column;
gap: 4px;
}
.schedule-run-head {
display: flex;
gap: 10px;
align-items: center;
min-width: 0;
}
.schedule-run-status {
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.schedule-run-status.completed { color: var(--ok); }
.schedule-run-status.failed { color: var(--danger-2); }
.schedule-run-status.running { color: var(--link); }
.schedule-run-status.skipped { color: var(--text-dim); }
.schedule-run-summary {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-muted);
}
.schedule-run.expanded .schedule-run-summary {
display: none;
}
.schedule-run-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 22px;
height: 22px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.schedule-run-toggle:hover {
background: var(--surface-hover);
color: var(--text);
}
.schedule-run-full {
display: none;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
font-family: "SF Mono", Menlo, monospace;
font-size: 11.5px;
color: var(--text-secondary);
white-space: pre-wrap;
word-break: break-word;
max-height: 260px;
overflow-y: auto;
margin-left: 90px;
}
.schedule-run.expanded .schedule-run-full {
display: block;
}
.nav-item.active {
background: var(--surface-hover);
color: var(--text);
}
/* ── Agent trace drawer ── */
.automations-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin: 4px 0 16px;
}
.automations-tab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
margin-bottom: -1px;
}
.automations-tab:hover { color: var(--text); }
.automations-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.automations-tab-panel { display: none; }
.automations-tab-panel.active { display: block; }
.schedule-run-trace {
background: var(--accent-soft);
border: 1px solid var(--accent-soft-border);
color: var(--accent);
padding: 2px 8px;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
}
.schedule-run-trace:hover { background: var(--accent-soft); }
.trace-drawer {
position: fixed;
top: 0;
right: 0;
width: 560px;
max-width: 92vw;
height: 100vh;
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.06);
transform: translateX(100%);
transition: transform 180ms ease-out, width 180ms ease-out;
display: flex;
flex-direction: column;
z-index: 210;
resize: horizontal;
overflow: auto;
min-width: 360px;
}
.trace-drawer.open {
transform: translateX(0);
}
.trace-drawer.expanded {
width: 92vw;
}
.trace-drawer-actions {
display: flex;
gap: 4px;
align-items: center;
}
.trace-drawer-expand {
background: transparent;
border: none;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
}
.trace-drawer-expand:hover { background: var(--surface-hover); color: var(--text); }
.trace-drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.trace-drawer-title { font-size: 15px; font-weight: 600; color: var(--text); }
.trace-drawer-sub { font-size: 11.5px; color: var(--text-muted); font-family: "SF Mono", Menlo, monospace; margin-top: 2px; }
.trace-drawer-close {
background: transparent;
border: none;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0 4px;
}
.trace-drawer-body {
flex: 1;
overflow-y: auto;
padding: 10px 14px 20px;
font-size: 13px;
}
.trace-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.trace-error { color: var(--danger-2); font-size: 13px; padding: 10px 0; }
.trace-tree {
list-style: none;
margin: 0;
padding: 0;
}
/* Flat indent: each level adds 14px via --depth, cumulative nesting no longer
eats horizontal space with paddings + borders at every level. */
.trace-span {
margin: 2px 0;
--indent: calc(var(--depth, 0) * 14px);
}
.trace-span-head {
display: flex;
gap: 8px;
align-items: center;
padding: 4px 6px 4px calc(var(--indent) + 6px);
border-radius: 5px;
cursor: pointer;
position: relative;
white-space: nowrap;
min-width: 0;
}
.trace-span-head:hover { background: var(--surface-hover); }
/* Single vertical guide rail showing parent depth — drawn only once per level,
not stacked with cumulative padding like the old border-left approach. */
.trace-span[style*="--depth:1"] .trace-span-head::before,
.trace-span[style*="--depth:2"] .trace-span-head::before,
.trace-span[style*="--depth:3"] .trace-span-head::before,
.trace-span[style*="--depth:4"] .trace-span-head::before,
.trace-span[style*="--depth:5"] .trace-span-head::before,
.trace-span[style*="--depth:6"] .trace-span-head::before,
.trace-span[style*="--depth:7"] .trace-span-head::before,
.trace-span[style*="--depth:8"] .trace-span-head::before,
.trace-span[style*="--depth:9"] .trace-span-head::before {
content: "";
position: absolute;
left: calc(var(--indent) - 7px);
top: 0;
bottom: 0;
width: 1px;
background: var(--border);
pointer-events: none;
}
/* Bodies inherit the same indent as the head's content column so attrs/events
line up visually with their owning span rather than indenting a second time. */
.trace-span-body {
display: none;
padding: 4px 0 4px calc(var(--indent) + 22px);
}
.trace-span-caret {
color: var(--text-dim);
font-size: 10px;
width: 10px;
flex-shrink: 0;
}
.trace-span-name {
font-family: "SF Mono", Menlo, monospace;
font-size: 12px;
color: var(--text-secondary);
flex-shrink: 0;
}
.trace-span-attrs {
color: var(--text-muted);
font-size: 11.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.trace-dur {
color: var(--text-muted);
font-size: 11px;
font-family: "SF Mono", Menlo, monospace;
background: var(--surface-2);
padding: 1px 6px;
border-radius: 3px;
flex-shrink: 0;
}
.trace-span-status {
font-size: 10px;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
flex-shrink: 0;
}
.trace-status-running { background: #fef3c7; color: #92400e; }
.trace-status-ok { background: #dcfce7; color: #166534; }
.trace-status-error { background: #fee2e2; color: #991b1b; }
.trace-status-interrupted { background: #e5e7eb; color: #374151; }
.trace-span.open > .trace-span-body { display: block; }
.trace-attrs-table {
width: 100%;
border-collapse: collapse;
font-size: 11.5px;
margin-bottom: 6px;
}
.trace-attrs-table th {
text-align: left;
color: var(--text-muted);
font-weight: 500;
padding: 2px 8px 2px 0;
white-space: nowrap;
vertical-align: top;
font-family: "SF Mono", Menlo, monospace;
}
.trace-attrs-table td {
padding: 2px 0;
word-break: break-word;
}
.trace-attrs-table code {
font-family: "SF Mono", Menlo, monospace;
color: var(--text-secondary);
background: var(--surface-2);
padding: 0 4px;
border-radius: 3px;
display: inline-block;
max-width: 100%;
word-break: break-all;
white-space: pre-wrap;
}
.trace-events {
margin: 4px 0 6px;
border-left: 2px solid var(--border);
padding-left: 10px;
}
.trace-event {
display: flex;
gap: 8px;
align-items: baseline;
font-size: 11.5px;
color: var(--text-muted);
padding: 1px 0;
}
.trace-event-time { color: var(--text-dim); font-family: "SF Mono", Menlo, monospace; font-size: 10.5px; flex-shrink: 0; }
.trace-event-name { color: var(--accent); font-family: "SF Mono", Menlo, monospace; flex-shrink: 0; }
.trace-event code { color: var(--text-secondary); font-size: 11px; word-break: break-all; }
.trace-live-list { list-style: none; margin: 0; padding: 0; }
.trace-live-row {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 6px;
cursor: pointer;
}
.trace-live-row:hover { background: var(--surface-hover); }
.trace-live-head { display: flex; gap: 8px; align-items: center; }
.trace-live-name { font-family: "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text-secondary); }
.trace-live-started { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.trace-live-meta { color: var(--text-dim); font-size: 11px; margin-top: 2px; font-family: "SF Mono", Menlo, monospace; }
/* ── File preview drawer (mirrors .trace-drawer pattern) ── */
.preview-drawer {
position: fixed;
top: 0;
right: 0;
width: 560px;
max-width: 92vw;
height: 100vh;
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.06);
transform: translateX(100%);
transition: transform 180ms ease-out, width 180ms ease-out;
display: flex;
flex-direction: column;
z-index: 200;
resize: horizontal;
overflow: auto;
min-width: 360px;
}
.preview-drawer.open {
transform: translateX(0);
}
.preview-drawer.expanded {
width: 92vw;
}
.preview-drawer-actions {
display: flex;
gap: 4px;
align-items: center;
/* Pin the actions (Approve & commit / expand / close) so a long, unbreakable
preview id in the subtitle can't push them off-screen past the drawer edge. */
flex-shrink: 0;
}
/* The title/subtitle column must be allowed to shrink below its content width
(default min-width:auto would keep the ~90-char preview id at full width and
overflow the header). Paired with the truncation on .preview-drawer-sub. */
.preview-drawer-heading {
flex: 1;
min-width: 0;
}
.preview-drawer-expand {
background: transparent;
border: none;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
}
.preview-drawer-expand:hover { background: var(--surface-hover); color: var(--text); }
.preview-drawer-source {
background: transparent;
border: 1px solid var(--border);
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
}
.preview-drawer-source:hover { background: var(--surface-hover); color: var(--text); }
.preview-drawer-source:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Re-prepare: secondary action offered on retryable-terminal ops (M4). */
.preview-drawer-reprepare {
background: transparent;
border: 1px solid var(--accent-soft-border, var(--border));
font-size: 12px;
color: var(--accent, var(--text));
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
}
.preview-drawer-reprepare:hover { background: var(--surface-hover); }
.preview-drawer-reprepare:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The drawer slides; honor reduced-motion (nothing else in this file animates
a transform the user can't opt out of). */
@media (prefers-reduced-motion: reduce) {
.preview-drawer { transition: none; }
.code-card-spinner { animation: none; }
.code-inline-copy { transition: none; }
}
.preview-drawer-commit {
background: var(--accent);
border: none;
color: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
}
.preview-drawer-commit:hover:not(:disabled) { filter: brightness(1.12); }
.preview-drawer-commit:focus-visible { outline: 2px solid var(--accent-soft-border); outline-offset: 1px; }
.preview-drawer-commit:disabled { opacity: 0.6; cursor: default; }
.preview-drawer-commit.arming { background: var(--danger-2); }
.preview-drawer-commit.committed { background: var(--ok); opacity: 1; }
.preview-drawer-commit.historical { background: var(--surface-hover); color: var(--text); opacity: 1; }
.preview-drawer-commit.failed { background: var(--danger); opacity: 1; }
.preview-drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.preview-drawer-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
font-family: "SF Mono", Menlo, monospace;
word-break: break-all;
}
.preview-drawer-sub {
font-size: 11.5px;
color: var(--text-muted);
font-family: "SF Mono", Menlo, monospace;
margin-top: 2px;
/* The preview id is a long unbreakable token; truncate it instead of letting
it blow out the header width. Full value stays available via its title. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-drawer-close {
background: transparent;
border: none;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0 4px;
}
.preview-drawer-body {
flex: 1;
overflow: auto;
padding: 10px 14px 20px;
font-size: 13px;
}
.preview-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.preview-error { color: var(--danger-2); font-size: 13px; padding: 10px 0; }
.preview-drawer-body pre {
margin: 0;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
overflow-x: auto;
font-size: 12.5px;
line-height: 1.5;
}
.preview-drawer-body pre code {
font-family: "SF Mono", Menlo, monospace;
background: transparent;
padding: 0;
white-space: pre;
}
.preview-markdown {
font-size: 13.5px;
line-height: 1.55;
color: var(--text);
}
.preview-markdown h1,
.preview-markdown h2,
.preview-markdown h3,
.preview-markdown h4 { margin: 14px 0 6px; color: var(--text); }
.preview-markdown p { margin: 8px 0; }
.preview-markdown ul,
.preview-markdown ol { margin: 6px 0 6px 20px; }
.preview-markdown code {
font-family: "SF Mono", Menlo, monospace;
background: var(--surface-2);
padding: 1px 5px;
border-radius: 3px;
font-size: 12.5px;
}
.preview-markdown pre {
margin: 10px 0;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
overflow-x: auto;
}
.preview-markdown pre code { background: transparent; padding: 0; }
.preview-markdown blockquote {
border-left: 3px solid var(--border);
margin: 8px 0;
padding: 2px 12px;
color: var(--text-muted);
}
.preview-markdown table {
border-collapse: collapse;
margin: 0;
font-size: 12.5px;
}
.preview-markdown th,
.preview-markdown td {
border: 1px solid var(--border);
padding: 4px 8px;
text-align: left;
}
.preview-link,
.file-open-link {
color: var(--accent);
text-decoration: underline;
cursor: pointer;
font-family: "SF Mono", Menlo, monospace;
font-size: 0.95em;
}
.preview-link:hover,
.file-open-link:hover { color: #1e1b4b; background: var(--accent-soft); border-radius: 3px; }
/* ── Drawer inline file editor (quick edits to sandbox tools/workflows) ── */
.preview-drawer-edit,
.preview-drawer-edit-cancel {
background: transparent;
border: 1px solid var(--border);
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
}
.preview-drawer-edit:hover:not(:disabled),
.preview-drawer-edit-cancel:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.preview-drawer-edit:focus-visible,
.preview-drawer-edit-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.preview-drawer-edit:disabled,
.preview-drawer-edit-cancel:disabled { opacity: 0.6; cursor: default; }
.preview-drawer-edit-save {
background: var(--accent);
border: none;
color: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
}
.preview-drawer-edit-save:hover:not(:disabled) { filter: brightness(1.12); }
.preview-drawer-edit-save:focus-visible { outline: 2px solid var(--accent-soft-border); outline-offset: 1px; }
.preview-drawer-edit-save:disabled { opacity: 0.6; cursor: default; }
/* One shared status/error line between the header and the body: transient
"✓ Saved · version …" or a save/load error (plus the conflict Reload). */
.file-editor-status {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-bottom: 1px solid var(--border);
font-family: "SF Mono", Menlo, monospace;
font-size: 12px;
color: var(--ok);
flex-shrink: 0;
}
.file-editor-status.error { color: var(--danger-2); }
.file-editor-reload {
background: transparent;
border: 1px solid var(--border);
font-size: 12px;
color: var(--text);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.file-editor-reload:hover { background: var(--surface-hover); }
.file-editor-reload:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* While editing, the body becomes a flex column and stops scrolling itself —
the textarea scrolls internally, so it never fights the drawer root's
overflow:auto (which must stay for resize:horizontal). */
.preview-drawer.editing .preview-drawer-body {
display: flex;
flex-direction: column;
overflow: hidden;
}
.file-editor-textarea {
flex: 1;
min-height: 0;
width: 100%;
resize: none;
overflow: auto;
font-family: "SF Mono", Menlo, monospace;
font-size: 12.5px;
line-height: 1.5;
tab-size: 2;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 14px;
}
.file-editor-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.file-editor-textarea:read-only { opacity: 0.7; }
/* ── Schedules dense list (redesign) ── */
:root {
--sched-border: #eaeaea;
--sched-border-soft: #f0f0f0;
--sched-text: #222;
--sched-text-muted: #888;
--sched-text-dim: #999;
--sched-bg-hover: #f5f5f5;
--sched-bg-row-alt: #fafafa;
--sched-ok: #1f8c48;
--sched-ok-bg: #e5f7ec;
--sched-paused: #bdbdbd;
--sched-accent: #3730a3;
--sched-accent-bg: #eef2ff;
--sched-danger: #c0392b;
--sched-danger-bg: #fdecea;
--sched-running: #7aa2f7;
--sched-mono: "SF Mono", Menlo, monospace;
}
:root[data-theme="dark"] {
--sched-border: #3a3c42;
--sched-border-soft: #2e3035;
--sched-text: #e9e9eb;
--sched-text-muted: #9a9ba1;
--sched-text-dim: #76777d;
--sched-bg-hover: #2f3137;
--sched-bg-row-alt: #2a2c31;
--sched-ok: #57c98a;
--sched-ok-bg: #16321f;
--sched-paused: #5a5b60;
--sched-accent: #a9b4fc;
--sched-accent-bg: #2a2d3d;
--sched-danger: #ef6b63;
--sched-danger-bg: #3a1f1d;
--sched-running: #7aa2f7;
}
.schedules-toolbar,
.live-agents-toolbar {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.schedules-search,
.live-agents-search {
flex: 1;
height: 30px;
padding: 0 10px;
font-size: 13px;
border: 1px solid var(--sched-border);
border-radius: 6px;
outline: none;
background: var(--input-bg);
}
.schedules-search:focus,
.live-agents-search:focus {
border-color: var(--border);
box-shadow: 0 0 0 2px rgba(55, 48, 163, 0.08);
}
.schedules-filter-seg,
.live-agents-filter-seg {
display: inline-flex;
border: 1px solid var(--sched-border);
border-radius: 6px;
overflow: hidden;
background: var(--surface);
}
.schedules-filter-seg button,
.live-agents-filter-seg button {
height: 30px;
padding: 0 12px;
font-size: 12px;
background: var(--surface);
border: none;
border-left: 1px solid var(--sched-border);
cursor: pointer;
color: var(--sched-text-muted);
font-weight: 500;
}
.schedules-filter-seg button:first-child,
.live-agents-filter-seg button:first-child { border-left: none; }
.schedules-filter-seg button:hover,
.live-agents-filter-seg button:hover { background: var(--sched-bg-hover); color: var(--sched-text); }
.schedules-filter-seg button.active,
.live-agents-filter-seg button.active {
background: var(--surface-hover);
color: var(--sched-text);
}
.schedules-new-btn {
height: 30px;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-bg);
border-radius: 6px;
cursor: pointer;
}
.schedules-new-btn:hover { background: var(--btn-bg-hover); }
.schedules-table {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) 170px 110px 110px 52px 128px;
font-size: 13px;
border: 1px solid var(--sched-border);
border-radius: 8px;
background: var(--surface);
overflow: hidden;
}
.schedules-header { display: contents; }
.schedules-header > div {
position: sticky;
top: 0;
background: var(--surface-2);
font-size: 11px;
font-weight: 600;
color: var(--sched-text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 9px 10px;
border-bottom: 1px solid var(--sched-border);
z-index: 1;
}
.schedules-header > div.schedules-header-runs { text-align: right; }
.schedules-header > div.schedules-header-actions { text-align: right; }
.schedule-row { display: contents; cursor: pointer; }
.schedule-row > div {
padding: 6px 10px;
border-bottom: 1px solid var(--sched-border-soft);
min-width: 0;
background: var(--surface);
display: flex;
align-items: center;
min-height: 36px;
box-sizing: border-box;
}
.schedule-row:hover > div { background: var(--sched-bg-hover); }
.schedule-row.expanded > div { background: var(--sched-bg-row-alt); }
.schedule-row:focus { outline: none; }
.schedule-row:focus-visible > div:first-child {
box-shadow: inset 2px 0 0 var(--sched-accent);
}
.schedule-row > .schedule-cell-dot {
justify-content: center;
padding-left: 6px;
padding-right: 0;
}
.schedule-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sched-paused);
}
.schedule-status-dot.enabled { background: var(--sched-ok); }
.schedule-status-dot.running {
background: var(--sched-running);
box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.25);
}
.schedule-row.archived .schedule-status-dot {
background: var(--sched-text-dim, #6b7280);
opacity: 0.55;
}
.schedule-row.archived .schedule-workflow-name,
.schedule-row.archived .schedule-cell-cron code {
opacity: 0.7;
}
.schedule-row > .schedule-cell-name {
flex-direction: column;
justify-content: center;
align-items: stretch;
min-width: 0;
}
.schedule-workflow-name {
font-weight: 600;
color: var(--sched-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.schedule-workflow-desc {
font-size: 12px;
color: var(--sched-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.schedule-cell-cron code {
font-family: var(--sched-mono);
font-size: 11.5px;
background: var(--surface-2);
padding: 1px 6px;
border-radius: 4px;
color: var(--text-secondary);
}
.schedule-cell-next,
.schedule-cell-last {
color: var(--sched-text-muted);
font-variant-numeric: tabular-nums;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.schedule-row > .schedule-cell-runs {
justify-content: flex-end;
color: var(--sched-text-muted);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.schedule-row > .schedule-cell-actions {
gap: 2px;
justify-content: flex-end;
}
.schedule-icon-btn {
width: 26px;
height: 26px;
border: none;
background: transparent;
color: var(--sched-text-muted);
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
padding: 0;
}
.schedule-icon-btn:hover { background: var(--surface-hover); color: var(--sched-text); }
.schedule-icon-btn:focus-visible {
outline: 2px solid var(--sched-accent);
outline-offset: -2px;
}
.schedule-icon-btn.danger:hover { background: var(--sched-danger-bg); color: var(--sched-danger); }
.schedule-icon-btn.run-now { color: var(--sched-accent); }
.schedule-icon-btn.run-now:hover { background: var(--sched-accent-bg); color: var(--sched-accent); }
.schedule-chevron {
transition: transform 0.12s ease-out;
font-size: 14px;
display: inline-block;
}
.schedule-row.expanded .schedule-chevron { transform: rotate(90deg); }
/* Expansion panel */
.schedule-expand {
grid-column: 1 / -1;
display: none;
padding: 10px 14px 14px 36px;
border-bottom: 1px solid var(--sched-border-soft);
background: var(--sched-bg-row-alt);
}
.schedule-expand.visible { display: block; }
.schedule-sparkline {
display: flex;
gap: 2px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 8px;
}
.schedule-spark-cell {
width: 10px;
height: 16px;
border-radius: 2px;
border: none;
padding: 0;
cursor: pointer;
background: var(--sched-paused);
transition: transform 0.08s;
}
.schedule-spark-cell:hover { transform: scaleY(1.15); }
.schedule-spark-cell.completed { background: var(--sched-ok); }
.schedule-spark-cell.failed { background: var(--sched-danger); }
.schedule-spark-cell.running {
background: var(--sched-running);
animation: schedSparkPulse 1.6s ease-in-out infinite;
}
.schedule-spark-cell.skipped { background: var(--sched-paused); }
.schedule-spark-empty { font-size: 11.5px; color: var(--sched-text-dim); }
@keyframes schedSparkPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.schedule-quickstats {
font-size: 11.5px;
color: var(--sched-text-muted);
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.schedule-quickstats b {
font-weight: 600;
color: var(--sched-text);
}
.schedule-expand .schedule-runs {
margin-top: 4px;
border-top: none;
padding-top: 0;
}
.schedule-expand .schedule-run-full {
margin-left: 0;
}
.schedule-expand-footer {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--sched-border-soft);
font-size: 11.5px;
color: var(--sched-text-muted);
display: flex;
justify-content: space-between;
align-items: center;
}
.schedule-expand-footer a {
color: var(--sched-accent);
cursor: pointer;
text-decoration: none;
font-weight: 500;
}
.schedule-expand-footer a:hover { text-decoration: underline; }
/* Overflow menu (per-row) */
.sched-menu {
position: fixed;
z-index: 1000;
background: var(--surface);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
padding: 4px;
width: 160px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 10px 24px rgba(0, 0, 0, 0.18),
0 24px 56px rgba(0, 0, 0, 0.1);
}
.sched-menu-item {
display: flex;
width: 100%;
padding: 7px 10px;
border: none;
background: none;
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
border-radius: 5px;
color: var(--sched-text);
}
.sched-menu-item:hover { background: var(--sched-bg-hover); }
.sched-menu-item.danger { color: var(--sched-danger); }
.sched-menu-item.danger:hover { background: var(--sched-danger-bg); }
/* ── Live agents dense list ── */
.live-agents-table {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) 200px 90px 84px 64px;
font-size: 13px;
border: 1px solid var(--sched-border);
border-radius: 8px;
background: var(--surface);
overflow: hidden;
}
.live-agents-header { display: contents; }
.live-agents-header > div {
position: sticky;
top: 0;
background: var(--surface-2);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sched-text-muted);
padding: 8px 10px;
border-bottom: 1px solid var(--sched-border);
}
.live-agents-header > div.live-agents-header-actions { text-align: right; }
.live-agent-row { display: contents; cursor: pointer; }
.live-agent-row > div {
padding: 9px 10px;
border-bottom: 1px solid var(--sched-border-soft);
display: flex;
align-items: center;
min-height: 44px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.live-agent-row:hover > div { background: var(--sched-bg-hover); }
.live-agent-row.expanded > div { background: var(--sched-bg-row-alt); }
.live-agent-row:focus { outline: none; }
.live-agent-row:focus-visible > div:first-child {
box-shadow: inset 2px 0 0 var(--sched-accent);
}
.live-agent-row > .live-agent-cell-dot {
padding: 9px 4px 9px 10px;
display: flex;
align-items: center;
}
.live-agent-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sched-paused);
}
.live-agent-status-dot.running {
background: var(--sched-running);
animation: schedSparkPulse 1.2s ease-in-out infinite;
}
.live-agent-row > .live-agent-cell-name { min-width: 0; }
.live-agent-workflow-name {
font-weight: 500;
color: var(--sched-text);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-agent-cell-context code {
font-family: var(--sched-mono);
font-size: 12px;
color: var(--sched-text-muted);
background: transparent;
padding: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-agent-cell-started,
.live-agent-cell-elapsed {
font-family: var(--sched-mono);
font-size: 12px;
color: var(--sched-text-muted);
font-variant-numeric: tabular-nums;
}
.live-agent-row > .live-agent-cell-actions {
padding-right: 8px;
text-align: right;
display: flex;
gap: 2px;
justify-content: flex-end;
align-items: center;
}
.live-agent-icon-btn {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
color: var(--sched-text-muted);
cursor: pointer;
padding: 0;
font-size: 13px;
line-height: 1;
}
.live-agent-icon-btn:hover { background: var(--surface-hover); color: var(--sched-text); }
.live-agent-icon-btn:focus-visible {
outline: none;
border-color: var(--sched-accent);
}
.live-agent-chevron {
display: inline-block;
transition: transform 120ms ease-out;
}
.live-agent-row.expanded .live-agent-chevron { transform: rotate(90deg); }
.live-agent-expand {
grid-column: 1 / -1;
display: none;
padding: 12px 14px 14px;
background: var(--surface);
border-bottom: 1px solid var(--sched-border-soft);
}
.live-agent-expand.visible { display: block; }
.live-agent-sparkline {
display: flex;
gap: 2px;
align-items: end;
min-height: 18px;
margin-bottom: 10px;
}
.live-agent-spark-cell {
width: 10px;
height: 16px;
padding: 0;
border: none;
border-radius: 2px;
background: var(--sched-paused);
cursor: pointer;
transition: transform 80ms ease-out;
}
.live-agent-spark-cell:hover { transform: scaleY(1.15); }
.live-agent-spark-cell.ok { background: var(--sched-ok); }
.live-agent-spark-cell.error { background: var(--sched-danger); }
.live-agent-spark-cell.running {
background: var(--sched-running);
animation: schedSparkPulse 1.2s ease-in-out infinite;
}
.live-agent-spark-cell.interrupted { background: var(--sched-paused); }
.live-agent-quickstats {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 12px;
color: var(--sched-text-muted);
margin-bottom: 10px;
}
.live-agent-quickstats b {
color: var(--sched-text);
font-weight: 600;
}
.live-agent-events {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
max-height: 220px;
overflow: auto;
padding-right: 4px;
}
.live-agent-event {
display: grid;
grid-template-columns: 80px minmax(0, 180px) minmax(0, 1fr);
gap: 8px;
padding: 3px 0;
align-items: baseline;
border-bottom: 1px solid var(--sched-border-soft);
}
.live-agent-event:last-child { border-bottom: none; }
.live-agent-event-time {
font-family: var(--sched-mono);
color: var(--sched-text-dim);
font-variant-numeric: tabular-nums;
}
.live-agent-event-name {
color: var(--sched-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-agent-event-hint {
font-family: var(--sched-mono);
font-size: 11.5px;
color: var(--sched-text-muted);
background: var(--sched-bg-hover);
padding: 1px 6px;
border-radius: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-agent-expand-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--sched-border-soft);
font-size: 12px;
color: var(--sched-text-muted);
}
.live-agent-expand-footer a {
color: var(--sched-accent);
cursor: pointer;
text-decoration: none;
}
.live-agent-expand-footer a:hover { text-decoration: underline; }
@media (max-width: 780px) {
.live-agents-table {
grid-template-columns: 18px minmax(0, 1fr) 140px 84px 64px;
}
.live-agents-header-started,
.live-agent-cell-started { display: none; }
}
/* Empty state with toolbar active */
.automations-list.as-table { padding: 0; margin: 0; }
/* ── Runs history drawer ── */
.runs-drawer {
position: fixed;
top: 0;
right: 0;
width: 560px;
max-width: 92vw;
height: 100vh;
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.06);
transform: translateX(100%);
transition: transform 180ms ease-out, width 180ms ease-out;
display: flex;
flex-direction: column;
z-index: 200;
resize: horizontal;
overflow: auto;
min-width: 360px;
}
.runs-drawer.open { transform: translateX(0); }
.runs-drawer.expanded { width: 92vw; }
.runs-drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--border);
}
.runs-drawer-title { font-size: 15px; font-weight: 600; color: var(--sched-text); }
.runs-drawer-sub {
font-size: 11.5px;
color: var(--sched-text-muted);
font-family: var(--sched-mono);
margin-top: 2px;
}
.runs-drawer-actions {
display: flex;
gap: 4px;
align-items: center;
}
.runs-drawer-expand {
background: transparent;
border: none;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
}
.runs-drawer-expand:hover { background: var(--sched-bg-hover); color: var(--sched-text); }
.runs-drawer-close {
background: transparent;
border: none;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
padding: 0 4px;
}
.runs-drawer-close:hover { color: var(--sched-text); }
.runs-drawer-body .schedule-run {
padding: 4px 2px;
border-bottom: 1px solid var(--sched-border-soft);
font-size: 12px;
}
.runs-drawer-body .schedule-run-head { gap: 8px; }
.runs-drawer-body .schedule-run-status { min-width: 72px; font-size: 11.5px; }
.runs-drawer-body .schedule-run-time { font-size: 11.5px; }
.runs-drawer-body .schedule-run-dur { font-size: 11.5px; }
.runs-drawer-body .schedule-run-full { margin-left: 0; }
.runs-drawer-summary {
padding: 8px 16px;
font-size: 12px;
color: var(--sched-text-muted);
border-bottom: 1px solid var(--sched-border-soft);
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.runs-drawer-summary b { color: var(--sched-text); font-weight: 600; }
.runs-drawer-filters {
display: flex;
gap: 6px;
padding: 8px 16px;
border-bottom: 1px solid var(--sched-border-soft);
flex-wrap: wrap;
}
.runs-drawer-filter {
background: var(--surface);
border: 1px solid var(--sched-border);
color: var(--sched-text-muted);
padding: 3px 10px;
border-radius: 12px;
font-size: 11.5px;
cursor: pointer;
font-weight: 500;
}
.runs-drawer-filter:hover { background: var(--sched-bg-hover); color: var(--sched-text); }
.runs-drawer-filter.active {
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-bg);
}
.runs-drawer-body {
flex: 1;
overflow-y: auto;
padding: 6px 10px 14px;
}
.runs-drawer-row {
display: flex;
gap: 10px;
align-items: center;
padding: 6px 6px;
border-bottom: 1px solid var(--sched-border-soft);
font-size: 12px;
min-width: 0;
}
.runs-drawer-row:hover { background: var(--sched-bg-hover); }
.runs-drawer-row-status {
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.runs-drawer-row-status.completed { color: var(--sched-ok); }
.runs-drawer-row-status.failed { color: var(--sched-danger); }
.runs-drawer-row-status.running { color: var(--sched-running); }
.runs-drawer-row-status.skipped { color: var(--text-dim); }
.runs-drawer-row-time {
color: var(--sched-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-size: 11.5px;
}
.runs-drawer-row-dur {
color: var(--sched-text-dim);
font-variant-numeric: tabular-nums;
font-size: 11.5px;
min-width: 42px;
text-align: right;
}
.runs-drawer-row-summary {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--sched-text-muted);
}
.runs-drawer-row-trace {
background: var(--sched-accent-bg);
border: 1px solid var(--accent-soft-border);
color: var(--sched-accent);
padding: 2px 8px;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
}
.runs-drawer-row-trace:hover { background: var(--accent-soft); }
.runs-drawer-loader {
padding: 12px;
text-align: center;
color: var(--sched-text-muted);
font-size: 12px;
}
.runs-drawer-empty { color: var(--sched-text-dim); font-size: 13px; padding: 20px 10px; text-align: center; }
.runs-drawer-error { color: var(--sched-danger); font-size: 13px; padding: 10px; }
@media (max-width: 780px) {
.schedules-table {
grid-template-columns: 14px minmax(0, 1fr) 90px 60px 110px;
}
.schedule-cell-cron,
.schedule-cell-last {
display: none;
}
}
/* ──────────────────────────────────────────────────────────
Trace graph view
────────────────────────────────────────────────────────── */
.trace-view-host {
position: relative;
height: 100%;
min-height: 0;
}
.trace-view-host.hidden { display: none; }
/* The body is a flex column; tree uses normal flow, graph fills the height. */
.trace-drawer-body {
display: flex;
flex-direction: column;
}
.trace-view-tree { overflow-y: auto; }
.trace-view-graph { flex: 1 1 auto; overflow: hidden; }
/* Segmented control in the drawer header */
.trace-view-toggle {
display: inline-flex;
background: var(--surface-2);
border-radius: 6px;
padding: 2px;
margin-right: 2px;
}
.trace-view-toggle button {
border: none;
background: transparent;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
}
.trace-view-toggle button:hover { color: var(--text); }
.trace-view-toggle button.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Graph viewport */
.tg-viewport {
position: absolute;
inset: 0;
overflow: hidden;
cursor: grab;
touch-action: none;
background:
radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1px) 0 0 / 20px 20px,
var(--surface-2);
}
.tg-viewport.tg-dragging { cursor: grabbing; }
.tg-viewport.tg-dragging .tg-stage { transition: none !important; }
.tg-stage {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
will-change: transform;
}
.tg-edges {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
overflow: visible;
}
.tg-edges path {
fill: none;
stroke: var(--border);
stroke-width: 1.25;
}
/* Node card */
.tg-node {
position: absolute;
top: 0;
left: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
display: flex;
overflow: hidden;
will-change: transform;
transition: opacity 180ms ease-out, box-shadow 120ms ease-out;
opacity: 1;
}
.tg-node:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.tg-node:focus { outline: 2px solid #93c5fd; outline-offset: 1px; }
.tg-node-enter { opacity: 0; }
.tg-node-leave { opacity: 0; pointer-events: none; }
.tg-node-strip {
width: 4px;
flex-shrink: 0;
}
.tg-node[data-status="running"] .tg-node-strip { background: #fef3c7; }
.tg-node[data-status="ok"] .tg-node-strip { background: #dcfce7; }
.tg-node[data-status="error"] .tg-node-strip { background: #fee2e2; }
.tg-node[data-status="interrupted"] .tg-node-strip { background: #e5e7eb; }
@keyframes tg-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.tg-node[data-status="running"] .tg-node-strip {
animation: tg-pulse 1.6s ease-in-out infinite;
}
.tg-node-content {
display: flex;
flex-direction: column;
gap: 3px;
padding: 9px 11px 10px;
flex: 1;
min-width: 0;
}
.tg-node-head {
display: flex;
gap: 7px;
align-items: center;
min-width: 0;
}
.tg-icon {
width: 14px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
flex-shrink: 0;
}
.tg-title {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.tg-dur {
color: var(--text-muted);
font-size: 10.5px;
font-family: "SF Mono", Menlo, monospace;
background: var(--surface-2);
padding: 1px 6px;
border-radius: 3px;
flex-shrink: 0;
letter-spacing: -0.1px;
}
.tg-chevron {
color: var(--text-dim);
font-size: 9px;
flex-shrink: 0;
padding: 0 2px;
transition: transform 160ms ease-out, color 120ms;
user-select: none;
pointer-events: none;
}
.tg-node:hover .tg-chevron { color: var(--text-muted); }
.tg-node.open .tg-chevron { transform: rotate(180deg); color: var(--text-secondary); }
.tg-subtitle {
font-family: "SF Mono", Menlo, monospace;
font-size: 10.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 13px;
}
.tg-subtitle:empty { display: none; }
.tg-preview {
font-size: 11px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 14px;
}
.tg-preview:empty { display: none; }
.tg-preview[data-kind="error"] { color: var(--danger); }
/* Expanded body */
.tg-node-body {
padding: 8px 11px 12px;
border-top: 1px solid var(--border-soft);
font-size: 11.5px;
width: 100%;
background: var(--surface-2);
}
.tg-node-body.hidden { display: none; }
.tg-node.open { flex-direction: column; }
.tg-node.open .tg-node-strip {
width: 100%;
height: 3px;
flex-shrink: 0;
}
.tg-node.open .tg-node-content { width: 100%; flex: 0 0 auto; }
.tg-node.open .tg-node-body { flex: 0 0 auto; }
/* Key/value rows inside the expanded body */
.tg-kv {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
column-gap: 10px;
row-gap: 3px;
margin: 2px 0 6px;
}
.tg-kv dt {
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
}
.tg-kv dd {
color: var(--text);
font-size: 11.5px;
font-family: "SF Mono", Menlo, monospace;
margin: 0;
word-break: break-word;
}
/* Code-style input/output/error blocks */
.tg-block {
margin-top: 8px;
}
.tg-block-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
margin-bottom: 3px;
font-weight: 600;
}
.tg-block-body {
margin: 0;
padding: 7px 9px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
max-height: 220px;
overflow: auto;
overscroll-behavior: contain;
white-space: pre-wrap;
word-break: break-word;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}
.tg-block-body::-webkit-scrollbar { width: 8px; height: 8px; }
.tg-block-body::-webkit-scrollbar-track { background: transparent; }
.tg-block-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.22);
border-radius: 4px;
}
.tg-block-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.38); }
.tg-block-error .tg-block-body {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
/* Raw-attribute reveal */
.tg-raw-toggle {
margin-top: 10px;
background: transparent;
border: none;
padding: 0;
color: var(--text-muted);
font-size: 11px;
font-family: inherit;
cursor: pointer;
}
.tg-raw-toggle:hover { color: var(--text); }
/* ── Raw attributes popover ─────────────────────────────────────────────── */
.tg-raw-popover {
position: fixed;
z-index: 300; /* above .trace-drawer (210) */
width: 520px;
max-width: calc(100vw - 16px);
max-height: 60vh;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 12px;
color: var(--text);
animation: tgRawPopoverIn 140ms ease-out;
}
.tg-raw-popover[hidden] { display: none; }
@keyframes tgRawPopoverIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.tg-raw-popover-head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
flex: 0 0 auto;
}
.tg-raw-popover-title {
font-weight: 600;
font-size: 13px;
flex: 1 1 auto;
min-width: 0;
}
.tg-raw-popover-count {
color: var(--text-muted);
font-weight: 400;
font-size: 11.5px;
font-family: "SF Mono", Menlo, monospace;
}
.tg-raw-popover-btn,
.tg-raw-popover-close {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: 6px;
padding: 4px 10px;
font-size: 11.5px;
font-family: inherit;
cursor: pointer;
line-height: 1.2;
transition: background 120ms ease, border-color 120ms ease;
}
.tg-raw-popover-btn:hover,
.tg-raw-popover-close:hover { background: var(--surface-hover); border-color: var(--border); }
.tg-raw-popover-btn:focus-visible,
.tg-raw-popover-close:focus-visible {
outline: 2px solid #4c8dff;
outline-offset: 1px;
}
.tg-raw-popover-btn.tg-raw-popover-copied {
background: #e8f7ec;
border-color: #9ecfa8;
color: #1b6b30;
}
.tg-raw-popover-close {
padding: 4px 8px;
font-size: 13px;
color: var(--text-muted);
}
.tg-raw-popover-search {
flex: 0 0 auto;
padding: 8px 12px;
border-bottom: 1px solid var(--border-soft);
background: var(--surface-2);
}
.tg-raw-popover-search input {
width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 9px;
font-size: 12px;
font-family: inherit;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tg-raw-popover-search input:focus {
border-color: #4c8dff;
box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.15);
}
.tg-raw-popover-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 4px 0;
}
.tg-raw-popover-row {
border-bottom: 1px solid var(--border-soft);
}
.tg-raw-popover-row:last-child { border-bottom: none; }
.tg-raw-popover-row > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
cursor: pointer;
list-style: none;
user-select: none;
}
.tg-raw-popover-row > summary::-webkit-details-marker { display: none; }
.tg-raw-popover-row > summary::before {
content: "▸";
color: var(--text-dim);
font-size: 10px;
transition: transform 120ms ease;
flex: 0 0 auto;
}
.tg-raw-popover-row[open] > summary::before { transform: rotate(90deg); }
.tg-raw-popover-row > summary:hover { background: var(--surface-hover); }
.tg-raw-popover-row[open] > summary { background: var(--accent-soft); }
.tg-raw-popover-key {
font-family: "SF Mono", Menlo, monospace;
font-size: 11.5px;
color: var(--accent);
font-weight: 500;
flex: 0 0 auto;
max-width: 45%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tg-raw-popover-preview {
flex: 1 1 auto;
color: var(--text-muted);
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.tg-raw-popover-row[open] > summary .tg-raw-popover-preview { display: none; }
.tg-raw-popover-copy {
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
font-size: 10.5px;
font-family: inherit;
padding: 2px 7px;
border-radius: 4px;
cursor: pointer;
flex: 0 0 auto;
opacity: 0;
transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tg-raw-popover-row > summary:hover .tg-raw-popover-copy,
.tg-raw-popover-row[open] > summary .tg-raw-popover-copy,
.tg-raw-popover-copy:focus-visible { opacity: 1; }
.tg-raw-popover-copy:hover {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
.tg-raw-popover-copy.tg-raw-popover-copied {
opacity: 1;
background: #e8f7ec;
border-color: #9ecfa8;
color: #1b6b30;
}
.tg-raw-popover-pre {
margin: 0;
padding: 8px 12px 12px 30px;
background: var(--surface-2);
border-top: 1px solid var(--border-soft);
max-height: 240px;
overflow: auto;
font-family: "SF Mono", Menlo, monospace;
font-size: 11.5px;
line-height: 1.45;
color: var(--text);
white-space: pre;
}
.tg-raw-popover-pre code { white-space: pre; }
.tg-raw-popover-more {
padding: 0 12px 10px 30px;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
.tg-raw-popover-empty {
padding: 18px 16px;
color: var(--text-dim);
font-size: 12px;
text-align: center;
}
.tg-raw-popover-events {
border-top: 1px solid var(--border);
background: var(--surface-2);
padding: 8px 0 6px;
}
.tg-raw-popover-subhead {
padding: 2px 12px 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-secondary);
}
.tg-raw-popover-event {
display: flex;
gap: 8px;
align-items: baseline;
padding: 3px 12px;
font-size: 11.5px;
border-top: 1px solid var(--border-soft);
}
.tg-raw-popover-event:first-of-type { border-top: none; }
.tg-raw-popover-event-time {
color: var(--text-dim);
font-family: "SF Mono", Menlo, monospace;
font-size: 10.5px;
flex: 0 0 auto;
}
.tg-raw-popover-event-name {
color: var(--text-secondary);
font-weight: 500;
flex: 0 0 auto;
}
.tg-raw-popover-event code {
flex: 1 1 auto;
min-width: 0;
color: var(--text-muted);
background: var(--surface-2);
padding: 1px 5px;
border-radius: 3px;
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tg-raw-popover-toast {
/* Reserved for future inline toasts; currently unused. */
}
.tg-empty { color: var(--text-dim); font-size: 11px; padding: 2px 0; }
/* Subtree fold button */
.tg-fold {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
font: 10px "SF Mono", Menlo, monospace;
padding: 1px 7px;
cursor: pointer;
color: var(--text-muted);
min-width: 28px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: color 120ms, background 120ms;
}
.tg-fold:hover { background: var(--surface-hover); color: var(--text); }
.tg-fold.hidden { display: none; }
/* Bottom-right chrome: zoom -/fit/+ */
.tg-chrome {
position: absolute;
right: 12px;
bottom: 12px;
display: flex;
gap: 1px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
z-index: 2;
overflow: hidden;
}
.tg-chrome button {
width: 28px;
height: 28px;
border: none;
background: transparent;
cursor: pointer;
color: var(--text-secondary);
font-size: 14px;
line-height: 1;
font-family: inherit;
}
.tg-chrome button:hover { background: var(--surface-hover); color: var(--text); }
/* ── A2A Always-On agents ────────────────────────────────────────────── */
.a2a-agents-toolbar {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
/* Gmail accounts toolbar stacks the shared notice, the add-control row, and the
inline feedback line vertically (block flow) — unlike the a2a toolbar which is
a horizontal flex row. Only the bottom margin separates it from the table. */
.gmail-accounts-toolbar {
margin-bottom: 12px;
}
.a2a-agents-table {
display: grid;
grid-template-columns: 32px minmax(0, 2.4fr) minmax(120px, 0.9fr) 70px 140px 130px;
background: var(--surface);
border: 1px solid var(--sched-border);
border-radius: 8px;
overflow: hidden;
}
.a2a-agents-header { display: contents; }
.a2a-agents-header > div {
padding: 10px 12px;
background: var(--sched-bg-header);
font-weight: 600;
font-size: 12px;
color: var(--sched-text-dim);
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 1px solid var(--sched-border);
}
.a2a-agent-row { display: contents; cursor: pointer; }
.a2a-agent-row > div {
padding: 10px 12px;
min-height: 44px;
border-bottom: 1px solid var(--sched-border);
font-size: 13px;
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.a2a-agent-row:hover > div { background: var(--sched-bg-hover); }
.a2a-agent-row:last-child > div { border-bottom: none; }
.a2a-agent-status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sched-text-dim);
display: inline-block;
}
.a2a-agent-status-dot.enabled {
background: var(--sched-running, #16a34a);
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
animation: sched-pulse 2.2s infinite;
}
.a2a-agent-cell-name { min-width: 0; flex-direction: column; align-items: flex-start; }
.a2a-agent-cell-auth { gap: 4px; flex-wrap: nowrap; }
.a2a-auth-chip {
display: inline-block;
background: var(--sched-bg-row-alt, #f5f5f4);
color: var(--sched-text-dim);
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
margin-right: 4px;
}
.a2a-agent-cell-skills {
font-variant-numeric: tabular-nums;
}
.a2a-agent-cell-started { color: var(--sched-text-dim); }
.a2a-agent-cell-actions { justify-content: flex-end; gap: 4px; }
.a2a-detail h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sched-text-dim);
margin: 16px 0 6px;
}
.a2a-detail h4:first-child { margin-top: 0; }
.a2a-card-pre {
background: var(--sched-bg-row-alt, #f5f5f4);
border: 1px solid var(--sched-border);
border-radius: 6px;
padding: 10px;
margin: 0;
white-space: pre;
font-family: var(--sched-mono);
}
/* ── Masquerade ("View as user") ── */
.masquerade-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 36px;
z-index: 1500; /* above app chrome, below modal overlays (2000) */
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
background: #b45309;
color: #fff;
font-size: 13px;
font-weight: 500;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.masquerade-banner.hidden { display: none; }
.masquerade-banner-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fde68a;
flex: 0 0 auto;
}
.masquerade-banner-label { flex: 1 1 auto; }
.masquerade-banner-reload,
.masquerade-banner-exit {
flex: 0 0 auto;
background: rgba(255, 255, 255, 0.18);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px;
padding: 3px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.masquerade-banner-reload:hover,
.masquerade-banner-exit:hover { background: rgba(255, 255, 255, 0.3); }
/* Offset the app down by the banner height so it doesn't overlap the chrome. */
body.masquerading .app-container {
margin-top: 36px;
height: calc(100vh - 36px);
}
/* Side drawers are position:fixed; top:0 — anchor them below the banner too so
their header isn't hidden behind it while masquerading. */
body.masquerading .trace-drawer,
body.masquerading .preview-drawer,
body.masquerading .runs-drawer {
top: 36px;
height: calc(100vh - 36px);
}
/* ── Update toast (deploy skew) ── */
/* Bottom-right so it never interacts with the masquerade banner's top offset
and shifts no layout. Shared theme tokens track light/dark. */
.update-toast {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1500; /* same tier as the masquerade banner: above chrome, below modals */
display: flex;
align-items: center;
gap: 10px;
max-width: min(380px, calc(100vw - 32px));
padding: 10px 12px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
font-size: 13px;
}
.update-toast.hidden { display: none; }
.update-toast-label { flex: 1 1 auto; }
.update-toast-reload {
flex: 0 0 auto;
background: var(--accent);
color: var(--surface);
border: none;
border-radius: 5px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.update-toast-reload:hover { opacity: 0.9; }
.update-toast-dismiss {
flex: 0 0 auto;
background: none;
border: none;
color: var(--text-muted);
font-size: 16px;
line-height: 1;
padding: 2px 4px;
cursor: pointer;
}
.update-toast-dismiss:hover { color: var(--text); }
/* "View as user" picker table (Settings dialog tab). Uses the shared theme
tokens so it tracks light/dark like the rest of the dialog. */
.viewas-search {
width: 100%;
box-sizing: border-box;
padding: 7px 10px;
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 13px;
}
.viewas-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.viewas-table th {
text-align: left;
font-weight: 600;
color: var(--text-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
}
.viewas-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-soft);
vertical-align: middle;
color: var(--text);
}
.viewas-table tr.hidden { display: none; }
.viewas-uid {
font-family: var(--sched-mono, monospace);
font-size: 12px;
color: var(--text-secondary);
}
.viewas-muted { color: var(--text-dim); }
.viewas-empty { color: var(--text-dim); text-align: center; padding: 16px; }
.viewas-tag {
display: inline-block;
font-size: 11px;
color: var(--text-muted);
padding: 2px 8px;
border-radius: 4px;
background: var(--surface-hover);
}
.viewas-tag.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.viewas-btn {
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-bg);
border-radius: 5px;
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.viewas-btn:hover { opacity: 0.9; }
/* ── Environment variables tab (Automations) ── */
.env-vars-toolbar { margin-bottom: 12px; }
.env-vars-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.env-vars-spacer { flex: 1; }
/* Secondary (outline) variant of the shared table button. */
.viewas-btn.env-vars-secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
font-weight: 500;
}
.viewas-btn.env-vars-secondary:hover { background: var(--surface-hover); opacity: 1; }
.schedules-new-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Top-aligned so a tall multi-line value pins key/eye/remove to its first
line; identical rendering for equal-height single-line rows. */
.env-vars-table td { vertical-align: top; }
.env-var-key-cell { width: 34%; }
.env-var-actions-cell { width: 1%; white-space: nowrap; text-align: right; }
.env-var-key,
.env-var-value {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 13px;
font-family: var(--sched-mono, monospace);
}
.env-var-key:focus,
.env-var-value:focus {
outline: none;
border-color: var(--accent);
}
.env-var-value-wrap { display: flex; align-items: flex-start; gap: 6px; }
.env-var-value-wrap .env-var-value { flex: 1; }
/* Multi-line editor: shares the .env-var-value chrome; height is managed by
autoGrow() (grows to 10 lines, then scrolls internally). */
textarea.env-var-value {
resize: none;
overflow-y: hidden;
display: block;
line-height: 1.45;
}
/* Inert masked presentation for hidden multi-line values (reveal to edit).
The dots reuse .viewas-uid and the line-count badge reuses .viewas-tag —
the same masked-secret/badge primitives as the Gmail + settings tabs. */
.env-var-masked {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
user-select: none;
cursor: default;
}
.env-var-eye {
flex: none;
padding: 5px 10px;
font-size: 12px;
min-width: 52px;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
}
.env-var-eye:hover { background: var(--surface-hover); color: var(--text); }
.env-var-invalid { border-color: var(--danger-2) !important; }
/* Disabled nav item (e.g. New Chat) while in a read-only "View as user" session. */
.nav-item.disabled {
opacity: 0.4;
pointer-events: none;
}
/* ── Dark-theme overrides for status tints with no shared token ──────────────
(advanced trace / graph views; light values stay inline on the base rules). */
:root[data-theme="dark"] .trace-status-running { background: #3a3115; color: #f0c674; }
:root[data-theme="dark"] .trace-status-ok { background: #16321f; color: #6ee7a0; }
:root[data-theme="dark"] .trace-status-error { background: #3a1f1d; color: #f0888a; }
:root[data-theme="dark"] .trace-status-interrupted { background: #2f3137; color: #c7c8cc; }
:root[data-theme="dark"] .tg-node[data-status="running"] .tg-node-strip { background: #b9912f; }
:root[data-theme="dark"] .tg-node[data-status="ok"] .tg-node-strip { background: #3a9b5e; }
:root[data-theme="dark"] .tg-node[data-status="error"] .tg-node-strip { background: #c0524c; }
:root[data-theme="dark"] .tg-node[data-status="interrupted"] .tg-node-strip { background: #5a5b60; }
:root[data-theme="dark"] .tg-block-error .tg-block-body { background: #3a1f1d; border-color: #5a2e2a; color: #f0888a; }
:root[data-theme="dark"] .tg-raw-popover-copied { background: #16321f; border-color: #2e6b45; color: #6ee7a0; }
/* ── General (personal preferences) panel ── */
.gen-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--border-soft);
}
.gen-row:last-child { border-bottom: none; }
.gen-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gen-row-label { font-size: 14px; color: var(--text); }
.gen-row-hint { font-size: 12px; color: var(--text-muted); }
/* Appearance segmented control (System / Light / Dark) */
.appearance-seg {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--surface);
flex-shrink: 0;
}
.appearance-seg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 30px;
border: none;
border-right: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.appearance-seg-btn:last-child { border-right: none; }
.appearance-seg-btn:hover { background: var(--surface-hover); color: var(--text); }
.appearance-seg-btn.active { background: var(--accent-soft); color: var(--accent); }
.appearance-seg-btn svg { display: block; }
/* Chat font select */
.gen-select {
min-width: 170px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: 13px;
font-family: inherit;
cursor: pointer;
}
/* Avatar preview + color swatches */
.avatar-preview {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
flex-shrink: 0;
user-select: none;
}
.avatar-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 6px 0 2px;
}
.avatar-swatch {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid transparent;
box-shadow: 0 0 0 1px var(--border);
cursor: pointer;
padding: 0;
transition: transform 0.1s;
}
.avatar-swatch:hover { transform: scale(1.1); }
.avatar-swatch.active {
border-color: var(--surface);
box-shadow: 0 0 0 2px var(--text);
}