/* ============================================================
   Session — Session list, dots, tooltips, session header/view
   ============================================================ */

/* ── Session List ──────────────────────────────────────────── */

.session-list {
    list-style: none;
    padding: 2px 4px;
}

.session-list li {
    padding: 8px 16px;
    cursor: pointer;
    font-size: var(--fs-md);
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

#history-sessions-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.session-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
}

.session-row-mid {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-row-bottom {
    margin-top: 1px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.session-list li:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.session-list li:hover:not(.empty-state):not(.session-group-header) {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

.session-list li.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-left: 2px solid transparent;
}

.session-list li.empty-state {
    cursor: default;
    color: var(--text-muted);
    font-style: italic;
}

.session-list li.empty-state:hover {
    background: transparent;
    color: var(--text-muted);
}

/* Duration badge in sidebar items */
.session-dur {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-left: 4px;
}

/* ── Session Dots ──────────────────────────────────────────── */

.session-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.session-dot.stale    { background: var(--text-muted); }
/* Task assigned · idle: a muted hollow ring. Yellow is reserved for the urgent
   states (Needs input / Check terminal); idle-with-a-task is not urgent (#3227). */
.session-dot.task-idle {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--text-muted);
}
.session-dot.working {
    /* Working is GREEN. Green no longer means "done": a finished turn is
       "Ready for input" (no dot). */
    background: var(--success);
    animation: pulse-working 1.5s ease-in-out infinite;
}
.session-dot.waiting {
    background: var(--warning);
    animation: pulse-waiting 1.5s ease-in-out infinite;
}
/* Legacy class: never green. Kept neutral so an old caller cannot signal health. */
.session-dot.done {
    background: var(--text-muted);
}

/* Ready for input: no dot. The empty slot keeps names aligned; the tooltip and
   aria-label carry the state. */
.session-dot.your-turn {
    background: transparent;
}

/* Sleeping = muted moon. A glyph, not a coloured dot, so it does not read as a
   faded "needs input" or as healthy. aria-hidden in markup. */
.session-dot.sleeping {
    background: transparent;
    opacity: 1;
    position: relative;
}
.session-dot.sleeping::before {
    position: absolute;
    inset: -4px -3px;
    font-size: 0.6875rem;
    line-height: 16px;
    text-align: center;
    color: var(--text-secondary);
}
.session-dot.sleeping::before { content: "\263E"; }
.session-dot.stuck {
    background: var(--danger);
    animation: pulse-stuck 3s ease-in-out infinite;
}

.avatar-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-primary);
}

.avatar-status-dot.stale    { background: var(--text-muted); }
.avatar-status-dot.sleeping { background: var(--text-muted); opacity: 0.6; }
.avatar-status-dot.task-idle { background: var(--bg-primary); box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.avatar-status-dot.working {
    background: var(--working);
    animation: pulse-working 1.5s ease-in-out infinite;
}
.avatar-status-dot.waiting {
    background: var(--warning);
    animation: pulse-waiting 1.5s ease-in-out infinite;
}
.avatar-status-dot.done {
    background: var(--success);
}
.avatar-status-dot.stuck {
    background: var(--danger);
    animation: pulse-stuck 3s ease-in-out infinite;
}

/* ── History Token Usage Summary ──────────────────────────── */

.history-token-usage {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 8px 16px;
    margin: 0 0 4px 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.htu-item {
    white-space: nowrap;
}

.htu-label {
    color: var(--text-muted);
    margin-right: 4px;
}

.htu-cost {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Session Hover Tooltip ���──────────���─────────────────────── */

.session-tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.3);
    pointer-events: none;
    min-width: 220px;
    max-width: 400px;
}

.session-tooltip-table {
    border-collapse: collapse;
    font-size: 0.75rem;
    line-height: 1.5;
}

.session-tooltip-table td {
    padding: 1px 0;
}

.tt-label {
    color: var(--text-muted);
    padding-right: 12px;
    font-weight: 500;
}

/* `.session-tooltip-table td { padding: 1px 0 }` outranks `.tt-label`, which
   zeroed the label's right padding: the value column started exactly where the
   longest label ("Last action") ended. Restore a real gutter between the
   title column and the description column, and keep labels on one line. */
.session-tooltip-table td.tt-label {
    padding-right: 18px;
    white-space: nowrap;
    vertical-align: top;
}

.tt-value {
    color: var(--text-primary);
    max-width: 300px;
    word-break: break-word;
}

.tt-state-working           { color: var(--working); font-weight: 600; }
.tt-state-needs-input       { color: var(--warning); font-weight: 600; }
.tt-state-done              { color: var(--success); font-weight: 600; }
.tt-state-stuck             { color: var(--danger); font-weight: 600; }
.tt-state-idle              { color: var(--text-muted); }
.tt-unread                   { color: var(--warning); font-weight: 600; }

.session-time {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
}

.session-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-md);
    font-weight: 500;
}

.session-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.session-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 16px;
    height: 16px;
    line-height: 16px;
}

.session-name-row .sidebar-kebab-btn {
    /* 16px tall so line 1 stays 16px; the ::after pad gives a 24x24 hit target */
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    font-size: 0.875rem;
    position: relative;
}
.session-name-row .sidebar-kebab-btn::after {
    content: "";
    position: absolute;
    inset: -4px -2px;
}

.session-name-spacer {
    flex: 1;
}

.session-goal {
    display: block;
    /* Line 2 starts exactly under the agent name (not under the dot) */
    margin-left: var(--row-dot-block, 16px);
    font-size: var(--fs-base);
    line-height: 14px;
    height: 14px;
    /* Quiet italic, dimmer than secondary so the goal recedes behind the name,
       but still >= 4.5:1 on row, hover and selected surfaces */
    font-style: italic;
    color: var(--text-goal, color-mix(in srgb, var(--text-secondary) 65%, var(--text-muted)));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0;
}

/* No summary / first prompt yet: inline generate-goal affordance, always visible */
.session-goal-empty {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-goal, color-mix(in srgb, var(--text-secondary) 65%, var(--text-muted)));
    opacity: 1;
}

.session-goal-empty-label {
    /* Passive text: no pointer, no hover accent. Clicks bubble to the row. */
    font-style: italic;
    cursor: inherit;
}

.session-goal-empty:hover {
    opacity: 1;
}

/* The sparkle is the only goal trigger: give it a visible hover state and a
   24x24 hit target. Negative vertical margins keep the row height at the
   goal line's 15px so density (D6) is unaffected. */
.sidebar-goal-btn-inline,
.session-group-item .sidebar-goal-btn-inline {
    opacity: 0.8;
    padding: 0;
    min-width: 24px;
    min-height: 24px;
    margin: -5px 0;
    justify-content: center;
    border-radius: var(--radius-sm);
    height: 24px;
}

.session-goal-empty:hover .sidebar-goal-btn-inline {
    opacity: 1;
    color: var(--accent);
    background: rgba(var(--white-rgb), 0.06);
}

.sidebar-goal-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
}
.session-group-item:hover .sidebar-goal-btn {
    opacity: 0.6;
}
.sidebar-goal-btn:hover {
    opacity: 1 !important;
    color: var(--accent);
}

/* ── Sidebar Kebab Menu ───────────────────────────────────── */

.sidebar-kebab-wrapper {
    position: relative;
    flex-shrink: 0;
}

.sidebar-kebab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    line-height: 1;
    font-weight: bold;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.1s;
}

/* The button has no fill of its own (#5121, #5127): hovered or keyboard-focused, only the dots take the primary text colour. At rest they are muted; on a hovered or selected
   row, the row's secondary text colour. The keyboard focus ring is the global button:focus-visible. */
.sidebar-kebab-btn:hover,
.sidebar-kebab-btn:focus-visible {
    background: none;
}
.session-list li:hover .sidebar-kebab-btn,
.session-list li.active .sidebar-kebab-btn,
.session-group-header:hover .sidebar-kebab-btn {
    color: var(--text-secondary);
}
.sidebar-kebab-btn:hover,
.sidebar-kebab-btn:focus-visible,
.session-list li .sidebar-kebab-btn:hover,
.session-list li .sidebar-kebab-btn:focus-visible,
.session-group-header:hover .sidebar-kebab-btn:hover,
.session-group-header .sidebar-kebab-btn:focus-visible { color: var(--text-primary); }

.session-list li:hover .sidebar-kebab-btn,
.session-list li:focus-within .sidebar-kebab-btn {
    opacity: 1;
}

.sidebar-kebab-menu {
    position: fixed;
    z-index: 1100;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 4px 0;
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.3);
    min-width: 160px;
}

/* ── Board Card Groups ─────────────────────────────────────── */

.session-board-card {
    /* Team card: hairline frame + a little more breathing room between groups */
    border: 1px solid var(--sidebar-separator);
    border-left: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: rgba(var(--white-rgb), 0.025) !important;
    margin: 6px 8px 6px 10px !important;
    padding: 0 !important;
    display: block !important;
    cursor: default !important;
}

.session-board-card:hover {
    background: rgba(var(--white-rgb), 0.035) !important;
    box-shadow: none !important;
}

.board-card-header {
    padding: 5px 10px !important;
    margin: 0;
    border-radius: 3px 3px 0 0;
    box-sizing: border-box;
    /* header/agents boundary lives here (the agents list no longer draws its own) */
    box-shadow: inset 0 -1px 0 var(--sidebar-separator);
}

/* Teams use a lightweight header rather than a framed card. */
.session-board-card.session-team-group,
.session-board-card.session-team-group:hover {
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.session-team-group > .board-card-header {
    border-radius: var(--radius-sm);
    box-shadow: none;
}
.session-team-group > .board-card-header .group-name-line {
    /* Team rows: the same step as folders unless the user picked a colour (#3507). */
    color: var(--team-accent, color-mix(in srgb, var(--text-primary) 82%, transparent));
}
.team-group-icon {
    flex-shrink: 0;
    margin-right: 3px;
}
/* The team card is inset 8px from the list's right edge; its header's and its agents' kebabs sit in the folder and server headers' column (#4185). */
@media (min-width: 768px) {
    .session-team-group > .board-card-header .group-kebab { margin-right: -8px; }
}
.board-card-agents .session-name-row .sidebar-kebab-wrapper { margin-right: -8px; }
.session-team-group.team-sleeping > .board-card-header .group-name-line {
    color: var(--text-secondary);
}

.board-card-subline {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    opacity: 0.7;
}

.session-list .sleeping-summary-row {
    font-size: var(--fs-base);
    color: var(--text-muted);
    /* The moon sits where an agent's status dot does and the label where its name does. */
    padding: 6px 8px 6px 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-md);
    margin: 2px 6px;
}

.sleeping-summary-row:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.sleeping-summary-row svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.sleeping-summary-label {
    font-style: italic;
}

/* Archived section (#3030): one collapsed row at the bottom of the list. */
.session-list .archived-summary-row {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding-top: 10px;
}
.session-list .archived-team-caption {
    font-size: var(--fs-sm, 11px);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px 2px 14px;
    list-style: none;
}

.board-card-agents {
    list-style: none;
    padding: 0 0 4px 4px;
    margin: 0;
    border-top: none; /* boundary is the header's inset shadow (no doubling) */
}

.board-card-agents .session-group-item {
    /* Right padding matches the folder rows so the kebab lines up with the group header's. */
    padding: 5px 4px 5px 14px !important;
    min-height: 36px;
}

/* Team card header: name + count only (metadata moved to Team details) */
.board-card-header {
    min-height: 28px;
    font-size: var(--fs-md);
}
.group-name-line .session-group-count {
    margin-left: 4px;
}

.board-card-collapsed {
    display: none;
}

/* ── Grouped Sessions ──────────────────────────────────────── */

.session-group-header {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 4px 12px !important;
    text-transform: none;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.session-group-header:hover {
    background: rgba(var(--white-rgb), 0.03) !important;
}

.group-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.group-name-line {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    color: var(--text-primary);
    font-weight: 600;
}

/* A team's name stays on one line and ends in an ellipsis when the sidebar is narrow (the dock open, a phone); the whole name is its title (#4962). */
.group-name-line .group-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-kebab .sidebar-kebab-btn {
    font-size: 0.8125rem;
    padding: 1px 3px;
    opacity: 0;
    align-self: center;
}

.group-kebab {
    align-self: center;
}

.session-group-header:hover .group-kebab .sidebar-kebab-btn,
.session-group-header:focus-within .group-kebab .sidebar-kebab-btn,
.group-kebab .sidebar-kebab-btn:focus-visible {
    opacity: 1;
}

.session-group-item.group-collapsed {
    display: none !important;
}

/* ── Terminal icon in sidebar ─────────────────────────────── */

.agent-icon {
    font-size: 0.8125rem;
    vertical-align: middle;
}

.session-group-count {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 0 5px;
    line-height: 16px;
}

.session-group-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.folder-tag-full {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: var(--radius-lg);
    line-height: 14px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.folder-copy-btn {
    display: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    background: none;
    border: none;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
}

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

.session-group-header:hover .folder-copy-btn {
    display: inline-flex;
    align-items: center;
}

.session-group-item {
    /* AGENT_LIST_COMPACT: two-line 40px row = 5px + 16px line 1 + 14px goal + 5px;
       rows without a goal line (terminal/ended) are held at 36px. */
    /* Grouping indent (task #155): the whole content block sits ~18px to the
       right of the group header label. --row-dot-block is the width of the
       status dot + its margin + the flex gap, so line 2 can start exactly
       under the agent name. */
    --row-dot-block: 5px;
    /* Rows are inset rounded tiles: 6px side margins, so the padding shrinks
       by the same amount to keep the name at the task #155 indent. */
    padding: 5px 4px 5px 14px !important;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: var(--radius-md);
    cursor: grab;
    box-sizing: border-box;
    min-height: 36px;
    border-left: 0;
}

.session-group-item:hover,
.session-list li.session-group-item:hover {
    background: var(--bg-hover, rgba(var(--white-rgb), 0.045));
}

.session-group-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px; /* drawn inside the row, never clipped by neighbours */
    background: rgba(var(--accent-rgb), 0.06);
}

/* A row that needs the Operator has no tint of its own (#5123: the amber wash across the row was louder than the context and Waiting badges): its flashing dot and its state pill carry it. */

.session-group-item.sleeping .session-label {
    color: var(--text-secondary);
}

/* A sleeping row is still a readable, selectable item: its goal line must
   meet WCAG AA. components.css dims it to --text-muted with the same
   specificity; this later rule restores --text-secondary (>= 4.5:1), or the
   theme's goal colour where secondary is too light on a hovered row (light,
   #4209). The dimmed NAME above already carries the sleeping state. */
.session-group-item.sleeping .session-goal,
.session-group-item.sleeping .session-goal-empty {
    color: var(--text-goal, var(--text-secondary));
    opacity: 1;
}

/* Line 2 = goal + optional unread count. The goal keeps its left inset so it
   still starts exactly under the agent name. */
.session-line2 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 14px;
}
.session-line2 .session-goal {
    flex: 1 1 auto;
    min-width: 0;
}

/* Selected and attention rows keep full-strength names for readability/contrast */
.session-group-item.active .session-label,
.session-list li.session-group-item.active .session-label,
.session-group-item.needs-attention .session-label {
    color: var(--text-primary);
}

/* The row's dot flashes by itself (opacity, pulse-working / -waiting / -stuck, the rules above) with no ring around it (#5140: "the flashing circle is enough"); the pill
   does not pulse, and carries the text. Reduced motion runs each animation once (animations.css). */
.session-group-item .waiting-badge {
    animation: none;
}

.session-group-item .session-dot {
    /* Hang the dot at the row's left edge; the right margin keeps the name
       just beside it. */
    margin: 0 3px 0 -9px;
    width: 8px;
    height: 8px;
}

.session-dot.ctx-high {
    box-shadow: 0 0 0 2px rgba(var(--fx-red-rgb), 0.35);
}

/* Neutral (idle) agents show no dot: grey carries no information and adds
   noise. visibility:hidden keeps the 8px slot, so the name, the goal line and
   the +18px group geometry never shift when a state tick brings the dot back.
   The state stays in the row's aria-label and tooltip. Meaningful dots
   (working, waiting/check-terminal, stuck, sleeping, done) and the
   high-context tint remain visible. */
.session-group-item .session-dot.stale:not(.ctx-high) {
    visibility: hidden;
}

.session-group-item .session-label {
    /* Agents are children: medium weight, slightly muted. Group headers stay
       the strongest text (600, --text-primary). */
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary); /* fallback for engines without color-mix */
    color: var(--agent-name-color, color-mix(in srgb, var(--text-primary) 80%, transparent));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.session-state-pill,
.session-ctx-pill {
    font-size: var(--fs-sm);
    line-height: 14px;
    padding: 0 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Sentence-case labels ("Needs input" / "Check terminal" / "Stuck"), quiet (#5123): the shape and weight of the neutral pill below, with only the text in the
   warm colour (>= 4.5:1), no amber fill and no amber ring; the words, not the colour, say which state it is. The higher-specificity selector outranks `.badge.waiting-badge`. */
.session-group-item .badge.session-state-pill {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--warning);
    box-shadow: inset 0 0 0 1px var(--border);
}

.session-group-item .badge.session-state-pill.stuck {
    background: var(--bg-tertiary);
    /* Lifted toward the primary text colour: plain --error is only ~3.6:1 on a dark surface. */
    color: color-mix(in srgb, var(--error) 62%, var(--text-primary));
    box-shadow: inset 0 0 0 1px var(--border);
}


[data-theme="light"] .session-group-item .badge.session-state-pill {
    color: var(--warning);
}

/* Neutral state pill (Task assigned · idle): informational, never a warning. */
.session-group-item .badge.session-state-pill.neutral,
[data-theme="light"] .session-group-item .badge.session-state-pill.neutral {
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border);
}
[data-theme="light"] .session-group-item .badge.session-state-pill.stuck {
    color: color-mix(in srgb, var(--error) 80%, black); /* plain --error is 4.2:1 on the neutral surface in the light theme */
}

.session-ctx-pill {
    text-transform: none;
    background: rgba(var(--error-rgb), 0.15);
    color: var(--error);
}

@media (max-width: 1023px) {
    /* Tablet overlay is 280px: identity keeps at least ~12 characters */
    .session-group-item .session-label { min-width: 12ch;
    font-size: var(--fs-md);
}
}

.session-group-header + .session-group-item {
    margin-top: 2px;
}

/* Folder headers: modest spacing above each group, no separator lines */
.session-group-header:not(.board-card-header) {
    margin-top: 6px;
}
#live-sessions-list > .session-group-header:first-child,
#live-sessions-list > .session-board-card:first-child {
    margin-top: 2px !important;
}

.session-group-item.active,
.session-list li.session-group-item.active {
    /* Selected row: a soft rounded accent tile, no edge bar. Stronger than
       hover so the two never read alike. The compound selector outranks the
       legacy `.session-list li.active`. */
    border-left: 0;
    background: rgba(var(--accent-rgb), 0.14);
}

.session-group-item.active:hover,
.session-list li.session-group-item.active:hover {
    background: rgba(var(--accent-rgb), 0.17);
}

/* The selected tile is darker than a plain row: lift its goal line back to
   secondary so it keeps >= 4.5:1 there (the light theme's goal colour is
   already dark enough for it, #4209). */
.session-group-item.active .session-goal,
.session-group-item.active .session-goal-empty {
    color: var(--text-goal, var(--text-secondary));
}

.session-status-chip {
    display: none;
}

/* Mobile-only banner + meta rows: one signal per state on desktop.
   mobile.css re-enables these under #mobile-session-list. */
.session-mobile-banner-row,
.session-mobile-meta {
    display: none;
}

.session-group-item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.session-group-item.drag-over {
    border-top: 2px solid var(--accent-primary);
    margin-top: -2px;
}

.drag-grip {
    display: none;
    font-size: 0.625rem;
    color: var(--text-muted);
    opacity: 0;
    cursor: grab;
    padding: 0 2px;
    transition: opacity 0.15s;
    user-select: none;
    flex-shrink: 0;
}

.session-group-item:hover .drag-grip {
    opacity: 0.5;
}

.session-group-item:hover .drag-grip:hover {
    opacity: 1;
    color: var(--text-primary);
}

.session-group-item.dragging .drag-grip {
    opacity: 1;
    cursor: grabbing;
}

/* ── Session View ──────────────────────────────────────────── */

.session-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.session-header {
    display: none;
}

#history-session-view .session-header {
    display: block;
    padding: 12px 20px;
}

.session-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.session-title-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.session-title h2 {
    font-size: 1rem;
    font-weight: 600;
}

.session-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-meta-compact {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.status-line, .summary-line {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.token-usage {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.summary-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.goal-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-tool-agent);
    flex-shrink: 0;
}

.summary-inline .summary-text {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.goal-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

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

.goal-edit-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 2px 8px;
    outline: none;
}

.branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    color: var(--accent);
    font-family: var(--font-mono);
}

.branch-chip svg {
    flex-shrink: 0;
    color: var(--accent);
}

.branch-git-state {
    display: inline-flex;
    gap: 6px;
    font-size: 0.6875rem;
}
.branch-git-state:empty { display: none; }
.gs-worktree {
    padding: 0 6px;
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), 0.18);
}
.gs-ahead { color: var(--success); }
.gs-behind { color: var(--warning); }
.gs-dirty { color: var(--text-muted); }

/* Per-agent branch line, shown only for agents on their own worktree */
.session-worktree-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-top: 1px;
    min-width: 0;
}
.session-worktree-line svg { flex-shrink: 0; opacity: 0.7; }
.session-worktree-line .wt-branch {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.copy-branch-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 2px;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.copy-branch-btn:hover {
    opacity: 1;
    color: var(--accent);
}

.sidebar-branch {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-top: 1px;
}

.sidebar-agent-name {
    display: block;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-source-type {
    display: block;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    text-transform: lowercase;
}

.sidebar-branch svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Status Dots ───────────────────────────────────────────── */

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--success);
}

.status-dot.working {
    background: var(--working);
    animation: pulse-working 1.5s ease-in-out infinite;
}

.status-dot.waiting {
    background: var(--warning);
    animation: pulse-waiting 1.5s ease-in-out infinite;
}

.status-dot.done {
    background: var(--success);
}

.status-dot.stuck {
    background: var(--danger);
    animation: pulse-stuck 3s ease-in-out infinite;
}

.status-dot-stale {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fg-muted);
    flex-shrink: 0;
}

.status-dot-working {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-working 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Waiting / Done Banners ────────────────────────────────── */

/* The two notices over the agent view are pills (#5287): inside .live-pills, which is absolute over the top of .live-left-column, so showing or hiding
   one moves nothing (layout shift 0); dom_write.setPill shows them after a delay and hides them at once. No motion. */
.live-pills {
    position: relative;
    flex: 0 0 0;
    height: 0;
    z-index: 30;
    pointer-events: none;
}
.live-pills-stack {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    pointer-events: none;
}
.live-pills-stack > * { pointer-events: none; max-width: min(100%, 640px); box-sizing: border-box; }
.live-pills-stack > [hidden] { display: none; }
/* One notice at a time: while the server is unreachable the agent's "waiting for input" is only its last known state, so the unreachable pill has the slot. */
.live-pills-stack:has(> .server-unreachable-banner:not([hidden])) > .waiting-banner { display: none; }

.waiting-banner {
    background: var(--bg-primary);
    background-image: linear-gradient(rgba(var(--fx-yellow-rgb), 0.15), rgba(var(--fx-yellow-rgb), 0.15));
    border: 1px solid rgba(var(--fx-yellow-rgb), 0.3);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: var(--warning);
    text-align: center;
    box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.25);
}

/* A stalled first launch is the most likely moment a new user gives up, so
   this reads as an instruction rather than a status: slightly louder, and
   left-aligned because it is a sentence, not a label. */
.waiting-banner.waiting-banner-not-started {
    text-align: left;
    line-height: 1.45;
    padding: 8px 12px;
}

/* ── Session ID Label ──────────────────────────────────────── */

.session-id-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ── Jobs Sidebar ──────────────────────────────────────────── */

.live-job-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: var(--fs-md);
}

.live-job-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg);
}

.live-job-badge {
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    flex-shrink: 0;
}

.live-job-badge-api {
    background: rgba(124, 58, 237, 0.2);
    color: var(--badge-claude);
}

.live-job-badge-cron {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
}

.live-job-elapsed {
    font-size: var(--fs-base);
    color: var(--fg-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Board card styles */

.session-board-card.session-board-card-toplevel {
    border-left: none !important;
    margin: 6px 8px 6px 0 !important;
}

.session-board-card.team-sleeping .group-header-text,
.session-board-card.team-sleeping .board-card-agents {
    color: var(--text-muted);
}

.session-board-card-toplevel .board-card-header .group-name-line {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ── Board Chat (right panel) ─────────────────────────────── */

#agentic-panel-board.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.board-chat-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.board-paused-banner {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--error);
    background: rgba(var(--fx-red-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--fx-red-rgb), 0.3);
    padding: 6px 10px;
    text-align: center;
    flex-shrink: 0;
}

.board-chat-title {
    flex: 1;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

.board-chat-title:hover {
    color: var(--accent);
    text-decoration: underline;
}

.board-chat-messages {
    flex: 1;
    overflow-y: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 12px 20px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* The team view's group chat uses the board's soft cards (components.css). */

.board-chat-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 8px;
}

.board-chat-input-pane {
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 300px;
    min-height: 120px;
    max-height: 60vh;
    padding-bottom: 12px;
}

.board-chat-resize-handle {
    height: 4px;
    cursor: row-resize;
    background: var(--border);
    transition: background 0.15s;
}

.board-chat-resize-handle:hover {
    background: var(--accent);
}

.board-chat-editor-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 8px 20px 12px;
}

.board-chat-textarea {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    outline: none;
    resize: none;
    min-height: 0;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.board-chat-textarea:focus {
    border-color: var(--accent);
}

.board-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    max-height: 160px;
    overflow-y: auto;
    box-shadow: 0 -4px 12px rgba(var(--black-rgb), 0.2);
    z-index: 50;
}

.board-mention-item {
    padding: 6px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.board-mention-item:hover,
.board-mention-item.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Selected-agent header: the identity may shrink; the actions on the right
   never do. */
.terminal-state-word { display: none; flex: none; font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } /* #4327: the state in words where there is no hover (touch screens wider than a phone) */
.terminal-state-word::before { content: attr(data-word); } /* generated, so the identity's text stays the name (the pop-out and its tests read it) */
@media (pointer: coarse) and (min-width: 768px) { .terminal-state-word[data-word]:not([data-word=""]) { display: inline; } }
.terminal-header-left {
    flex: 1 1 auto;
    /* The identity keeps room (dot + at least ~120px of name) while the folder/branch in the actions shrink first. */
    min-width: min(150px, 45%);
    overflow: hidden;
}
.terminal-header-left .terminal-session-label {
    /* Keeps its natural width and ellipsizes only when the header is narrow;
       never below 120px while it has more to show. */
    flex: 0 1 auto;
    min-width: min(120px, 100%);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The name over its team and server (#3653): one column that shrinks with the header, but keeps
   the room the name had on its own (never below 120px while it has more to show). */
.terminal-header-left .terminal-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
    min-width: min(120px, 100%);
    line-height: 1.25;
}
.terminal-session-context {
    display: flex;
    min-width: 0;
    max-width: 100%;
    margin-left: 4px;
    font-size: 0.625rem; /* rem, not 10px: it grows with the text size (#4327) */
    color: var(--text-muted);
    white-space: nowrap;
}
.terminal-session-context[hidden] { display: none; }
/* A long team name is cut short first; the server label stays whole. */
.terminal-context-team {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.terminal-context-server { flex: 0 0 auto; }
.terminal-context-team:empty,
.terminal-context-server:empty { display: none; }
.terminal-context-team:not(:empty) + .terminal-context-server:not(:empty)::before {
    content: "\00a0\00b7\00a0";
}
.terminal-header-actions {
    /* The buttons never shrink, but the folder and branch text in front of them do (they ellipsize): otherwise a long
       path leaves the identity no room and the header overflows (seen at 1024px with a long name). */
    flex: 0 1 auto;
    min-width: 0;
}
.terminal-header-actions > .terminal-header-btn { flex-shrink: 0; }
/* A phone (#4081): the 44 px buttons (the toggle, Find, Open Agent Tab, side panel) need the width, so the name gives way first
   instead of pushing the last buttons off the screen at 320 to 414 px. */
@media (max-width: 480px) {
    /* #4327: at 200% text the buttons go to a second row instead of squeezing the name out (it was "al…", and gone with a branch beside it): the
       header grows to its rows, the name keeps about 6 characters of room (em: it grows with the text), the branch stays at normal text and goes where the header is narrow for its text (below). */
    body .terminal-header { padding: 0 6px; flex-wrap: wrap; height: auto; min-height: 36px; row-gap: 2px; } /* body: output.css sets height: 36px and loads after this file */
    .terminal-header-left { flex: 1 1 0; min-width: 3.5em; } /* basis 0: the row wraps only when even 5em of name cannot fit beside the buttons */
    .terminal-header-left .terminal-session-label,
    .terminal-header-left .terminal-identity { min-width: 0; }
    .terminal-header-actions { flex: 0 0 auto; margin-left: auto; }
    .terminal-header-actions > .terminal-branch { max-width: 4.5em; } /* kept on a phone at normal text, cut short: it is a hint, the name is what the header is for */
    .terminal-header { container-type: inline-size; container-name: agent-header; }
}
/* (A header narrow for its text keeps the branch as squeezed as before, a few pixels: branch_expand.js then takes it out of the Tab order, data-narrow, #5142.) */
/* The branch is dropped where the header is narrow for its text: under 22.25 rem of header content, which is 356 px at normal text: a phone up to 368 px wide, since the header has 6 px of padding each side and the
   container is its content box (UX measured two rows from 350 to 365 px with it at 21 rem; 370 px and up keep the branch on one row) and any phone once the text is large (390 px at 200% is 12 rem). A container query: rem here is the root font size, which
   follows the text size (a media query's em would not follow a root font override, and this way a test can) (#4327, #4360 follow-up). */
@container agent-header (max-width: 22.25rem) { .terminal-header-actions > .terminal-branch { display: none; } }
/* 200 percent zoom on a phone is a page under 260 px wide: the header's buttons wrap to a second row instead of leaving the screen. */
@media (max-width: 260px) {
    .terminal-header { flex-wrap: wrap; height: auto; }
    .terminal-header-left { flex-basis: 100%; }
    .terminal-header-actions > .terminal-branch { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.terminal-header-actions > .terminal-folder { flex: 0 1 auto; min-width: 0; }
.terminal-header-actions > .terminal-folder .terminal-folder-text { max-width: 100%; }

/* ── Sidebar colour (#3507, the operator's variant A): one palette that varies only in
   brightness and weight, from the server header (brightest, boldest) through team and
   folder rows (a step down) to agent names (muted). Only the agent state dots keep their
   meaning colours, and a colour the user set explicitly (a team's colour menu, an agent's
   Rename) still wins. ── */

.session-group-header .group-name-line {
    /* Team and folder rows: a step down from the server header. */
    color: color-mix(in srgb, var(--text-primary) 82%, transparent);
    font-weight: 600;
}

/* Agents and terminals in the secondary text colour; a per-agent override (set from
   Rename) wins. */
.session-label-name {
    color: var(--agent-name-color, var(--text-secondary));
    font-weight: 500;
}

.session-label-name.is-terminal {
    color: var(--agent-name-color, var(--text-secondary));
}

/* Palette hues are tuned for dark backgrounds; deepen overrides on light themes */
[data-theme="light"] .session-label-name[style] {
    color: color-mix(in srgb, var(--agent-name-color) 62%, black);
}

/* On the selected row the muted name is 4.3:1 in the light theme; the primary colour passes (#4023), and on a
   hovered row too (4.4:1 there, #4218). A colour the user picked still wins. */
.session-group-item.active:not(.sleeping) .session-label-name:not([style]),
.session-group-item:hover:not(.sleeping) .session-label-name:not([style]) {
    color: var(--text-primary);
}

/* Sleeping agents stay muted so their state still reads at a glance */
.session-group-item.sleeping .session-label-name {
    color: inherit;
}

/* Rename dialog: name colour swatches */
.prompt-modal-colors {
    margin-top: 14px;
}

.prompt-modal-colors-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-swatch.selected {
    border-color: var(--bg-primary);
    box-shadow: 0 0 0 2px var(--text-primary);
}

/* Team routing snapshot */
.team-availability-dialog { position: fixed; inset: 0; margin: auto; width: min(760px, calc(100vw - 32px)); max-height: 85dvh; box-sizing: border-box; overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-secondary); color: var(--text-primary); }
.team-availability-dialog#team-working-mode-dialog { overflow: hidden; display: flex; flex-direction: column; }
.team-availability-dialog::backdrop { background: rgba(var(--black-rgb), .55); }
.team-availability-dialog header, .availability-toolbar, .availability-agent-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#team-working-mode-dialog > header, #team-working-mode-dialog .team-settings-tabs, #team-working-mode-dialog .working-mode-status { flex-shrink: 0; }
.team-availability-dialog h2, .team-availability-dialog header p { margin: 0 0 var(--space-sm); }
.team-availability-dialog h2 { font-size: var(--fs-xl); }
.team-availability-dialog header p { font-size: var(--fs-base); color: var(--text-secondary); }
.team-availability-dialog button { min-height: var(--control-compact-height); font: 500 var(--fs-md)/1.4 var(--font-sans); cursor: pointer; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 7px 12px; }
.team-availability-dialog button:disabled { opacity: .5; }
.availability-toolbar { margin: 18px 0; font-size: 0.8125rem; }
.availability-summary { display: flex; gap: 12px; flex-wrap: wrap; }
.availability-summary div { display: flex; flex-direction: column; min-width: 65px; padding: 10px; border-radius: var(--radius-lg); background: var(--bg-tertiary); }
.availability-summary strong { font-size: 1.5rem; }
.availability-summary span, .availability-note, .availability-agent p, .availability-agent small, .availability-unassigned li span { color: var(--text-secondary); font-size: 0.75rem; }
.team-view-details { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; }
.team-view-details div { min-width:0; padding:10px 12px; border-radius:var(--radius-lg); background:var(--bg-tertiary); }
.team-view-details span, .team-view-details strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-view-details span { color:var(--text-secondary); font-size: var(--fs-base); }
.team-view-details strong { margin-top:4px; font-size:0.8125rem; font-weight:500; }
.availability-agents { display:flex; flex-direction:column; gap:6px; }
.availability-agent { display:grid; grid-template-columns:minmax(150px,1fr) minmax(180px,2fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-lg); overflow-wrap:anywhere; }
.availability-agent > p { margin:0; }
.availability-agent-heading small, .availability-agent li span, .availability-unassigned li span { display: block; margin: 4px 0; }
.availability-badge { white-space: nowrap; border-radius: var(--radius-xl); padding: 4px 8px; background: var(--bg-tertiary); font-size: 0.75rem; color: var(--text-secondary); }
.availability-badge.is-free { color: var(--success); }
.availability-task_idle .availability-badge, .availability-summary-task_idle { color: var(--text-secondary); }
.availability-waiting .availability-badge, .availability-summary-waiting { color: var(--accent); }
.team-availability-dialog ul { padding-left: 18px; font-size: 0.8125rem; }
.team-availability-dialog li { margin: 8px 0; }
@media(max-width: 600px) { .team-availability-dialog { padding: 16px; } .team-view-details { grid-template-columns:1fr 1fr; } .availability-agent { grid-template-columns:1fr auto; } .availability-agent > p, .availability-agent > ul { grid-column:1 / -1; } }

.working-mode-form { display: grid; gap: 16px; overflow: auto; min-height: 0; padding: 2px 4px 2px 0; }
.working-mode-form[hidden] { display: none; }
.working-mode-form label { display: block; font: 500 var(--fs-md)/1.4 var(--font-sans); }
.working-mode-form select, .working-mode-form textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.working-mode-form p { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; }
.team-settings-section { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; margin: 0; display: grid; gap: 12px; }
.team-settings-section legend { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); padding: 0 4px; }
.working-mode-hint { font-size: 0.75rem !important; color: var(--text-secondary); margin: 0; line-height: 1.4; }
.working-mode-hint .working-mode-settings-link { background: none; border: none; box-shadow: none; padding: 0; margin: 0; min-height: 0; min-width: 0; height: auto; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; display: inline; }
.working-mode-hint .working-mode-settings-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.working-mode-docs-link { color: var(--link-text); text-decoration: none; cursor: pointer; } /* the light theme's accent is 4.4:1 on this panel (#5345) */
.working-mode-docs-link:hover { text-decoration: underline; }
.working-mode-status { min-height: 18px; color: var(--text-secondary); font-size: 0.8125rem; }
.working-mode-status.is-error { color: var(--error); }
.team-settings-tabs { flex-shrink: 0; display: flex; gap: 4px; margin: 8px 0 16px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-tertiary); }
.team-settings-tabs [role="tab"] { flex: 1; border: 0; background: transparent; color: var(--text-secondary); font-size: 0.8125rem; padding: 8px 10px; }
.team-settings-tabs [role="tab"][aria-selected="true"] { background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 1px 3px rgba(var(--black-rgb), .2); }
.team-settings-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.team-settings-panel { display: grid; gap: 16px; }
.team-settings-panel[hidden] { display: none; }
.team-settings-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-lg); }
.workflow-preset-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.working-mode-form input[name="preset_name"] { display: block; box-sizing: border-box; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.prompt-inspection-content { display: grid; gap: 10px; }
.prompt-inspection-card { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-tertiary); }
.prompt-inspection-card h4 { margin: 0 0 6px; font-size: 0.875rem; }
.prompt-inspection-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-secondary); font-size: 0.75rem !important; }
.prompt-inspection-fragment { margin-top: 10px; }
.prompt-inspection-fragment summary { cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.prompt-inspection-fragment pre { max-height: 120px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; padding: 8px; border-radius: 5px; background: var(--bg-primary); color: var(--text-primary); font: 0.75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media(max-width: 600px) { .prompt-inspection-meta { flex-direction: column; gap: 4px; } }
@media(max-width: 600px) { .team-settings-tabs { overflow-x: auto; } .team-settings-tabs [role="tab"] { flex: 0 0 auto; white-space: nowrap; } }
.team-settings-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 0 2px; background: linear-gradient(var(--bg-secondary), var(--bg-secondary)); }
.team-settings-actions button { flex: 0 0 auto; }
.team-settings-actions span { color: var(--text-secondary); font-size: 0.75rem; line-height: 1.35; }
@media(max-width: 600px) { .team-settings-actions { align-items: stretch; flex-direction: column; } }

/* Team settings, Health check tab (#4230): the check, then one card per automatic rule with its numbers and the server's limits under each. */
.health-form .health-rule-head { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.health-form .health-rule-head input { margin-top: 3px; flex: none; }
.health-form .health-why { display: block; color: var(--text-secondary); font-size: calc(var(--fs-md) * .9); font-weight: 400; margin: 0; } /* from the title's own size token, so it scales with the title (#4259) */
.health-rule { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; display: grid; gap: 6px; background: var(--bg-primary); }
.health-rule > .health-why { margin-left: 26px; }
.health-knobs { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 2px 0 0 26px; }
.health-knobs:empty { display: none; }
.health-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.working-mode-form label.health-knob { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }
.health-knob-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.health-limits { font-weight: 400; font-size: 0.75rem; color: var(--text-secondary); }
.health-form input[type="number"], .health-form input[type="text"] { box-sizing: border-box; min-height: var(--control-height, 32px); background: var(--bg-tertiary, var(--bg-primary)); color: var(--text-primary); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 4px 8px; font: inherit; }
.health-form input[type="number"] { width: 7em; max-width: 100%; } /* (not min(7em, 100%): a percentage width collapses the shrink-wrapped box and drops the unit under the input) */
.health-knob.health-wide, .health-knobs .health-wide { flex: 1 1 100%; }
.health-form input[type="text"] { width: 100%; }
.health-wide-select { flex: 1 1 11em; min-width: min(11em, 100%); }
.health-wide-select select { margin-top: 4px; }
.health-rule.off .health-why, .health-rule.off .health-knobs { opacity: .55; }
.health-form input:focus-visible, .health-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.health-state.health-error { color: var(--error, var(--fx-red)); }

/* Team settings, Messaging tab (#5510): who may message this board. A list of teams (name, then the Coral and id small), Add from this computer's boards or by id, the one-time prompt, the change log. */
.ct-form { display: grid; gap: 12px; }
.ct-form .ct-list, .ct-form .ct-suggest, .ct-form .ct-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-primary); }
.ct-who { display: grid; gap: 2px; min-width: 0; }
.ct-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ct-name { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.ct-id { display: block; color: var(--text-secondary); font-size: 0.75rem; overflow-wrap: anywhere; }
.ct-unknown { padding: 0 6px; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.75rem; white-space: nowrap; }
.ct-empty { margin: 0; color: var(--text-secondary); }
.ct-notice { margin: 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); font-size: calc(var(--fs-md) * .9); }
.ct-count { color: var(--text-secondary); font-size: 0.75rem; }
.ct-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ct-pick { display: grid; gap: 4px; flex: 1 1 14em; min-width: 0; font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }
.ct-form select, .ct-form input[type="text"] { box-sizing: border-box; width: 100%; min-height: var(--control-height, 32px); background: var(--bg-tertiary, var(--bg-primary)); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 8px; }
.ct-other summary { cursor: pointer; font-weight: 600; color: var(--text-primary); min-height: var(--control-height, 32px); display: flex; align-items: center; }
.ct-other-fields { display: grid; gap: 8px; margin-top: 6px; }
.ct-other-fields label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }
.ct-other-fields .btn { justify-self: start; }
.ct-form .ct-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-weight: 400; }
.ct-form .ct-check input { margin-top: 3px; flex: none; }
.ct-form .ct-check > span { display: grid; gap: 2px; min-width: 0; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-prompt { border-color: var(--accent); }
.ct-log li { color: var(--text-secondary); font-size: calc(var(--fs-md) * .9); overflow-wrap: anywhere; }
.ct-log-when { color: var(--text-secondary); font-size: 0.75rem; margin-right: 6px; white-space: nowrap; }
.ct-state.ct-error { color: var(--error, var(--fx-red)); }
.ct-form button:focus-visible, .ct-form select:focus-visible, .ct-form input:focus-visible, .ct-other summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 767px), (pointer: coarse) {
    .ct-form .btn, .ct-form select, .ct-form input[type="text"] { min-height: var(--control-touch-height, 44px); }
    .ct-other summary { min-height: var(--control-touch-height, 44px); }
    .ct-form .ct-check { min-height: var(--control-touch-height, 44px); align-items: center; }
    .ct-form .ct-check input { margin-top: 0; }
}

.team-availability-dialog .modal-close-btn { padding: 0; background: transparent; border-color: transparent; }
.working-mode-form select, .working-mode-form input[name="preset_name"] { min-height: var(--control-height); }
.team-settings-tabs [role="tab"] { min-height: var(--control-height); }

/* Knowledge distillation */
.spin { animation: spin 1s linear infinite; }
.team-knowledge-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.team-knowledge-view[hidden] { display: none; }
.knowledge-viewer { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.knowledge-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.knowledge-toolbar-left { display: flex; align-items: center; gap: 6px; }
.knowledge-toolbar-actions { display: flex; gap: 2px; align-items: center; margin-left: auto; }
.knowledge-nav-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.knowledge-content-area { flex: 1; min-height: 0; overflow: hidden; }
.knowledge-pane { display: none; height: 100%; overflow: hidden; }
.knowledge-pane.active { display: flex; flex-direction: column; }
.knowledge-preview { flex: 1; overflow-y: auto; padding: 12px 14px; }
.knowledge-editor { flex: 1; width: 100%; resize: none; font-family: var(--font-mono, monospace); font-size: 0.75rem; line-height: 1.5; padding: 12px 14px; background: var(--bg-primary); color: var(--text-primary); border: none; outline: none; overflow-y: auto; }
.knowledge-md { font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); }
.knowledge-md.notes-rendered { padding: 0; }
.knowledge-h2 { margin: 16px 0 8px; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.knowledge-h3 { margin: 16px 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.knowledge-h4 { margin: 12px 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.knowledge-code { background: var(--bg-tertiary); padding: 1px 4px; border-radius: var(--radius-xs); font-size: 0.75rem; }
.knowledge-li { margin: 2px 0; padding-left: 12px; }
.knowledge-spacer { margin: 8px 0; }
.knowledge-link { color: var(--accent); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--accent); }
.knowledge-link:hover { border-bottom-style: solid; }
.knowledge-link-dead { color: var(--text-muted); }
.knowledge-link-ext { color: var(--accent); text-decoration: none; }
.knowledge-link-ext:hover { text-decoration: underline; }
.knowledge-empty { text-align: center; padding: 24px; color: var(--text-muted); }
/* Knowledge distillation in progress / last run (#3325) */
.knowledge-progress { display: inline-block; width: 200px; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: var(--bg-tertiary); }
.knowledge-progress-bar { height: 100%; border-radius: 2px; background: var(--accent); transition: width .3s; }
.knowledge-run-note { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.75rem; }
.knowledge-run-note.is-failed { color: var(--error); }
.knowledge-run-note.is-partial { color: var(--warning); }
/* The team header while its knowledge is being distilled */
.team-distill-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-lg); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.6875rem; font-weight: 500; line-height: 16px; white-space: nowrap; }
.team-distill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-working 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .team-distill-dot { animation: none; } }
.knowledge-save-btn { margin-left: 4px; }

/* Repo/branch beside the agent name in the terminal header */
.terminal-branch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    font-family: var(--font-mono);
    font-size: 0.6875rem; /* rem, not 11px (#4327) */
    color: var(--text-secondary);
}
.terminal-branch[hidden] { display: none; }
.terminal-branch svg { flex-shrink: 0; color: var(--accent); }
.terminal-branch-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A branch name is capped, in the live header and the history header alike (#5142): a real worktree's branch can be 60 characters or more. The whole name shows in place while the
   text is hovered, focused with the keyboard or tapped (.is-open, branch_expand.js): drawn by the chip's ::after (data-full) over the page, not in the header's row, so it moves
   nothing and the header's controls stay where they are. The live header's box is anchored to the header (the header is the positioned ancestor), right-aligned under its
   buttons and never wider than the header; the history header's under its chip. */
.terminal-branch-text, .title-branch .branch-text { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; cursor: pointer; border-radius: var(--radius-xs); }
.terminal-branch-text:focus-visible, .title-branch .branch-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.terminal-header { position: relative; }
.title-branch { position: relative; }
.terminal-branch::after,
.title-branch::after {
    position: absolute;
    top: calc(100% + 2px);
    z-index: 40;
    box-sizing: border-box;
    width: max-content;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: 0 4px 14px rgba(var(--black-rgb), 0.25);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}
.terminal-branch::after { right: 6px; top: 100%; max-width: calc(100% - 12px); }
.title-branch::after { left: 0; max-width: min(36rem, calc(100vw - 2rem)); }
/* Shown (a box exists only while it has content) on keyboard focus and when tapped open; hover everywhere but on a touch screen: on a phone a tap leaves :hover stuck on the text,
   which kept the box open when the second tap closed it (#5154). The condition is "the primary pointer is not coarse", not "(hover: hover)": a desktop browser with no pointing device
   reported (hover: none) (GitHub's headless Chrome) and never showed the box on hover, while a phone's finger is always (pointer: coarse). */
.terminal-branch:has(> .terminal-branch-text:is(:focus-visible, .is-open))::after,
.title-branch:has(> .branch-text:is(:focus-visible, .is-open))::after { content: attr(data-full); }
@media not all and (pointer: coarse) {
    .terminal-branch:has(> .terminal-branch-text:hover)::after,
    .title-branch:has(> .branch-text:hover)::after { content: attr(data-full); }
}

/* ── Multi-server hub: server badges, strip, stale agents ──────────────
   Only rendered when hub mode is on and remotes are registered. */

.server-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.server-online .server-dot       { background: var(--success); }
.server-unreachable .server-dot  { background: var(--warning); }
.server-unauthorized .server-dot { background: var(--error); }
.server-unknown .server-dot      { background: var(--text-muted); }

.server-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    max-width: 9em;
    margin-left: var(--space-sm);
    padding: 1px var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-badge .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.server-badge.server-unreachable,
.server-badge.server-unauthorized { color: var(--text-primary); }

.server-strip-row { list-style: none; padding: 0; }
.server-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: var(--space-sm) var(--space-lg);
    list-style: none;
}
.server-strip-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    color: var(--text-secondary);
}
.server-strip-item.server-unreachable,
.server-strip-item.server-unauthorized { color: var(--text-primary); border-color: var(--warning); }
.server-strip-item.server-unauthorized { border-color: var(--error); }
.server-strip-state { font-weight: 600; }
/* The chip is a button that opens the Servers tab at that server (#3070 F7). */
.server-strip-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.server-strip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm, 4px); }
@media (pointer: coarse) { .server-strip-btn { min-height: var(--control-touch-height, 44px); } }
/* Cloud Hub update notice (#3059): a link, nothing is disabled. */
.server-update-badge {
    margin-left: var(--space-xs);
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--fs-sm, 11px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--accent);
    border: 1px solid currentColor;
}
.server-update-badge.server-update-required { color: var(--warning); }
.server-update-badge:hover { text-decoration: underline; }
.cs-update-required { color: var(--warning); }
/* The hub relaunch's "Updating" badge (#5355): read-only, a word, not a link or a control; the row keeps its height. */
.server-relaunch-badge { margin-left: var(--space-xs); padding: 0 var(--space-sm); border-radius: var(--radius-sm, 4px); font-size: var(--fs-sm, 11px); font-weight: 600; white-space: nowrap; color: var(--text-primary); background: var(--bg-hover); border: 1px solid var(--border); cursor: default; }

/* Agents on an unreachable server: last-known data, not actionable. */
.session-group-item.session-stale {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.6);
}
.session-group-item.session-stale .session-dot { background: var(--text-muted); animation: none; }
.sidebar-rail-item.session-stale { opacity: 0.55; cursor: not-allowed; }

/* Cloud Hub: this server only allows viewing (#3068). Text, not colour alone. */
.hub-readonly-chip {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-sm);
    padding: 0 var(--space-sm);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm, 4px);
    color: var(--warning);
    font-size: var(--fs-sm, 11px);
    font-weight: 600;
    white-space: nowrap;
    /* On a narrow header it shrinks and ends in "…"; the full reason is its title, and a tap shows it (#3411). */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    cursor: help;
}
.hub-readonly-chip[hidden] { display: none; }
/* View only through Coral Hub (#3411): Send looks unavailable and the terminal doesn't offer typing. */
/* A control the Hub's tier does not allow (hub_blocked_controls.js, #3769): dimmed, with the reason as its title. It stays
   clickable, so a click still says why. (Until #3645 the Send rule here named an inline onclick; it matched nothing after.) */
.hub-blocked { opacity: 0.45; cursor: not-allowed; }
/* The phone's Send button is dimmed and inert for any View-only agent, whether the hub said so on the terminal socket or the Servers list did. */
.command-pane.hub-view-only .mobile-send-btn { opacity: 0.4; pointer-events: none; }
.xterm-container.hub-view-only ~ .terminal-statusbar .xterm-focus-hint,
.xterm-container.agent-sleeping ~ .terminal-statusbar .xterm-focus-hint { display: none; }

/* ── Servers in the agent list (#3085; #4932 removed the search-row server pill) ─────────── */
.server-group-more { position: relative; }
.server-group-more > summary { list-style: none; cursor: pointer; }
.server-group-more > summary::-webkit-details-marker { display: none; }
.server-group-toggle:focus-visible, .server-group-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.server-switcher-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
    min-width: 16em; max-width: min(22em, calc(100vw - 32px));
    padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-secondary); box-shadow: 0 6px 20px rgba(var(--black-rgb), .35);
    font-size: var(--fs-base); color: var(--text-primary);
}
.server-details-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-md); margin: 0 0 var(--space-md); }
.server-details-list dt { color: var(--text-secondary); }
.server-details-list dd { margin: 0; overflow-wrap: anywhere; }
.server-details-update, .server-details-hint { margin: 0 0 var(--space-md); color: var(--text-secondary); }
.server-switcher-panel .btn + .btn { margin-left: var(--space-xs); }
/* The Display expander (#4947): it opens in place under the search, so it is a row of the header, not a popover. */
.list-display-panel { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1 1 100%; min-width: 0; box-sizing: border-box; position: static; box-shadow: none; max-width: none; padding: var(--space-sm) 0 0; border: 0; border-top: 1px solid var(--border); background: none; }
.list-display-panel[hidden] { display: none; }
.list-display-options { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0 var(--space-xs); }
.list-display-option { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; padding: 4px 0; font-size: 0.8125rem; }
.list-display-option[hidden] { display: none; }
.list-display-hint { margin: var(--space-xs) var(--space-xs) 0; font-size: var(--fs-sm, 11px); color: var(--text-muted); }
.list-display-hint[hidden] { display: none; }
.list-display-panel .agent-list-bar:not([hidden]) + .list-display-options { border-top: 1px solid var(--border); padding-top: var(--space-xs); }
/* What is on while the panel is shut: a count on the button, and a line under the search saying which filters and which sort. */
/* A dot on the corner of the button, hanging off it so it never covers the icon (at 200% text too); the count is its data-count, and the button's name says it (agent_list_bar.js). */
.display-badge { position: absolute; top: -0.125rem; right: -0.125rem; width: 0.5rem; height: 0.5rem; padding: 0; overflow: hidden; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-secondary, var(--bg-primary)); }
.display-badge[hidden] { display: none; }
.sidebar-collapse-btn[data-display-button] { position: relative; }
.agent-list-summary { flex: 1 1 100%; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; font-size: 0.75rem; color: var(--text-secondary); }
.agent-list-summary[hidden] { display: none; }
.agent-list-summary-text { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; } /* wraps at large text: what is on is the line's whole job */
.agent-list-summary-clear { flex: none; border: 0; background: none; color: var(--text-primary); /* 4.5:1 on the light panel; the accent blue was 4.44 */ font: inherit; cursor: pointer; padding: 4px; text-decoration: underline; }
.agent-list-summary-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The header's one Collapse / Expand toggle: its icon is the next action. */
.group-toggle-btn[hidden] { display: none; }
.group-toggle-btn[data-next="collapse"] .group-toggle-expand, .group-toggle-btn[data-next="expand"] .group-toggle-collapse { display: none; }
/* Group headers (Group by server): the outermost level of the list, flush left, with a
   computer icon and no status dot; an offline server is dimmed (#3507). */
.session-list .server-group-header {
    display: flex; align-items: center; gap: var(--space-xs);
    margin: var(--space-md) 0 2px; padding: 0 12px 0 0; list-style: none; /* the right gutter team and folder headers have, so the kebabs share a column */
}
.server-group-toggle {
    display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
    padding: 4px 6px 4px 2px; border: 0; border-radius: var(--radius-md);
    background: none; color: var(--text-primary); font: inherit; font-size: 1.05em; font-weight: 700; cursor: pointer; text-align: left;
}
.server-group-toggle:hover { background: var(--bg-hover); }
.server-group-icon { flex: none; color: var(--text-primary); }
/* The name keeps room for 8 characters and shrinks last (flex-shrink .01 against the marker's 100); the Update marker is what shrinks first (at 200% text "workstation" was "w..." beside Update required, #4247). */
.server-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: min(8ch, 100%); flex: 0 0.01 auto; }
.server-group-toggle > .server-update-marker { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-group-state { color: var(--text-secondary); font-weight: 400; font-style: italic; white-space: nowrap; }
.server-group-header.is-down .server-group-icon,
.server-group-header.is-down .server-group-name { opacity: 0.5; }
/* A team or folder header is the button that collapses its group (no chevron, #3507 v4). */
.session-group-header[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
.server-group-toggle .session-group-count { margin-left: auto; }
.server-group-more > summary.sidebar-kebab-btn { display: block; } /* a <summary> sized and placed as the other headers' kebab buttons */
/* The machine menu's launch row (#5487): Launch agent first, Launch team, Open folder on the hub's own machine, and Open in Servers as a text link so the row stays one line at about 380 px. */
.server-launch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: 0 0 var(--space-sm); }
.server-launch-btn {
    padding: 5px var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tertiary, var(--bg-hover)); color: var(--text-primary);
    font: inherit; font-size: 0.875rem; cursor: pointer;
}
.server-launch-btn:hover:not(:disabled), .server-launch-btn:focus-visible { background: var(--bg-hover); }
.server-launch-btn.server-launch-primary { background: var(--accent-dim, var(--accent)); border-color: var(--accent-dim, var(--accent)); color: var(--text-on-accent); font-weight: 600; }
.server-launch-btn:disabled { cursor: not-allowed; color: var(--text-muted); background: none; }
.server-open-btn { margin-left: auto; padding: 5px 2px; border: 0; background: none; color: var(--link-text, var(--accent)); font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; }
.server-launch-note, .server-launch-hint { margin: 0 0 var(--space-md); color: var(--text-secondary); font-size: 0.8125rem; }
.server-version { justify-self: start; cursor: help; border-bottom: 1px dotted var(--text-secondary); }
.server-details-update:not(.server-below-minimum) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
/* 'Show server': the server before a team/folder name, "pro-coral-hub", server in italics (#3507). */
.row-name-with-server { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-server-prefix { font-style: italic; font-weight: 500; opacity: 0.7; white-space: nowrap; }
.row-server-prefix .row-server-sep { font-style: normal; }
.row-server-prefix.is-down { opacity: 0.45; }
/* Phone width and touch screens: the header's controls are the touch size, all of them (mobile.css gives every .btn that minimum at this width). */
@media (max-width: 767px), (pointer: coarse) {
    .sidebar-header.sidebar-header, .mobile-list-header.mobile-list-header { --ctl-h: var(--control-touch-height, 44px); }
    .list-display-option, .agent-list-summary-clear { min-height: var(--control-touch-height, 44px); }
    .agent-list-summary-clear { min-width: var(--control-touch-height, 44px); }
    .server-details-update .server-update-badge { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-touch-height, 44px); min-width: var(--control-touch-height, 44px); } /* the one Update control of a machine's menu (#5487) */
}
@media (pointer: coarse) {
    .server-group-toggle, .server-launch-btn, .server-open-btn, .list-display-option {
        min-height: var(--control-touch-height, 44px);
    }
    .server-group-more > summary.sidebar-kebab-btn { display: inline-flex; align-items: center; justify-content: center; } /* the kebab's own touch size (touch.css) */
}
/* The phone's list header: the title, the display menu and + New share one height (#4062). */
/* flex-wrap: a narrow phone wraps the header's controls instead of pushing them off the screen (#4086). */
.mobile-list-header { --ctl-h: 36px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; }
.mobile-list-header .mobile-list-title { margin-right: auto; }
.mobile-list-header .btn { height: var(--ctl-h); box-sizing: border-box; padding-top: 0; padding-bottom: 0; margin: 0; } /* margin: 0: .btn-small's 20px side margins counted toward the row and wrapped + New */
.mobile-list-header .mobile-list-title { white-space: nowrap; flex: none; }
/* The display menu hangs from the whole header row, not from its own small button, so it is never wider than the screen or cut off at the edge (#4062). */
.sidebar-header, .mobile-list-header { position: relative; }
.session-list .server-group-header { position: relative; }
.server-group-header .server-group-more { position: static; }
.server-group-more:not([open]) > .server-switcher-panel { display: none; } /* a closed menu has no boxes */
.server-group-more > .server-switcher-panel { left: auto; right: 0; top: calc(100% - 2px); min-width: min(16em, 100%); max-width: 100%; box-sizing: border-box; }
/* Keep the search box usable: it gives up width down to 6em and a very narrow sidebar wraps the header (#3085, #4062). */
.sidebar-header { flex-wrap: wrap; }
.sidebar-header .sidebar-search { flex: 1 1 6em; min-width: 6em; }
/* Status text for screen readers only (the dot carries it visually). */
.row-server-prefix .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Update notice marker on the server group header (#3059 via #3085). */
.server-update-marker {
    padding: 0 4px; border: 1px solid currentColor; border-radius: var(--radius-sm, 4px);
    font-size: var(--fs-sm, 11px); font-weight: 600; color: var(--accent); white-space: nowrap;
}
.server-update-marker.server-update-required { color: var(--warning); }

/* The selected agent's server is unreachable (#3151) */
.server-unreachable-banner {
    padding: 8px 12px;
    border: 1px solid var(--warning, var(--fx-amber));
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    background-image: linear-gradient(rgba(var(--fx-amber-rgb), 0.10), rgba(var(--fx-amber-rgb), 0.10));
    color: var(--text-primary);
    font-size: var(--fs-sm, 13px);
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.25);
}
.server-unreachable-banner[hidden] { display: none; }

/* At 200% text on a phone the panel was wider than its box and clipped on the right: a fieldset is as wide as its content unless told otherwise, and the 11em
   select and 7em number box did not shrink. Nothing in the form is wider than its container (#4259). */
.health-form, .health-form fieldset, .health-form label, .health-rule, .health-knobs, .health-row { min-width: 0; max-width: 100%; }
.health-form select, .health-form input[type="text"] { max-width: 100%; }
/* A phone or a touch screen: the check rows and the inputs are touch-size targets. */
@media (max-width: 767px), (pointer: coarse) {
    .health-form .health-rule-head { min-height: var(--control-touch-height, 44px); align-items: center; }
    .health-form .health-rule-head input { margin-top: 0; }
    .health-form input[type="number"], .health-form input[type="text"], .health-form select { min-height: var(--control-touch-height, 44px); }
}

/* The agent's model under its row in the list: "Claude · Opus 4.1" (#4066) */
.session-model { margin-top: 1px; font-size: var(--fs-sm, 11px); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A long agent name keeps its last characters (#4624): the head shrinks with an ellipsis, the tail and the chips after it do not push it out, and the chips give way first. */
.session-label.session-label-split { display: flex; align-items: baseline; min-width: 0; text-overflow: clip; }
.session-label-split .session-label-name { display: flex; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.session-label-split .sln-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-label-split .sln-tail { flex: none; white-space: nowrap; }
.session-label-split .session-label-tags { flex: 0 100 auto; min-width: 0; overflow: hidden; white-space: nowrap; }

/* The phone's Search agents box, under the list header's controls (#4624) */
.mobile-list-header .mobile-search-row { flex: 1 0 100%; }
.mobile-list-header .mobile-search-input { width: 100%; box-sizing: border-box; height: var(--ctl-h); padding-left: 12px; }
.server-details-update:not(.server-below-minimum) { flex-wrap: wrap; } /* #5487 review: the long "Update required" sentence and its badge wrap instead of squeezing the badge out of the panel */
.server-details-update .server-update-badge { flex: none; white-space: nowrap; }