/* ============================================================
   Agentic — State panel, events timeline, activity chart,
             tasks, changed files, event filters
   ============================================================ */

/* ── Agentic State Panel ───────────────────────────────────── */

.task-bar-resize-handle {
    width: 1px;
    cursor: col-resize;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
}

.task-bar-resize-handle:hover,
.task-bar-resize-handle.dragging {
    background: var(--accent);
}

.task-bar-resize-handle::before {
    content: '';
    position: absolute;
    inset: 0 -4px;
    z-index: 2;
}

/* ── Panel Toggle Button ──────────────────────────────────── */

.panel-toggle-btn {
    padding: 4px 8px !important;
    opacity: 0.6;
    transition: all 0.15s;
}

.panel-toggle-btn:hover {
    opacity: 1;
}

.panel-toggle-btn.active,
#panel-toggle-btn.active {
    opacity: 1;
    color: var(--accent);
}

#agentic-mobile-close-btn {
    display: none;
}

body:not(.popout-mode) #popout-panel-toggle-btn {
    display: none;
}

.agentic-state {
    width: 420px;
    min-width: 280px;
    /* The drag handle enforces the real limit, which keeps the terminal
       column usable; this only stops a stale saved width running away. */
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    transition: width 0.2s ease, min-width 0.2s ease;
}

body.panel-dragging .agentic-state {
    transition: none;
    contain: strict;
}

.agentic-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#agentic-block-top {
    flex: 2.3;
}

#agentic-block-bottom {
    flex: 1;
}

.agentic-block.collapsed {
    flex: none;
}

.agentic-block.collapsed .agentic-panel {
    display: none !important;
}

/* ── Resize Handle Between Blocks ──────────────────────────── */

.agentic-block-resize-handle {
    height: 1px;
    cursor: row-resize;
    background: var(--border);
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s, height 0.15s;
}

.agentic-block-resize-handle:hover,
.agentic-block-resize-handle.dragging {
    height: 3px;
    background: var(--accent);
}

/* ── Tabs ──────────────────────────────────────────────────── */

.agentic-state-tabs {
    display: flex;
    flex-wrap: wrap; /* #4344: at large text the tabs wrap to a second row instead of the last ones (Activity, Agent UI, Customize) running off the screen */
    min-height: 36px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.agentic-tab {
    flex: 1;
    min-width: 2em; /* em: grows with the text, so the row wraps before a tab is squeezed to nothing */
    padding: 8px 4px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.agentic-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.agentic-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.agentic-tab .material-icons {
    font-size: 1.125rem;
}

.agentic-tab-count:empty {
    display: none;
}

.agentic-tab-count {
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-primary); /* not the tab's own colour: the muted tab text on this chip was 4.4:1 (the Files one 3.7:1) in the light theme */
    border-radius: var(--radius-lg);
    padding: 0 5px;
    line-height: 16px;
    min-width: 16px;
    text-align: center;
}

/* ── Customize tabs (#4103) ────────────────────────────────── */

/* A tab the user hid; !important so it wins over the scope rules that show tabs. */
.agentic-tab.tab-hidden { display: none !important; }
.agentic-tab-customize { flex: 0 0 auto; min-width: 40px; }
.agentic-tab-customize[aria-expanded="true"] { background: var(--bg-hover); color: var(--text-primary); }

.tab-customize {
    position: fixed;
    z-index: 600;
    width: min(20rem, calc(100vw - 16px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-ml);
    box-shadow: var(--shadow-lg);
    padding: 8px;
}
.tc-title { margin: 4px 8px 6px; font-size: 0.8125rem; } /* rem, not the px tokens: the heading, note and button follow the text size like the tab names do */
.tc-list { list-style: none; margin: 0; padding: 0; }
.tc-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: var(--radius-md); }
.tc-row:hover { background: var(--bg-hover); }
.tc-row.dragging { opacity: 0.5; }
.tc-grip { font-size: 1.125rem; color: var(--text-secondary); cursor: grab; }
.tc-label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; min-width: 0; }
.tc-label .tc-icon { font-size: 1.125rem; color: var(--text-secondary); }
.tc-label .tc-icon-svg { display: inline-flex; width: 1.125rem; height: 1.125rem; align-items: center; justify-content: center; }
.tc-label .tc-icon-svg svg { width: 1.125rem; height: 1.125rem; }
.tc-row:has(.tc-check:not(:checked)) .tc-name,
.tc-row:has(.tc-check:not(:checked)) .tc-icon { opacity: 0.5; }
.tc-lock { font-size: 0.9375rem; color: var(--text-secondary); }
.tc-sp { flex: 1; }
.tc-move {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-md);
    background: none; color: var(--text-secondary); cursor: pointer;
}
.tc-move:hover { background: var(--bg-hover); color: var(--text-primary); }
.tc-move[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 8px 2px; }
.tc-note { font-size: 0.6875rem; color: var(--text-secondary); }
.tc-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* spoken, never drawn */
.tab-customize .tc-reset { font-size: 0.8125rem; }

@media (max-width: 767px) {
    /* A bottom sheet; the up/down buttons are the way to reorder (no drag) at the touch size. */
    .tab-customize { left: 0; right: 0 !important; top: auto !important; bottom: 0; width: auto; max-height: 80vh; border-radius: 14px 14px 0 0; }
    .tc-grip { display: none; }
    .tc-move { width: var(--control-touch-height); height: var(--control-touch-height); }
    .tc-label { min-height: var(--control-touch-height); }
}

/* ── Panels ────────────────────────────────────────────────── */

.agentic-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.agentic-panel.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Collapsible Panel ─────────────────────────────────────── */

.agentic-state.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border: none;
    padding: 0;
    overflow: hidden;
}

.agentic-state.collapsed .agentic-block,
.agentic-state.collapsed .agentic-panel,
.agentic-state.collapsed .agentic-state-tabs,
.agentic-state.collapsed .preview-pane,
.agentic-state.collapsed .preview-pane-resize-handle {
    display: none;
}

.agentic-collapse-btn {
    display: none;
}

.agentic-collapse-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.agentic-state.collapsed .agentic-collapse-btn svg {
    transform: rotate(180deg);
}

/* Reversible Team settings workspace: replace only the right pane while the
   selected agent's chat/terminal remains mounted on the left. */
.team-settings-workspace {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 18px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.team-settings-workspace > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.team-settings-workspace > header h2 { margin: 0 0 4px; font-size: var(--type-page-size); }
.team-settings-workspace > header p { margin: 0; color: var(--text-secondary); font-size: 0.75rem; }
.team-settings-workspace .working-mode-form { flex: 1; }
.team-view-workspace .availability-content { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; }
.team-view-workspace .availability-toolbar { flex-shrink: 0; }
.team-view-workspace .availability-agents { container-type: inline-size; }

/* Team view lives in a resizable pane, so row layout must respond to the
   pane's width rather than the browser viewport. Keep names readable and
   stack the reason/tasks when the pane cannot support three columns. */
.team-view-workspace .availability-agent { grid-template-columns: minmax(240px, 1fr) minmax(220px, 2fr) auto; }
.team-view-workspace .availability-agent-heading,
.team-view-workspace .availability-agent-heading > div { min-width: 0; }
.team-view-workspace .availability-agent-heading strong { display: block; overflow-wrap: break-word; word-break: normal; }
.team-view-workspace .availability-agent-heading small { overflow-wrap: break-word; word-break: normal; }
@container (max-width: 720px) {
    .team-view-workspace .availability-agent { grid-template-columns: minmax(0, 1fr) auto; }
    .team-view-workspace .availability-agent > p,
    .team-view-workspace .availability-agent > ul,
    .team-view-workspace .availability-agent > .btn { grid-column: 1 / -1; }
}
@container (max-width: 420px) {
    .team-view-workspace .availability-agent { grid-template-columns: 1fr; }
    .team-view-workspace .availability-agent-heading { align-items: flex-start; flex-direction: column; }
    .team-view-workspace .availability-agent-heading .availability-badge { align-self: flex-start; }
}

@media(max-width: 767px) {
    .team-settings-workspace { padding: 14px; }
    .team-settings-workspace > header h2 { font-size: var(--type-page-size); }
}

/* ── Event search bar ──────────────────────────────────────── */

/* The Activity panel's search bar (#4785): the shared list bar above the events;  */
.event-search-bar { padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.event-more { display: block; margin: 8px auto; min-height: 32px; }
@media (pointer: coarse) { .event-more { min-height: 44px; } }

/* ── Events Timeline ───────────────────────────────────────── */

.agentic-events-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.event-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
    text-align: center;
    padding: 20px 14px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin: 2px 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px solid rgba(48, 54, 61, 0.4);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.12);
}

.event-item.event-type-status {
    background: rgba(var(--accent-rgb), 0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
}

.event-item.event-type-goal {
    background: rgba(var(--fx-green-rgb), 0.06);
    border-color: rgba(var(--fx-green-rgb), 0.2);
}

.event-item.event-type-confidence {
    background: rgba(var(--fx-gold-rgb), 0.06);
    border-color: rgba(var(--fx-gold-rgb), 0.2);
}

.event-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    box-shadow: 0 2px 6px rgba(var(--black-rgb), 0.2);
}

/* ── Event Item Tooltips ───────────────────────────────────── */

.event-item[data-tooltip] {
    position: relative;
}

.event-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 10px;
    bottom: 100%;
    margin-bottom: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    max-width: 320px;
    word-break: break-word;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.3);
    pointer-events: none;
}

/* ── Event Icon ────────────────────────────────────────────── */

.event-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Icons';
    font-size: var(--icon-inline-size);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    border-radius: var(--radius-md);
}

.event-icon.tool-read   { color: var(--color-tool-read); background: rgba(var(--accent-rgb), 0.1); }
.event-icon.tool-write  { color: var(--color-tool-write); background: rgba(var(--fx-green-rgb), 0.1); }
.event-icon.tool-edit   { color: var(--color-tool-edit); background: rgba(var(--fx-amber-rgb), 0.1); }
.event-icon.tool-bash   { color: var(--color-tool-bash); background: rgba(var(--fx-lilac-rgb), 0.1); }
.event-icon.tool-grep,
.event-icon.tool-glob   { color: var(--color-tool-grep); background: rgba(121, 192, 255, 0.1); }
.event-icon.tool-web    { color: var(--color-tool-web); background: rgba(255, 166, 87, 0.1); }
.event-icon.tool-task   { color: var(--color-tool-task); background: rgba(var(--accent-rgb), 0.1); }
.event-icon.tool-agent  { color: var(--color-tool-agent); background: rgba(var(--fx-lilac-rgb), 0.1); }
.event-icon.tool-status { color: var(--color-tool-status); background: rgba(var(--accent-rgb), 0.15); }
.event-icon.tool-goal   { color: var(--color-tool-goal); background: rgba(var(--fx-green-rgb), 0.15); }
.event-icon.tool-stop   { color: var(--color-tool-stop); background: rgba(var(--fx-red-rgb), 0.1); }
.event-icon.tool-notification { color: var(--color-tool-edit); background: rgba(var(--fx-amber-rgb), 0.1); }
.event-icon.tool-confidence   { color: var(--color-tool-confidence); background: rgba(var(--fx-gold-rgb), 0.15); }
.event-icon.tool-pulse  { color: var(--color-tool-pulse); background: rgba(188, 140, 255, 0.15); }
.event-icon.tool-thinking { color: var(--color-tool-thinking); background: rgba(57, 197, 207, 0.12); }
.event-icon.tool-default { color: var(--color-tool-default); background: rgba(var(--fx-steel-rgb), 0.2); }

/* ── Activity Chart ────────────────────────────────────────── */

#agentic-panel-activity.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.activity-chart {
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    max-height: 124px;
    overflow: hidden;
}

/* Count / Time switch above the bars */
.activity-chart-mode {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    height: 18px;
    flex-shrink: 0;
}
.activity-chart-mode button {
    font-size: 0.625rem;
    line-height: 16px;
    padding: 0 8px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.activity-chart-mode button:hover {
    color: var(--text-primary);
}
.activity-chart-mode button.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--control-border);
}
.activity-chart-empty {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
    padding: 6px 0;
}

.activity-chart:empty {
    display: none;
}

.activity-chart-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 20px;
}

.activity-chart-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    width: 80px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-chart-bar-track {
    flex: 1;
    height: 14px;
    background: rgba(var(--fx-steel-rgb), 0.15);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.activity-chart-bar {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}

.activity-chart-count {
    font-size: 0.6875rem;
    color: var(--text-muted);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.activity-chart-count.is-time {
    width: 52px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
}

/* Bar colors */
.activity-chart-bar.tool-read   { background: rgba(var(--fx-green-rgb), 0.6); }
.activity-chart-bar.tool-write  { background: rgba(var(--fx-red-rgb), 0.6); }
.activity-chart-bar.tool-edit   { background: rgba(var(--fx-amber-rgb), 0.6); }
.activity-chart-bar.tool-bash   { background: rgba(var(--fx-lilac-rgb), 0.6); }
.activity-chart-bar.tool-grep   { background: rgba(121, 192, 255, 0.6); }
.activity-chart-bar.tool-web    { background: rgba(255, 166, 87, 0.6); }
.activity-chart-bar.tool-task   { background: rgba(var(--accent-rgb), 0.6); }
.activity-chart-bar.tool-agent  { background: rgba(var(--fx-lilac-rgb), 0.6); }
.activity-chart-bar.tool-status { background: rgba(var(--accent-rgb), 0.6); }
.activity-chart-bar.tool-goal   { background: rgba(var(--fx-green-rgb), 0.6); }
.activity-chart-bar.tool-confidence { background: rgba(var(--fx-gold-rgb), 0.6); }
.activity-chart-bar.tool-stop   { background: rgba(var(--fx-red-rgb), 0.6); }
.activity-chart-bar.tool-pulse  { background: rgba(188, 140, 255, 0.6); }
.activity-chart-bar.tool-thinking { background: rgba(57, 197, 207, 0.6); }
.activity-chart-bar.tool-default { background: rgba(var(--fx-steel-rgb), 0.4); }

.event-body {
    flex: 1;
    min-width: 0;
    overflow: hidden; /* long summaries never run under the duration/time */
}

.event-summary {
    display: block; /* ellipsis needs a block box; an inline span just overflows */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 0.75rem;
}

/* How long the activity took; amber once it is slow enough to matter (10s+) */
.event-duration {
    font-size: var(--fs-base);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 5px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.event-duration.slow {
    color: var(--warning);
}

.event-item.event-failed {
    border-color: rgba(var(--fx-red-rgb), 0.35);
}
.event-item.event-failed .event-summary {
    color: var(--error);
}

.event-time {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Tasks ─────────────────────────────────────────────────── */

.task-bar-count {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 6px;
}

.task-bar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.task-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
    text-align: center;
    padding: 20px 14px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: grab;
    transition: background 0.1s;
}

.task-item:hover {
    background: var(--bg-hover);
}

.task-item.dragging {
    opacity: 0.4;
}

.task-item.completed .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.task-item.in-progress .task-title {
    color: var(--accent);
}

.task-spinner {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: task-spin 0.8s linear infinite;
    display: inline-block;
}

.task-checkbox {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.task-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    border-radius: var(--radius-xs);
    padding: 1px 3px;
}

.task-title[contenteditable="true"] {
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    white-space: normal;
}

/* ── Board Tasks ──────────────────────────────────────────── */

.board-tasks-section {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    overflow-y: auto;
}

.board-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 6px 12px;
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.modal-error {
    color: var(--error);
    font-size: 0.75rem;
    padding: 6px 0;
}

.task-confirm-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Completion fields belong to the scrolling task body; keep the footer to a
   compact action bar so Complete is reachable on short screens. */
.task-completion-form {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.task-completion-form .task-confirm-inline { gap: 12px; }
.task-completion-form label { margin-bottom: 0; }
.task-completion-form textarea { resize: vertical; min-height: 72px; }
.task-completion-hint,
.task-completion-required { color: var(--text-secondary); font-size: 0.75rem; margin: 0; }
.task-completion-required { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-primary); }
.task-completion-required strong { color: var(--text-primary); }
.task-completion-required ul { margin: 6px 0; padding-left: 18px; }
.task-completion-required p { margin: 6px 0 0; }
.task-completion-evidence { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; }
.task-completion-evidence summary { cursor: pointer; color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; }
.task-completion-evidence[open] summary { margin-bottom: 10px; color: var(--text-primary); }
.task-completion-evidence label { margin-top: 10px; }
.task-completion-evidence label:first-of-type { margin-top: 0; }
.task-completion-form .modal-error { margin-top: 0; }
.task-completion-revision,
.task-edit-revision { color: var(--text-secondary); font-size: 0.75rem; margin: 0 0 10px; }
.task-completion-refresh { margin-top: 6px; }

.task-confirm-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.task-confirm-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-create-task {
    padding: 2px 8px;
    font-size: var(--fs-md);
    font-weight: 500;
    margin-left: auto;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.btn-create-task:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.board-task-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    container-type: inline-size;
}

/* The task id opens the task: a real button so the rows are reachable by keyboard. */
.board-task-open {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.board-task-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

/* A narrow panel (the sidebar) cannot fit every column, and the title used to be pushed
   off-screen behind a sideways scroll. There each row wraps: status, id, priority and agent
   on the first line, the full title on its own line below; Type, Cost and Created are hidden. */
@container (max-width: 789px) {
    .board-task-list .board-task-item { min-width: 0; flex-wrap: wrap; row-gap: 2px; }
    .board-task-list .board-task-item .board-task-type,
    .board-task-list .board-task-item .board-task-cost,
    .board-task-list .board-task-item .board-task-time { display: none; }
    .board-task-list .board-task-item .board-task-desc { order: 10; flex: 1 0 100%; min-width: 0; padding-left: 106px; box-sizing: border-box; }
    /* Two lines of the title, not one cut at the edge: with hundreds of tasks the title is how a row is told apart. */
    .board-task-list .board-task-item:not(.board-task-header) .board-task-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
    .board-task-list .board-task-header .board-task-desc { display: none; }
    /* The agent column takes what the first line has left instead of a fixed 110px: with the fixed width the first line needed 360px, and in a dock
       a little narrower than that Agent wrapped under Status, and under the Priority label in the header (#4716). */
    .board-task-list .board-task-item .board-task-assignee { flex: 1 1 0; width: auto; min-width: 0; }
}
/* A dock of 560px and up has room for Cost on the first line (status, id, priority, agent, cost: about 300px), so it is not dropped with Type and Created (#4877: it was cut out of a 680px dock). Narrower than that (the sidebar) the row keeps what #4716 gave it. */
@container (min-width: 560px) and (max-width: 789px) {
    .board-task-list .board-task-item .board-task-cost { display: block; order: 5; }
}

.board-task-item {
    display: flex;
    align-items: center;
    /* Fixed columns (676px: status 96, id 42, priority 58, type 50, agent 110, cost 60, created 100, and the 160px description) + 7 gaps (70px) + padding (24px).
       The wrapped layout above takes over below 790px (a container is a few px wider than the list it scrolls in), so the list does not scroll sideways with Cost and Created cut off in a 680px dock (#4877). A fixed floor, not fit-content:
       every row gets the same width, so backgrounds and borders line up and
       long descriptions still truncate instead of stretching their row. */
    min-width: 770px;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 6px 12px;
    font-size: var(--fs-md);
    line-height: 1.4;
    border-bottom: 1px solid var(--border-subtle);
}

.board-task-header {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: default;
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.board-task-sort {
    cursor: pointer;
    user-select: none;
}

.board-task-sort:hover {
    color: var(--text-primary);
}

.board-task-time {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 100px;
    text-align: right;
    margin-left: auto;
}

.board-task-status-col {
    width: 96px;
    flex-shrink: 0;
}

.board-task-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 96px;
    flex-shrink: 0;
}

/* Working and blocked details stay available on hover and keyboard focus
   without adding noisy red labels to every task row. */
.board-task-status-wrap[tabindex="0"] {
    cursor: help;
    border-radius: var(--radius-sm);
}

.board-task-status-wrap[tabindex="0"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.board-task-status-label {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
    /* The column is fixed width; never spill into the task id beside it. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-task-status-label b {
    color: var(--error);
    font-weight: 600;
}

.board-task-id {
    width: 42px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.board-task-item:last-child {
    border-bottom: none;
}

.board-task-item:hover {
    background: var(--hover-bg);
}

.board-task-item.completed {
    /* The row is dimmed cell by cell, not as a whole: its verification badge (#4564) is text that must reach 4.5:1, and a whole-row opacity of .55 cut it to about 2:1. */
    opacity: 1;
}
.board-task-item.completed > :not(.board-task-desc) { opacity: 0.55; }
.board-task-item.completed .board-task-desc { color: color-mix(in srgb, var(--text-primary) 55%, transparent); }

.board-task-item.failed {
    background: rgba(var(--fx-red-rgb), 0.06);
}

.board-task-item.cancelled {
    opacity: 0.7;
}

.board-task-item.blocked {
    opacity: 0.7;
}

.board-task-item.draft {
    opacity: 0.65;
}

.board-task-item.in-progress .board-task-desc {
    color: var(--accent);
}

.board-task-status-icon {
    font-size: var(--icon-inline-size);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.board-task-status-icon.completed { color: var(--success); }
.board-task-status-icon.pending { color: var(--text-muted); }
.board-task-status-icon.skipped { color: var(--text-muted); opacity: 0.6; }
.board-task-status-icon.cancelled { color: var(--warning); }
.board-task-status-icon.failed { color: var(--error); }
.board-task-status-icon.blocked { color: var(--warning); }
.board-task-status-icon.draft { color: var(--text-muted); opacity: 0.7; }

.board-task-priority {
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    flex-shrink: 0;
    width: 58px;
    text-align: center;
    letter-spacing: 0.3px;
}

.board-task-priority-critical { background: rgba(var(--error-rgb), 0.15); color: var(--error-text); }
.board-task-priority-high { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.board-task-priority-medium { background: rgba(var(--fx-grey-rgb), 0.1); color: var(--text-secondary); }
.board-task-priority-low { background: rgba(var(--fx-grey-rgb), 0.06); color: var(--text-muted); }
.board-task-priority-none { background: none; color: var(--text-muted); }

.board-task-type {
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Subagent rows ─────────────────────────────────────────
   Work a main agent delegated, shown among its tasks. A violet rail, tint
   and chip set them apart from board and agent tasks at a glance. */
.board-task-item.board-task-subagent {
    background: linear-gradient(90deg, rgba(var(--fx-violet-rgb), 0.10), rgba(var(--fx-violet-rgb), 0.02) 60%);
    box-shadow: inset 3px 0 0 var(--subagent-accent);
}

.board-task-item.board-task-subagent.in-progress .board-task-desc {
    color: var(--subagent-accent);
}

.board-task-type.board-task-type-subagent {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--subagent-accent);
    font-weight: 600;
}

.board-task-type-subagent .material-icons {
    font-size: var(--icon-inline-size);
}

.board-task-subagent-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 16px;
    vertical-align: 1px;
    color: var(--subagent-accent);
    background: rgba(var(--fx-violet-rgb), 0.15);
    border: 1px solid rgba(var(--fx-violet-rgb), 0.35);
}

/* How long an in-progress task has been claimed */
.board-task-claimed {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 16px;
    vertical-align: 1px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-variant-numeric: tabular-nums;
}
.board-task-claimed .material-icons {
    font-size: var(--icon-inline-size);
}
.task-detail-claimed-for {
    color: var(--text-muted);
}

/* Subagent detail modal */
.subagent-detail-chip {
    width: auto;
    overflow: visible;
    font-size: 0.6875rem;
}

.subagent-detail-fields {
    margin-bottom: 16px;
}

.subagent-detail-mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.6875rem;
}

.subagent-detail-text {
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-left: 2px solid var(--subagent-accent);
    padding-left: 10px;
}

/* Rendered markdown inside the prompt/result boxes. Compact, since the box is
   a scrolling pane inside a modal rather than a full page. */
.subagent-detail-text.subagent-detail-md {
    white-space: normal; /* markdown supplies its own structure */
    max-height: 420px;
}

.subagent-detail-md > :first-child { margin-top: 0; }
.subagent-detail-md > :last-child { margin-bottom: 0; }

.subagent-detail-md h1,
.subagent-detail-md h2,
.subagent-detail-md h3,
.subagent-detail-md h4 {
    margin: 14px 0 6px;
    line-height: 1.3;
    color: var(--text-primary);
}
.subagent-detail-md h1 { font-size: 1rem; }
.subagent-detail-md h2 { font-size: 0.9375rem; }
.subagent-detail-md h3 { font-size: 0.875rem; }
.subagent-detail-md h4 { font-size: 0.8125rem; }

.subagent-detail-md p { margin: 6px 0; }

.subagent-detail-md ul,
.subagent-detail-md ol {
    margin: 6px 0;
    padding-left: 22px;
}
.subagent-detail-md li { margin: 3px 0; }

.subagent-detail-md code {
    background: var(--bg-tertiary, rgba(var(--white-rgb), 0.06));
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.75rem;
}
.subagent-detail-md pre {
    background: var(--bg-tertiary, rgba(var(--white-rgb), 0.06));
    padding: 10px 12px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 8px 0;
}
.subagent-detail-md pre code {
    background: none;
    padding: 0;
    white-space: pre;
}

.subagent-detail-md blockquote {
    border-left: 3px solid var(--border, rgba(var(--white-rgb), 0.15));
    padding-left: 10px;
    margin: 6px 0;
    color: var(--text-muted);
}

.subagent-detail-md table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.75rem;
    display: block;      /* lets a wide table scroll instead of stretching the modal */
    overflow-x: auto;
    max-width: 100%;
}
.subagent-detail-md th,
.subagent-detail-md td {
    border: 1px solid var(--border, rgba(var(--white-rgb), 0.12));
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.subagent-detail-md th {
    background: var(--bg-tertiary, rgba(var(--white-rgb), 0.06));
    color: var(--text-primary);
    font-weight: 600;
}

.subagent-detail-md a { color: var(--subagent-accent); }
.subagent-detail-md hr {
    border: none;
    border-top: 1px solid var(--border, rgba(var(--white-rgb), 0.12));
    margin: 10px 0;
}

.subagent-detail-note {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-muted);
}

.board-task-assignee {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-task-desc {
    flex: 0 0 160px;
    /* The only flexible column. .board-task-item's min-width guarantees it at
       least 160px; without that it collapsed to zero at the default panel
       width and every task lost its title. */
    min-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-task-hide-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-md);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.board-task-hide-toggle input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* A finished task's verification (#4564), quietly: a small muted icon after the title for a task nothing independently confirmed; its words are the tooltip and the accessible name.
   The icon keeps 3:1 (the muted text colour), and the task detail has one plain muted line (below). */
.board-task-verify-mark {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--text-muted);
    vertical-align: middle;
    cursor: help;
    border-radius: var(--radius-xs);
}
.board-task-verify-mark .material-icons { font-size: 0.9375rem; }
.board-task-verify-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-detail-verification { margin: -4px 0 10px; font-size: var(--fs-md); color: var(--text-muted); }

/* ── Task Detail Modal ─────────────────────────────────────── */

.task-detail-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
}

.task-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.task-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.task-detail-meta-label {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-detail-status {
    font-size: var(--fs-base);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-detail-status-pending { background: rgba(var(--fx-grey-rgb), 0.15); color: var(--text-muted); }
.task-detail-status-inprogress { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.task-detail-status-completed { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.task-detail-status-cancelled { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.task-detail-outcome-failed { background: rgba(var(--error-rgb), 0.12); color: var(--error); padding: 3px 7px; border-radius: var(--radius-sm); font-size: var(--fs-base); }
.task-detail-failure-reason .task-detail-value { color: var(--error); }
.task-detail-status-blocked { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.task-detail-status-draft { background: rgba(var(--fx-grey-rgb), 0.12); color: var(--text-muted); }

.task-deps-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.task-dep-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}

.task-dep-status {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.task-dep-status-completed { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.task-dep-status-inprogress { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.task-dep-status-pending { background: rgba(var(--fx-grey-rgb), 0.15); color: var(--text-muted); }
.task-dep-status-cancelled { background: rgba(var(--error-rgb), 0.12); color: var(--error); }
.task-dep-status-blocked { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.task-dep-status-draft { background: rgba(var(--fx-grey-rgb), 0.12); color: var(--text-muted); }

.task-dep-link {
    color: var(--accent);
    text-decoration: none;
}

.task-dep-link:hover {
    text-decoration: underline;
}

/* ── Dependency Picker ─────────────────────────────────── */

.dep-picker {
    margin-bottom: 4px;
}

.dep-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.dep-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.dep-tag a {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1;
}

.dep-tag a:hover {
    color: var(--error);
}

.dep-picker-add-link {
    font-size: 0.75rem;
    color: var(--accent);
    cursor: pointer;
}

.dep-picker-add-link:hover {
    text-decoration: underline;
}
/* Tapped on a phone (Create task, #4500): at least 44px each way, as every control there */
@media (pointer: coarse) {
    .dep-picker-add-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

.dep-picker-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-top: 4px;
    background: var(--bg-primary, rgba(var(--black-rgb), 0.1));
}

.dep-picker-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.dep-picker-item:hover {
    background: var(--bg-hover);
}

.modal-content .dep-picker-item input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0;
    cursor: pointer;
}

.dep-picker-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 8px;
    text-align: center;
}

.modal-content label.create-task-draft-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    cursor: pointer;
    margin-top: 16px;
    flex-direction: row;
}

.modal-content .create-task-draft-toggle input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0;
    cursor: pointer;
}

.task-detail-section {
    margin-bottom: 16px;
}

.task-detail-revision { border-left: 2px solid var(--accent); padding-left: 10px; }
.task-amendment-history { margin-top: 8px; }
.task-amendment-history summary { cursor: pointer; color: var(--text-secondary); font-size: 0.75rem; }
.task-amendment-entry { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.75rem; line-height: 1.45; }
.task-amendment-entry div { margin-top: 4px; overflow-wrap: anywhere; }

.task-detail-body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    background: var(--bg-primary, rgba(var(--black-rgb), 0.15));
    padding: 8px 12px;
    border-radius: var(--radius-md);
    margin-top: 4px;
}

.task-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.task-detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-detail-field-wide {
    grid-column: 1 / -1;
}

.task-detail-label {
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.task-detail-value {
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.board-task-cost {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
    width: 60px;
    flex-shrink: 0;
    text-align: right;
}

.board-task-cost-live {
    color: var(--accent-color);
    font-style: italic;
}

.board-task-cost-warning {
    color: var(--error-color) !important;
    font-weight: 600;
}

.task-detail-cost-summary {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0 10px;
}

.task-detail-tokens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.task-detail-token-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.task-detail-token-label {
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.task-detail-token-value {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ── Changed Files Panel ───────────────────────────────────── */

.changed-files-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.files-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.files-search-input {
    flex: 1;
    padding: 5px 10px;
    font-size: var(--fs-md);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    outline: none;
}

.files-search-input::placeholder { color: var(--text-muted); }
.files-search-input:focus {
    border-color: var(--accent);
}

.starred-section-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    padding: 6px 12px 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    font-size: 0.875rem;
    line-height: 1;
    opacity: 0.5;
    color: var(--text-secondary);
    transition: opacity 0.15s;
}

.file-star-btn:hover, .file-star-btn:focus { opacity: 0.85; outline: none; }
.file-star-btn:focus-visible { opacity: 0.7; outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-xs); }
.file-star-btn.starred { opacity: 1; color: var(--warning); }

.refresh-files-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.375rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.refresh-files-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.refresh-files-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.refresh-files-btn.refreshing {
    animation: spin 1s linear infinite;
    display: inline-block;
}

.changed-files-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.diff-mode-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-size: 0.625rem;
    padding: 1px 4px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    margin-left: 4px;
    vertical-align: middle;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23888' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 14px;
}

.diff-mode-select:hover,
.diff-mode-select:focus {
    color: var(--text-primary);
    border-color: var(--accent);
}

.changed-files-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

#files-search-results,
#starred-files-list {
    flex: none;
    max-height: 40%;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
}

.file-empty {
    text-align: center;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: var(--fs-md);
    border-bottom: 1px solid transparent;
    transition: background 0.1s;
    cursor: pointer;
}

.file-item:hover {
    background: var(--bg-hover);
}

/* ── Inline Preview Pane ─────────────────────────────────── */

.inline-preview-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.inline-preview-mode-btn,
.inline-preview-save {
    padding: 2px 6px;
    font-size: var(--fs-md);
    font-weight: 600;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.15s;
    min-height: var(--control-compact-height);
    min-width: var(--control-compact-height);
}

.inline-preview-mode-btn .material-icons {
    font-size: 1rem;
}

.inline-preview-mode-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.inline-preview-mode-btn.active {
    color: var(--accent);
    border-color: var(--accent);
}

.inline-preview-save {
    background: var(--accent-dim);
    color: var(--text-on-accent);
    border-color: var(--accent-dim);
}

.inline-preview-save:hover {
    background: var(--accent);
    color: var(--text-on-accent);
}

.inline-preview-loading,
.inline-preview-error {
    text-align: center;
    padding: 30px 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.inline-preview-error {
    color: var(--error);
}

/* Images in the file preview and inline diffs (one pane, or Before/After) */
.image-panes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}
.image-pane {
    margin: 0;
    min-width: 0;
}
.image-pane-label {
    margin-bottom: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.image-pane-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Checkerboard so transparent pixels read as transparent */
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%),
        linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.image-pane-frame img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
.image-pane-missing {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.image-pane-meta {
    margin-top: 4px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.image-panes-compare .image-pane-frame img {
    max-height: 40vh;
}

/* Pan/zoom: the frame clips, the image is transformed about its centre. */
.image-panes { position: relative; }
.image-pane-zoomable { overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.image-pane-zoomable.panning { cursor: grabbing; }
.image-pane-zoomable img { transform-origin: center; will-change: transform; }
.image-zoom-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    opacity: 0.85;
}
.image-zoom-controls button {
    min-width: 24px;
    padding: 2px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}
.image-zoom-controls button:hover { color: var(--text-primary); background: var(--bg-hover); }
.image-zoom-level { min-width: 40px; text-align: center; font: 0.6875rem var(--font-mono); color: var(--text-muted); }

/* In the preview pane the image fills the available space; comparisons sit side by side. */
.preview-body .image-panes { height: 100%; box-sizing: border-box; }
.preview-body .image-panes-compare { flex-direction: row; }
.preview-body .image-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.preview-body .image-pane-frame { flex: 1; min-height: 0; }
.preview-body .image-pane-frame img { max-height: 100%; }

/* Native audio/video controls for playable file previews. */
.media-panes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}
.media-pane {
    margin: 0;
    min-width: 0;
}
.media-pane-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
}
.media-pane-frame audio {
    width: min(100%, 560px);
}
.media-pane-frame video {
    display: block;
    max-width: 100%;
    max-height: 70vh;
}
.media-panes-compare .media-pane-frame video {
    max-height: 40vh;
}
.artifact-preview-media {
    display: block;
    max-width: calc(100% - 24px);
    max-height: 70vh;
    margin: 12px auto;
}

/* CodeMirror editor container */
.inline-preview-cm {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.inline-preview-cm .cm-editor {
    height: 100%;
}

.inline-preview-cm .cm-scroller {
    overflow: auto;
}

/* Make merge changes readable without CodeMirror's default underline effect.
   Used by the preview pane's Diff mode. */
.inline-preview-cm .cm-merge-b .cm-changedLine,
.inline-preview-cm .cm-inlineChangedLine {
    background-color: rgba(var(--fx-green-rgb), 0.24) !important;
}

.inline-preview-cm .cm-deletedChunk {
    background-color: rgba(var(--fx-red-rgb), 0.24) !important;
}

.inline-preview-cm .cm-changedText,
.inline-preview-cm .cm-insertedLine {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    text-decoration: none !important;
}

.inline-preview-cm .cm-deletedChunk .cm-deletedText,
.inline-preview-cm .cm-merge-b .cm-deletedText,
.inline-preview-cm .cm-deletedLine,
.inline-preview-cm .cm-deletedLine del{
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    text-decoration: none !important;
}

/* Fallback textarea when CodeMirror is unavailable */
.inline-preview-fallback-editor {
    width: 100%;
    height: 100%;
    padding: 8px 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: none;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.file-action-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.file-item:hover .file-action-btns,
.file-item:focus-within .file-action-btns {
    opacity: 1;
}

.file-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    line-height: 1;
}

.file-action-btn:hover {
    color: var(--accent);
}

.file-action-btn .material-icons {
    font-size: var(--icon-size);
}

.file-type-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }

/* Git status now shows on the name (the type icon replaced the status badge) */
.file-added .file-name { color: var(--success); }
.file-deleted .file-name { color: var(--error); text-decoration: line-through; }
.file-renamed .file-name { color: var(--accent); }

.file-agents { display: block; font-size: var(--fs-base); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item.file-agent-only { opacity: 0.7; }

.file-path-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.file-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-dir {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-stats {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    font-size: var(--fs-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.file-adds {
    color: var(--success);
    background: rgba(var(--fx-green-rgb), 0.12);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
}

.file-dels {
    color: var(--error);
    background: rgba(var(--fx-red-rgb), 0.12);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
}

/* ── Notes Panel (Markdown) ────────────────────────────────── */

.note-md-rendered {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    cursor: pointer;
}

.note-md-rendered:hover {
    background: var(--bg-hover);
}

.note-md-placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
    text-align: center;
    padding: 20px 0;
}

.note-md-editor {
    flex: 1;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: none;
    border-top: 2px solid var(--accent);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    resize: none;
    outline: none;
}

/* ── Custom Views ─────────────────────────────────────────── */

.agentic-tab-add {
    opacity: 0.5;
    border: 1px dashed var(--control-border);
    border-radius: var(--radius-sm);
}

.agentic-tab-add:hover {
    opacity: 1;
}

.agentic-tab-add .material-icons {
    font-size: 1rem;
}

.custom-view-panel {
    padding: 0;
    overflow: hidden;
}

.custom-view-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-primary);
}

.custom-view-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 4px;
    min-height: 300px;
    height: 50vh;
}

.custom-view-editor .cm-editor {
    height: 100%;
}

.custom-view-editor .cm-scroller {
    overflow: auto;
}

.custom-view-help {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.custom-view-help summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
}

.custom-view-help ul {
    padding-left: 20px;
    margin: 4px 0;
}

.custom-view-help code {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
}

/* Context menu for custom view tabs */
.view-context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
    z-index: 200;
    box-shadow: var(--shadow-md);
}

.view-context-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.view-context-menu button:hover {
    background: var(--bg-hover);
}

/* ── Inline Diffs in the Files Tab ─────────────────────────── */

.changed-files-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.changed-files-count { white-space: nowrap; }

/* Expand-all sits with the browse and refresh buttons, and marks itself when
   any diff is open. */
.refresh-files-btn.active { color: var(--accent); }

/* Tasks panel: empty state for a live agent (the + Task button stays reachable) */
.board-task-empty {
    padding: 14px 12px;
    color: var(--text-muted);
    font-size: 0.7812rem;
    text-align: center;
}

/* "Load more done tasks": older done tasks come a page at a time (#3269). */
.board-task-more {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}
.board-task-load-more {
    font-size: 0.75rem;
}

/* Create Task dialog: board-only fields and the solo-agent send option */
#create-task-board-fields[hidden],
#create-task-send-row[hidden] {
    display: none;
}
/* Title and close button on one line */
#create-task-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#create-task-modal .modal-header h3 {
    margin: 0;
    min-width: 0;
}

/* Generated agent panels */
#agentic-panel-agent-ui { overflow:auto; min-width:0; padding:12px; }
.agent-ui-card { margin-bottom:16px; min-width:0; flex-shrink:0; }
.agent-ui-card:not([hidden]) { display:flex; flex-direction:column; flex:1; min-height:360px; margin-bottom:0; }
.agent-ui-card:not([hidden]) iframe { flex:1; min-height:260px; }
.agent-ui-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.agent-ui-card strong { overflow-wrap:anywhere; min-width:0; }
.agent-ui-event-count { display:inline-block; margin-left:6px; padding:2px 6px; color:var(--text-secondary); background:var(--bg-secondary); border:1px solid var(--border); border-radius:999px; font-size:0.6875rem; font-weight:400; white-space:nowrap; }
.agent-ui-authored { display:inline-block; margin-left:6px; padding:2px 6px; color:var(--warning, #b45309); border:1px solid currentColor; border-radius:999px; font-size:0.6875rem; font-weight:400; white-space:nowrap; }
.agent-ui-card button, #agent-ui-expanded > button { padding:6px 10px; cursor:pointer; font:inherit; font-size: var(--fs-md); color:var(--text-primary); background:var(--bg-secondary); border:1px solid var(--control-border); border-radius: var(--radius-md); flex-shrink:0;
    min-height: var(--control-compact-height);
}
.agent-ui-card button:hover, #agent-ui-expanded > button:hover { background:var(--bg-hover); }
.agent-ui-card button:focus-visible, #agent-ui-expanded > button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.agent-ui-card iframe { display:block; width:100%; height:360px; border:0; background:var(--bg-secondary); }
.agent-ui-status, .agent-ui-notice { font-size:0.75rem; color:var(--text-secondary); overflow-wrap:anywhere; }
#agent-ui-expanded { position:fixed; inset:0; margin:auto; width:min(1100px,calc(100vw - 32px)); height:85dvh; padding:12px; background:var(--bg-primary); color:var(--text-primary); }
#agent-ui-expanded[open] { display:flex; flex-direction:column; gap:8px; }
#agent-ui-expanded iframe { flex:1; min-height:0; width:100%; border:0; }
#agent-ui-expanded::backdrop { background:#0009; }
#agent-ui-expanded .agent-ui-expanded-bar { display:flex; align-items:center; gap:8px; }
#agent-ui-expanded .agent-ui-expanded-bar h2 { flex:1; min-width:0; margin:0; font-size: var(--fs-md); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#agent-ui-expanded .agent-ui-expanded-close { width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer; color:var(--text-primary); background:var(--bg-secondary); border:1px solid var(--control-border); border-radius: var(--radius-md); }
#agent-ui-expanded .agent-ui-expanded-close:hover { background:var(--bg-hover); }
#agent-ui-expanded .agent-ui-expanded-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.agent-ui-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.agent-ui-actions button { width:32px; height:32px; padding:4px; display:inline-flex; align-items:center; justify-content:center; }
.agent-ui-actions button .material-icons { font-size:1.125rem; }
.agent-ui-actions .agent-ui-dismiss { font-size:1.25rem; line-height:1; min-width:32px; min-height:32px; padding:4px 8px; }
.agent-ui-actions .agent-ui-delete { color:var(--error); }
.agent-ui-actions .agent-ui-delete:hover { color:var(--error); opacity:0.8; background:rgba(var(--error-rgb),.2); }
.availability-agent > .btn { margin-top: 8px; align-self: flex-start; }
.availability-stop-reminder { color: var(--text-secondary); }
.availability-health { margin-top:16px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-lg); }
.availability-health h3 { margin:0 0 6px; font-size:0.875rem; }
.availability-health ul { margin:0; padding-left:20px; color:var(--text-secondary); font-size:0.8125rem; }
.agent-reminder-icon { margin-left: 6px; color: var(--warning); font-size: 0.75rem; line-height: 1; }
.agent-ui-home { flex:1; min-height:0; overflow:auto; }
.agent-ui-home h3 { margin:8px 0 12px; font-size: var(--type-page-size); }
.agent-ui-help { max-width:620px; margin:0 0 14px; color:var(--text-secondary); font-size:0.875rem; line-height:1.5; }
.agent-ui-notice { font-size:0.875rem; }
.agent-ui-guide { max-width:760px; margin:20px 0; padding:16px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); }
.agent-ui-guide h4 { margin:0 0 8px; font-size:0.875rem; }
.agent-ui-prompt { display:block; width:100%; min-height:142px; box-sizing:border-box; resize:vertical; padding:10px; color:var(--text-primary); background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md); font:0.75rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.agent-ui-send { margin-top:8px; padding:7px 11px; color: var(--text-on-accent); background:var(--accent); border:0; border-radius: var(--radius-md); font:inherit; font-size: var(--fs-md); cursor:pointer;
    min-height: var(--control-compact-height);
}
.agent-ui-send:hover { filter:brightness(1.1); }
.agent-ui-home-row { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; margin:6px 0; padding:12px; color:var(--text-primary); background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); }
.agent-ui-home-row span { color:var(--text-secondary); font-size:0.75rem; white-space: normal;
    overflow-wrap: anywhere;
}
.agent-ui-home-row:hover { border-color:var(--accent); }
.inline-preview-artifact-fallback { display:flex; flex-direction:column; gap:8px; max-width:560px; margin:32px auto; padding:18px; color:var(--text-primary); background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); overflow-wrap:anywhere; }
.inline-preview-artifact-fallback span { color:var(--text-secondary); font-size:0.75rem; }
.inline-preview-artifact-fallback p { margin:0; color:var(--text-secondary); }
.inline-preview-artifact-fallback a { align-self:flex-start; color:var(--accent); }
.artifact-manifest-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:760px; margin:0 auto 14px; padding:10px 12px; color:var(--text-secondary); border-bottom:1px solid var(--border); }
.artifact-manifest-actions { display:flex; flex-wrap:wrap; gap:6px; }
.artifact-manifest-list { list-style:none; max-width:760px; margin:0 auto; padding:0; }
.artifact-manifest-entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,auto); gap:4px 12px; align-items:center; padding:10px 12px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.artifact-manifest-main { display:flex; min-width:0; align-items:center; gap:12px; }
.artifact-manifest-open { display:flex; min-width:0; align-items:center; gap:10px; padding:0; border:0; background:none; color:var(--accent); text-align:left; cursor:pointer; font:inherit; }
.artifact-manifest-download { color:var(--accent); font-size:0.75rem; white-space:nowrap; }
.artifact-manifest-open:hover .artifact-manifest-name, .artifact-manifest-open:focus-visible .artifact-manifest-name { text-decoration:underline; }
.artifact-manifest-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artifact-manifest-type { color:var(--text-secondary); font-size:0.75rem; white-space:nowrap; }
.artifact-manifest-uri { grid-column:1 / -1; overflow:hidden; color:var(--text-secondary); font-size:0.6875rem; text-overflow:ellipsis; white-space:nowrap; }
.artifact-manifest-back { margin:0 0 12px; padding:6px 10px; border:1px solid var(--border); border-radius:5px; background:var(--bg-secondary); color:var(--text-primary); cursor:pointer; }
@media (max-width: 600px) { .artifact-manifest-entry { grid-template-columns:minmax(0,1fr); gap:5px; } .artifact-manifest-type { justify-self:start; } }

/* Optional team artifact source within the Files viewer. */
/* Text tabs share the workspace's theme, type and spacing tokens. */
.team-artifacts-action { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; box-sizing: border-box; padding: var(--space-xs) var(--space-md); font: 500 var(--fs-md)/1.4 var(--font-sans); color: var(--text-primary); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; }
.team-artifacts-action:hover { background: var(--bg-hover); }
.team-artifacts-action:focus-visible, .team-artifact-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-artifacts-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.team-artifacts-view { overflow-y: auto; container-type: inline-size; }
.team-artifacts-heading, .explorer-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 0.75rem; overflow-wrap: anywhere; }
.team-artifacts-status { padding: 8px 12px; font-size: 0.75rem; color: var(--text-secondary); }

/* The Team Artifacts search, filter menu, sort and chips (#4573). The search is on its own row; the filters are a menu; at a narrow width (a phone, 200% text) everything wraps. */
.list-bar-bar { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; position: relative; }

/* The agent list's bar (agent_list_bar.js, #4744): under the list's search box, in the sidebar and on the phone's Agents page; touch targets are 44px there. */
.agent-list-bar { flex: none; }
.agent-list-bar .list-bar-nosearch { padding-top: 0; }
@media (max-width: 767px), (pointer: coarse) {
    .agent-list-bar .list-bar-filter-btn, .agent-list-bar .list-bar-select, .agent-list-bar .list-bar-chip, .agent-list-bar .list-bar-clear-all, .agent-list-bar .list-bar-menu input, .agent-list-bar .list-bar-menu select { min-height: var(--control-touch-height, 44px); }
}
.list-bar-lead, .list-bar-tail { display: contents; }
/* The artifact lists' one row (#5315): title, the search box taking what is left, the count and filter icons, then Refresh and Copy at the right. A narrow list gives the title a line of its own. */
.list-bar-has-header { padding-top: 6px; }
.list-bar-has-header .team-artifacts-title { flex: 0 1 auto; max-width: 40%; font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-bar-has-header .team-artifacts-action { flex: none; }
@container (max-width: 560px) { .list-bar-has-header .team-artifacts-title { flex: 1 1 100%; max-width: none; } .list-bar-has-header .list-bar-count { display: none; } } /* the status line under the bar says the count */
/* A very narrow list (320 px): five icons and a search box no longer fit on a line, and one would drop alone. Refresh and Copy go up to the title's line, at the right; the search and the two filter icons take the line below. */
@container (max-width: 380px) {
    .list-bar-has-header .team-artifacts-title { flex: 1 1 0; min-width: 0; max-width: none; }
    .list-bar-has-header .list-bar-lead::after { content: ''; flex: 0 0 100%; order: 1; height: 0; }
    .list-bar-has-header .list-bar-search-wrap, .list-bar-has-header .list-bar-toggle, .list-bar-has-header .list-bar-expand-all { order: 2; }
}
.list-bar-search-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-bar-search-wrap { position: relative; flex: 1 1 12em; min-width: 0; }
.list-bar-search { width: 100%; box-sizing: border-box; padding: 6px 28px 6px 8px; font-size: 0.8125rem; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--control-border); border-radius: var(--radius-md); }
.list-bar-search::-webkit-search-cancel-button { display: none; }
.list-bar-clear-q { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--text-secondary); font-size: 1.125rem; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); }
.list-bar-count { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.list-bar-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.list-bar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-bar-filter-btn, .list-bar-clear-all, .list-bar-select, .list-bar-by, .list-bar-field input[type="date"] { font-size: 0.8125rem; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 4px 8px; }
.list-bar-filter-btn, .list-bar-clear-all { cursor: pointer; }
.list-bar-filter-btn[aria-expanded="true"] { background: var(--bg-hover); }
.list-bar-sort, .list-bar-field { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }
.list-bar-sort { margin-left: auto; }
.list-bar-menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.list-bar-menu[hidden] { display: none; }
/* Each field is a line of its own; the tool-group boxes of the events panels (list-bar-group, #4798) go two to a line. */
.list-bar-menu > * { flex: 0 0 100%; box-sizing: border-box; }
.list-bar-menu > .list-bar-group { flex: 0 0 calc(50% - 4px); min-width: 0; }
.list-bar-menu .list-bar-field { justify-content: space-between; flex-wrap: wrap; }
.list-bar-menu .list-bar-field > :last-child { min-width: 0; flex: 1 1 8em; max-width: 100%; box-sizing: border-box; } /* wraps under its label when the text is large or the panel narrow */
.list-bar-kept { justify-content: flex-start; cursor: pointer; }
.list-bar-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.list-bar-chips[hidden] { display: none; }
.list-bar-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; font-size: 0.75rem; color: var(--text-primary); background: var(--bg-hover); border: 1px solid var(--control-border); border-radius: 999px; cursor: pointer; }
.list-bar-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-bar-chip-x { color: var(--text-primary); } /* 4.4:1 in the light theme with the secondary text colour on the chip's fill (#4851) */
.list-bar-chip-all { background: none; }
.list-bar-search:focus-visible, .list-bar-clear-q:focus-visible, .list-bar-filter-btn:focus-visible, .list-bar-clear-all:focus-visible, .list-bar-select:focus-visible, .list-bar-by:focus-visible, .list-bar-chip:focus-visible, .list-bar-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.team-artifacts-scroll { flex-shrink: 0; max-width: 100%; }
/* Fits its panel: Size and Task are in each row's Details (#3044). */
.team-artifacts-list { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--text-primary); font-size: var(--fs-base); line-height: 1.5; }
.team-artifacts-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.team-artifacts-list :is(th, td) { padding: var(--space-md) var(--space-lg); vertical-align: top; text-align: left; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.team-artifacts-list th { color: var(--text-secondary); font-weight: 500; }
.team-artifact-col-type { width: 88px; }
.team-artifact-col-created { width: 170px; }
.team-artifact-col-actions { width: calc(212px + 2 * var(--space-lg)); } /* six 32 px icon buttons and their gaps: Details, Preview, Download, Copy link, Keep, Delete (#4469, #5283) */
/* Long names wrap to two lines, then ellipsize; the full name is the tooltip. */
.team-artifact-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 0; background: none; border: 0; color: var(--text-primary); font: 500 var(--fs-md)/1.4 var(--font-sans); text-align: left; overflow-wrap: anywhere; }
button.team-artifact-name { cursor: pointer; }
.team-artifact-missing { font-size: var(--fs-base); color: var(--text-secondary); }
/* Where a row came from: a file this team sent, one from another computer, or a link Coral could not verify (#4396). Words, not colour alone. */
.team-artifact-badge { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; margin-top: var(--space-xs); padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: 0.75rem; color: var(--text-secondary); font-size: var(--fs-base); line-height: 1.4; overflow-wrap: anywhere; }
.team-artifact-badge-unverified { border-color: var(--warning); color: var(--text-primary); }
.team-artifact-details { margin-top: var(--space-xs); color: var(--text-secondary); font-size: var(--fs-base); }
.team-artifact-details[hidden] { display: none; }
.team-artifact-info-btn[aria-expanded="true"] { background: var(--bg-hover); }
.team-artifact-details dl { margin: var(--space-md) 0 0; }
.team-artifact-details dt { font-weight: 600; margin-top: var(--space-md); }
.team-artifact-details dd { margin: 0; overflow-wrap: anywhere; }
.team-artifact-details dd + dd { margin-top: var(--space-xs); } /* several senders of one file are one line each, with a gap between them (#4460) */
/* A narrow panel shows Name and Actions; Type and Created are in Details. */
@container (max-width: 520px) {
    .team-artifacts-list :is(.team-artifact-col-type, .team-artifact-col-created) { display: none; }
    .team-artifacts-list :is(th, td) { padding-left: var(--space-md); padding-right: var(--space-md); }
}
.team-artifacts-more { align-self: center; margin: 12px; }
.team-artifacts-action:disabled, .team-artifacts-action[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.team-artifacts-status[data-state="error"] { color: var(--danger); } /* the same red as Settings' error lines */
/* A live region for the outcome of a delete: always in the page, empty until there is something to say, so screen readers announce it (a region that appears already filled is often missed). */
.team-artifacts-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The icons sit in one row so rows stay short. */
.team-artifact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); flex-shrink: 0; }
.team-artifact-icon-btn { padding: var(--space-xs); min-width: 32px; min-height: 32px; border-radius: var(--radius-md); }
.artifact-linked-preview { display: flex; flex-direction: column; height: 100%; min-height: 320px; }
.artifact-linked-notice, .artifact-linked-status { margin: 0; padding: 10px 12px; font-size: 0.75rem; color: var(--text-secondary); }
.artifact-linked-notice { border-bottom: 1px solid var(--border); }
.artifact-linked-preview iframe { flex: 1; min-height: 240px; width: 100%; border: 0; background: #fff; }
@media (max-width: 767px) {
    .team-artifacts-action { box-sizing: border-box; padding-top: var(--space-lg); }
}
/* On a touch screen every control of the table is a 44 px target, and the five icons wrap into two rows of three and two inside their column (#4469). */
@media (pointer: coarse) {
    .team-artifact-icon-btn { min-width: 44px; min-height: 44px; }
    .team-artifact-col-actions { width: calc(3 * 44px + 2 * var(--space-xs) + 2 * var(--space-lg)); }
    .team-artifacts-help { min-width: 44px; min-height: 44px; }
    button.team-artifact-name { min-height: 44px; align-content: center; }
}

/* Human-readable JSON artifacts, without changing their source/download. */
.artifact-report { padding: 0 16px 20px; color: var(--text-primary); font-size: 0.8125rem; line-height: 1.6; min-width: 0; }
.artifact-report-controls { display: flex; gap: 6px; padding: 12px 0; position: sticky; top: 0; background: var(--bg-primary); z-index: 1; }
.artifact-report-controls [aria-pressed="true"] { border-color: var(--accent); color: var(--text-primary); }
.artifact-report-title { font-size: var(--type-page-size); margin: 10px 0 4px; }
.artifact-report-outcome { margin: 0 0 18px; color: var(--text-secondary); }
.artifact-report-section { margin: 16px 0; }
.artifact-report-section h2 { font-size: 0.875rem; margin: 0 0 6px; }
.artifact-report-value { white-space: pre-wrap; }
.artifact-report-list { margin: 4px 0; padding-left: 20px; }
.artifact-report-list > li { margin: 7px 0; }
.artifact-report-fields { margin: 4px 0; padding-left: 12px; border-left: 2px solid var(--border); }
.artifact-report-fields dt { font-weight: 600; margin-top: 8px; }
.artifact-report-fields dd { margin: 2px 0 8px; }
.artifact-report-raw { margin: 8px 0; white-space: pre-wrap; font-size: 0.75rem; line-height: 1.5; }
.artifact-report :is(h1, h2, p, span, li, dt, dd, pre) { overflow-wrap: anywhere; word-break: break-word; }
.artifact-report [hidden] { display: none; }
@media (max-width: 767px) {
    .artifact-report { padding: 0 12px 16px; }
    .artifact-report-controls { flex-wrap: wrap; }
}

/* Four lazy viewer sources and the selected agent's directory tree. */
.file-explorer-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.file-explorer-view[hidden] { display: none; }
.explorer-root { min-width: 0; overflow-wrap: anywhere; }
.explorer-item { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 5px 10px; color: var(--text-primary); background: transparent; border: 0; text-align: left; font: inherit; font-size: var(--fs-md); cursor: pointer; }
.explorer-item:hover, .explorer-item:focus { background: var(--bg-tertiary); }
.explorer-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.explorer-chevron { flex: 0 0 12px; color: var(--text-secondary); }
.explorer-file-icon { flex: 0 0 16px; }
.team-artifact-name .explorer-file-icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.explorer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-actions { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.explorer-item:hover .explorer-actions, .explorer-item:focus-within .explorer-actions { opacity: 1; }
.explorer-action-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; line-height: 1; border-radius: var(--radius-sm); }
.explorer-action-btn:hover { color: var(--accent); }
.explorer-status { padding: 6px 12px; color: var(--text-secondary); font-size: 0.75rem; }
.explorer-more { margin: 6px 12px; }
.agent-ui-request label { display:block; font-size: var(--fs-xl); font-weight:600; margin-bottom:8px; }
.agent-ui-request .agent-ui-prompt { font:inherit; font-size:0.875rem; line-height:1.5; min-height:110px; }
.agent-ui-request-status { font-size:0.8125rem; line-height:1.5; overflow-wrap:anywhere; margin:10px 0 0; }
.agent-ui-request-status:empty { display:none; }
.agent-ui-send:disabled { opacity:.55; cursor:default; }
.agent-ui-request :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Task actions stay in their footer and remain reachable on narrow dialogs. */
#task-detail-modal .modal-actions { flex-wrap: wrap; }

/* Files tab header: title line with the refresh button at the right */
#agentic-panel-files .changed-files-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* ── Team context ──────────────────────────────────────────── */

/* Sidebar tabs are scoped: agent tabs belong to a selected agent, team tabs to a selected team. */
.agentic-tab[data-scope="team"] { display: none; }
.agentic-state.team-context .agentic-tab[data-scope="team"] { display: flex; }
.agentic-state.team-context .agentic-tab[data-scope="agent"] { display: none !important; }
.agentic-state.team-context #agentic-tab-board { display: none !important; }

/* The team's group chat covers the center column; the agent's chat stays mounted underneath. */
.team-center-view {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}
.team-center-view[hidden] { display: none; }
/* The board chat panel is moved in here while a team is selected. */
.team-center-view > #agentic-panel-board { display: flex; flex: 1; min-height: 0; height: auto; }
.team-center-close {
    position: absolute;
    top: 5px;
    right: 8px;
    z-index: 2;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 7px;
}
.team-center-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.team-center-view .board-chat-header { padding-right: 40px; }

#agentic-panel-team-view > .team-settings-workspace { overflow: hidden; padding: 14px; }

/* Team settings as a sidebar panel rather than a full-pane workspace */
#agentic-panel-team-settings > .team-settings-workspace { overflow: auto; padding: 14px; }

/* The open-team button sits beside the group kebab (same look as the folder copy button).
   It is the way into a team's views, so it is always shown (muted) and reachable by keyboard,
   not revealed on hover; it turns accent while that team is selected. */
.team-open-btn { display: inline-flex; align-items: center; }
.team-open-btn.is-selected { color: var(--accent); }
/* The team's health check (#4962): shown only while the check is on (#5119; off has no icon), in the accent colour, so it is there at a glance without a ring or a fill (the tooltip and the name say on). */
.team-health-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); }
/* On is the accent icon and nothing around it (#5119: the pill and its ring from #4962 round 2 were louder than the context and Waiting badges on every team header): a heavier stroke and the accent colour tell it from the plain muted outline of off, and the name and tooltip say on or off. */
.team-health-btn.is-on { color: var(--accent); }
.team-health-btn.is-on svg { stroke-width: 2.2; }
.team-health-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text-primary); }
.team-open-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text-primary); }
.team-artifacts-help .material-icons { font-size: 1.125rem; }

/* A custom view written by an automated caller waits for the user's click (custom_views.js). */
.custom-view-gate { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.custom-view-gate p { margin: 0; color: var(--text-secondary); font-size: 0.8125rem; }
.custom-view-gate-source { max-height: 240px; overflow: auto; margin: 0; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.6875rem; white-space: pre-wrap; word-break: break-all; }

/* Auto-accept events in Activity (#3182). */
.event-icon.tool-auto-accept { color: var(--warning); background: rgba(var(--warning-rgb), 0.12); }
.event-icon.tool-auto-accept-paused { color: var(--error); background: rgba(var(--error-rgb), 0.12); }
.event-icon.tool-auto-accept-skipped { color: var(--text-secondary); background: rgba(var(--fx-grey-rgb), 0.12); }

/* Rename board in Team settings (#3536) */
.board-rename { margin-top: 6px; }
.board-rename-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.board-rename-form[hidden] { display: none; }
.board-rename-form label { font-size: 0.75rem; color: var(--text-secondary); }
.board-rename-form input { min-width: 0; flex: 1 1 140px; }
.board-rename-error { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--error); }
.board-rename-error:empty { display: none; }
.board-rename-note { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--text-secondary); }

/* A launch naming a board that exists: join it or start another (#3536) */
.board-choice-modal .modal-content { width: min(480px, calc(100vw - 32px)); }
.board-choice-text { margin: 8px 0 12px; font-size: 0.8125rem; color: var(--text-secondary); }
.board-choice-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.board-choice-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.board-choice-label { font-weight: 600; overflow-wrap: anywhere; }
.board-choice-detail { flex: 1; font-size: 0.75rem; color: var(--text-secondary); }

/* #4344: the Files tab's title row (count, +/- stats, the diff select) wraps beside the refresh button at large text instead of pushing it off the screen. */
.changed-files-header > .changed-files-title { flex: 1 1 0; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.diff-mode-select { max-width: 100%; }

/* ── The right sidebar on every page (#4539) ─────────────────
   Each kind of page shows the tabs that list it in data-pages; the agent page keeps today's set (its data-scope rules above). */
#agentic-state[data-page="agent"] #agentic-tab-subscribers,
#agentic-state[data-page="board"] .agentic-tab[data-tab]:not([data-pages~="board"]),
#agentic-state[data-page="chats"] .agentic-tab[data-tab]:not([data-pages~="chats"]),
#agentic-state[data-page="other"] .agentic-tab[data-tab]:not([data-pages~="other"]) {
    display: none !important;
}
#agentic-state[data-page="board"] .agentic-tab[data-pages~="board"],
#agentic-state[data-page="chats"] .agentic-tab[data-pages~="chats"],
#agentic-state[data-page="other"] .agentic-tab[data-pages~="other"] {
    display: flex !important;
}
/* Customizing the tabs is the agent page's. */
#agentic-state:not([data-page="agent"]) #agentic-tab-customize { display: none !important; }
/* The sidebar is the whole height of the row; its tab strip and panels scroll inside it. */
.main-row > .agentic-state { align-self: stretch; border-left: 1px solid var(--border); }
.main-row > .agentic-state.collapsed { border-left: none; } /* shut, it leaves no line behind */
.main-row > .task-bar-resize-handle { align-self: stretch; }

/* The Tasks panel's search bar (#4744): the shared list bar above the table; nothing while it is not shown. */
.board-task-bar:empty { display: none; }

/* The agent list's bar inside the Display expander (#4947): its fields and sort are open rows of the panel, not a popover. */
.agent-list-bar .list-bar-bar { padding: 0; }
.list-bar-menu-inline { background: none; border: 0; box-shadow: none; padding: 0; flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.list-bar-menu-inline .list-bar-clear-all { align-self: flex-start; }
.list-bar-menu-inline .list-bar-clear-all[hidden] { display: none; }
.list-bar-menu-inline > .list-bar-count { flex: none; }
/* The label beside its select while there is room, above it when the panel is narrow (a narrow sidebar, large text): the select wraps under the label instead of clipping its text. */
.list-bar-menu-inline .list-bar-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.list-bar-menu-inline .list-bar-field > .list-bar-field-label { flex: 0 0 4.5rem; }
.list-bar-menu-inline .list-bar-field > :last-child:not(.list-bar-field-label) { flex: 1 1 9rem; min-width: 0; width: auto; }
.list-bar-menu-inline > .list-bar-count { padding-left: 2px; }

/* The collapsible list bar (#5293): the agents tab's pattern: the search, the count, one icon for Filters and Sort (a dot on it while anything is on) and, for the artifact lists, one for expand or collapse all */
.list-bar-toggle, .list-bar-expand-all { position: relative; flex: none; }
.list-bar-toggle .material-icons { font-size: 1.125rem; }
.list-bar-collapsible .list-bar-search-wrap { flex: 1 1 8em; min-width: 0; }
.list-bar-panel { padding: 6px 0; }
.list-bar-panel .list-bar-field > .list-bar-by { flex: 1 1 9rem; width: auto; min-width: 0; max-width: none; } /* the text field (Agent, Uploaded by) spans the panel like the selects beside it (UI/UX #5293): its datalist is the field's last child, so the inline rule above never reached the input */
.list-bar-panel > * { flex: 0 0 auto; } /* the dropdown's rule gives each child a whole line of the box's height; in a column, which is as tall as its rows, that stretched the rows */
.list-bar-expand-all[hidden] { display: none; }
@media (pointer: coarse) { .list-bar-toggle, .list-bar-expand-all { min-width: 44px; min-height: 44px; } }