/* sessions-view.css — the shared "Agents list" stylesheet.
 *
 * Ported verbatim from styles.css (the sidebar's session cards, status groups,
 * and the three-pane upper/running/quiet layout) into a self-contained,
 * `--sv-*`-namespaced sheet that BOTH hosts load: the Windows shell sidebar
 * (crates/shell/ui) and the agent-hub status page (served cross-crate). Editing a
 * card rule here changes both surfaces after a rebuild — that's the point.
 *
 * The palette below mirrors styles.css's :root so the shell looks identical; the
 * hub, which has no --bg-2/--status-* of its own, gets them here. Everything that
 * was a shell var reference is rewritten to a --sv-* var; literals (#3a3a3a
 * scrollbars, #4a3a3a close-hover, #c9c9c9, #fff, #555) are kept as-is.
 *
 * The pane heights use `var(--running-height, var(--sv-running-height))` so the
 * shell's per-user drag override (set on #agents-list) still wins, while the hub —
 * which sets no override — falls back to the --sv default. */
:root {
  --sv-bg: #252525;
  --sv-bg-hover: #2d2d2d;
  --sv-bg-active: #3a3a3a;
  --sv-border: #333;
  --sv-text: #e6e6e6;
  --sv-muted: #8a8a8a;
  --sv-danger: #ef4444;

  --sv-status-active:    #4ade80;
  --sv-status-waiting:   #facc15;
  --sv-status-stale:     #9ca3af;
  --sv-status-error:     #f87171;
  --sv-status-completed: #60a5fa;
  --sv-status-idle:      #888888;
  --sv-status-none:      #555555;

  /* The kanban pill's hue. Deliberately violet — the one colour no status uses
     (see --sv-status-* above), so a card flagged as loop-driven never reads as
     being *in* some state. The pill's fill/border are the same hue at low alpha,
     written as literals below (this sheet keeps literals where the shell's palette
     had none — see the header note). */
  --sv-kanban: #a78bfa;

  --sv-active-border: #4a4a4a;
  --sv-running-height: 28%;
  --sv-idle-height: 22%;
  /* Lines of AI summary a card's subline shows before clamping. Like the pane
     heights above, the shell overrides it per user (--summary-lines on the
     document root, from Settings → Agents); the hub sets nothing and keeps 1. */
  --sv-summary-lines: 1;
}

/* ---- Three-pane layout (upper / running / quiet) ---- */
.agents-half {
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 12px;
}
.agents-half::-webkit-scrollbar { width: 8px; }
.agents-half::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }
.agents-half-upper { flex: 1 1 auto; }
.agents-half-running,
.agents-half-quiet {
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  overflow: hidden;
}
.agents-half-running.is-expanded {
  max-height: var(--running-height, var(--sv-running-height));
  overflow-y: auto;
}
.agents-half-quiet.is-expanded {
  max-height: var(--idle-height, var(--sv-idle-height));
  overflow-y: auto;
}
.agents-half-running.is-collapsed .status-section,
.agents-half-quiet.is-collapsed .status-section {
  display: none;
}
.agents-half-running .agent-group,
.agents-half-running .agent-group:first-child,
.agents-half-quiet .agent-group,
.agents-half-quiet .agent-group:first-child {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.agents-half-running .agent-group-label,
.agents-half-quiet .agent-group-label {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--sv-border);
}
.agents-half-running .agent-group-label:hover,
.agents-half-quiet .agent-group-label:hover {
  background: var(--sv-bg-hover);
}
.agents-half-running .status-section,
.agents-half-quiet .status-section {
  padding: 0 8px 8px;
}

.agent-group-running .agent-group-label,
.agent-group-quiet .agent-group-label {
  cursor: pointer;
  user-select: none;
}
.agent-group-running .agent-group-label .codicon,
.agent-group-quiet .agent-group-label .codicon {
  font-size: 11px;
  opacity: 0.8;
}
.agent-group-running .agent-group-label:hover .codicon,
.agent-group-quiet .agent-group-label:hover .codicon { opacity: 1; }

/* ---- Agent groups ---- */
.agent-group {
  margin-top: 10px;
  padding: 4px 6px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.agent-group:first-child { margin-top: 4px; }

.agent-group-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sv-muted);
}
.agent-group-label .agent-group-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--sv-muted);
  opacity: 0.7;
}

.agent-group-waiting .agent-group-label { color: var(--sv-status-waiting); }
.agent-group-waiting .agent-group-count { color: var(--sv-status-waiting); opacity: 0.85; }

.agent-group-running .agent-group-label { color: #c9c9c9; }
.agent-group-running .agent-group-count.has-items {
  color: var(--sv-status-active);
  opacity: 1;
  font-weight: 700;
}


.agent-group-error .agent-group-label { color: var(--sv-status-error); }
.agent-group-error .agent-group-count { color: var(--sv-status-error); opacity: 0.85; }

.agent-group-completed .agent-group-label { color: var(--sv-status-completed); }
.agent-group-completed .agent-group-count { color: var(--sv-status-completed); opacity: 0.85; }

/* Idle is a status like the others, not a hidden state: its cards read at full
   strength, so no group-wide dimming here. The label keeps the idle gray, which is
   the same "label = this group's status color" rule every group above follows. */
.agent-group-quiet .agent-group-label { color: var(--sv-muted); }

/* ---- Status sections ---- */
.status-section {
  margin-top: 6px;
}
.status-section:first-child { margin-top: 0; }
.agent-group .status-section:first-of-type { margin-top: 2px; }

.status-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 4px 2px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sv-muted);
  opacity: 0.85;
}
.status-label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--sv-muted));
}

/* ---- Session card ---- */
.tab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  margin: 2px 0;
  background: var(--sv-bg);
  border: 1px solid transparent;
  border-left: 3px solid var(--accent, var(--sv-status-none));
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.tab:hover { background: var(--sv-bg-hover); }
.tab.is-active {
  background: var(--sv-bg-active);
  border-top-color: var(--sv-active-border);
  border-right-color: var(--sv-active-border);
  border-bottom-color: var(--sv-active-border);
}
.tab .tab-row-top,
.tab .tab-row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Machine pill + subtitle sit together at the left edge of the subline. */
.tab .tab-row-bottom { justify-content: flex-start; }
/* Machine pill on a card's subline — rendered only for a genuine remote machine, so
   a pill-less subline reads as "this box" (the local/home machine). */
.tab .machine-tag {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--sv-muted);
  background: var(--sv-bg-hover);
  border: 1px solid var(--sv-border);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 13px;
  white-space: nowrap;
}
/* Kanban pill — leads the *title* row on a card the kanban loop launched and still
   drives. Same pill shape as the machine tag above, in the accent hue rather than
   muted: this one answers "who is driving this session", which you want to see
   without reading. It sits at a fixed x (after the host glyph, before the name) so
   loop-driven cards line up down the list, and being outside .tab-row-actions it no
   longer vanishes under the hover buttons. Fixed word, so it never wraps. */
.tab .tab-flag {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--sv-kanban);
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 13px;
  white-space: nowrap;
}
/* The "stuck?" qualifier badge — same pill as the kanban flag, in grey rather than the
   accent hue. It rides on a session the stale backstop recoloured: still counted as
   working, while nothing at all has been written for the stale window. Grey because
   "this is a qualifier, not a state" is exactly what a status colour would fail to say.
   Shares .tab-flag's geometry so a card carrying one lines up with the rest of the list.
   Overrides only the three colour declarations. */
.tab .tab-flag-bg {
  color: var(--sv-muted);
  background: rgba(138, 138, 138, 0.14);
  border-color: rgba(138, 138, 138, 0.4);
}
.tab .label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab .tab-app-icon {
  flex: 0 0 auto;
  color: var(--sv-muted);
  font-size: 12px;
}
.tab .subtitle {
  font-size: 11px;
  color: var(--sv-muted);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Last-activity age (the flag's slot on every non-kanban card). Same muted meta
   styling, but it never shrinks or ellipsizes: a clipped "1h…" would be a *wrong*
   answer to the only question the label exists to answer, so it wins the space over
   the project name, which already ellipsizes. Same deal the History card's clock
   time gets (.history-card .time in styles.css). */
.tab .tab-age {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--sv-muted);
  white-space: nowrap;
}
/* The AI summary clamps to --summary-lines instead of hard-truncating at one.
   -webkit-line-clamp needs the legacy box display, and at 1 line it ellipsizes
   exactly like the white-space:nowrap rule it replaced. `anywhere` keeps an
   unbroken token (a long path) from overflowing the card at narrow widths. */
.tab .subtitle {
  /* A notch larger than the 11px meta text above: the summary is the line you
     actually read to tell two cards apart, not a label. */
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--summary-lines, var(--sv-summary-lines));
  overflow-wrap: anywhere;
}
/* Top-row right slot: the last-activity age and the action buttons share one spot.
   The age shows at rest; on hover it yields to the buttons (reveal / close). :has()
   guards the swap so a button-less card (e.g. a host-less idle remote session) keeps
   the age visible on hover instead of going blank. The kanban pill deliberately does
   NOT live here — it leads the title row instead, so it survives the hover swap. */
.tab .tab-row-actions {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab .tab-icon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--sv-muted);
  font-size: 12px;
}
.tab .tab-icon .codicon { font-size: 12px; }
.tab:hover .tab-icon { display: inline-flex; }
.tab:hover .tab-row-actions:has(.tab-icon) .tab-age { display: none; }
.tab .tab-icon:hover { background: var(--sv-bg-active); color: #fff; }
.tab .close:hover { background: #4a3a3a; color: #fff; }
/* Host-less remote session: no local window to focus, so show the default cursor
   instead of the focusable-card pointer. Only the affordance changes — the text
   reads at full strength, same as every other card (a host-less card is where a
   remote session shows up, not a lesser one). */
.tab.is-hostless { cursor: default; }
.tab.is-hostless:hover { background: var(--sv-bg); }

/* Empty-state text (no sessions / no matches). */
.empty {
  margin: 4px 4px 8px 14px;
  font-size: 11px;
  color: #555;
  font-style: italic;
}

/* Narrow host surface — in practice the Windows sidebar at the low end of its
   180–640 width setting (see the matching block in styles.css). It lives here
   rather than there because these are card rules, and a hub viewer narrow enough to
   match wants the same degrade; a phone is ~390px, so the hub normally never sees it.
   Only spacing and the top row's line-breaking change — nothing is hidden. */
@media (max-width: 239px) {
  .agents-half { padding: 6px 4px 12px; }
  .agents-half-running .status-section,
  .agents-half-quiet .status-section { padding: 0 4px 8px; }
  .tab { padding: 6px 8px; }
  /* Let the age wrap to its own line instead of squeezing the headline down to a
     few characters. It keeps both facts intact and readable, which neither
     alternative does: the age must not ellipsize (a clipped "1h…" answers the
     staleness question *wrongly*), and the headline is how you tell two cards
     apart. The cost is a line of card height at this width only. */
  .tab .tab-row-top { flex-wrap: wrap; }
  .tab .tab-row-actions { margin-left: auto; }
}

/* Touch devices have no hover, so the action buttons (close / reveal) would
   never appear. Reveal them at rest there. Unlike desktop, we keep the age visible
   alongside them: it's a per-card fact, not a control, so the buttons and the age
   simply coexist in the flex slot (gap-separated, no overlap). Desktop
   (hover-capable) is unaffected, so the shell's hover-to-reveal-swap behavior is
   unchanged. The kanban pill needs nothing here — it left this slot for the title
   row, which is never swapped, so the phone status page shows it at rest too. */
@media (hover: none), (pointer: coarse) {
  .tab .tab-icon { display: inline-flex !important; }
}