/* A spatial view of evidence streams. Kept separate from the document surfaces. */
.agent-field-stage {
  --field-label: #a9abae;
  position: relative;
  isolation: isolate;
  width: min(100%, 1600px);
  height: clamp(530px, 42vw, 590px);
  margin-inline: auto;
  overflow: hidden;
  contain: layout paint;
}
.agent-field-stage:not(.field-ready) {
  background: url('/agent-field-fallback.svg?v=20260923') center / 100% 100% no-repeat;
}
.field-static-note {
  position: absolute;
  bottom: 24px;
  inset-inline: 24px;
  text-align: center;
  color: var(--field-label);
  font-size: 12px;
}
#agent-field {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
.field-insight {
  position: absolute;
  right: max(7%, 26px);
  bottom: 102px;
  width: 252px;
  pointer-events: none;
  text-align: left;
  padding: 17px 19px 16px;
  background: rgb(17 18 20 / 94%);
  border: 1px solid #3d4145;
  border-radius: 6px;
  box-shadow: 0 18px 56px rgb(0 0 0 / 18%);
}
.field-insight[hidden] { display: none; }
.field-insight-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f6f3ec;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.field-insight-title::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ddd9d2;
}
.field-insight[data-state="attention"] .field-insight-title::before { background: #e54b2a; }
.field-insight-value {
  margin-top: 13px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.055em;
  color: #f6f3ec;
  font-variant-numeric: tabular-nums;
}
.field-insight-value[data-pending="true"] { font-size: 23px; letter-spacing: -.035em; }
.field-insight-label { margin-top: 8px; color: var(--field-label); font-size: 11px; }
.field-insight-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  margin-top: 13px;
  border-top: 1px solid #323639;
  color: var(--field-label);
  font-size: 10px;
  line-height: 1.5;
}
.field-insight-footer strong { color: #e4e1dc; font-weight: 500; }
.field-insight[data-state="attention"] .field-insight-footer strong { color: #ed806b; }
.field-controls {
  position: absolute;
  bottom: 18px;
  left: max(7%, 26px);
  right: max(7%, 26px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.field-clusters { display: inline-flex; align-items: center; gap: 3px; }
.field-clusters button,
#field-pause {
  min-height: 44px;
  padding: 11px 14px;
  font-size: 11px;
  line-height: 1.5;
  color: #a9abae;
  border: 1px solid transparent;
  border-radius: 6px;
}
.field-clusters button[aria-pressed="true"] { color: #f6f3ec; border-color: #3d4145; background: #1c1e20; }
.field-clusters button:hover, #field-pause:hover { color: #f6f3ec; }
#field-pause { display: inline-flex; align-items: center; gap: 8px; min-width: 114px; justify-content: center; }
#field-pause::before { content: ''; width: 6px; height: 8px; border-inline: 2px solid currentColor; }
#field-pause[aria-pressed="true"]::before { height: 0; width: 0; border: 4px solid transparent; border-right: 0; border-left: 6px solid currentColor; }
.field-hint {
  position: absolute;
  left: max(7%, 26px);
  bottom: 100px;
  color: #91969a;
  font-size: 11px;
  pointer-events: none;
}
.field-hint span { display: block; margin-top: 5px; color: #676e72; font-size: 10px; }
.field-fallback { display: none; }
.agent-field-stage:not(.field-ready) .field-clusters,
.agent-field-stage:not(.field-ready) #field-pause { visibility: hidden; }
.agent-field-stage:not(.field-ready) .field-insight:empty { display: none; }
@media (pointer: coarse) {
  .field-hint { display: none; }
}
@media (max-width: 760px) {
  .agent-field-stage { height: 570px; }
  .agent-field-stage:not(.field-ready) { background-size: 600px 225px; background-position: calc(50% - 108px) 10px; }
  .field-insight { right: 28px; bottom: 99px; width: 210px; }
  .field-hint { left: 28px; }
  .field-controls { left: 20px; right: 20px; }
}
@media (max-width: 520px) {
  .agent-field-stage { height: 570px; }
  .field-insight { left: 24px; right: 24px; bottom: 119px; width: auto; padding: 14px 16px; }
  .field-insight-value { margin-top: 8px; font-size: 30px; }
  .field-insight-footer { padding-top: 9px; margin-top: 9px; }
  .field-controls { bottom: 12px; left: 18px; right: 18px; justify-content: center; gap: 2px; }
  .field-clusters { width: 100%; justify-content: center; }
  .field-clusters button { padding-inline: 10px; font-size: 10px; }
  #field-pause { min-height: 44px; }
  .field-hint { display: none; }
}