.tools-modal {
  min-width: min(400px, 90vw); /* Responsive minimum width */
  max-width: 600px;
  overflow: hidden; /* Prevent any overflow from the modal container */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mat-sys-outline-variant);
}

.modal-header h2[mat-dialog-title] {
  margin: 0 !important;
  flex: 1;
  color: var(--mat-sys-on-surface) !important;
  font-size: var(--mat-sys-typescale-headline-small-size) !important;
  font-weight: var(--mat-sys-typescale-headline-small-weight) !important;
  line-height: var(--mat-sys-typescale-headline-small-line-height) !important;
  letter-spacing: var(--mat-sys-typescale-headline-small-tracking) !important;
  word-wrap: break-word; /* Handle long agent names */
  overflow-wrap: break-word; /* Modern property for word wrapping */
}

.close-button {
  margin-left: 16px;
  flex-shrink: 0; /* Prevent button from shrinking */
  color: var(--mat-sys-on-surface) !important;
}

.close-button mat-icon {
  color: var(--mat-sys-on-surface) !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
}

.modal-content {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden; /* Explicitly hide horizontal overflow */
  margin-right: -8px; /* Compensate for scrollbar width */
  padding-right: 8px; /* Add padding back */
}

.no-tools {
  text-align: center;
  padding: 40px 24px;
  color: var(--mat-sys-on-surface-variant);
  font-size: var(--mat-sys-typescale-body-large-size);
  font-weight: var(--mat-sys-typescale-body-large-weight);
  line-height: var(--mat-sys-typescale-body-large-line-height);
}

.no-tools-icon {
  font-size: 48px;
  height: 48px;
  width: 48px;
  margin-bottom: 16px;
  color: var(--mat-sys-outline);
  opacity: 0.6;
}

.tools-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%; /* Ensure it doesn't exceed container width */
  box-sizing: border-box; /* Include padding in width calculation */
}

.tool-card {
  border-left: 4px solid var(--mat-sys-primary);
  margin-right: 0; /* Ensure no right margin causing overflow */
  background-color: var(--mat-sys-surface-container-low);
  word-wrap: break-word; /* Handle long content */
  overflow-wrap: break-word; /* Modern property for word wrapping */
}

.tool-name {
  font-size: var(--mat-sys-typescale-title-medium-size) !important;
  font-weight: var(--mat-sys-typescale-title-medium-weight) !important;
  line-height: var(--mat-sys-typescale-title-medium-line-height) !important;
  color: var(--mat-sys-primary) !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tool-description {
  margin: 0;
  color: var(--mat-sys-on-surface-variant);
  font-size: var(--mat-sys-typescale-body-medium-size);
  font-weight: var(--mat-sys-typescale-body-medium-weight);
  line-height: var(--mat-sys-typescale-body-medium-line-height);
  letter-spacing: var(--mat-sys-typescale-body-medium-tracking);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
