.agent-debug {
  min-height: 100vh;
}

.agent-debug__scroll {
  height: 100vh;
}

.agent-debug__body {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding-top: 28rpx;
  padding-bottom: 60rpx;
}

.agent-debug__header,
.agent-debug__panel-head,
.agent-debug__status-row,
.agent-debug-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
}

.agent-debug__title {
  display: block;
  color: #111827;
  font-size: 40rpx;
  font-weight: 700;
}

.agent-debug__subtitle {
  display: block;
  margin-top: 8rpx;
  color: #64748b;
  font-size: 24rpx;
}

.agent-debug__panel {
  display: flex;
  flex-direction: column;
  gap: 22rpx;
  padding: 28rpx;
  border-radius: 20rpx;
  background: #ffffff;
  border: 1rpx solid #d7e2f1;
  box-shadow: 0 8rpx 18rpx rgba(18, 62, 124, 0.04);
}

.agent-debug__panel-title {
  color: #111827;
  font-size: 30rpx;
  font-weight: 700;
}

.agent-debug__label,
.agent-debug__field-label {
  color: #64748b;
  font-size: 24rpx;
  font-weight: 600;
}

.agent-debug__muted {
  flex: 1;
  min-width: 0;
  color: #334155;
  font-size: 24rpx;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-debug__status {
  max-width: 430rpx;
  padding: 8rpx 18rpx;
  border-radius: 9999rpx;
  background: #f1f5f9;
  color: #64748b;
  font-size: 22rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-debug__status.is-ready {
  background: #ecfdf5;
  color: #047857;
}

.agent-debug__health-badge.is-ready {
  background: #ecfdf5;
  color: #047857;
}

.agent-debug__health-badge.is-watch {
  background: #fff7ed;
  color: #c2410c;
}

.agent-debug__health-badge.is-blocked {
  background: #fef2f2;
  color: #dc2626;
}

.agent-debug__selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76rpx;
  padding: 0 22rpx;
  border: 2rpx solid #e2e8f0;
  border-radius: 16rpx;
  background: #f8fafc;
  color: #111827;
  font-size: 26rpx;
}

.agent-debug__selector Text:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-debug__selector-arrow {
  margin-left: 16rpx;
  color: #94a3b8;
  font-size: 32rpx;
}

.agent-debug__inline-fields {
  display: flex;
  gap: 18rpx;
}

.agent-debug__field {
  flex: 1;
  min-width: 0;
}

.agent-debug__field--small {
  flex: 0 0 190rpx;
}

.agent-debug__field-label {
  display: block;
  margin-bottom: 10rpx;
}

.agent-debug__input {
  height: 76rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e2e8f0;
  border-radius: 16rpx;
  background: #f8fafc;
  color: #111827;
  font-size: 26rpx;
}

.agent-debug__textarea {
  width: 100%;
  min-height: 360rpx;
  box-sizing: border-box;
  padding: 20rpx;
  border: 2rpx solid #e2e8f0;
  border-radius: 16rpx;
  background: #f8fafc;
  color: #111827;
  font-size: 24rpx;
  line-height: 1.55;
}

.agent-debug__switch-line {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #64748b;
  font-size: 24rpx;
}

.agent-debug__primary-button,
.agent-debug__secondary-button,
.agent-debug__danger-button,
.agent-debug__ghost-button,
.agent-debug__mini-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76rpx;
  margin: 0;
  border: none;
  border-radius: 16rpx;
  font-size: 26rpx;
  font-weight: 700;
  line-height: 76rpx;
}

.agent-debug__primary-button {
  background: #123e7c;
  color: #ffffff;
}

.agent-debug__secondary-button {
  background: #f1f5f9;
  color: #334155;
}

.agent-debug__danger-button {
  background: #fff7ed;
  color: #c2410c;
}

.agent-debug__ghost-button {
  width: 132rpx;
  flex-shrink: 0;
  background: #edf5ff;
  color: #123e7c;
}

.agent-debug__mini-button {
  width: 132rpx;
  height: 56rpx;
  background: #edf5ff;
  color: #123e7c;
  font-size: 22rpx;
  line-height: 56rpx;
}

.agent-debug__mini-button.is-muted {
  background: #f1f5f9;
  color: #475569;
}

.agent-debug__metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.agent-debug-metric {
  min-height: 104rpx;
  padding: 18rpx 14rpx;
  border-radius: 16rpx;
  background: #f8fafc;
  border: 1rpx solid #e2e8f0;
}

.agent-debug-metric__value {
  display: block;
  color: #0f172a;
  font-size: 34rpx;
  font-weight: 700;
}

.agent-debug-metric__label {
  display: block;
  margin-top: 4rpx;
  color: #64748b;
  font-size: 20rpx;
}

.agent-debug-result {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  padding-top: 8rpx;
}

.agent-debug-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-debug-result__title {
  color: #111827;
  font-size: 26rpx;
  font-weight: 700;
}

.agent-debug-result__count {
  min-width: 40rpx;
  padding: 4rpx 12rpx;
  border-radius: 9999rpx;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 20rpx;
  text-align: center;
}

.agent-debug-result__empty {
  padding: 20rpx 0;
  color: #94a3b8;
  font-size: 24rpx;
}

.agent-debug-row {
  padding: 20rpx;
  border: 1rpx solid #e5e7eb;
  border-radius: 16rpx;
  background: #ffffff;
}

.agent-debug-row__title {
  flex: 1;
  min-width: 0;
  color: #111827;
  font-size: 24rpx;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-debug-row__tag {
  max-width: 180rpx;
  padding: 4rpx 12rpx;
  border-radius: 9999rpx;
  background: #f1f5f9;
  color: #475569;
  font-size: 20rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-debug-row__body,
.agent-debug__code {
  display: block;
  margin-top: 10rpx;
  color: #475569;
  font-size: 22rpx;
  line-height: 1.55;
  word-break: break-all;
  white-space: pre-wrap;
}

.agent-debug-row__actions {
  display: flex;
  gap: 12rpx;
  margin-top: 14rpx;
}

.agent-debug__code {
  max-height: 520rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background: #0f172a;
  color: #edf5ff;
  overflow: hidden;
}

.agent-debug__compact-result {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.agent-debug__health-line {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.agent-debug__health-badge {
  flex-shrink: 0;
  min-width: 118rpx;
  padding: 8rpx 14rpx;
  border-radius: 9999rpx;
  background: #f1f5f9;
  color: #475569;
  font-size: 22rpx;
  font-weight: 700;
  text-align: center;
}

.agent-debug__health-badge.is-healthy {
  background: #ecfdf5;
  color: #047857;
}

.agent-debug__health-badge.is-watch {
  background: #fffbeb;
  color: #b45309;
}

.agent-debug__health-badge.is-critical {
  background: #fef2f2;
  color: #b91c1c;
}

.agent-debug__hint {
  flex: 1;
  min-width: 0;
  color: #475569;
  font-size: 23rpx;
  line-height: 1.45;
  word-break: break-word;
}
