/* Todo strip above the composer (figma 772:51905 / 772:52972 / 772:53419):
   tip surface, 14px radius, status icons + secondary item labels. Column is
   calc(100% - 88px) / max 776, centered; InputBar top pad supplies the gap. */

.root {
  flex: none;
  overflow: hidden;
  margin: 0 auto;
  width: calc(100% - 88px);
  max-width: 776px;
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 14px;
  background: var(--dsw-specific-tip);
}

.body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.title {
  flex: none;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
}

.progress {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--dsw-alias-label-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--dsw-alias-label-tertiary);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-alias-label-secondary);
}

.glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
}

.glyphCompleted {
  color: var(--dsw-alias-state-success-primary);
}

.glyphProgress {
  color: var(--dsw-alias-state-business-primary);
  animation: todo-progress-spin 1s linear infinite;
}

.glyphPending {
  color: var(--dsw-alias-label-caption);
}

@keyframes todo-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Figma strip is single-line; long items ellipsize with no inline expand. */
.content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
