/* Investigate workspace: intentionally scoped so legacy routes retain their layout. */
.investigate-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.investigate-tab-panel > .section:first-child { margin-top: 0; }

.investigate-shell__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
}

.investigate-shell__intro {
  max-width: 48rem;
  margin: 0.45rem 0 0;
  color: var(--ink-dim);
}

/* Dynamic Responses' four filters (ticket 980): one select each, in a row that wraps. */
.dynamic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}

.dynamic-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font: var(--type-footnote);
  color: var(--ink-dim);
}

/* The AI agents table's goal cell wraps instead of running past the right edge. */
.ai-agents-table td.ai-agents-goal {
  white-space: normal;
  min-width: 14rem;
  max-width: 26rem;
}

.investigate-workbench {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(24rem, 1.4fr);
  gap: 1rem;
  align-items: start;
}

.investigate-session-list-panel,
.investigate-session-detail {
  min-width: 0;
}

.investigate-session-list-panel {
  margin: 0;
}

.investigate-session-list-panel > .section__head {
  align-items: flex-start;
}

.investigate-session-list-panel .section__hint {
  display: block;
  margin: 0;
}

/* The list scrolls with the page (ticket 933): no inner scroll box, at any width. */
.investigate-session-list {
  display: grid;
  gap: 0.5rem;
}

.investigate-session-row {
  display: grid;
  gap: 0.45rem;
  /* An arrow key's focus move scrolls the row into view clear of the sticky navbar. */
  scroll-margin-top: calc(var(--navbar-h) + 1rem);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--panel);
  cursor: pointer;
}

.investigate-session-row:hover,
.investigate-session-row:focus-visible,
.investigate-session-row.is-selected {
  border-color: var(--border-gold);
  outline: none;
}

.investigate-session-row.is-selected {
  background: rgba(227, 179, 65, 0.08);
  box-shadow: inset 3px 0 var(--gold);
}

.investigate-session-row__head,
.investigate-session-row__meta,
.investigate-detail-facts,
.investigate-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}

.investigate-session-row__head {
  justify-content: space-between;
}

.investigate-session-row__explanation,
.investigate-detail-explanation {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.investigate-session-row__meta,
.investigate-detail-facts {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

/* Wide screens (ticket 933): the detail stays in view beside the list while the page scrolls. It is
   the one inner scroll, a reading pane that keeps its own position, and it ends above the bottom edge
   by as much as it starts below the navbar. 820px and narrower undo this (end of file). */
.investigate-session-detail {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-height: 16rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--panel);
  position: sticky;
  top: calc(var(--navbar-h) + 0.75rem);
  max-height: calc(100dvh - var(--navbar-h) - 1.5rem);
  overflow: auto;
}

/* The next session is loading: the one on screen stays, dimmed, with a spinner in its header. */
.investigate-session-detail.is-loading {
  opacity: 0.6;
  transition: opacity var(--dur-base) ease;
}

.investigate-detail-head {
  position: relative;
}

.investigate-detail-head h3 {
  margin: 0.25rem 0 0.35rem;
  font-family: var(--font-mono);
}

.investigate-detail-spinner {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: investigate-detail-spin 0.8s linear infinite;
}

@keyframes investigate-detail-spin {
  to {
    transform: rotate(360deg);
  }
}

.investigate-session-detail .detail-block {
  margin: 0;
}

/* Phone only: the button that takes the list's place above the opened detail. */
.investigate-workbench > .investigate-detail-back {
  display: none;
}

/* The Live feed is a workspace tab, so its controls stay discoverable: the state button, the count
   and the search box are always present; the request filters live in the page's one Filters dialog
   and exports are a deliberate disclosure. Legacy /live retains its established desktop density
   through console.css. */
.investigate-tab-panel .feed-primary-row {
  flex-wrap: wrap;
}

.investigate-tab-panel .feed-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.investigate-tab-panel .feed-primary-row input {
  min-width: min(22rem, 100%);
  flex: 1 1 16rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--panel-deep);
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  padding: 0.42rem 0.65rem;
}

.investigate-tab-panel .feed-export-menu {
  position: relative;
  display: inline-flex;
}

.investigate-tab-panel .feed-export-menu__panel {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.35rem);
  right: 0;
  display: grid;
  gap: 0.3rem;
  min-width: 10rem;
  padding: 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.6rem;
  background: var(--panel-deep);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.investigate-tab-panel .feed-export-menu__panel[hidden] {
  display: none;
}

/* "Show more" and "Load more" sit under the table, one above the other (ticket 979). */
.investigate-tab-panel .feed-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.investigate-tab-panel .feed-pagination .show-more-row {
  margin-top: 0;
}

/* A row's one link is its path (ticket 979): it reads as the row's text, not as a blue link. The
   rows past the drawn range are `hidden`; the card list sets its own `display`, which would beat the
   attribute. */
.feed-exchange-link {
  color: inherit;
  text-decoration: none;
}

.feed-exchange-link:hover {
  text-decoration: underline;
}

.feed-exchange-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.feed-card[hidden],
.live-table-scroll tr[hidden] {
  display: none;
}

/* The request filters, appended to the Filters dialog while the Live feed is mounted. */
.capture-settings__requests {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.capture-settings__requests .feed-filters-adv input {
  flex: 1 1 12rem;
  min-width: 0;
}

.capture-settings__requests h3 {
  margin: 0 0 0.6rem;
  font-size: var(--fs-md);
}

.investigate-tab-panel .investigate-load-more[hidden] {
  display: none;
}

/* Capture-origin labels describe provenance only. Keep the badge readable alongside an address
   without borrowing the code face used by the address itself. */
.traffic-origin {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  line-height: 1.2;
  white-space: nowrap;
}

.traffic-origin--simulation {
  color: var(--gold-2);
  border-color: var(--border-gold);
  background: var(--gold-soft);
}

.traffic-origin--local {
  color: var(--ink-dim);
  border-color: var(--border-strong);
  background: var(--glass);
}

/* A private/reserved source is infrastructure, not a remote actor: read as a caution, not a
   threat, so it is visually distinct from both the neutral --local pill and any severity color. */
.traffic-origin--private {
  color: var(--ink-body);
  border-color: var(--border-strong);
  background: rgba(139, 148, 158, 0.16);
}

.traffic-origin--mixed {
  color: var(--ink-body);
  border-color: var(--border-strong);
  background: rgba(88, 166, 255, 0.12);
}

.traffic-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}

.address-value,
.investigate-code,
.detail-code,
.investigate-session-detail .session-row__ip,
.investigate-session-detail code {
  font-family: var(--font-mono);
}

/* Investigation prose uses the interface face. Captured paths, addresses and bytes opt into the
   code face explicitly above or in their existing classes. */
.investigate-shell .body-note,
.investigate-shell .section__hint,
.investigate-shell__intro,
.investigate-session-row__explanation,
.investigate-detail-explanation,
.investigate-detail-summary,
.investigate-detail-summary__lead,
.investigate-detail-summary__facts,
.investigate-detail-actions,
.agent-session-facts,
.detail-panel .detail-section__summary,
.detail-panel .detail-factual-summary,
.detail-panel .detail-factual-summary__lead,
.detail-panel .detail-factual-summary__facts,
.detail-panel .body-note,
.attacker-view .body-note,
.attacker-view__value,
.attacker-view__meta,
.attacker-view__selection {
  font-family: var(--font-ui);
  line-height: 1.5;
}

.investigate-detail-summary {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.65rem;
  background: var(--panel-deep);
}

.investigate-detail-summary h4 {
  margin: 0 0 0.45rem;
  color: var(--gold-2);
  font: var(--type-footnote);
  font-weight: 600;
}

.investigate-detail-summary__lead {
  margin: 0;
  color: var(--ink-body);
}

.investigate-detail-summary__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 0.65rem;
  margin-top: 0.7rem;
}

.investigate-detail-summary__label,
.detail-factual-summary__label {
  color: var(--ink-muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.investigate-detail-summary__facts code,
.detail-factual-summary__facts code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-body);
}

.investigate-detail-summary__when {
  grid-column: 1 / -1;
  color: var(--ink-dim);
  font-size: var(--fs-2xs);
}

.investigate-detail-badges,
.agent-session-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.agent-session-facts {
  color: var(--ink-dim);
  font-size: var(--fs-2xs);
}

.investigate-incomplete-note {
  color: var(--ink-dim);
}

/* The exchange drawer is shared by all routes, but these classes belong to its new factual
   Summary / Request / Response organization. Keep technical disclosures available while making
   the first scan readable. */
.detail-factual-summary {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.65rem;
  background: var(--panel-deep);
}

.detail-factual-summary__lead {
  margin: 0;
  color: var(--ink-body);
}

.detail-factual-summary__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 0.65rem;
}

.detail-factual-summary__facts > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-factual-summary__response {
  color: var(--ink-body);
  font-weight: 600;
}

.detail-section__summary {
  margin: 0 0 0.55rem;
  color: var(--ink-dim);
}

.detail-subsection__title {
  margin: 0.85rem 0 0.4rem;
  color: var(--ink-dim);
  font: var(--type-footnote);
  font-weight: 600;
}

.detail-block--forensic > summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.detail-block--forensic > summary::-webkit-details-marker {
  display: none;
}

.detail-block--forensic > summary::before {
  content: "▸";
  display: inline-block;
  min-width: 0.9rem;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0;
}

.detail-block--forensic[open] > summary::before {
  content: "▾";
}

.attacker-view__selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  color: var(--ink-dim);
}

.attacker-view__selection-label {
  color: var(--ink-body);
}

.attacker-view__selection-time {
  color: var(--ink-muted);
}

.attacker-view__value,
.attacker-view__meta {
  display: block;
  overflow-wrap: anywhere;
}

.attacker-view__value {
  color: var(--ink-body);
}

.attacker-view__meta {
  color: var(--ink-muted);
  font-size: var(--fs-2xs);
}

.attacker-view__overview-link {
  display: inline-block;
  margin-top: 0.5rem;
}

@media (max-width: 820px) {
  /* .investigate-shell__head's own display:grid rule moved to decoys-reports.css, scoped to
     .workspace-head.investigate-shell__head (ticket 007 review finding 2) — decoys-reports.css
     loads after this file, so an equal-specificity rule here always lost to its unconditional
     .workspace-head{display:flex}. */

  .investigate-workbench {
    grid-template-columns: 1fr;
  }

  /* The list is the page. A tapped session replaces it with its detail at full width and a Back
     button (ticket 933); with nothing selected there is no detail to show. */
  .investigate-workbench.is-detail-open .investigate-session-list-panel {
    display: none;
  }

  .investigate-workbench:not(.is-detail-open) .investigate-session-detail {
    display: none;
  }

  .investigate-workbench.is-detail-open > .investigate-detail-back {
    display: inline-flex;
    justify-self: start;
    scroll-margin-top: calc(var(--navbar-h) + 1rem);
  }

  .investigate-session-detail {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .investigate-detail-summary__facts,
  .detail-factual-summary__facts {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .investigate-detail-summary__label,
  .detail-factual-summary__label {
    margin-top: 0.35rem;
  }

  .investigate-detail-summary__when {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .investigate-session-detail {
    padding: 0.85rem;
  }
}