/* style.css */
body { font-family: sans-serif; margin: 2em; background: #fafafc; font-size: 0.8em }
a { text-decoration: none; }
#form-section { margin-bottom: 1em; }
#holdingsList > div { background: #f4f4ff; margin: 4px 0; padding: .2em; border-radius: 6px; }
.downloadOne { margin-left: 2em; }
#download-options { margin: 1em 0; }
#top-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }

button{
	padding: 0.05em 0.2em;
	font-size:0.95em;
}

/* style.css */
.progress {
  margin: 8px 0;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  height: 20px;
  position:relative;
}
.bar {
  height: 100%;
  width: 0;
  background: #4caf50;
  transition: width 0.2s ease;
}
#progressText {
  position: absolute;
  left: 5px;
  top: 3px;
  height: 100%;
  display: flex;
  align-items: left;
  font-size: 12px;
  color: white;
  white-space: nowrap;
}
.token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f4ff;
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.token-info {
  flex: 1;
}
.token-date {
  min-width: 90px;
  font-size: .85em;
  color: #666;
}

.token-row.downloaded {
  opacity: 0.6;
}
.token-row.downloaded::after {
  content: " ✓";
  color: green;
}

.download-status {
  display: inline-block;
  width: 22px;
  text-align: center;
  margin-left: 6px;
}

/* Progressive, smoother name updates */
.collection-name {
  display: inline-block;
  min-width: 22ch; /* avoids layout jump when switching from address to short name */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .2s ease;
}
.collection-name.resolving { opacity: .6; }
.collection-name.updating { opacity: .4; }
.icon-button {
  background: none;
  border: none;
  cursor: pointer;
}