/* OAS2/UIQ T2-R2: the Agents rail — persistent desktop pane.
   Open: full pane with search/list. Closed: the topbar action reopens it.
   The pane stays mounted so back-state and scroll survive round-trips;
   visibility of the dock REGION itself is owned by
   multi-dock.js updateShell (rail.hidden = !open && !AgentsRail.isOpen()).
   OAS6 live round: the pane composes the full-height app frame with the
   top nav through the shared dock grid track,
   the shared token palette keeps the two surfaces one visual frame, the
   left-edge separator drag-resizes the pane (300–520, persisted), and
   every surface color is a theme token so light/dark read by construction. */
.agents-rail {
  --agents-rail-collapsed-width: 3.5rem;
  --ui-panel: var(--ui-glass);
  --ui-line: var(--ui-glass-line);
  --ui-line-soft: var(--ui-glass-line-soft);
  position: fixed;
  top: var(--agent-dock-top, 56px);
  right: 0;
  bottom: 0;
  z-index: 40;
  width: var(--agents-rail-collapsed-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-left: 1px solid var(--ui-line);
  background-color: var(--ui-raised);
  background-image: linear-gradient(
    color-mix(in srgb, var(--ui-bg) 20%, var(--ui-panel)),
    color-mix(in srgb, var(--ui-bg) 20%, var(--ui-panel))
  );
  box-shadow: -1rem 0 2.5rem rgb(0 0 0 / 0.12);
  backdrop-filter: blur(18px);
  transition: width 160ms ease;
}

/* The open pane's geometry is supplied by multi-dock-push.css: it is the
   same body-grid track as a docked Conversation, never a fixed overlay. */
.agents-rail.is-open {
  width: var(--agent-pane-width, 480px);
}

.agents-rail-expanded-content {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.agents-rail-expanded-content[hidden],
.agents-rail-strip[hidden] {
  display: none;
}

.agents-rail.is-open .agents-rail-head {
  min-height: var(--agent-dock-top, 56px);
  box-sizing: border-box;
  align-items: center;
  border-bottom: 1px solid var(--ui-line-soft);
  margin: 0;
}

/* Match Files' split-pane divider: a forgiving transparent hit area with
   one quiet 2px accent line on interaction. The rail is right-docked, so
   its LEFT edge is the drag boundary. */
.agents-rail-resize {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: -13px;
  width: 26px;
  border: 0;
  padding: 0;
  cursor: ew-resize;
  touch-action: none;
  background: transparent;
}

.agents-rail-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 2px;
  background: transparent;
  transition: background var(--speed, 140ms) ease;
}

.agents-rail-resize:hover::after,
.agents-rail-resize:focus-visible::after,
.agents-rail-resize.is-dragging::after {
  background: var(--ui-accent, #4da3ff);
}

.agents-rail-resize:focus-visible {
  outline: none;
}

.agents-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: 0.65rem var(--ui-space-4);
  background: transparent;
}

.agents-rail-title {
  margin: 0;
  font: 700 var(--text-lg)/1.2 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--ui-text);
}

.agents-rail-heading {
  min-width: 0;
}

.agents-rail-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.agents-rail-actions .button {
  min-height: 2rem;
  border-color: transparent;
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

.agents-rail-close {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.agents-rail-actions .button:hover,
.agents-rail-actions .button:focus-visible {
  border-color: var(--ui-line);
  background: var(--ui-panel-hover, var(--ui-hover));
}

.agents-rail-search {
  position: relative;
  /* Item 2 (operator polish): breathing room above so the bar never
     touches the header rule — matches the pane's vertical rhythm
     (the same --ui-space token the tags row uses below). */
  margin: var(--ui-space-3) var(--ui-space-4) var(--ui-space-3);
}

.agents-rail-search input {
  width: 100%;
  min-height: 2.55rem;
  padding: 0.65rem 2rem 0.65rem 0.8rem;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--ui-bg) 72%, transparent);
  color: var(--ui-text);
  font: 500 var(--text-base)/1.2 var(--font-ui);
  transition: border-color var(--speed, 140ms) ease;
}

.agents-rail-search input:focus,
.agents-rail-search input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
}

.agents-rail-search .agents-rail-search-clear {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  min-width: 1.6rem;
  min-height: 1.6rem;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--ui-text-soft);
  cursor: pointer;
}

.agents-rail-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ui-space-1) var(--ui-space-3) var(--ui-space-4);
}

.agents-rail-list[hidden] {
  display: none;
}

.agents-rail-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 3.65rem;
  padding: var(--ui-space-3);
  border: 1px solid transparent;
  border-radius: 12px;
  /* The token background keeps computed contrast measurable; the opaque
     ui-bg paint layer makes the resting tile visually disappear into the
     rail. Hover/focus replaces both layers with the Dock hover token. */
  background-color: var(--ui-raised);
  background-image: linear-gradient(var(--ui-bg), var(--ui-bg));
  color: var(--ui-text-soft);
  font: 500 var(--text-sm)/1.25 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background var(--speed, 140ms) ease,
    border-color var(--speed, 140ms) ease,
    color var(--speed, 140ms) ease;
}

.agents-rail-row:hover:not([disabled]),
.agents-rail-row:focus-visible {
  border-color: var(--ui-line);
  background: var(--ui-panel-hover, var(--ui-hover));
  color: var(--ui-text);
}

.agents-rail-row:focus-visible {
  outline: 2px solid var(--ui-accent, #4da3ff);
  outline-offset: -2px;
}

.agents-rail-row[disabled] {
  cursor: default;
  opacity: 0.65;
}

.agents-rail-row-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.agents-rail-row-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: hsl(var(--project-hue, 190) 65% 55% / 0.14);
  color: hsl(var(--project-hue, 190) 65% 62%);
}

html[data-theme="light"] .agents-rail-row-icon {
  background: hsl(var(--project-hue, 190) 55% 42% / 0.12);
  color: hsl(var(--project-hue, 190) 60% 36%);
}

.agents-rail-row-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.agents-rail-row > .status-chip {
  display: grid;
  min-width: 1.45rem;
  min-height: 0.85rem;
  place-items: center;
  padding: 0;
}

.agents-rail-row-name {
  overflow: hidden;
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents-rail-row-sub {
  overflow: hidden;
  /* Small text needs the stronger token: --ui-muted misses AA contrast
     on the panel background in light theme (measured 4.3:1). */
  color: var(--ui-text-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents-rail-empty {
  margin: 0;
  padding: 0.75rem 0.5rem;
  color: var(--ui-text-soft);
  font: 500 var(--text-sm)/1.4 var(--font-ui);
}

.agents-rail-loading, .agents-rail-error {
  margin: 0;
  padding: 0.75rem 0.5rem;
  color: var(--ui-text-soft);
  font: 500 var(--text-sm)/1.4 var(--font-ui);
}
/* 2026-09-05: the rail's skeleton rows sit on the same rhythm as the real
   session rows they stand in for (shared shapes, design-system/loading.css). */
.agents-rail-loading .cc-skel-list { gap: 10px; }
.agents-rail-loading .cc-skel-row { min-height: 30px; }
.agents-rail-error { color: var(--ui-warning, #a15c12); }
.agents-rail-retry { margin: 0 0.5rem 0.75rem; }

/* R5.1: collapsed is its own icon-only subtree. Expanded titles, briefing
   copy, search and list content cannot enter this strip because they are
   siblings inside the hidden expanded wrapper, not clipped descendants. */
.agents-rail-strip {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-2);
  overflow: hidden;
  background: color-mix(in srgb, var(--ui-raised) 92%, var(--ui-accent) 8%);
}

.agents-rail-strip-list {
  display: flex;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-2);
  overflow: hidden auto;
  scrollbar-width: none;
}

.agents-rail-strip-list::-webkit-scrollbar {
  display: none;
}

.agents-rail-strip-button {
  display: grid;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  flex: 0 0 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--ui-text-soft);
  cursor: pointer;
}

.agents-rail-strip-button:hover,
.agents-rail-strip-button:focus-visible {
  border-color: var(--ui-line);
  background: var(--ui-panel-hover, var(--ui-hover));
  color: var(--ui-text);
}

.agents-rail-strip-button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}

.agents-rail-strip-button > .ui-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.agents-rail-strip-expand {
  border-color: var(--ui-line-soft);
  background: var(--ui-panel);
  color: var(--ui-accent);
}

.agents-rail-strip-agent-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.6rem;
  background: hsl(var(--project-hue, 190) 65% 55% / 0.14);
  color: hsl(var(--project-hue, 190) 65% 62%);
}

.agents-rail-strip-agent-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

html[data-theme="light"] .agents-rail-strip-agent-icon {
  background: hsl(var(--project-hue, 190) 55% 42% / 0.12);
  color: hsl(var(--project-hue, 190) 65% 28%);
}

.agents-rail.is-yielded {
  display: none;
}

@media (max-width: 820px) {
  /* Phone keeps the Agents sheet grammar (topbar-toggles.js); the desktop
     rail pane is hidden from the phone layout entirely (the sheet owns
     Agents there). */
  .agents-rail {
    display: none !important;
  }
}

/* OAS2: ‹ Agents back-state — while the rail is focused, the Conversation
   columns yield the region to the list; selecting a row re-opens the
   column in that slot (multi-dock replaceTarget contract). Desktop only. */
@media (min-width: 821px) {
  /* While the region is rail-focused the list is the surface: the pane
     shows even though columns remain mounted. The columns are never
     hidden — updateShell() narrows the region so the pane takes real
     space and every column keeps its box and iframe state (hiding a
     column resets its preserved transcript scroll). */
  body.rail-focus .agents-rail {
    display: flex;
  }

  /* R6.3 made the list and Conversation region share one width variable.
     A yielded list therefore carries the multi-column region's old width
     until updateShell() swaps in the single-pane preference. On the
     standalone workspace that swap must be atomic: otherwise the newly
     revealed list briefly tweens across the mounted Conversation columns. */
  body.multi-agent-workspace.rail-focus .agents-rail {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agents-rail {
    transition: none;
  }
}

/* OAS3: management folding — tag bar, row actions, archive section. */
.agents-rail-tags { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); margin: 0 var(--ui-space-4) var(--ui-space-3); }
.agents-rail-tags[hidden] { display: none; }
.agents-rail-tag { min-height: 1.6rem; padding: 0.15rem 0.5rem; border: 1px solid var(--ui-line); border-radius: 999px; background: transparent; color: var(--ui-text-soft); font: 600 var(--text-xs)/1.2 var(--font-ui); cursor: pointer; }
.agents-rail-tag.is-active { border-color: var(--ui-accent, #4da3ff); color: var(--ui-accent, #4da3ff); background: color-mix(in srgb, var(--ui-accent, #4da3ff) 12%, transparent); }
/* D1 (rail fix-back): the action cluster gets an OPAQUE background (the
   row hover color) plus a leading gradient fade so long titles visually
   end before the buttons begin — never translucent glyphs-on-glyphs. */
.agents-rail-row-actions {
  position: absolute; top: 50%; right: var(--ui-space-3);
  display: flex; gap: var(--ui-space-1);
  pointer-events: none; opacity: 0; transform: translateY(-50%);
  transition: opacity var(--speed, 140ms) ease;
  padding: 0.15rem 0.15rem 0.15rem 1.2rem;
  background:
    linear-gradient(to right,
      transparent 0%,
      var(--ui-panel-raised, var(--ui-raised, var(--ui-panel, #141821))) 45%,
      var(--ui-panel-raised, var(--ui-raised, var(--ui-panel, #141821))) 100%);
  border-radius: 8px;
}
.agents-rail-row:hover .agents-rail-row-actions,
.agents-rail-row:focus-within .agents-rail-row-actions { pointer-events: auto; opacity: 1; }
.agents-rail-row:hover > .status-chip,
.agents-rail-row:focus-within > .status-chip { visibility: hidden; }
.agents-rail-row-actions .button { min-height: 1.75rem; padding: 0.1rem 0.5rem; border-color: var(--ui-line-soft); border-radius: 8px; font-family: var(--font-ui); font-size: var(--text-xs); }
.agents-rail-head[hidden] { display: none; }
.agents-rail-archive { flex: 0 0 auto; padding: 0 var(--ui-space-4) var(--ui-space-3); }
.agents-rail-archive.is-open { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; padding: 0; overflow: hidden; }
.agents-rail-archive-toggle { align-self: flex-start; min-height: 1.7rem; padding: 0.2rem 0.6rem; border: 1px solid var(--ui-line); border-radius: 999px; background: transparent; color: var(--ui-text-soft); font: 600 var(--text-xs)/1.2 var(--font-ui); cursor: pointer; }
.agents-rail-archive-toggle:hover,
.agents-rail-archive-toggle:focus-visible { border-color: var(--ui-accent, #4da3ff); background: color-mix(in srgb, var(--ui-accent, #4da3ff) 10%, transparent); color: var(--ui-text); }
.agents-rail-archive-head { display: grid; min-height: var(--agent-dock-top, 56px); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-3); box-sizing: border-box; padding: 0.65rem var(--ui-space-4); border-bottom: 1px solid var(--ui-line-soft); }
.agents-rail-archive-title { margin: 0; color: var(--ui-text); font: 700 var(--text-lg)/1.2 var(--font-ui); letter-spacing: -0.01em; }
.agents-rail-archive-back { border-color: transparent; border-radius: 9px; }
.agents-rail-archive-close { min-height: 2rem; border-color: transparent; border-radius: 9px; }
.agents-rail-archive-head .button:hover,
.agents-rail-archive-head .button:focus-visible { border-color: var(--ui-line); background: var(--ui-panel-hover, var(--ui-hover)); }
.agents-rail-archive-list { display: grid; min-height: 0; flex: 1 1 auto; align-content: start; gap: 0.15rem; margin: 0; padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-4); overflow-y: auto; }
.agents-rail-archive-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.agents-rail-archive-open { flex: 1; min-width: 0; overflow: hidden; border: 1px solid transparent; background: transparent; color: var(--ui-text-soft); font: 500 var(--text-sm)/1.3 var(--font-ui); text-align: left; text-overflow: ellipsis; white-space: nowrap; padding: var(--ui-space-2) var(--ui-space-3); border-radius: 10px; cursor: pointer; }
.agents-rail-archive-open:hover:not([disabled]) { border-color: var(--ui-line); background: var(--ui-panel-hover, var(--ui-hover)); }
.agents-rail-archive-open[disabled] { cursor: default; opacity: 0.6; }
.agents-rail-archive-unarchive.button { min-height: 1.75rem; padding: 0.15rem 0.5rem; border-color: transparent; border-radius: 8px; color: var(--ui-text-soft); font: 600 var(--text-xs)/1.2 var(--font-ui); }
.agents-rail-archive-unarchive.button:hover,
.agents-rail-archive-unarchive.button:focus-visible { border-color: var(--ui-line); background: var(--ui-panel-hover, var(--ui-hover)); color: var(--ui-text); }

/* T2 (agents rail quality): Active/Archived tabs — one list, a toggle. */
/* Item 3 (operator polish): the Active/Archived tabs reuse the TOP NAV
   tab grammar (.tab-link in shell.css) — same selected background
   (--ui-accent-soft), same border/radius/weight tokens — so tabs read
   as tabs everywhere in the product. Pill buttons on the shared rail
   surface, no underline-only affordance. */
.agents-rail-tabs {
  display: flex;
  gap: var(--ui-space-2, 0.5rem);
  margin: 0 var(--ui-space-4) var(--ui-space-3);
}

.agents-rail-tab {
  flex: 1 1 0;
  min-height: 2.2rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.42rem;
  background: transparent;
  color: var(--ui-text-soft);
  font: 600 0.78rem/1.2 var(--font-ui, system-ui), sans-serif;
  text-align: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease,
    border-color 140ms ease;
}

.agents-rail-tab:hover {
  border-color: transparent;
  background: var(--ui-hover);
  color: var(--ui-text);
}

.agents-rail-tab:focus-visible {
  outline: 2px solid var(--ui-accent, #4da3ff);
  outline-offset: 2px;
}

/* Operator round (2026-09-05): Active/Archived now uses the exact same
   selection values as the Files and Connections tab rows — this pair was
   already the closest to the new treatment, so it moves onto the shared
   variables (design-system/tabs.css) rather than keeping its own near-miss. */
.agents-rail-tab[aria-selected="true"] {
  border-color: var(--cc-tab-line-selected);
  background: var(--cc-tab-bg-selected);
  color: var(--cc-tab-ink-selected);
}

/* T3: quiet relative timestamps in the row grammar. */
.agents-rail-row-meta {
  display: block;
  color: var(--ui-text-muted, var(--ui-muted, #8b93a7));
  font: 500 0.68rem/1.3 var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* T4: tag chips on rows — quiet, small, after the meta line. */
.agents-rail-row-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.15rem;
}

.agents-rail-row-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--ui-line-soft, var(--ui-line, #2a2f3a));
  border-radius: 999px;
  background: transparent;
  color: var(--ui-text-muted, var(--ui-muted, #8b93a7));
  font: 600 0.62rem/1.2 var(--font-ui, system-ui), sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.agents-rail-row-tag-chip:hover {
  color: var(--ui-text-soft, #c3c9d6);
  border-color: var(--ui-accent, #4da3ff);
}

/* T4 (agents rail quality): tag chips in the open agent pane header + the
   Edit-tags menu item shares the existing overflow menu styles. */
.agent-session-column__tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.4rem;
}

.agent-session-column__tag-chips[hidden] {
  display: none;
}

.agent-session-column__tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--ui-line-soft, var(--ui-line, #2a2f3a));
  border-radius: 999px;
  color: var(--ui-text-muted, var(--ui-muted, #8b93a7));
  font: 600 0.65rem/1.2 var(--font-ui, system-ui), sans-serif;
  white-space: nowrap;
}

/* Full-screen agent view: same tag-chip grammar as the dock column header. */
.standalone-session-tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.4rem;
}
.standalone-session-tag-chips[hidden] { display: none; }

/* Operator round (2026-09-07): a URL naming a session that no longer exists
   falls back to this list, and says why. Warning-toned rather than danger:
   nothing failed, the agent is simply gone. */
.agents-rail-missing-note {
  margin: 0 var(--ui-space-4) var(--ui-space-3);
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ui-warning-line);
  border-radius: 0.5rem;
  background: var(--ui-warning-soft);
  color: var(--ui-text);
  font: 500 0.78rem/1.35 var(--font-ui, system-ui), sans-serif;
}