/* ===========================================
   Control plane: agent sessions (M1-05)
   The Work/Session view, the agent page's Sessions tab, and the session rows
   on Overview and Home. Rendered inside today's layout with the tokens from
   base/variables.css and the agent page's own classes (control_plane.css).
   =========================================== */

/* Work/Session view */

.session-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.page-header.session-page__header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin-bottom: 0;
}

.session-page__title {
  overflow-wrap: anywhere;
}

.session-page__reference {
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  margin-right: var(--spacing-xs);
}

.session-page__subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.session-page__agent {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.session-page__agent:hover,
.session-page__agent:focus-visible {
  text-decoration: underline;
}

.session-page__reason {
  color: var(--color-text);
}

.session-page__request {
  max-width: 72ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.session-page__request summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: var(--font-medium);
}

/* Issue text is untrusted: shown as text, wrapping, never as markup. */
.session-page__untrusted {
  margin: var(--spacing-sm) 0 0;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The page's flex gap spaces the tabs; their own margin would double it. */
.session-page .tabs {
  margin-bottom: 0;
}

.session-page__aside a,
.session-evidence__proof a {
  color: var(--color-primary);
  text-decoration: underline;
}

.session-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--spacing-lg);
  align-items: start;
}

.session-page__section {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
}

.card.session-page__section:hover,
.card.session-finish:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.card.session-page__section:hover::before,
.card.session-finish:hover::before {
  opacity: 0;
}

/* Finish line */

.session-finish {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.session-finish__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.session-finish__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  min-width: 0;
  font-size: var(--text-sm);
}

.session-finish__dot {
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.3rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-text-subtle);
}

.session-finish__step--done .session-finish__dot {
  background: var(--color-success);
  border-color: var(--color-success);
}

.session-finish__step--not_tracked_yet .session-finish__dot,
.session-finish__step--not_tracked .session-finish__dot,
.session-finish__step--not_required .session-finish__dot {
  border-style: dashed;
}

.session-finish__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.session-finish__name {
  color: var(--color-text-emphasis);
  font-weight: var(--font-semibold);
}

.session-finish__detail {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.session-finish__detail a,
.session-evidence__section a,
.session-aside__sessions a,
.session-aside__delivery a,
.session-page__main .session-callout a:not(.button) {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Timeline */

.session-timeline {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.session-timeline__entry {
  display: grid;
  grid-template-columns: 3.5rem 5.5rem minmax(0, 1fr);
  gap: var(--spacing-sm);
  align-items: baseline;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
}

.session-timeline__entry:last-child {
  border-bottom: 0;
}

.session-timeline__entry time {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.session-timeline__kind {
  justify-self: start;
  padding: 1px var(--spacing-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.session-timeline__kind--prompt,
.session-timeline__kind--question {
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

.session-timeline__kind--action,
.session-timeline__kind--plan {
  color: var(--color-text);
}

/* Body-colour text on a success border: --color-success-700 is below AA on
   the dark card. */
.session-timeline__kind--reply,
.session-timeline__kind--response {
  border-color: var(--color-success);
  color: var(--color-text);
}

.session-timeline__text {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* What the session waits for, and what is not yet a control. */
.session-callout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.session-callout p {
  margin: 0;
}

.session-callout--working {
  border-left-color: var(--color-primary);
}

.session-callout--needs_input {
  border-left-color: var(--color-warning);
}

.session-callout--failed {
  border-left-color: var(--color-error);
}

.session-callout--done {
  border-left-color: var(--color-success);
}

.session-callout__note {
  color: var(--color-text-muted);
}

/* Evidence */

.session-evidence__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-subtle);
}

.session-evidence__heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-emphasis);
}

.session-evidence__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.session-evidence__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  overflow-wrap: anywhere;
}

.session-evidence__muted {
  color: var(--color-text-muted);
}

.session-page code,
.session-evidence__list code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px var(--spacing-xs);
  overflow-wrap: anywhere;
}

/* Tables: attempts, diagnostics and the Sessions tab */

.session-table__wrap {
  overflow-x: auto;
}

.session-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.session-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.session-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  vertical-align: top;
  overflow-wrap: break-word;
}

.session-table time {
  white-space: nowrap;
}

.session-table td a {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.session-table td a:hover,
.session-table td a:focus-visible {
  text-decoration: underline;
}

/* Attempts: one block per attempt, so the facts fit beside the aside. */
.session-attempts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.session-attempts__attempt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-subtle);
}

.session-attempts__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-emphasis);
}

/* Diagnostics: one block of full ids per attempt. */
.session-diagnostics__attempt {
  margin: 0 0 var(--spacing-md);
}

.session-diagnostics__attempt:last-child {
  margin-bottom: 0;
}

.session-diagnostics__title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-emphasis);
}

.session-diagnostics__ids dd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.session-table__reason {
  display: block;
  margin-top: var(--spacing-xs);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.session-diagnostics summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.session-diagnostics[open] summary {
  margin-bottom: var(--spacing-sm);
}

/* Aside */

.session-aside__heading {
  margin-top: var(--spacing-sm);
}

.session-aside__delivery {
  display: block;
  font-size: var(--text-sm);
}

.session-aside__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.session-aside__sessions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--text-sm);
}

.session-aside__controls dd {
  color: var(--color-text-muted);
}

.session-aside__note {
  font-size: var(--text-xs);
}

/* Sessions tab filters */

.session-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Session rows on Overview and Home */

.session-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A state badge, then the session's name with its note beneath, then (for
   a live row) its Open action. */
.session-rows__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  column-gap: var(--spacing-sm);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-text);
  min-width: 0;
}

.session-rows__row > .badge {
  justify-self: start;
}

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

.session-rows--compact .session-rows__row {
  grid-template-columns: minmax(0, 1fr);
}

.session-rows__name {
  color: var(--color-primary);
  font-weight: var(--font-medium);
  overflow-wrap: anywhere;
}

.session-rows__name:hover,
.session-rows__name:focus-visible {
  text-decoration: underline;
}

.session-rows__meta,
.session-rows__row--hidden,
.session-rows__row--more {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* The live sessions a capped list left out: links to the Sessions tab. */
.session-rows__row--more {
  display: block;
}

.session-rows__action {
  align-self: center;
}

/* Home's visible label over a card's live sessions. */
.session-rows__label {
  margin: 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

@media (max-width: 1024px) {
  .session-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-finish__steps {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
}

@media (max-width: 640px) {
  .session-page__section,
  .session-finish {
    padding: var(--spacing-lg);
  }

  .session-finish__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
  }

  .session-timeline__entry {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .session-timeline__text {
    grid-column: 1 / -1;
  }

  /* Tables become one block per row, each cell labelled from data-label. */
  .session-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .session-table tr {
    display: block;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .session-table td {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    justify-items: start;
    gap: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: 0;
  }

  .session-table td > * {
    grid-column: 2;
  }

  .session-table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
  }
}

/* Session states, attempt ends and check results on the shared badge: body-
   colour text keeps AA contrast in both themes (the shared variants' text
   does not), and a dot in the variant's colour keeps colour from being the
   only signal. Other pages keep the shared badge as it is. */
.badge.session-state {
  color: var(--color-text);
}

.badge.session-state::before {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-text-subtle);
}

.badge--primary.session-state::before {
  background: var(--color-primary);
}

.badge--success.session-state::before {
  background: var(--color-success);
}

.badge--error.session-state::before {
  background: var(--color-error);
}

.badge--warning.session-state::before {
  background: var(--color-warning);
}
.session-question__form {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.session-question__form select,
.session-question__form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.session-question__form input[type="submit"] {
  justify-self: start;
}